Create new GridList component based on old GridView

demo/src/data/products.ts

@@ -118,6 +118,46 @@ const products = [
       quantity: 8
     },
     mediaUrl: 'https://static.wixstatic.com/media/84770f_c611ded729fd4461a1bb57134d4e9dd2.png_128'
+  },
+  {
+    name: 'I\'m a Product',
+    formattedPrice: '$19.99',
+    inventory: {
+      trackingMethod: 'status',
+      status: 'In Stock',
+      quantity: 3
+    },
+    mediaUrl: 'https://images.pexels.com/photos/3612182/pexels-photo-3612182.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=150'
+  },
+  {
+    name: 'I\'m a Product',
+    formattedPrice: '$19.99',
+    inventory: {
+      trackingMethod: 'status',
+      status: 'In Stock',
+      quantity: 22
+    },
+    mediaUrl: 'https://images.pexels.com/photos/4841529/pexels-photo-4841529.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=150'
+  },
+  {
+    name: 'I\'m a Product',
+    formattedPrice: '$19.99',
+    inventory: {
+      trackingMethod: 'status',
+      status: 'In Stock',
+      quantity: 10
+    },
+    mediaUrl: 'https://images.pexels.com/photos/4173450/pexels-photo-4173450.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=150'
+  },
+  {
+    name: 'I\'m a Product',
+    formattedPrice: '$19.99',
+    inventory: {
+      trackingMethod: 'status',
+      status: 'In Stock',
+      quantity: 10
+    },
+    mediaUrl: 'https://images.pexels.com/photos/10513273/pexels-photo-10513273.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=150'
   }
 ];
 

demo/src/screens/MenuStructure.js

@@ -112,6 +112,7 @@ export const navigationData = {
         screen: 'unicorn.components.FaderScreen'
       },
       {title: 'Wizard', tags: 'wizard', screen: 'unicorn.components.WizardScreen'},
+      {title: 'GridList', tags: 'grid list', screen: 'unicorn.components.GridListScreen'},
       {title: 'GridView', tags: 'grid view', screen: 'unicorn.components.GridViewScreen'}
     ]
   },

demo/src/screens/componentScreens/GridListScreen.tsx

