Feat/sortable grid list component

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,8 @@ 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: 'SortableGridList', tags: 'sort grid list drag', screen: 'unicorn.components.SortableGridListScreen'},
       {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 $textDangerLight>
+              {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: {
+    paddingTop: Spacings.s5
+  },
+  itemImage: {
+    width: '100%',
+    height: 85,
+    borderRadius: BorderRadiuses.br10
+  }
+});
+
+export default GridListScreen;

demo/src/screens/componentScreens/SortableGridListScreen.tsx

@@ -0,0 +1,69 @@
+import React, {Component} from 'react';
+import {StyleSheet} from 'react-native';
+import {
+  View,
+  Text,
+  Constants,
+  SortableGridList,
+  Card,
+  Spacings,
+  BorderRadiuses,
+  GridListProps,
+  SortableGridListProps
+} from 'react-native-ui-lib';
+
+import products from '../../data/products';
+
+class GridListScreen extends Component {
+  state = {
+    orientation: Constants.orientation
+  };
+
+  onOrderChange: SortableGridListProps['onOrderChange'] = (_newOrderedData, newOrder) => {
+    console.log('newOrder:', newOrder);
+  };
+
+  renderItem: GridListProps<typeof products[0]>['renderItem'] = ({item}) => {
+    return (
+      <Card flex onPress={() => console.log('item press')}>
+        <Card.Section imageSource={{uri: item.mediaUrl}} imageStyle={styles.itemImage}/>
+      </Card>
+    );
+  };
+
+  render() {
+    return (
+      <View flex>
+        <Text h1 margin-s5>
+          SortableGridList
+        </Text>
+        <SortableGridList
+          data={products}
+          renderItem={this.renderItem}
+          // numColumns={2}
+          maxItemWidth={140}
+          itemSpacing={Spacings.s3}
+          // itemSpacing={0}
+          listPadding={Spacings.s5}
+          // keepItemSize
+          contentContainerStyle={styles.list}
+          onOrderChange={this.onOrderChange}
+        />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  list: {
+    padding: Spacings.s5
+  },
+  itemImage: {
+    width: '100%',
+    // height: 85,
+    height: 108.7,
+    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);
@@ -44,6 +45,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.SharedTransitionScreen', () => require('./SharedTransitionScreen').default);
   registrar('unicorn.components.SkeletonViewScreen', () => require('./SkeletonViewScreen').default);
   registrar('unicorn.components.SliderScreen', () => require('./SliderScreen').default);
+  registrar('unicorn.components.SortableGridListScreen', () => require('./SortableGridListScreen').default);
   registrar('unicorn.components.StackAggregatorScreen', () => require('./StackAggregatorScreen').default);
   registrar('unicorn.components.StepperScreen', () => require('./StepperScreen').default);
   registrar('unicorn.components.SwitchScreen', () => require('./SwitchScreen').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';
@@ -63,6 +64,7 @@ export {
   SegmentedControlItemProps
 } from './src/components/segmentedControl';
 export {default as Slider, SliderProps} from './src/components/slider';
+export {default as SortableGridList, SortableGridListProps} from './src/components/sortableGridList';
 export {default as Switch, SwitchProps} from './src/components/switch';
 export {default as TabController, TabControllerProps, TabControllerItemProps} from './src/components/tabController';
 export {default as TabBar, TabBarProps} from './src/components/TabBar';

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { GridListProps, GridListBaseProps } from './types';
+declare function GridList<T = any>(props: GridListProps<T>): JSX.Element;
+export { GridListBaseProps, GridListProps };
+export default GridList;

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

@@ -0,0 +1,29 @@
+import { FlatListProps } from 'react-native';
+export interface GridListBaseProps {
+    /**
+     * 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.
+     */
+    keepItemSize?: boolean;
+    /**
+     * Pass when you want to use a custom container width for calculation
+     */
+    containerWidth?: number;
+}
+export declare type GridListProps<T = any> = GridListBaseProps & FlatListProps<T>;

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

@@ -0,0 +1,13 @@
+import { GridListBaseProps } from './types';
+export declare const DEFAULT_NUM_COLUMNS = 3;
+export declare const DEFAULT_ITEM_SPACINGS: number;
+declare const useGridLayout: (props: GridListBaseProps) => {
+    itemContainerStyle: {
+        width: number;
+        marginRight: number;
+        marginBottom: number;
+    };
+    numberOfColumns: number;
+    itemSize: number;
+};
+export default useGridLayout;

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/components/sortableGridList/SortableItem.d.ts

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import Animated from 'react-native-reanimated';
+import usePresenter, { ItemsOrder } from './usePresenter';
+interface SortableItemProps extends ReturnType<typeof usePresenter> {
+    index: number;
+    itemsOrder: Animated.SharedValue<ItemsOrder>;
+    onChange: () => void;
+    style: StyleProp<ViewStyle>;
+}
+declare function SortableItem(props: PropsWithChildren<SortableItemProps>): JSX.Element;
+export default SortableItem;

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { FlatListProps, ScrollViewProps } from 'react-native';
+import { GridListBaseProps } from '../gridList';
+import { ItemsOrder } from './usePresenter';
+export interface SortableGridListProps<T = any> extends GridListBaseProps, ScrollViewProps {
+    data: FlatListProps<T>['data'];
+    renderItem: FlatListProps<T>['renderItem'];
+    onOrderChange?: (newData: T[], newOrder: ItemsOrder) => void;
+}
+declare function SortableGridList<T = any>(props: SortableGridListProps<T>): JSX.Element;
+export default SortableGridList;

generatedTypes/src/components/sortableGridList/usePresenter.d.ts

@@ -0,0 +1,26 @@
+export declare const WINDOW_WIDTH: number;
+export declare const DEFAULT_NO_OF_COLUMNS = 3;
+export declare const getItemSize: (numOfColumns: number, viewWidth: number) => number;
+export declare const animationConfig: {
+    easing: (value: number) => number;
+    duration: number;
+};
+export declare type ItemsLayouts = ({
+    width: number;
+    height: number;
+} | undefined)[];
+export declare type ItemsOrder = number[];
+declare const usePresenter: (itemsSize: number, numOfColumns: number, itemSpacing: number) => {
+    updateItemLayout: (index: number, layout: {
+        width: number;
+        height: number;
+    }) => void;
+    getTranslationByOrderChange: (newOrder: number, oldOrder: number) => {
+        x: number;
+        y: number;
+    };
+    getOrderByPosition: (positionX: number, positionY: number) => number;
+    getItemOrderById: (itemsOrder: ItemsOrder, itemId: number) => number;
+    getIdByItemOrder: (itemsOrder: ItemsOrder, orderIndex: number) => number;
+};
+export default usePresenter;

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 (ignored when passing maxItemWidth)"},
+    {"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}}",
+    "/>"
+  ]
+}