Single source of truth for itemWidth and itemSpacing (#3275)

Author: M-i-k-e-l

src/components/gridList/useGridLayout.ts

@@ -58,7 +58,15 @@ const useGridLayout = (props: GridListBaseProps) => {
     return [{columnGap: itemSpacing}, columnWrapperStyle];
   }, [itemSpacing, columnWrapperStyle]);
 
-  return {itemContainerStyle, numberOfColumns, listStyle, listContentStyle, listColumnWrapperStyle};
+  return {
+    itemContainerStyle,
+    numberOfColumns,
+    itemWidth,
+    itemSpacing,
+    listStyle,
+    listContentStyle,
+    listColumnWrapperStyle
+  };
 };
 
 export default useGridLayout;

src/components/sortableGridList/__tests__/usePresenter.spec.tsx

@@ -5,7 +5,8 @@ import {Constants} from '../../../commons/new';
 
 describe('SortableGridList presenter tests', () => {
   const makeSUT = ({numOfColumns = DEFAULT_NUM_COLUMNS, itemSpacing = DEFAULT_ITEM_SPACINGS}) => {
-    return renderHook(() => usePresenter(numOfColumns, itemSpacing));
+    const itemSize = Constants.screenWidth / numOfColumns;
+    return renderHook(() => usePresenter(numOfColumns, itemSize, itemSpacing));
   };
 
   describe('ltr', () => {

src/components/sortableGridList/index.tsx

@@ -10,7 +10,7 @@ import SortableItem from './SortableItem';
 import usePresenter from './usePresenter';
 import {ItemsOrder, SortableGridListProps, ItemProps} from './types';
 
-import useGridLayout, {DEFAULT_ITEM_SPACINGS} from '../gridList/useGridLayout';
+import useGridLayout from '../gridList/useGridLayout';
 
 function generateItemsOrder(data: SortableGridListProps['data']) {
   return _.map(data, item => item.id);
@@ -19,9 +19,16 @@ function generateItemsOrder(data: SortableGridListProps['data']) {
 function SortableGridList<T = any>(props: SortableGridListProps<T>) {
   const {renderItem, onOrderChange, flexMigration, orderByIndex = false, ...others} = props;
 
-  const {itemContainerStyle, numberOfColumns, listStyle, listContentStyle, listColumnWrapperStyle} =
-    useGridLayout(props);
-  const {itemSpacing = DEFAULT_ITEM_SPACINGS, data} = others;
+  const {
+    itemContainerStyle,
+    numberOfColumns,
+    itemWidth,
+    itemSpacing,
+    listStyle,
+    listContentStyle,
+    listColumnWrapperStyle
+  } = useGridLayout(props);
+  const {data} = others;
   const itemsOrder = useSharedValue<ItemsOrder>(generateItemsOrder(data));
 
   // TODO: Remove once flexMigration migration is completed
@@ -36,7 +43,7 @@ function SortableGridList<T = any>(props: SortableGridListProps<T>) {
     itemsOrder.value = generateItemsOrder(data);
   }, [data]);
 
-  const presenter = usePresenter(numberOfColumns, itemSpacing);
+  const presenter = usePresenter(numberOfColumns, itemWidth, itemSpacing);
 
   const onChange = useCallback(() => {
     const newData: ItemProps<T>[] = [];

src/components/sortableGridList/usePresenter.ts

@@ -4,16 +4,14 @@ import {ItemLayout, ItemsOrder} from './types';
 
 export const WINDOW_WIDTH = Constants.windowWidth;
 export const DEFAULT_NO_OF_COLUMNS = 3;
-export const getItemSize = (numOfColumns: number, viewWidth: number) => viewWidth / numOfColumns;
 
 export const animationConfig = {
   easing: Easing.inOut(Easing.ease),
   duration: 350
 };
 
-const usePresenter = (numOfColumns: number, itemSpacing: number) => {
+const usePresenter = (numOfColumns: number, itemSize: number, itemSpacing: number) => {
   const itemLayout = useSharedValue<ItemLayout>(undefined);
-  const itemSize = getItemSize(numOfColumns, Constants.screenWidth);
 
   return {
     updateItemLayout: (layout: {width: number; height: number}) => {