GridView and SortableGridView - support tablet and other fixes (#2611)

* GridView and SortableGridView - support tablet and other fixes

* Cannot warn since we're already using this internally without setting

Author: M-i-k-e-l

src/commons/Constants.ts

@@ -6,7 +6,6 @@ import {
   AccessibilityInfo,
   AccessibilityChangeEvent
 } from 'react-native';
-import {LogService} from '../services';
 
 export enum orientations {
   PORTRAIT = 'portrait',
@@ -138,7 +137,6 @@ const constants = {
   },
   getPageMargins(): number {
     if (!breakpoints) {
-      LogService.warn('UILib breakpoints must be set via setBreakpoints before using getPageMargins');
       return 0;
     }
 

src/commons/__tests__/constants.spec.ts

@@ -6,13 +6,8 @@ describe('Constants', () => {
   });
 
   describe('Breakpoints and Page Margins', () => {
-    it('getPageMargins without init should return 0 and trigger a warn', () => {
-      const warn = console.warn;
-      console.warn = jest.fn();
+    it('getPageMargins without init should return 0', () => {
       expect(Constants.getPageMargins()).toBe(0);
-      expect(console.warn).toHaveBeenCalledTimes(1);
-      expect(console.warn).toHaveBeenCalledWith('UILib breakpoints must be set via setBreakpoints before using getPageMargins');
-      console.warn = warn;
     });
 
     it('getPageMargins with one breakpoint', () => {

src/components/gridList/useGridLayout.ts

@@ -21,7 +21,7 @@ const useGridLayout = (props: GridListBaseProps) => {
   const {orientation} = useOrientation();
 
   const _containerWidth = useMemo(() => {
-    return (containerWidth ?? Constants.screenWidth) - listPadding * 2;
+    return (containerWidth ?? Constants.screenWidth - Constants.getPageMargins()) - listPadding * 2;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [listPadding, orientation, containerWidth]);
 

src/components/gridView/index.tsx

@@ -119,7 +119,7 @@ class GridView extends UIComponent<GridViewProps, GridViewState> {
   };
 
   getDefaultViewWidth() {
-    return Constants.screenWidth - Spacings.s5 * 2;
+    return Constants.screenWidth - (Constants.getPageMargins() || Spacings.s5) * 2;
   }
 
   getGridContainerWidth() {

src/components/sortableGridList/index.tsx

@@ -9,7 +9,7 @@ import SortableItem from './SortableItem';
 import usePresenter from './usePresenter';
 import {ItemsOrder, SortableGridListProps, ItemProps} from './types';
 
-import useGridLayout, {DEFAULT_ITEM_SPACINGS, DEFAULT_NUM_COLUMNS} from '../gridList/useGridLayout';
+import useGridLayout, {DEFAULT_ITEM_SPACINGS} from '../gridList/useGridLayout';
 
 function generateItemsOrder(data: SortableGridListProps['data']) {
   return _.map(data, item => item.id);
@@ -19,15 +19,14 @@ function SortableGridList<T = any>(props: SortableGridListProps<T>) {
   const {renderItem, onOrderChange, ...others} = props;
 
   const {itemContainerStyle, numberOfColumns, listContentStyle} = useGridLayout(props);
-  const {numColumns = DEFAULT_NUM_COLUMNS, itemSpacing = DEFAULT_ITEM_SPACINGS, data} = others;
+  const {itemSpacing = DEFAULT_ITEM_SPACINGS, data} = others;
   const itemsOrder = useSharedValue<ItemsOrder>(generateItemsOrder(data));
 
   useDidUpdate(() => {
     itemsOrder.value = generateItemsOrder(data);
   }, [data]);
 
-  // TODO: Get the number of columns from GridList calculation somehow
-  const presenter = usePresenter(numColumns, itemSpacing);
+  const presenter = usePresenter(numberOfColumns, itemSpacing);
 
   const onChange = useCallback(() => {
     const newData: ItemProps<T>[] = [];

src/components/sortableGridList/usePresenter.ts

@@ -39,8 +39,10 @@ const usePresenter = (numOfColumns: number, itemSpacing: number) => {
     },
     getOrderByPosition: (positionX: number, positionY: number) => {
       'worklet';
-      const col = (Constants.isRTL ? -1 : 1) * Math.round(positionX / itemSize);
-      const row = Math.round(positionY / itemSize);
+      const width = itemLayout.value?.width || itemSize;
+      const height = itemLayout.value?.height || itemSize;
+      const col = (Constants.isRTL ? -1 : 1) * Math.round(positionX / width);
+      const row = Math.round(positionY / height);
       return row * numOfColumns + col;
     },