react-native-ui-lib 7.46.2-snapshot.7314 → 7.46.2-snapshot.7316

package/src/components/panningViews/panListenerView.js

@@ -0,0 +1,155 @@
+import _isUndefined from "lodash/isUndefined";
+import React, { PureComponent } from 'react';
+import { PanResponder } from 'react-native';
+import asPanViewConsumer from "./asPanViewConsumer";
+import PanningProvider from "./panningProvider";
+import View from "../view";
+const DEFAULT_DIRECTIONS = [PanningProvider.Directions.UP, PanningProvider.Directions.DOWN, PanningProvider.Directions.LEFT, PanningProvider.Directions.RIGHT];
+const DEFAULT_PAN_SENSITIVITY = 5;
+const DEFAULT_SWIPE_VELOCITY = 1.8;
+
+/**
+ * @description: PanListenerView component created to making listening to swipe and drag events easier
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/PanListenerScreen.tsx
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/PanListenerView/PanListenerView.gif?raw=true
+ */
+class PanListenerView extends PureComponent {
+  static displayName = 'IGNORE';
+  static defaultProps = {
+    directions: DEFAULT_DIRECTIONS,
+    panSensitivity: DEFAULT_PAN_SENSITIVITY,
+    swipeVelocitySensitivity: DEFAULT_SWIPE_VELOCITY
+  };
+  constructor(props) {
+    super(props);
+    const {
+      isClickable
+    } = props;
+    this.panResponder = PanResponder.create({
+      onStartShouldSetPanResponder: isClickable ? this.shouldPan : this.yes,
+      onMoveShouldSetPanResponder: this.shouldPan,
+      onStartShouldSetPanResponderCapture: this.no,
+      onMoveShouldSetPanResponderCapture: this.no,
+      onPanResponderGrant: this.handlePanStart,
+      onPanResponderMove: this.handlePanMove,
+      onPanResponderRelease: this.handlePanRelease,
+      onPanResponderTerminate: this.handlePanTerminate
+    });
+  }
+  yes = () => {
+    return true;
+  };
+  no = () => {
+    return false;
+  };
+  shouldPan = (_e, gestureState) => {
+    // return true if user is swiping, return false if it's a single click
+    const {
+      dy,
+      dx
+    } = gestureState;
+    const {
+      directions,
+      panSensitivity = DEFAULT_PAN_SENSITIVITY
+    } = this.props;
+    return Boolean(directions && (directions.includes(PanningProvider.Directions.UP) && dy < -panSensitivity || directions.includes(PanningProvider.Directions.DOWN) && dy > panSensitivity || directions.includes(PanningProvider.Directions.LEFT) && dx < -panSensitivity || directions.includes(PanningProvider.Directions.RIGHT) && dx > panSensitivity));
+  };
+  handlePanStart = () => {
+    this.props.onPanStart?.();
+    this.props.context?.onPanStart?.();
+  };
+  getSwipeDirection = ({
+    vx,
+    vy
+  }) => {
+    const {
+      swipeVelocitySensitivity = DEFAULT_SWIPE_VELOCITY
+    } = this.props;
+    return this.getDirectionsOverSensitivity(vx, vy, swipeVelocitySensitivity);
+  };
+  getDragDirection = ({
+    dx,
+    dy
+  }) => {
+    return this.getDirectionsOverSensitivity(dx, dy, 0);
+  };
+  getDirectionsOverSensitivity = (x, y, sensitivity) => {
+    const {
+      directions = DEFAULT_DIRECTIONS
+    } = this.props;
+    const selectedDirections = {};
+    const selectedAmounts = {};
+    if (directions.includes(PanningProvider.Directions.LEFT) && x < -sensitivity) {
+      selectedDirections.x = PanningProvider.Directions.LEFT;
+      selectedAmounts.x = x;
+    } else if (directions.includes(PanningProvider.Directions.RIGHT) && x > sensitivity) {
+      selectedDirections.x = PanningProvider.Directions.RIGHT;
+      selectedAmounts.x = x;
+    }
+    if (directions.includes(PanningProvider.Directions.UP) && y < -sensitivity) {
+      selectedDirections.y = PanningProvider.Directions.UP;
+      selectedAmounts.y = y;
+    } else if (directions.includes(PanningProvider.Directions.DOWN) && y > sensitivity) {
+      selectedDirections.y = PanningProvider.Directions.DOWN;
+      selectedAmounts.y = y;
+    }
+    return {
+      selectedDirections,
+      selectedAmounts
+    };
+  };
+  panResultHasValue = panResult => {
+    return Boolean(panResult && (panResult.selectedDirections.x || panResult.selectedDirections.y));
+  };
+  handlePanMove = (_e, gestureState) => {
+    const {
+      onSwipe,
+      onDrag,
+      context
+    } = this.props;
+    const hasSwipe = !_isUndefined(onSwipe);
+    const hasDrag = !_isUndefined(onDrag);
+    const hasContext = !_isUndefined(context);
+    let panResult;
+    if (hasSwipe || hasContext) {
+      panResult = this.getSwipeDirection(gestureState);
+    }
+    if (this.panResultHasValue(panResult)) {
+      // @ts-ignore
+      const data = {
+        directions: panResult.selectedDirections,
+        velocities: panResult.selectedAmounts
+      };
+      this.props.onSwipe?.(data);
+      context?.onSwipe?.(data);
+    } else if (hasDrag || hasContext) {
+      panResult = this.getDragDirection(gestureState);
+      if (this.panResultHasValue(panResult)) {
+        const data = {
+          directions: panResult.selectedDirections,
+          deltas: panResult.selectedAmounts
+        };
+        this.props.onDrag?.(data);
+        context?.onDrag?.(data);
+      }
+    }
+  };
+  handlePanRelease = () => {
+    this.props.onPanRelease?.();
+    this.props.context?.onPanRelease?.();
+  };
+  handlePanTerminate = () => {
+    this.props.onPanTerminated?.();
+    this.props.context?.onPanTerminated?.();
+  };
+  render() {
+    const {
+      children,
+      ...others
+    } = this.props;
+    return <View {...others} {...this.panResponder.panHandlers}>
+        {children}
+      </View>;
+  }
+}
+export default asPanViewConsumer(PanListenerView);

