Merge branch 'master' into release

Author: lidord-wix

demo/src/screens/componentScreens/SortableListScreen.tsx

@@ -1,37 +1,69 @@
 import _ from 'lodash';
-import React, {useCallback} from 'react';
+import React, {useCallback, useState, useRef} from 'react';
 import {StyleSheet} from 'react-native';
-import {SortableList, View, TouchableOpacity, Text, Icon, Assets, Colors} from 'react-native-ui-lib';
+import {SortableList, View, TouchableOpacity, Text, Icon, Assets, Colors, Button} from 'react-native-ui-lib';
 import {renderHeader} from '../ExampleScreenPresenter';
 
 interface Item {
   originalIndex: number;
+  id: string;
 }
 
 const data = _.times(30, index => {
   return {
-    originalIndex: index
+    originalIndex: index,
+    id: `${index}`
   };
 });
 
 const SortableListScreen = () => {
+  const [items, setItems] = useState<Item[]>(data);
+  const [selectedItems, setSelectedItems] = useState<Item[]>([]);
+  const [removedItems, setRemovedItems] = useState<Item[]>([]);
+  const orderedItems = useRef<Item[]>(data);
+
+  const toggleItemSelection = useCallback((item: Item) => {
+    if (selectedItems.includes(item)) {
+      setSelectedItems(selectedItems.filter(selectedItem => ![item.id].includes(selectedItem.id)));
+    } else {
+      setSelectedItems(selectedItems.concat(item));
+    }
+  }, [selectedItems, setSelectedItems]);
+
+  const addItem = useCallback(() => {
+    if (removedItems.length > 0) {
+      orderedItems.current = orderedItems.current.concat(removedItems[0]);
+      setItems(orderedItems.current);
+      setRemovedItems(removedItems.slice(1));
+    }
+  }, [removedItems, setItems, setRemovedItems]);
+
+  const removeSelectedItems = useCallback(() => {
+    setRemovedItems(removedItems.concat(selectedItems));
+    setSelectedItems([]);
+    orderedItems.current = orderedItems.current.filter(item => !selectedItems.includes(item));
+    setItems(orderedItems.current);
+  }, [setRemovedItems, removedItems, selectedItems, setItems, setSelectedItems]);
+
   const keyExtractor = useCallback((item: Item) => {
-    return `${item.originalIndex}`;
+    return `${item.id}`;
   }, []);
 
   const onOrderChange = useCallback((newData: Item[]) => {
     console.log('New order:', newData);
+    orderedItems.current = newData;
   }, []);
 
   const renderItem = useCallback(({item, index: _index}: {item: Item; index: number}) => {
+    const isSelected = selectedItems.includes(item);
     return (
       <TouchableOpacity
-        style={styles.itemContainer}
-        onPress={() => console.log('Original index is', item.originalIndex)}
+        style={[styles.itemContainer, isSelected && styles.selectedItemContainer]}
+        onPress={() => toggleItemSelection(item)}
         // overriding the BG color to anything other than white will cause Android's elevation to fail
         // backgroundColor={Colors.red30}
         centerV
-        marginH-page
+        paddingH-page
       >
         <View flex row spread centerV>
           <Icon source={Assets.icons.demo.drag} tintColor={Colors.$iconDisabled}/>
@@ -42,13 +74,17 @@ const SortableListScreen = () => {
         </View>
       </TouchableOpacity>
     );
-  }, []);
+  }, [selectedItems, toggleItemSelection]);
 
   return (
     <View flex bg-$backgroundDefault>
       {renderHeader('Sortable List', {'margin-10': true})}
+      <View row center marginB-s2>
+        <Button label="Add Item" size={Button.sizes.xSmall} disabled={removedItems.length === 0} onPress={addItem}/>
+        <Button label="Remove Items" size={Button.sizes.xSmall} disabled={selectedItems.length === 0} marginL-s3 onPress={removeSelectedItems}/>
+      </View>
       <View flex useSafeArea>
-        <SortableList data={data} renderItem={renderItem} keyExtractor={keyExtractor} onOrderChange={onOrderChange}/>
+        <SortableList data={items} renderItem={renderItem} keyExtractor={keyExtractor} onOrderChange={onOrderChange}/>
       </View>
     </View>
   );
@@ -60,5 +96,9 @@ const styles = StyleSheet.create({
     height: 52,
     borderColor: Colors.$outlineDefault,
     borderBottomWidth: 1
+  },
+  selectedItemContainer: {
+    borderLeftColor: Colors.$outlinePrimary,
+    borderLeftWidth: 5
   }
 });

demo/src/screens/componentScreens/TimelineScreen.tsx

@@ -24,6 +24,15 @@ const TimelineScreen = () => {
     setExpand(!expand);
   }, [expand]);
 
