react-native-ui-lib 8.0.1 → 8.1.0

package/src/components/slider/__tests__/index.spec.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import Slider from "../index";
+// import View from '../../view';
+import { SliderDriver } from "../Slider.driver";
+describe('Slider', () => {
+  afterEach(() => {
+    SliderDriver.clear();
+  });
+  const sliderDriver = (testID, props) => {
+    const defaultProps = {
+      testID,
+      onValueChange: jest.fn(),
+      disabled: false
+    };
+    const component = <Slider {...defaultProps} {...props} />;
+    return new SliderDriver({
+      component,
+      testID
+    });
+  };
+  it('Should be disabled', async () => {
+    const testId = 'slider-comp';
+    const driver = await sliderDriver(testId, {
+      disabled: true
+    });
+    expect(await driver.isDisabled()).toBe(true);
+  });
+  it('Should be disabled', async () => {
+    const testId = 'slider-comp';
+    const driver = await sliderDriver(testId, {
+      disabled: false
+    });
+    expect(await driver.isDisabled()).toBe(false);
+  });
+});

package/src/components/slider/index.js

@@ -538,13 +538,24 @@ class Slider extends PureComponent {
       thumbTintColor,
       thumbHitSlop
     } = this.props;
+    const {
+      thumbSize
+    } = this.state;
+    const verticalHitslop = Math.max(0, (48 - thumbSize.height) / 2);
+    const horizontalHitslop = Math.max(0, (48 - thumbSize.width) / 2);
+    const calculatedHitSlop = thumbSize.width > 0 ? {
+      top: verticalHitslop,
+      bottom: verticalHitslop,
+      left: horizontalHitslop,
+      right: horizontalHitslop
+    } : undefined;
     return {
       disabled,
       thumbTintColor,
       thumbStyle,
       activeThumbStyle,
       disableActiveStyling,
-      thumbHitSlop,
+      thumbHitSlop: thumbHitSlop ?? calculatedHitSlop,
       onLayout: this.onThumbLayout
     };
   };

package/src/components/slider/slider.api.json

@@ -238,6 +238,17 @@
               }
             ],
             "description": "markdown:\n\n**Range slider**\n\n**Initial state**\nWidest range is displayed by default.\n\n**Thumbs**\nThumbs should not cross each other and keep minimum distance between them of S2 (8px). Thumbs shouldn’t overlap each other when idle.\n\n**Spacing**\nMinimum spacing between idle Thumbs - S2"
+          },
+          {
+            "type": "section",
+            "layout": "horizontal",
+            "content": [
+              {
+                "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/Color%20slider.png"
+              }
+            ],
+            "title": "Spec",
+            "description": "Markdown:\n**Default**\nThumb: 24px\nOutline: 1.5px"
           }
         ]
       }

package/src/components/sortableGridList/__tests__/index.spec.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import View from "../../view";
+import Text from "../../text";
+import SortableGridList from "../";
+import { useDraggableDriver } from "../../../testkit/new/useDraggable.driver";
+import { useComponentDriver } from "../../../testkit/new/Component.driver";
+const testID = 'sortable-grid-list';
+const TEST_DATA = Array(9).fill(0).map((_, index) => ({
+  id: `${index}`
+}));
+const itemsTestId = id => `${testID}.item.${id}`;
+const testRenderItem = ({
+  item
+}) => {
+  return <View height={50} testID={itemsTestId(item.id)}>
+      <Text>{item.id}</Text>
+    </View>;
+};
+const TestCase = props => {
+  return <SortableGridList {...props} numColumns={3} testID={testID} data={TEST_DATA} renderItem={testRenderItem} />;
+};
+describe('SortableGridlist', () => {
+  it('should render a sortable grid list', () => {
+    render(<TestCase />);
+  });
+  it('should reorder by index', () => {
+    const onOrderChange = jest.fn();
+    const renderTree = render(<TestCase onOrderChange={onOrderChange} orderByIndex />);
+    const driverItem = useDraggableDriver(useComponentDriver({
+      renderTree,
+      testID: itemsTestId('0')
+    }));
+    driverItem.drag(150); // Items height is 50 but dragging 100 doesn't work for some reason. 150 works and drags one row down.
+    expect(onOrderChange).toHaveBeenCalledTimes(1);
+    const newOrder = [1, 2, 3, 0, 4, 5, 6, 7, 8];
+    expect(onOrderChange).toHaveBeenCalledWith(newOrder.map(index => TEST_DATA[index]), newOrder.map(index => TEST_DATA[index].id));
+  });
+  it('should reorder by swapping', () => {
+    const onOrderChange = jest.fn();
+    const renderTree = render(<TestCase onOrderChange={onOrderChange} />);
+    const driverItem = useDraggableDriver(useComponentDriver({
+      renderTree,
+      testID: itemsTestId('0')
+    }));
+    driverItem.drag(150);
+    expect(onOrderChange).toHaveBeenCalledTimes(1);
+    const newOrder = [3, 1, 2, 0, 4, 5, 6, 7, 8];
+    expect(onOrderChange).toHaveBeenCalledWith(newOrder.map(index => TEST_DATA[index]), newOrder.map(index => TEST_DATA[index].id));
+  });
+});