package/src/components/panningViews/panResponderView.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ViewProps } from '../view';
+import { PanLocationProps } from './panningProvider';
+export interface PanResponderViewProps extends ViewProps {
+    /**
+     * Will be called with the current location ({left, top}) when the pan has ended
+     */
+    onPanLocationChanged?: (location: PanLocationProps) => void;
+    /**
+     * Ignore panning events while this is true
+     */
+    ignorePanning?: boolean;
+    /**
+     * Allow the view to be animated (send animation via style; default is false)
+     */
+    isAnimated?: boolean;
+}
+declare const _default: React.ComponentClass<PanResponderViewProps, any>;
+export default _default;

package/src/components/panningViews/panResponderView.js

@@ -0,0 +1,79 @@
+import React, { PureComponent } from 'react';
+import View from "../view";
+import asPanViewConsumer from "./asPanViewConsumer";
+/**
+ * @description: panResponderView component created to making listening to swipe and drag events easier.
+ * @notes: Has to be used as a child of a PanningProvider that also has a PanListenerView.
+ *         The PanListenerView is the one that sends the drag\swipe events.
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/PanResponderScreen.tsx
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/PanResponderView/PanResponderView.gif?raw=true
+ */
+class PanResponderView extends PureComponent {
+  static displayName = 'IGNORE';
+  static defaultProps = {
+    isAnimated: false
+  };
+  initialLeft = 0;
+  initialTop = 0;
+  ref = React.createRef();
+  componentDidMount() {
+    this.setNativeProps(this.initialLeft, this.initialTop);
+  }
+  componentDidUpdate(prevProps) {
+    const {
+      ignorePanning
+    } = this.props;
+    const {
+      isPanning,
+      dragDeltas
+    } = this.props.context;
+    const {
+      isPanning: prevIsPanning,
+      dragDeltas: prevDragDeltas
+    } = prevProps.context;
+    if (!ignorePanning && !isPanning && prevIsPanning) {
+      this.onPanEnd();
+    }
+    if (!ignorePanning && isPanning && (dragDeltas.x || dragDeltas.y) && (dragDeltas.x !== prevDragDeltas.x || dragDeltas.y !== prevDragDeltas.y)) {
+      this.onDrag(dragDeltas);
+    }
+  }
+  onPanEnd() {
+    const location = {
+      left: this.left,
+      top: this.top
+    };
+    this.initialLeft = this.left || this.initialLeft;
+    this.initialTop = this.top || this.initialTop;
+    this.props.onPanLocationChanged?.(location);
+    //@ts-expect-error
+    this.props.context.onPanLocationChanged?.(location);
+  }
+  onDrag(deltas) {
+    const left = this.initialLeft + (deltas.x ? Math.round(deltas.x) : 0);
+    const top = this.initialTop + (deltas.y ? Math.round(deltas.y) : 0);
+    this.setNativeProps(left, top);
+  }
+  setNativeProps(left, top) {
+    if (this.ref.current) {
+      this.ref.current?.setNativeProps?.({
+        style: {
+          left,
+          top
+        }
+      });
+      this.left = left;
+      this.top = top;
+    }
+  }
+  render() {
+    const {
+      isAnimated,
+      ...others
+    } = this.props;
+    return <View animated={isAnimated} ref={this.ref} pointerEvents={'box-none'} {...others}>
+        {this.props.children}
+      </View>;
+  }
+}
+export default asPanViewConsumer(PanResponderView);

