GridListItem - horizontal alignment support

demo/src/screens/componentScreens/GridListScreen.tsx

@@ -12,27 +12,38 @@ import {
   GridListItem
 } from 'react-native-ui-lib';
 import products from '../../data/products';
-import {renderBooleanOption} from '../ExampleScreenPresenter';
+import {renderBooleanOption, renderMultipleSegmentOptions} from '../ExampleScreenPresenter';
 
 class GridListScreen extends Component {
   state = {
     orientation: Constants.orientation,
-    useGridListItem: false
+    useGridListItem: true,
+    horizontalAlignment: GridListItem.horizontalAlignment.left,
+    overlayText: false
   };
 
   renderHeader = () => {
     return (
       <View>
-        <Text h1 marginB-s5>
+        <Text h1 marginV-s3>
           GridList
         </Text>
         {renderBooleanOption.call(this, 'UseGridListItem', 'useGridListItem')}
+        <Text h3 marginV-s2>
+          GridListItem props
+        </Text>
+        {renderMultipleSegmentOptions.call(this, 'Horizontal Alignment:', 'horizontalAlignment', [
+          {label: 'left', value: GridListItem.horizontalAlignment.left},
+          {label: 'center', value: GridListItem.horizontalAlignment.center},
+          {label: 'right', value: GridListItem.horizontalAlignment.right}
+        ])}
+        {renderBooleanOption.call(this, 'Use overlay text:', 'overlayText')}
       </View>
     );
   };
 
   renderItem: GridListProps<(typeof products)[0]>['renderItem'] = ({item}) => {
-    const {useGridListItem} = this.state;
+    const {useGridListItem, horizontalAlignment, overlayText} = this.state;
 
     if (useGridListItem) {
       return (
@@ -41,8 +52,10 @@ class GridListScreen extends Component {
           itemSize={{width: '100%', height: 200}}
           imageProps={{source: {uri: item.mediaUrl}}}
           title="Title"
-          subtitle="Subitle"
-          overlayText
+          subtitle="Subtile"
+          alignToStart
+          overlayText={overlayText}
+          horizontalAlignment={horizontalAlignment}
         />
       );
     } else {

src/components/gridListItem/gridListItem.api.json

@@ -40,6 +40,12 @@
       "description": "Custom container styling for inline text"
     },
     {"name": "alignToStart", "type": "boolean", "description": "Should content be align to start", "default": "center"},
+    {
+      "name": "horizontalAlignment",
+      "type": "HorizontalAlignment",
+      "description": "Content horizontal alignment",
+      "default": "center"
+    },
     {"name": "containerStyle", "type": "ViewStyle", "description": "Custom container style"},
     {"name": "onPress", "type": "TouchableOpacityProps['onPress']", "description": "The item's action handler"},
     {

src/components/gridListItem/index.tsx

@@ -1,13 +1,20 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {StyleProp, StyleSheet, ViewStyle} from 'react-native';
+import memoize from 'memoize-one';
 import * as Modifiers from '../../commons/modifiers';
 import {Colors, Spacings, Typography} from 'style';
 import View, {ViewProps} from '../view';
 import TouchableOpacity, {TouchableOpacityProps} from '../touchableOpacity';
 import Text from '../text';
 import Image, {ImageProps} from '../image';
 
+export enum HorizontalAlignment {
+  left = 'left',
+  center = 'center',
+  right = 'right'
+}
+
 export interface GridListItemProps {
   /**
    * Image props object for rendering an image item
@@ -85,6 +92,10 @@ export interface GridListItemProps {
    * Should content be align to start (default is center)
    */
   alignToStart?: boolean;
+  /**
+   * Content horizontal alignment (default is center)
+   */
+  horizontalAlignment?: HorizontalAlignment | `${HorizontalAlignment}`;
   /**
    * Custom container style
    */
@@ -101,7 +112,7 @@ export interface GridListItemProps {
    * Test ID for component
    */
   testID?: string;
-  children?: React.ReactNode;
+  children?: React.ReactElement;
 }
 
 interface RenderContentType {
@@ -120,6 +131,8 @@ interface RenderContentType {
 class GridListItem extends Component<GridListItemProps> {
   static displayName = 'GridListItem';
 
+  static horizontalAlignment = HorizontalAlignment;
+
   static defaultProps = {
     itemSize: 48
   };
@@ -139,14 +152,35 @@ class GridListItem extends Component<GridListItemProps> {
     return {width: itemSize as number, height: itemSize as number};
   }
 
+  getHorizontalAlignmentStyle = memoize(horizontalAlignment => {
+    switch (horizontalAlignment) {
+      case HorizontalAlignment.left:
+        return {contentStyle: styles.contentAlignedToStart, containerStyle: styles.containerAlignedToStart};
+      case HorizontalAlignment.right:
+        return {contentStyle: styles.contentAlignedToEnd, containerStyle: styles.containerAlignedToEnd};
+      case HorizontalAlignment.center:
+        return {contentStyle: styles.contentAlignedToCenter, containerStyle: styles.containerAlignedToCenter};
+      default:
+        undefined;
+    }
+  });
+
   renderContent({text, typography, color, numberOfLines = 1, style, testID}: RenderContentType) {
-    const {alignToStart} = this.props;
+    const {alignToStart, horizontalAlignment} = this.props;
+    const horizontalAlignmentStyle = this.getHorizontalAlignmentStyle(horizontalAlignment);
     if (text) {
       return (
         <Text
           testID={testID}
           // @ts-ignore
-          style={[style, Typography[typography], color && {color}, alignToStart && styles.contentAlignedToStart]}
+          style={[
+            style,
+            //@ts-ignore
+            Typography[typography],
+            color && {color},
+            alignToStart && styles.contentAlignedToStart,
+            horizontalAlignmentStyle?.contentStyle
+          ]}
           numberOfLines={numberOfLines}
         >
           {text}
@@ -160,6 +194,7 @@ class GridListItem extends Component<GridListItemProps> {
       testID,
       imageProps,
       alignToStart,
+      horizontalAlignment,
       containerStyle,
       containerProps = {},
       renderCustomItem,
@@ -181,33 +216,33 @@ class GridListItem extends Component<GridListItemProps> {
       onPress,
       renderOverlay
     } = this.props;
-    const hasPress = _.isFunction(onPress);
-    const hasOverlay = _.isFunction(renderOverlay);
-    const Container = hasPress ? TouchableOpacity : View;
-    const imageStyle = {...this.getItemSizeObj()};
-    const width = _.get(imageStyle, 'width');
-    const TextContainer = overlayText ? View : React.Fragment;
-    const textContainerStyle = overlayText ? {style: [styles.overlayText, overlayTextContainerStyle]} : null;
-    const imageBorderRadius = imageProps?.borderRadius;
+    const Container = onPress ? TouchableOpacity : View;
+    const itemSize = this.getItemSizeObj();
+    const {width} = itemSize;
+    const horizontalAlignmentStyle = this.getHorizontalAlignmentStyle(horizontalAlignment);
+    const textContainerStyle = overlayText && {
+      style: [styles.overlayText, overlayTextContainerStyle]
+    };
     const {hitSlop, ...otherContainerProps} = containerProps; // eslint-disable-line
 
     return (
       <Container
-        style={[styles.container, alignToStart && styles.containerAlignedToStart, {width}, containerStyle]}
+        style={[
+          styles.container,
+          alignToStart && styles.containerAlignedToStart,
+          horizontalAlignmentStyle?.containerStyle,
+          {width},
+          containerStyle
+        ]}
         {...otherContainerProps}
-        onPress={hasPress ? this.onItemPress : undefined}
+        onPress={onPress && this.onItemPress}
         accessible={renderCustomItem ? true : undefined}
         {...Modifiers.extractAccessibilityProps(this.props)}
       >
-        {imageProps && (
-          <View style={[{borderRadius: imageBorderRadius}, imageStyle]}>
-            <Image {...imageProps} style={[imageStyle, imageProps?.style]}/>
-            {children}
-          </View>
-        )}
+        {imageProps && <Image style={itemSize} {...imageProps} customOverlayContent={children}/>}
         {!_.isNil(renderCustomItem) && <View style={{width}}>{renderCustomItem()}</View>}
-        {hasOverlay && <View style={[styles.overlay, this.getItemSizeObj()]}>{renderOverlay?.()}</View>}
-        <TextContainer {...textContainerStyle}>
+        {renderOverlay && <View style={[styles.overlay, itemSize]}>{renderOverlay()}</View>}
+        <View {...textContainerStyle}>
           {this.renderContent({
             testID: `${testID}.title`,
             text: title,
@@ -232,7 +267,7 @@ class GridListItem extends Component<GridListItemProps> {
             numberOfLines: descriptionLines,
             style: styles.description
           })}
-        </TextContainer>
+        </View>
       </Container>
     );
   }
@@ -246,6 +281,12 @@ const styles = StyleSheet.create({
   containerAlignedToStart: {
     alignItems: 'flex-start'
   },
+  containerAlignedToCenter: {
+    alignItems: 'center'
+  },
+  containerAlignedToEnd: {
+    alignItems: 'flex-end'
+  },
   title: {
     marginTop: Spacings.s1,
     textAlign: 'center',
@@ -262,15 +303,21 @@ const styles = StyleSheet.create({
   contentAlignedToStart: {
     textAlign: 'left'
   },
+  contentAlignedToCenter: {
+    textAlign: 'center'
+  },
+  contentAlignedToEnd: {
+    textAlign: 'right'
+  },
   overlay: {
     position: 'absolute',
     left: 0,
     top: 0
   },
   overlayText: {
     position: 'absolute',
-    bottom: 10,
-    left: 10
+    bottom: 0,
+    padding: Spacings.s3
   }
 });
 

src/components/image/index.tsx

@@ -73,7 +73,7 @@ export type ImageProps = Omit<RNImageProps, 'source'> &
     /**
      * Render an overlay with custom content
      */
-    customOverlayContent?: JSX.Element;
+    customOverlayContent?: React.ReactElement;
     /**
      * Default image source in case of an error
      */

src/components/overlay/index.tsx

@@ -39,7 +39,7 @@ export type OverlayTypes = Pick<ImageProps, 'borderRadius'> & {
   /**
    * Custom overlay content to be rendered on top of the image
    */
-  customContent?: JSX.Element;
+  customContent?: React.ReactElement;
 };
 
 /**