+  const renderExtraContent = () => {
+    return (
+      <View style={{flex: 1, marginTop: 10, backgroundColor: Colors.grey70}}>
+        <Text>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry</Text>
+      </View>
+    );
+  };
+
   const renderContent = (index = 0, anchorRef?: any) => {
     return (
       <Card padding-page>
@@ -32,8 +41,10 @@ const TimelineScreen = () => {
         </Text>
         <View marginT-5 padding-8 bg-grey70 br30>
           <Text>{contents[index]}</Text>
-          <Button marginT-10 size={'small'} label={!expand ? 'Expand' : 'Close'} onPress={onPressExpand}/>
-          {expand && <View style={{height: 100, marginTop: 10, backgroundColor: 'red'}}/>}
+          <View right>
+            <Button marginT-10 link size={'small'} label={!expand ? 'More info' : 'Close'} onPress={onPressExpand}/>
+          </View>
+          {expand && renderExtraContent()}
         </View>
       </Card>
     );
@@ -86,11 +97,11 @@ const TimelineScreen = () => {
           topLine={{state: Timeline.states.ERROR}}
           bottomLine={{
             type: Timeline.lineTypes.DASHED,
-            color: Colors.orange40
+            color: Colors.purple30
           }}
           point={{
             type: Timeline.pointTypes.OUTLINE,
-            color: Colors.orange40,
+            color: Colors.purple30,
             icon: Assets.icons.demo.camera
           }}
         >
@@ -99,7 +110,7 @@ const TimelineScreen = () => {
         <Timeline
           topLine={{
             type: Timeline.lineTypes.DASHED,
-            color: Colors.orange40
+            color: Colors.purple30
           }}
           bottomLine={{
             state: Timeline.states.NEXT,

lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilib-native",
-  "version": "3.0.7",
+  "version": "3.0.8",
   "homepage": "https://github.com/wix/react-native-ui-lib",
   "description": "uilib native components (separated from js components)",
   "main": "components/index.js",

package.json

@@ -88,6 +88,7 @@
     "jest": "^26.6.3",
     "metro-react-native-babel-preset": "^0.66.2",
     "mocha": "^5.0.0",
+    "object-hash": "^3.0.0",
     "prettier-eslint": "12.0.0",
     "react": "17.0.2",
     "react-autobind": "^1.0.6",

src/components/button/Button.driver.ts

@@ -1,30 +1,36 @@
-import _ from 'lodash';
-import {fireEvent, RenderAPI} from '@testing-library/react-native';
-import {ReactTestInstance} from 'react-test-renderer';
-import {TextDriver} from '../text/Text.driver';
 import {ImageDriver} from '../image/Image.driver';
+import {ComponentDriver, ComponentDriverArgs} from '../../testkit/Component.driver';
+import {TextDriver} from '../text/Text.driver';
+
+/**
+ * Please run clear after each test
+ * */
+export class ButtonDriver extends ComponentDriver {
+  private readonly labelDriver: TextDriver;
+  private readonly iconDriver: ImageDriver;
+
+  constructor(componentDriverArgs: ComponentDriverArgs) {
+    super(componentDriverArgs);
+
+    this.labelDriver = new TextDriver({...componentDriverArgs, testID: `${this.testID}.label`});
+    this.iconDriver = new ImageDriver({...componentDriverArgs, testID: `${this.testID}.icon`});
+  }
+
+  isPressable = async () => {
+    if (this.exists()) {
+      return typeof (await this.getElementProps()).onPress === 'function';
+    } else {
+      console.warn(`TextDriver: cannot click because testID:${this.testID} were not found`);
+      return null;
+    }
+  }
+
+  // label
+  getLabelRootElement = () => this.labelDriver.getElement();
+  isLabelExists = () => this.labelDriver.exists();
+  getLabelContent = () => this.labelDriver.getTextContent();
+  // icon
+  getIconElement = () => this.iconDriver.getElement();
+  isIconExists = () => this.iconDriver.exists()
 
-export const ButtonDriver = async ({wrapperComponent, testID}: {wrapperComponent: RenderAPI; testID: string}) => {
-  const button: ReactTestInstance | null = await wrapperComponent.queryByTestId(testID);
-  const label = await TextDriver({wrapperComponent, testID: `${testID}.label`});
-  const icon = await ImageDriver({wrapperComponent, testID: `${testID}.icon`});
-  return {
-    exists: () => !!button,
-    getRootElement: () => button,
-    isClickable: () => !_.get(button, 'props.accessibilityState.disabled'),
-    click: () => {
-      if (button) {
-        fireEvent.press(button);
-      } else {
-        console.warn(`ButtonDriver: cannot click because testID:${testID} were not found`);
-      }
-    },
-    // label
-    getLabelRootElement: () => label.getRootElement(),
-    isLabelExists: () => label.exists(),
-    getLabelContent: () => label.getTextContent(),
-    // icon
-    getIconRootElement: () => icon.getRootElement(),
-    isIconExists: () => icon.exists()
-  };
-};
+}