package/src/components/panningViews/panningContext.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const PanningContext: React.Context<{}>;
+export default PanningContext;

package/src/components/panningViews/panningContext.js

@@ -0,0 +1,4 @@
+import React from 'react';
+const PanningContext = React.createContext({});
+PanningContext.displayName = 'IGNORE';
+export default PanningContext;

package/src/components/panningViews/panningProvider.d.ts

@@ -0,0 +1,73 @@
+import React, { Component } from 'react';
+export declare enum PanningDirectionsEnum {
+    UP = "up",
+    DOWN = "down",
+    LEFT = "left",
+    RIGHT = "right"
+}
+export type PanningDirectionsUnion = `${PanningDirectionsEnum}`;
+export type PanningDirections = PanningDirectionsEnum | PanningDirectionsUnion;
+export interface PanLocationProps {
+    left?: number;
+    top?: number;
+}
+export interface PanDirectionsProps {
+    x?: PanningDirections;
+    y?: PanningDirections;
+}
+export interface PanAmountsProps {
+    x?: number;
+    y?: number;
+}
+interface State {
+    isPanning: boolean;
+    wasTerminated: boolean;
+    dragDirections: PanDirectionsProps;
+    dragDeltas: PanAmountsProps;
+    swipeDirections: PanDirectionsProps;
+    swipeVelocities: PanAmountsProps;
+    panLocation: PanLocationProps;
+}
+/**
+ * @description: Wraps the panResponderView and panListenerView to provide a shared context
+ */
+export default class PanningProvider extends Component<any, State> {
+    static displayName: string;
+    static Directions: typeof PanningDirectionsEnum;
+    constructor(props: any);
+    getProviderContextValue: () => {
+        onPanStart: () => void;
+        onPanRelease: () => void;
+        onPanTerminated: () => void;
+        isPanning: boolean;
+        wasTerminated: boolean;
+        onDrag: ({ directions, deltas }: {
+            directions: PanDirectionsProps;
+            deltas: PanAmountsProps;
+        }) => void;
+        dragDirections: PanDirectionsProps;
+        dragDeltas: PanAmountsProps;
+        onSwipe: ({ directions, velocities }: {
+            directions: PanDirectionsProps;
+            velocities: PanAmountsProps;
+        }) => void;
+        swipeDirections: PanDirectionsProps;
+        swipeVelocities: PanAmountsProps;
+        onPanLocationChanged: (location: PanLocationProps) => void;
+        panLocation: PanLocationProps;
+    };
+    onPanStart: () => void;
+    onPanRelease: () => void;
+    onPanTerminated: () => void;
+    onDrag: ({ directions, deltas }: {
+        directions: PanDirectionsProps;
+        deltas: PanAmountsProps;
+    }) => void;
+    onSwipe: ({ directions, velocities }: {
+        directions: PanDirectionsProps;
+        velocities: PanAmountsProps;
+    }) => void;
+    onPanLocationChanged: (location: PanLocationProps) => void;
+    render(): React.JSX.Element;
+}
+export {};

package/src/components/panningViews/panningProvider.js

