GridListItem - horizontal alignment support (#3001)

* horizontal aligment support

* passing the alignment style to the custom item and the image wrapper

* added horizontalAlignment to api.json

* fixed overley use case, changed the prop name

* small refactor

* removed textStyle, changed the children type

* children can be an array

* fixed review notes

* fixed review notes

Author: adids1221

demo/src/screens/componentScreens/GridListScreen.tsx

@@ -12,27 +12,40 @@ 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,
+    alignToStart: 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, 'Align to start:', 'alignToStart')}
+        {renderBooleanOption.call(this, 'Use overlay text:', 'overlayText')}
       </View>
     );
   };
 
   renderItem: GridListProps<(typeof products)[0]>['renderItem'] = ({item}) => {
-    const {useGridListItem} = this.state;
+    const {useGridListItem, horizontalAlignment, overlayText, alignToStart} = this.state;
 
     if (useGridListItem) {
       return (
@@ -41,8 +54,10 @@ class GridListScreen extends Component {
           itemSize={{width: '100%', height: 200}}
           imageProps={{source: {uri: item.mediaUrl}}}
           title="Title"
-          subtitle="Subitle"
-          overlayText
+          subtitle="Subtile"
+          alignToStart={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 | 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,34 @@ class GridListItem extends Component<GridListItemProps> {
     return {width: itemSize as number, height: itemSize as number};
   }
 
+  getContainerHorizontalAlignment = memoize(horizontalAlignment => {
+    switch (horizontalAlignment) {
+      case HorizontalAlignment.left:
+        return 'flex-start';
+      case HorizontalAlignment.right:
+        return 'flex-end';
+      case HorizontalAlignment.center:
+        return 'center';
+      default:
+        undefined;
+    }
+  });
+
   renderContent({text, typography, color, numberOfLines = 1, style, testID}: RenderContentType) {
-    const {alignToStart} = this.props;
+    const {alignToStart, horizontalAlignment} = this.props;
+    const textAlign = alignToStart ? 'left' : 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},
+            {textAlign}
+          ]}
           numberOfLines={numberOfLines}
         >
           {text}
@@ -160,6 +193,7 @@ class GridListItem extends Component<GridListItemProps> {
       testID,
       imageProps,
       alignToStart,
+      horizontalAlignment,
       containerStyle,
       containerProps = {},
       renderCustomItem,
@@ -181,32 +215,27 @@ 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 Container = onPress ? TouchableOpacity : View;
     const TextContainer = overlayText ? View : React.Fragment;
-    const textContainerStyle = overlayText ? {style: [styles.overlayText, overlayTextContainerStyle]} : null;
-    const imageBorderRadius = imageProps?.borderRadius;
+    const itemSize = this.getItemSizeObj();
+    const {width} = itemSize;
+    const alignItems = alignToStart ? 'flex-start' : this.getContainerHorizontalAlignment(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, {alignItems}, {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>}
+        {renderOverlay && <View style={[styles.overlay, itemSize]}>{renderOverlay()}</View>}
         <TextContainer {...textContainerStyle}>
           {this.renderContent({
             testID: `${testID}.title`,
@@ -243,9 +272,6 @@ const styles = StyleSheet.create({
     alignSelf: 'flex-start',
     alignItems: 'center'
   },
-  containerAlignedToStart: {
-    alignItems: 'flex-start'
-  },
   title: {
     marginTop: Spacings.s1,
     textAlign: 'center',
@@ -259,18 +285,15 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     ...Typography.subtext
   },
-  contentAlignedToStart: {
-    textAlign: 'left'
-  },
   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 | 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 | React.ReactElement[];
 };
 
 /**