package/src/components/sortableGridList/__tests__/usePresenter.spec.js

@@ -0,0 +1,231 @@
+import usePresenter from "../usePresenter";
+import { renderHook } from '@testing-library/react-hooks';
+import { DEFAULT_ITEM_SPACINGS, DEFAULT_NUM_COLUMNS } from "../../gridList/useGridLayout";
+import { Constants } from "../../../commons/new";
+describe('SortableGridList presenter tests', () => {
+  const makeSUT = ({
+    numOfColumns = DEFAULT_NUM_COLUMNS,
+    itemSpacing = DEFAULT_ITEM_SPACINGS
+  }) => {
+    const itemSize = Constants.screenWidth / numOfColumns;
+    return renderHook(() => usePresenter(numOfColumns, itemSize, itemSpacing));
+  };
+  describe('ltr', () => {
+    it('getTranslationByOrderChange', () => {
+      let sut = makeSUT({});
+      expect(sut.result.current.getTranslationByOrderChange(0, 0)).toEqual({
+        x: 0,
+        y: 0
+      });
+      expect(sut.result.current.getTranslationByOrderChange(5, 1)).toEqual({
+        x: 16,
+        y: 16
+      });
+      expect(sut.result.current.getTranslationByOrderChange(2, 1)).toEqual({
+        x: 16,
+        y: 0
+      });
+      expect(sut.result.current.getTranslationByOrderChange(1, 2)).toEqual({
+        x: -16,
+        y: 0
+      });
+      sut = makeSUT({
+        numOfColumns: 5
+      });
+      expect(sut.result.current.getTranslationByOrderChange(0, 0)).toEqual({
+        x: 0,
+        y: 0
+      });
+      expect(sut.result.current.getTranslationByOrderChange(5, 1)).toEqual({
+        x: -16,
+        y: 16
+      });
+      expect(sut.result.current.getTranslationByOrderChange(2, 1)).toEqual({
+        x: 16,
+        y: 0
+      });
+      expect(sut.result.current.getTranslationByOrderChange(1, 2)).toEqual({
+        x: -16,
+        y: 0
+      });
+      sut = makeSUT({
+        itemSpacing: 30
+      });
+      expect(sut.result.current.getTranslationByOrderChange(0, 0)).toEqual({
+        x: 0,
+        y: 0
+      });
+      expect(sut.result.current.getTranslationByOrderChange(5, 1)).toEqual({
+        x: 30,
+        y: 30
+      });
+      expect(sut.result.current.getTranslationByOrderChange(2, 1)).toEqual({
+        x: 30,
+        y: 0
+      });
+      expect(sut.result.current.getTranslationByOrderChange(1, 2)).toEqual({
+        x: -30,
+        y: 0
+      });
+      sut = makeSUT({
+        numOfColumns: 5,
+        itemSpacing: 30
+      });
+      expect(sut.result.current.getTranslationByOrderChange(0, 0)).toEqual({
+        x: 0,
+        y: 0
+      });
+      expect(sut.result.current.getTranslationByOrderChange(5, 1)).toEqual({
+        x: -30,
+        y: 30
+      });
+      expect(sut.result.current.getTranslationByOrderChange(2, 1)).toEqual({
+        x: 30,
+        y: 0
+      });
+      expect(sut.result.current.getTranslationByOrderChange(1, 2)).toEqual({
+        x: -30,
+        y: 0
+      });
+    });
+    it('getOrderByPosition', () => {
+      let sut = makeSUT({});
+      expect(sut.result.current.getOrderByPosition(0, 0)).toEqual(0);
+      expect(sut.result.current.getOrderByPosition(200, 200)).toEqual(4);
+      expect(sut.result.current.getOrderByPosition(0, 200)).toEqual(3);
+      expect(sut.result.current.getOrderByPosition(200, 0)).toEqual(1);
+      sut = makeSUT({
+        numOfColumns: 5
+      });
+      expect(sut.result.current.getOrderByPosition(0, 0)).toEqual(0);
+      expect(sut.result.current.getOrderByPosition(200, 200)).toEqual(6);
+      expect(sut.result.current.getOrderByPosition(0, 200)).toEqual(5);
+      expect(sut.result.current.getOrderByPosition(200, 0)).toEqual(1);
+      sut = makeSUT({
+        itemSpacing: 30
+      });
+      expect(sut.result.current.getOrderByPosition(0, 0)).toEqual(0);
+      expect(sut.result.current.getOrderByPosition(200, 200)).toEqual(4);
+      expect(sut.result.current.getOrderByPosition(0, 200)).toEqual(3);
+      expect(sut.result.current.getOrderByPosition(200, 0)).toEqual(1);
+      sut = makeSUT({
+        numOfColumns: 5,
+        itemSpacing: 30
+      });
+      expect(sut.result.current.getOrderByPosition(0, 0)).toEqual(0);
+      expect(sut.result.current.getOrderByPosition(200, 200)).toEqual(6);
+      expect(sut.result.current.getOrderByPosition(0, 200)).toEqual(5);
+      expect(sut.result.current.getOrderByPosition(200, 0)).toEqual(1);
+    });
+  });
+  describe('rtl', () => {
+    beforeAll(() => Constants.isRTL = true);
+    afterAll(() => Constants.isRTL = false);
+    it('getTranslationByOrderChange', () => {
+      let sut = makeSUT({});
+      expect(sut.result.current.getTranslationByOrderChange(0, 0)).toEqual({
+        x: -0,
+        y: 0
+      });
+      expect(sut.result.current.getTranslationByOrderChange(5, 1)).toEqual({
+        x: -16,
+        y: 16
+      });
+      expect(sut.result.current.getTranslationByOrderChange(2, 1)).toEqual({
+        x: -16,
+        y: 0
+      });
+      expect(sut.result.current.getTranslationByOrderChange(1, 2)).toEqual({
+        x: 16,
+        y: 0
+      });
+      sut = makeSUT({
+        numOfColumns: 5
+      });
+      expect(sut.result.current.getTranslationByOrderChange(0, 0)).toEqual({
+        x: -0,
+        y: 0
+      });
+      expect(sut.result.current.getTranslationByOrderChange(5, 1)).toEqual({
+        x: 16,
+        y: 16
+      });
+      expect(sut.result.current.getTranslationByOrderChange(2, 1)).toEqual({
+        x: -16,
+        y: 0
+      });
+      expect(sut.result.current.getTranslationByOrderChange(1, 2)).toEqual({
+        x: 16,
+        y: 0
+      });
+      sut = makeSUT({
+        itemSpacing: 30
+      });
+      expect(sut.result.current.getTranslationByOrderChange(0, 0)).toEqual({
+        x: -0,
+        y: 0
+      });
+      expect(sut.result.current.getTranslationByOrderChange(5, 1)).toEqual({
+        x: -30,
+        y: 30
+      });
+      expect(sut.result.current.getTranslationByOrderChange(2, 1)).toEqual({
+        x: -30,
+        y: 0
+      });
+      expect(sut.result.current.getTranslationByOrderChange(1, 2)).toEqual({
+        x: 30,
+        y: 0
+      });
+      sut = makeSUT({
+        numOfColumns: 5,
+        itemSpacing: 30
+      });
+      expect(sut.result.current.getTranslationByOrderChange(0, 0)).toEqual({
+        x: -0,
+        y: 0
+      });
+      expect(sut.result.current.getTranslationByOrderChange(5, 1)).toEqual({
+        x: 30,
+        y: 30
+      });
+      expect(sut.result.current.getTranslationByOrderChange(2, 1)).toEqual({
+        x: -30,
+        y: 0
+      });
+      expect(sut.result.current.getTranslationByOrderChange(1, 2)).toEqual({
+        x: 30,
+        y: 0
+      });
+    });
+    it('getOrderByPosition', () => {
+      let sut = makeSUT({});
+      expect(sut.result.current.getOrderByPosition(0, 0)).toEqual(0);
+      expect(sut.result.current.getOrderByPosition(-200, 200)).toEqual(4);
+      expect(sut.result.current.getOrderByPosition(0, 200)).toEqual(3);
+      expect(sut.result.current.getOrderByPosition(-200, 0)).toEqual(1);
+      sut = makeSUT({
+        numOfColumns: 5
+      });
+      expect(sut.result.current.getOrderByPosition(0, 0)).toEqual(0);
+      expect(sut.result.current.getOrderByPosition(-200, 200)).toEqual(6);
+      expect(sut.result.current.getOrderByPosition(0, 200)).toEqual(5);
+      expect(sut.result.current.getOrderByPosition(-200, 0)).toEqual(1);
+      sut = makeSUT({
+        itemSpacing: 30
+      });
+      expect(sut.result.current.getOrderByPosition(0, 0)).toEqual(0);
+      expect(sut.result.current.getOrderByPosition(-200, 200)).toEqual(4);
+      expect(sut.result.current.getOrderByPosition(0, 200)).toEqual(3);
+      expect(sut.result.current.getOrderByPosition(-200, 0)).toEqual(1);
+      sut = makeSUT({
+        numOfColumns: 5,
+        itemSpacing: 30
+      });
+      expect(sut.result.current.getOrderByPosition(0, 0)).toEqual(0);
+      expect(sut.result.current.getOrderByPosition(-200, 200)).toEqual(6);
+      expect(sut.result.current.getOrderByPosition(0, 200)).toEqual(5);
+      expect(sut.result.current.getOrderByPosition(-200, 0)).toEqual(1);
+    });
+  });
+});