@@ -0,0 +1,101 @@
+import React, { Component } from 'react';
+import PanningContext from "./panningContext";
+export let PanningDirectionsEnum = /*#__PURE__*/function (PanningDirectionsEnum) {
+  PanningDirectionsEnum["UP"] = "up";
+  PanningDirectionsEnum["DOWN"] = "down";
+  PanningDirectionsEnum["LEFT"] = "left";
+  PanningDirectionsEnum["RIGHT"] = "right";
+  return PanningDirectionsEnum;
+}({});
+/**
+ * @description: Wraps the panResponderView and panListenerView to provide a shared context
+ */
+export default class PanningProvider extends Component {
+  static displayName = 'IGNORE';
+  static Directions = PanningDirectionsEnum;
+  constructor(props) {
+    super(props);
+    this.state = {
+      isPanning: false,
+      wasTerminated: false,
+      dragDirections: {},
+      dragDeltas: {},
+      swipeDirections: {},
+      swipeVelocities: {},
+      panLocation: {}
+    };
+  }
+  getProviderContextValue = () => {
+    const {
+      isPanning,
+      wasTerminated,
+      dragDirections,
+      dragDeltas,
+      swipeDirections,
+      swipeVelocities,
+      panLocation
+    } = this.state;
+    return {
+      onPanStart: this.onPanStart,
+      onPanRelease: this.onPanRelease,
+      onPanTerminated: this.onPanTerminated,
+      isPanning,
+      wasTerminated,
+      onDrag: this.onDrag,
+      dragDirections,
+      dragDeltas,
+      onSwipe: this.onSwipe,
+      swipeDirections,
+      swipeVelocities,
+      onPanLocationChanged: this.onPanLocationChanged,
+      panLocation
+    };
+  };
+  onPanStart = () => {
+    this.setState({
+      isPanning: true,
+      wasTerminated: false
+    });
+  };
+  onPanRelease = () => {
+    this.setState({
+      isPanning: false
+    });
+  };
+  onPanTerminated = () => {
+    this.setState({
+      isPanning: false,
+      wasTerminated: true
+    });
+  };
+  onDrag = ({
+    directions,
+    deltas
+  }) => {
+    this.setState({
+      dragDirections: directions,
+      dragDeltas: deltas,
+      swipeDirections: {},
+      swipeVelocities: {}
+    });
+  };
+  onSwipe = ({
+    directions,
+    velocities
+  }) => {
+    this.setState({
+      swipeDirections: directions,
+      swipeVelocities: velocities,
+      dragDirections: {},
+      dragDeltas: {}
+    });
+  };
+  onPanLocationChanged = location => {
+    this.setState({
+      panLocation: location
+    });
+  };
+  render() {
+    return <PanningContext.Provider value={this.getProviderContextValue()}>{this.props.children}</PanningContext.Provider>;
+  }
+}

package/src/components/picker/Picker.driver.new.d.ts