@@ -0,0 +1,60 @@
+import React, {Component} from 'react';
+import {StyleSheet} from 'react-native';
+import {View, Text, Constants, GridList, Card, Spacings, BorderRadiuses, GridListProps} from 'react-native-ui-lib';
+import products from '../../data/products';
+
+class GridListScreen extends Component {
+  state = {
+    orientation: Constants.orientation
+  };
+
+  renderItem: GridListProps<typeof products[0]>['renderItem'] = ({item}) => {
+    return (
+      <Card flex>
+        <Card.Section imageSource={{uri: item.mediaUrl}} imageStyle={styles.itemImage}/>
+        <View padding-s2>
+          <Text>{item.name}</Text>
+          <Text>{item.formattedPrice}</Text>
+          {item.inventory.status === 'Out of Stock' && (
+            <Text text90M red30>
+              {item.inventory.status}
+            </Text>
+          )}
+        </View>
+      </Card>
+    );
+  };
+
+  render() {
+    return (
+      <GridList<typeof products[0]>
+        ListHeaderComponent={
+          <Text h1 marginB-s5>
+            GridList
+          </Text>
+        }
+        data={products}
+        renderItem={this.renderItem}
+        // numColumns={2}
+        maxItemWidth={140}
+        itemSpacing={Spacings.s3}
+        listPadding={Spacings.s5}
+        // keepItemSize
+        contentContainerStyle={styles.list}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  list: {
+    padding: Spacings.s5
+  },
+  itemImage: {
+    width: '100%',
+    height: 85,
+    borderRadius: BorderRadiuses.br10
+  }
+});
+
+export default GridListScreen;

demo/src/screens/componentScreens/index.js

@@ -26,6 +26,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.HintsScreen', () => require('./HintsScreen').default);
   registrar('unicorn.components.IconScreen', () => require('./IconScreen').default);
   registrar('unicorn.components.ImageScreen', () => require('./ImageScreen').default);
+  registrar('unicorn.components.GridListScreen', () => require('./GridListScreen').default);
   registrar('unicorn.components.GridViewScreen', () => require('./GridViewScreen').default);
   registrar('unicorn.components.KeyboardAwareScrollViewScreen', () => require('./KeyboardAwareScrollViewScreen').default);
   registrar('unicorn.components.MaskedInputScreen', () => require('./MaskedInputScreen').default);

generatedTypes/index.d.ts

@@ -48,6 +48,7 @@ export {default as Picker, PickerProps, PickerItemProps, PickerValue, PickerMode
 export {default as ProgressBar, ProgressBarProps} from './src/components/progressBar';
 export {default as FeatureHighlight, FeatureHighlightProps} from './src/components/featureHighlight';
 export {default as FloatingButton, FloatingButtonProps} from './src/components/floatingButton';
+export {default as GridList, GridListProps} from './src/components/gridList';
 export {default as GridListItem, GridListItemProps} from './src/components/gridListItem';
 export {default as GridView, GridViewProps} from './src/components/gridView';
 export {default as Hint, HintProps} from './src/components/hint';

generatedTypes/src/components/gridList/index.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { FlatListProps } from 'react-native';
+export interface GridListProps<T> extends FlatListProps<T> {
+    /**
+     * Allow a responsive item width to the maximum item width
+     */
+    maxItemWidth?: number;
+    /**
+     * Number of items to show in a row (ignored when passing maxItemWidth)
+     */
+    numColumns?: number;
+    /**
+     * Spacing between each item
+     */
+    itemSpacing?: number;
+    /**
+     * List padding (used for item size calculation)
+     */
+    listPadding?: number;
+    /**
+     * whether to keep the items initial size when orientation changes,
+     * in which case the apt number of columns will be calculated automatically.
+     * Ignored when passing 'maxItemWidth'
+     */
+    keepItemSize?: boolean;
+    /**
+     * Pass when you want to use a custom container width for calculation (good for when list has outer padding)
+     */
+    containerWidth?: number;
+}
+declare function GridList<T = any>(props: GridListProps<T>): JSX.Element;
+export default GridList;

generatedTypes/src/components/skeletonView/index.d.ts

@@ -174,7 +174,7 @@ declare class SkeletonView extends Component<InternalSkeletonViewProps, Skeleton
         height: number;
     };
     get size(): Size | undefined;
-    get contentSize(): 48 | 40;
+    get contentSize(): 40 | 48;
     get contentType(): ContentType | undefined;
     get hideSeparator(): boolean | undefined;
     get showLastSeparator(): boolean | undefined;

generatedTypes/src/style/colors.d.ts

@@ -47,7 +47,6 @@ export declare class Colors {
     getBackgroundKeysPattern(): RegExp;
     isEmpty(color: string): boolean;
     getColorTint(color: string, tintKey: string | number): any;
-    getInvertedTintKey(tintKey: string | number): number;
     getColorName(color: string): any;
     getTintedColorForDynamicHex(color: string, tintKey: string | number): string;
     generateColorPalette: ((color: any) => string[]) & _.MemoizedFunction;
@@ -193,13 +192,12 @@ declare const colorObject: Colors & {
     $backgroundDarkActive: string;
     $backgroundInverted: string;
     $textDisabled: string;
-    $textDefault: string;
-    $textNeutralHeavy: string;
-    /**
+    $textDefault: string; /**
      * Set color scheme for app
      * arguments:
      * scheme - color scheme e.g light/dark/default
      */
+    $textNeutralHeavy: string;
     $textNeutral: string;
     $textNeutralLight: string;
     $textDefaultLight: string;

src/components/gridList/gridList.api.json

@@ -0,0 +1,41 @@
+{
+  "name": "GridList",
+  "category": "layoutsAndTemplates",
+  "description": "An auto-generated grid list that calculate item size according to given props",
+  "extends": ["FlatList"],
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/GridListScreen.tsx",
+  "props": [
+    {"name": "numColumns", "type": "number", "description": "Number of items to show in a row"},
+    {"name": "itemSpacing", "type": "number", "description": "Spacing between each item"},
+    {
+      "name": "maxItemWidth",
+      "type": "number",
+      "description": "Allow a responsive item width to the maximum item width"
+    },
+    {
+      "name": "listPadding",
+      "type": "number",
+      "description": "List padding (used for item size calculation)"
+    },
+    {
+      "name": "containerWidth",
+      "type": "number",
+      "description": "Pass when you want to use a custom container width for calculation"
+    },
+    {
+      "name": "keepItemSize",
+      "type": "boolean",
+      "description": "whether to keep the items initial size when orientation changes, in which case the apt number of columns will be calculated automatically."
+    }
+  ],
+  "snippet": [
+    "<GridList>",
+    " data={items$1}",
+    " maxItemWidth={140$2}",
+    " numColumns={2$3}",
+    " itemSpacing={Spacings.s3$4}",
+    " containerWidth={Constants.screenWidth - (Spacings.s5 * 2)}",
+    " contentContainerStyle={{padding: Spacings.s5}}",
+    "/>"
+  ]
+}

src/components/gridList/index.tsx

@@ -0,0 +1,86 @@
+import React, {useCallback, useMemo} from 'react';
+import {FlatList, FlatListProps} from 'react-native';
+import {Spacings} from 'style';
+import {useOrientation} from 'hooks';
+import {Constants} from '../../commons/new';
+import View from '../view';
+
+const DEFAULT_NUM_COLUMNS = 3;
+const DEFAULT_ITEM_SPACINGS = Spacings.s4;
+
+export interface GridListProps<T> extends FlatListProps<T> {
+  /**
+   * Allow a responsive item width to the maximum item width
+   */
+  maxItemWidth?: number;
+  /**
+   * Number of items to show in a row (ignored when passing maxItemWidth)
+   */
+  numColumns?: number;
+  /**
+   * Spacing between each item
+   */
+  itemSpacing?: number;
+  /**
+   * List padding (used for item size calculation)
+   */
+  listPadding?: number;
+  /**
+   * whether to keep the items initial size when orientation changes,
+   * in which case the apt number of columns will be calculated automatically.
+   * Ignored when passing 'maxItemWidth'
+   */
+  keepItemSize?: boolean;
+  /**
+   * Pass when you want to use a custom container width for calculation
+   */
+  containerWidth?: number;
+}
+
+function GridList<T = any>(props: GridListProps<T>) {
+  const {
+    renderItem,
+    numColumns = DEFAULT_NUM_COLUMNS,
+    itemSpacing = DEFAULT_ITEM_SPACINGS,
+    maxItemWidth,
+    listPadding = 0,
+    keepItemSize,
+    ...others
+  } = props;
+
+  const {orientation} = useOrientation();
+
+  const containerWidth = useMemo(() => {
+    return (props.containerWidth ?? Constants.screenWidth) - listPadding * 2;
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [listPadding, orientation]);
+
+  const numberOfColumns = useMemo(() => {
+    if (maxItemWidth) {
+      return Math.ceil((containerWidth + itemSpacing) / (maxItemWidth + itemSpacing));
+    } else {
+      return numColumns;
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [numColumns, maxItemWidth, itemSpacing, keepItemSize ? containerWidth : undefined]);
+
+  const itemSize = useMemo(() => {
+    return (containerWidth - itemSpacing * (numberOfColumns - 1)) / numberOfColumns;
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [numberOfColumns, itemSpacing, keepItemSize ? undefined : containerWidth]);
+
+  const itemContainerStyle = useMemo(() => {
+    return {width: itemSize + itemSpacing, paddingRight: itemSpacing, marginBottom: itemSpacing};
+  }, [itemSize, itemSpacing]);
+
+  const _renderItem = useCallback((...args) => {
+    // @ts-expect-error
+    return <View style={[itemContainerStyle]}>{renderItem?.(...args)}</View>;
+  },
+  [renderItem, itemContainerStyle]);
+
+  return <FlatList key={numberOfColumns} {...others} renderItem={_renderItem} numColumns={numberOfColumns}/>;
+}
+
+export default GridList;

src/index.js

@@ -69,6 +69,9 @@ export default {
   get GridListItem() {
     return require('./components/gridListItem').default;
   },
+  get GridList() {
+    return require('./components/gridList').default;
+  },
   get GridView() {
     return require('./components/gridView').default;
   },

src/index.ts

@@ -49,6 +49,7 @@ export {default as FeatureHighlight, FeatureHighlightProps} from './components/f
 export {default as FloatingButton, FloatingButtonProps} from './components/floatingButton';
 export {default as GradientSlider, GradientSliderProps} from './components/slider/GradientSlider';
 export {default as GridListItem, GridListItemProps} from './components/gridListItem';
+export {default as GridList, GridListProps} from './components/gridList';
 export {default as GridView, GridViewProps} from './components/gridView';
 export {default as HapticService, HapticType} from './services/HapticService';
 export {default as Hint, HintProps} from './components/hint';