package/src/components/sortableGridList/sortableGridList.api.json

@@ -83,7 +83,14 @@
   "docs": {
     "hero": {
       "title": "SortableGridList",
-      "description": "An sortable grid list (based on GridList component)"
+      "description": "Sortable Grid List is used to display a collection of items in an organized grid and allows rearrangement of these. Any element (text, image, media) can be arranged in a grid and customized. ",
+      "type": "hero",
+      "layout": "horizontal",
+      "content": [
+        {
+          "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/SortableGridList/listItem_overview_cover.png"
+        }
+      ]
     },
     "tabs": [
       {
@@ -99,6 +106,42 @@
             ]
           }
         ]
+      },
+      {
+        "title": "Overview",
+        "sections": [
+          {
+            "type": "section",
+            "title": "Usage Examples",
+            "description": "",
+            "content": [
+              {
+                "value": "\"https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=14331-62322&embed-host=share\" "
+              }
+            ]
+          },
+          {
+            "type": "section",
+            "title": "Spec",
+            "description": "Markdown:\n**Grid Columns Calculation**\nOption 1 - Max Item Width:\nSet maximum width of a single item, and amount of items in a row will be set automatically, according to screen width.\nOption 2 - Num Columns:\nSet amount of Columns, and items width will be automatic according to screen width.\n**Rearranging items**\nPress and hold an item and to move it around and reorder the grid, the item expands by 10% to indicate that it has been selected. ",
+            "layout": "horizontal",
+            "content": [
+              {
+                "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/SortableGridList/spec.png"
+              }
+            ]
+          },
+          {
+            "type": "section",
+            "title": "Tablet",
+            "description": "The tablet version will keep it’s proportions and will allow displaying up to 6 columns of items, to avoid a cluttered screen.",
+            "content": [
+              {
+                "value": "\"https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=14331-63246&embed-host=share\""
+              }
+            ]
+          }
+        ]
       }
     ]
   }