@@ -1,5 +1,5 @@
-import { ComponentDriverOptions, ComponentProps } from '../../testkit/new/Component.driver';
-export declare const PickerDriver: (props: ComponentProps, useDialog: boolean, options?: ComponentDriverOptions) => {
+import { ComponentProps } from '../../testkit/new/Component.driver';
+export declare const PickerDriver: (props: ComponentProps, useDialog: boolean) => {
     exists: () => boolean;
     getValue: () => string | undefined;
     open: () => void;

package/src/components/picker/Picker.driver.new.js

@@ -1,9 +1,9 @@
 import { TextFieldDriver } from "../textField/TextField.driver.new";
 import { ModalDriver } from "../modal/Modal.driver.new";
-import { DialogDriver } from "../dialog/Dialog.driver.new";
+import { DialogDriver } from "../../incubator/dialog/Dialog.driver.new";
 import { ButtonDriver } from "../button/Button.driver.new";
 import { ExpandableOverlayDriver } from "../../incubator/expandableOverlay/ExpandableOverlay.driver";
-export const PickerDriver = (props, useDialog, options) => {
+export const PickerDriver = (props, useDialog) => {
   const expandableOverlayDriver = ExpandableOverlayDriver({
     renderTree: props.renderTree,
     testID: props.testID
@@ -11,7 +11,7 @@ export const PickerDriver = (props, useDialog, options) => {
   const textFieldDriver = TextFieldDriver({
     renderTree: props.renderTree,
     testID: `${props.testID}.input`
-  }, options);
+  });
   const modalDriver = ModalDriver({
     renderTree: props.renderTree,
     testID: `${props.testID}.overlay`

package/src/components/picker/PickerItem.js

@@ -11,7 +11,7 @@ import View from "../view";
 import TouchableOpacity from "../touchableOpacity";
 import Image from "../image";
 import Text from "../text";
-import { isItemSelected } from "./PickerPresenter";
+import { getItemLabel, isItemSelected } from "./PickerPresenter";
 import PickerContext from "./PickerContext";
 /**
  * @description: Picker.Item, for configuring the Picker's selectable options
@@ -29,8 +29,14 @@ const PickerItem = props => {
     testID
   } = props;
   const context = useContext(PickerContext);
+  const {
+    migrate
+  } = context;
   const customRenderItem = props.renderItem || context.renderItem;
-  const isSelected = isItemSelected(value, context.value);
+  // @ts-expect-error TODO: fix after removing migrate prop completely
+  const itemValue = !migrate && typeof value === 'object' ? value?.value : value;
+  const isSelected = isItemSelected(itemValue, context.value);
+  const itemLabel = getItemLabel(label, value, props.getItemLabel || context.getItemLabel);
   const selectedCounter = context.selectionLimit && _isArray(context.value) && context.value?.length;
   const accessibilityProps = {
     accessibilityState: isSelected ? {
@@ -61,15 +67,23 @@ const PickerItem = props => {
     if (onPress && (await onPress(context.isMultiMode ? !isSelected : undefined, props)) === false) {
       return;
     }
-    context.onPress(value);
-  }, [value, context.onPress, onPress]);
+    if (migrate) {
+      context.onPress(value);
+    } else {
+      // @ts-expect-error TODO: fix after removing migrate prop completely
+      context.onPress(typeof value === 'object' || context.isMultiMode ? value : {
+        value,
+        label: itemLabel
+      });
+    }
+  }, [migrate, value, context.onPress, onPress]);
   const onSelectedLayout = useCallback((...args) => {
     _invoke(context, 'onSelectedLayout', ...args);
   }, []);
   const _renderItem = () => {
     return <View style={styles.container} flex row spread centerV>
         <Text numberOfLines={1} style={itemLabelStyle}>
-          {label}
+          {itemLabel}
         </Text>
         {selectedIndicator}
       </View>;
@@ -79,7 +93,7 @@ const PickerItem = props => {
       ...props,
       isSelected,
       isItemDisabled
-    }, label) : _renderItem()}
+    }, itemLabel) : _renderItem()}
     </TouchableOpacity>;
 };
 const styles = StyleSheet.create({

package/src/components/picker/PickerPresenter.d.ts

@@ -4,4 +4,5 @@ export declare function extractPickerItems(props: PickerProps): {
     label: any;
 }[];
 export declare function isItemSelected(childValue: PickerSingleValue, selectedValue?: PickerValue): boolean;
+export declare function getItemLabel(label: string, value: PickerValue, getItemLabel?: PickerProps['getItemLabel']): string | undefined;
 export declare function shouldFilterOut(searchValue: string, itemLabel?: string): boolean;

package/src/components/picker/PickerPresenter.js

@@ -1,5 +1,7 @@
 import _lowerCase from "lodash/lowerCase";
 import _includes from "lodash/includes";
+import _get from "lodash/get";
+import _isObject from "lodash/isObject";
 import _find from "lodash/find";
 import React from 'react';
 export function extractPickerItems(props) {
@@ -18,13 +20,33 @@ export function isItemSelected(childValue, selectedValue) {
   let isSelected = false;
   if (Array.isArray(selectedValue)) {
     isSelected = _find(selectedValue, v => {
-      return v === childValue;
+      // @ts-expect-error TODO: fix after removing migrate prop completely
+      return v === childValue || typeof v === 'object' && v?.value === childValue;
     }) !== undefined;
   } else {
     isSelected = childValue === selectedValue;
   }
   return isSelected;
 }
+
+// export function getItemValue(props) {
+//   if (_.isArray(props.value)) {
+//     return props.getItemValue ? _.map(props.value, item => props.getItemValue(item)) : _.map(props.value, 'value');
+//   } else if (!_.isObject(props.value)) {
+//     return props.value;
+//   }
+//   return _.invoke(props, 'getItemValue', props.value) || _.get(props.value, 'value');
+// }
+
+export function getItemLabel(label, value, getItemLabel) {
+  if (_isObject(value)) {
+    if (getItemLabel) {
+      return getItemLabel(value);
+    }
+    return _get(value, 'label');
+  }
+  return label;
+}
 export function shouldFilterOut(searchValue, itemLabel) {
   return !_includes(_lowerCase(itemLabel), _lowerCase(searchValue));
 }

package/src/components/picker/api/picker.api.json

@@ -11,6 +11,7 @@
     "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Picker/CustomPicker.gif?raw=true"
   ],
   "props": [
+    {"name": "migrate", "type": "boolean", "description": "Temporary prop required for migration to Picker's new API"},
     {"name": "value", "type": "string | number", "description": "Picker current value"},
     {
       "name": "onChange",

package/src/components/picker/api/pickerItem.api.json

@@ -13,6 +13,11 @@
     {"name": "value", "type": "string | number", "description": "Item's value"},
     {"name": "label", "type": "string", "description": "Item's label"},
     {"name": "labelStyle", "type": "ViewStyle", "description": "Item's label style"},
+    {
+      "name": "getItemLabel",
+      "type": "(value: string | number) => string",
+      "description": "Custom function for the item label"
+    },
     {"name": "isSelected", "type": "boolean", "description": "Is the item selected"},
     {"name": "selectedIcon", "type": "string", "description": "Pass to change the selected icon"},
     {"name": "selectedIconColor", "type": "ImageSource", "description": "Pass to change the selected icon color"},