react-native-ui-lib 7.46.3-snapshot.7341 → 7.46.3-snapshot.7342

package/src/components/panningViews/panGestureView.js

@@ -0,0 +1,156 @@
+import React, { Component } from 'react';
+import { PanResponder, Animated } from 'react-native';
+import { Constants, asBaseComponent } from "../../commons/new";
+export let GestureDirections = /*#__PURE__*/function (GestureDirections) {
+  GestureDirections["UP"] = "up";
+  GestureDirections["DOWN"] = "down";
+  return GestureDirections;
+}({});
+const SWIPE_VELOCITY = 1.8;
+const SPEED = 20;
+const BOUNCINESS = 6;
+/**
+ * @description: PanGestureView component for drag and swipe gestures (supports only vertical gestures at the moment)
+ */
+class PanGestureView extends Component {
+  static displayName = 'IGNORE';
+  static defaultProps = {
+    direction: GestureDirections.DOWN
+  };
+  static directions = GestureDirections;
+  constructor(props) {
+    super(props);
+    this.state = {
+      deltaY: new Animated.Value(0)
+    };
+    this.panResponder = PanResponder.create({
+      onMoveShouldSetPanResponder: this.handleMoveShouldSetPanResponder,
+      onPanResponderGrant: this.handlePanResponderGrant,
+      onPanResponderMove: this.handlePanResponderMove,
+      onPanResponderRelease: this.handlePanResponderEnd,
+      onPanResponderTerminate: this.handlePanResponderEnd
+    });
+  }
+  handleMoveShouldSetPanResponder = (_e, gestureState) => {
+    // return true if user is swiping, return false if it's a single click
+    const {
+      dy
+    } = gestureState;
+    return dy > 5 || dy < -5;
+  };
+  handlePanResponderGrant = () => {
+    this.swipe = false;
+  };
+  handlePanResponderMove = (_e, gestureState) => {
+    const {
+      direction
+    } = this.props;
+    let newValue = 0;
+
+    // VERTICAL
+    const up = direction === GestureDirections.UP;
+    const panDeltaY = gestureState.dy;
+    const panVelocityY = gestureState.vy;
+    if (Math.abs(panVelocityY) >= SWIPE_VELOCITY) {
+      if (up && panVelocityY < 0 || !up && panVelocityY > 0) {
+        // Swipe
+        this.swipe = true;
+      }
+    } else if (up && panDeltaY < 0 || !up && panDeltaY > 0) {
+      // Drag
+      newValue = panDeltaY;
+      this.animateDeltaY(Math.round(newValue));
+    }
+  };
+  handlePanResponderEnd = () => {
+    if (!this.swipe) {
+      const {
+        direction
+      } = this.props;
+
+      // VERTICAL
+      const up = direction === GestureDirections.UP;
+      const {
+        deltaY
+      } = this.state;
+      // @ts-ignore
+      const threshold = this.layout.height / 2;
+      // @ts-ignore
+      const endValue = Math.round(deltaY._value);
+      if (up && endValue <= -threshold || !up && endValue >= threshold) {
+        this.animateDismiss();
+      } else {
+        // back to initial position
+        this.animateDeltaY(0);
+      }
+    } else {
+      this.animateDismiss();
+    }
+  };
+  animateDeltaY(toValue) {
+    const {
+      deltaY
+    } = this.state;
+    Animated.spring(deltaY, {
+      toValue,
+      useNativeDriver: true,
+      speed: SPEED,
+      bounciness: BOUNCINESS
+    }).start();
+  }
+  animateDismiss() {
+    const {
+      direction
+    } = this.props;
+
+    // VERTICAL
+    const up = direction === GestureDirections.UP;
+    const {
+      deltaY
+    } = this.state;
+    // @ts-ignore
+    const newValue = up ? -this.layout.height - Constants.statusBarHeight : deltaY._value + Constants.screenHeight;
+    Animated.timing(deltaY, {
+      toValue: Math.round(newValue),
+      useNativeDriver: true,
+      duration: 280
+    }).start(this.onAnimatedFinished);
+  }
+  onAnimatedFinished = ({
+    finished
+  }) => {
+    if (finished) {
+      this.onDismiss();
+    }
+  };
+  onDismiss = () => {
+    this.initPositions();
+    this.props.onDismiss?.();
+  };
+  initPositions() {
+    this.setState({
+      deltaY: new Animated.Value(0)
+    });
+  }
+  onLayout = event => {
+    this.layout = event.nativeEvent.layout;
+  };
+  render() {
+    const {
+      style
+    } = this.props;
+
+    // VERTICAL
+    const {
+      deltaY
+    } = this.state;
+    return <Animated.View style={[style, {
+      transform: [{
+        translateY: deltaY
+      }]
+    }]} {...this.panResponder.panHandlers} onLayout={this.onLayout}>
+        {this.props.children}
+      </Animated.View>;
+  }
+}
+export default asBaseComponent(PanGestureView);

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import { PanningDirections, PanDirectionsProps, PanAmountsProps } from './panningProvider';
+import { ViewProps } from '../view';
+interface PanningProps {
+    /**
+     * This is were you will get notified when a drag occurs
+     * onDrag = ({directions, deltas}) => {...}
+     * directions - array of directions
+     * deltas - array of deltas (same length and order as directions)
+     * Both arrays will have {x, y} - if no x or y drag has occurred this value will be undefined
+     */
+    onDrag?: ({ directions, deltas }: ({
+        directions: PanDirectionsProps;
+        deltas: PanAmountsProps;
+    })) => void;
+    /**
+     * This is were you will get notified when a swipe occurs
+     * onSwipe = ({directions, velocities}) => {...}
+     * directions - array of directions
+     * velocities - array of velocities (same length and order as directions)
+     * Both arrays will have {x, y} - if no x or y swipe has occurred this value will be undefined
+     */
+    onSwipe?: ({ directions, velocities }: ({
+        directions: PanDirectionsProps;
+        velocities: PanAmountsProps;
+    })) => void;
+    /**
+     * This is were you will get notified when the pan starts
+     */
+    onPanStart?: () => void;
+    /**
+     * This is were you will get notified when the pan ends
+     * The user has released all touches while this view is the responder.
+     * This typically means a gesture has succeeded
+     */
+    onPanRelease?: () => void;
+    /**
+     * This is were you will get notified when the pan ends
+     * Another component has become the responder,
+     * so this gesture should be cancelled
+     */
+    onPanTerminated?: () => void;
+}
+export interface PanListenerViewProps extends PanningProps, ViewProps {
+    /**
+     * The directions of the allowed pan (default allows all directions)
+     * Types: UP, DOWN, LEFT and RIGHT (using PanningProvider.Directions.###)
+     */
+    directions?: PanningDirections[];
+    /**
+     * The sensitivity beyond which a pan is no longer considered a single click (default is 5)
+     */
+    panSensitivity?: number;
+    /**
+     * The sensitivity beyond which a pan is no longer considered a drag, but a swipe (default is 1.8)
+     * Note: a pan would have to occur (i.e. the panSensitivity has already been surpassed)
+     */
+    swipeVelocitySensitivity?: number;
+    /**
+     * Is there a view that is clickable (has onPress etc.) in the PanListenerView.
+     * This can affect the panability of this component.
+     */
+    isClickable?: boolean;
+}
+declare const _default: React.ComponentClass<PanListenerViewProps, any>;
+export default _default;

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`