package/src/components/sortableList/SortableList.api.json

@@ -2,8 +2,12 @@
   "name": "SortableList",
   "category": "lists",
   "description": "A sortable list component",
-  "extends": ["FlatList"],
-  "extendsLink": ["https://reactnative.dev/docs/flatlist"],
+  "extends": [
+    "FlatList"
+  ],
+  "extendsLink": [
+    "https://reactnative.dev/docs/flatlist"
+  ],
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/SortableListScreen.tsx",
   "note": "We've seen a case where not all items are rendered on some Android devices, this appears to be a bug with `FlatList` that is using `CellRendererComponent`, our current workaround is for you to add `initialNumToRender={data.length}`.",
   "props": [
@@ -93,5 +97,49 @@
     "    </View>",
     "  )",
     "};"
-  ]
+  ],
+  "docs": {
+    "hero": {
+      "title": "SortableList",
+      "description": "Draggable List is a behavior of a list which allows re-arrangement\nof its items. 
The drag-and-drop functionality is a preferred method of organization for most users. It’s more organic with the gesture controls of mobile and intuitive. Drag-and-drop provides a level of direct manipulation that other methods can’t match.\nDraggable list is less appropriate in long lists with scrolling. ",
+      "type": "hero",
+      "layout": "horizontal",
+      "content": [
+        {
+          "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/SortableList/SortableList_Overview_Hero.png"
+        }
+      ]
+    },
+    "tabs": [
+      {
+        "title": "Overview",
+        "sections": [
+          {
+            "type": "section",
+            "title": "Usage Examples",
+            "description": "",
+            "content": [
+              {
+                "value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=15065-37832&m=dev&embed-host=share"
+              },
+              {
+                "value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=16516-228758&m=dev&embed-host=share"
+              }
+            ]
+          },
+          {
+            "type": "section",
+            "layout": "horizontal",
+            "title": "Spec",
+            "description": "Animation in Google Material Design:\nhttps://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1dtprsH4jZ2nOnjBCJeJXd7n4U-jmWyas%2F03-list-reorder.mp4",
+            "content": [
+              {
+                "value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=15065-38298&m=dev&embed-host=share"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
 }

package/src/components/sortableList/__tests__/index.spec.js

@@ -0,0 +1,105 @@
+import _times from "lodash/times";
+import React, { useCallback } from 'react';
+import { render } from '@testing-library/react-native';
+import Text from "../../text";
+import View from "../../view";
+import SortableList from "../index";
+import { SortableListDriver } from "../SortableList.driver.new";
+import { SortableListItemDriver } from "../SortableListItem.driver.new";
+const defaultProps = {
+  testID: 'sortableList'
+};
+const ITEMS = _times(5, index => {
+  return {
+    text: `${index}`,
+    id: `${index}`
+  };
+});
+const TestCase = props => {
+  const renderItem = useCallback(({
+    item
+  }) => {
+    return <Text center testID={`item${item.id}`}>
+        {item.text}
+      </Text>;
+  }, []);
+  return <View flex>
+      <View flex useSafeArea>
+        <SortableList data={ITEMS} renderItem={renderItem} {...defaultProps} {...props} />
+      </View>
+    </View>;
+};
+describe('SortableList', () => {
+  it('SortableList onOrderChange is called - down', async () => {
+    const onOrderChange = jest.fn();
+    const renderTree = render(<TestCase onOrderChange={onOrderChange} />);
+    const sortableListDriver = SortableListDriver({
+      renderTree,
+      testID: 'sortableList'
+    });
+    expect(await sortableListDriver.exists()).toBeTruthy();
+    expect(onOrderChange).toHaveBeenCalledTimes(0);
+    const item1Driver = SortableListItemDriver({
+      renderTree,
+      testID: 'item1'
+    });
+    expect(await item1Driver.exists()).toBeTruthy();
+    await item1Driver.dragDown(1);
+    expect(onOrderChange).toHaveBeenCalledTimes(1);
+    expect(onOrderChange).toHaveBeenCalledWith([{
+      id: '0',
+      text: '0'
+    }, {
+      id: '2',
+      text: '2'
+    }, {
+      id: '1',
+      text: '1'
+    }, {
+      id: '3',
+      text: '3'
+    }, {
+      id: '4',
+      text: '4'
+    }], {
+      from: 1,
+      to: 2
+    });
+  });
+  it('SortableList onOrderChange is called - up', async () => {
+    const onOrderChange = jest.fn();
+    const renderTree = render(<TestCase onOrderChange={onOrderChange} />);
+    const sortableListDriver = SortableListDriver({
+      renderTree,
+      testID: 'sortableList'
+    });
+    expect(await sortableListDriver.exists()).toBeTruthy();
+    expect(onOrderChange).toHaveBeenCalledTimes(0);
+    const item4Driver = SortableListItemDriver({
+      renderTree,
+      testID: 'item4'
+    });
+    expect(await item4Driver.exists()).toBeTruthy();
+    await item4Driver.dragUp(3);
+    expect(onOrderChange).toHaveBeenCalledTimes(1);
+    expect(onOrderChange).toHaveBeenCalledWith([{
+      id: '0',
+      text: '0'
+    }, {
+      id: '4',
+      text: '4'
+    }, {
+      id: '1',
+      text: '1'
+    }, {
+      id: '2',
+      text: '2'
+    }, {
+      id: '3',
+      text: '3'
+    }], {
+      from: 4,
+      to: 1
+    });
+  });
+});