react-native-ui-lib 7.46.3 → 8.0.0

package/src/components/panningViews/panDismissibleView.js

@@ -1,350 +0,0 @@
-import _isUndefined from "lodash/isUndefined";
-import _get from "lodash/get";
-import _noop from "lodash/noop";
-import React, { PureComponent } from 'react';
-import { Animated } from 'react-native';
-import { Constants } from "../../commons/new";
-import asPanViewConsumer from "./asPanViewConsumer";
-import PanningProvider from "./panningProvider";
-const DEFAULT_DIRECTIONS = [PanningProvider.Directions.UP, PanningProvider.Directions.DOWN, PanningProvider.Directions.LEFT, PanningProvider.Directions.RIGHT];
-const DEFAULT_SPEED = 20;
-const DEFAULT_BOUNCINESS = 6;
-const DEFAULT_DISMISS_ANIMATION_DURATION = 280;
-const DEFAULT_ANIMATION_OPTIONS = {
-  speed: DEFAULT_SPEED,
-  bounciness: DEFAULT_BOUNCINESS,
-  duration: DEFAULT_DISMISS_ANIMATION_DURATION
-};
-const MAXIMUM_DRAGS_AFTER_SWIPE = 2;
-/**
- * @description: PanDismissibleView 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.
- * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/PanDismissibleView/PanDismissibleView.gif?raw=true
- */
-class PanDismissibleView extends PureComponent {
-  static displayName = 'IGNORE';
-  static defaultProps = {
-    directions: DEFAULT_DIRECTIONS,
-    animationOptions: DEFAULT_ANIMATION_OPTIONS,
-    onDismiss: _noop,
-    allowDiagonalDismiss: false
-  };
-  shouldDismissAfterReset = false;
-  ref = React.createRef();
-  animTranslateX = new Animated.Value(0);
-  animTranslateY = new Animated.Value(0);
-  left = 0;
-  top = 0;
-  width = 0;
-  height = 0;
-  thresholdX = 0;
-  thresholdY = 0;
-  swipe = {};
-  counter = 0;
-  constructor(props) {
-    super(props);
-    this.state = {
-      isAnimating: false
-    };
-  }
-  componentDidUpdate(prevProps) {
-    const {
-      isAnimating
-    } = this.state;
-    const {
-      isPanning,
-      dragDeltas,
-      swipeDirections
-    } = this.props.context;
-    const {
-      isPanning: prevIsPanning,
-      dragDeltas: prevDragDeltas,
-      swipeDirections: prevSwipeDirections
-    } = prevProps.context;
-    if (isPanning !== prevIsPanning) {
-      if (isPanning && !isAnimating) {
-        // do not start a new pan if we're still animating
-        this.onPanStart();
-      } else {
-        this.onPanEnd();
-      }
-    }
-    if (isPanning && (dragDeltas.x || dragDeltas.y) && (dragDeltas.x !== prevDragDeltas.x || dragDeltas.y !== prevDragDeltas.y)) {
-      this.onDrag(dragDeltas);
-    }
-    if (isPanning && (swipeDirections.x || swipeDirections.y) && (swipeDirections.x !== prevSwipeDirections.x || swipeDirections.y !== prevSwipeDirections.y)) {
-      this.onSwipe(swipeDirections);
-    }
-  }
-  onLayout = event => {
-    if (this.height === 0) {
-      const layout = event.nativeEvent.layout;
-      const {
-        threshold
-      } = this.props;
-      this.height = layout.height;
-      this.thresholdY = _get(threshold, 'y', layout.height / 2);
-      this.width = layout.width;
-      this.thresholdX = _get(threshold, 'x', layout.width / 2);
-      this.initPositions();
-    }
-  };
-  initPositions = (extraDataForSetState, runAfterSetState) => {
-    this.setNativeProps(0, 0);
-    this.animTranslateX = new Animated.Value(0);
-    this.animTranslateY = new Animated.Value(0);
-    this.setState({
-      ...extraDataForSetState
-    }, runAfterSetState);
-  };
-  onPanStart = () => {
-    this.swipe = {};
-    this.counter = 0;
-  };
-  onDrag = deltas => {
-    const left = deltas.x ? Math.round(deltas.x) : 0;
-    const top = deltas.y ? Math.round(deltas.y) : 0;
-    this.setNativeProps(left, top);
-    if (this.swipe.x || this.swipe.y) {
-      if (this.counter < MAXIMUM_DRAGS_AFTER_SWIPE) {
-        this.counter += 1;
-      } else {
-        this.swipe = {};
-      }
-    }
-  };
-  setNativeProps = (left, top) => {
-    if (this.ref.current) {
-      this.ref.current?.setNativeProps?.({
-        style: {
-          left,
-          top
-        }
-      });
-      this.left = left;
-      this.top = top;
-    }
-  };
-  onSwipe = swipeDirections => {
-    this.swipe = swipeDirections;
-  };
-  onPanEnd = () => {
-    const {
-      directions = DEFAULT_DIRECTIONS
-    } = this.props;
-    if (this.swipe.x || this.swipe.y) {
-      const {
-        isRight,
-        isDown
-      } = this.getDismissAnimationDirection();
-      this._animateDismiss(isRight, isDown);
-    } else {
-      const endValue = {
-        x: Math.round(this.left),
-        y: Math.round(this.top)
-      };
-      if (directions.includes(PanningProvider.Directions.LEFT) && endValue.x <= -this.thresholdX || directions.includes(PanningProvider.Directions.RIGHT) && endValue.x >= this.thresholdX || directions.includes(PanningProvider.Directions.UP) && endValue.y <= -this.thresholdY || directions.includes(PanningProvider.Directions.DOWN) && endValue.y >= this.thresholdY) {
-        const {
-          isRight,
-          isDown
-        } = this.getDismissAnimationDirection();
-        this._animateDismiss(isRight, isDown);
-      } else {
-        this.resetPosition();
-      }
-    }
-  };
-  resetPosition = () => {
-    const {
-      animationOptions
-    } = this.props;
-    const {
-      speed,
-      bounciness
-    } = animationOptions || DEFAULT_ANIMATION_OPTIONS;
-    const toX = -this.left;
-    const toY = -this.top;
-    const animations = [];
-    if (!_isUndefined(toX)) {
-      animations.push(Animated.spring(this.animTranslateX, {
-        toValue: Math.round(toX),
-        useNativeDriver: true,
-        speed,
-        bounciness
-      }));
-    }
-    if (!_isUndefined(toY)) {
-      animations.push(Animated.spring(this.animTranslateY, {
-        toValue: Math.round(toY),
-        useNativeDriver: true,
-        speed,
-        bounciness
-      }));
-    }
-    this.setState({
-      isAnimating: true
-    }, () => {
-      Animated.parallel(animations).start(this.onResetPositionFinished);
-    });
-  };
-  onResetPositionFinished = () => {
-    const runAfterSetState = this.shouldDismissAfterReset ? this.animateDismiss : undefined;
-    this.shouldDismissAfterReset = false;
-    this.initPositions({
-      isAnimating: false
-    }, runAfterSetState);
-  };
-  getDismissAnimationDirection = () => {
-    const {
-      allowDiagonalDismiss
-    } = this.props;
-    const {
-      swipeDirections,
-      swipeVelocities,
-      dragDirections,
-      dragDeltas
-    } = this.props.context;
-    const hasHorizontalSwipe = !_isUndefined(swipeDirections.x);
-    const hasVerticalSwipe = !_isUndefined(swipeDirections.y);
-    let isRight;
-    let isDown;
-    if (hasHorizontalSwipe || hasVerticalSwipe) {
-      if (!allowDiagonalDismiss && hasHorizontalSwipe && hasVerticalSwipe) {
-        // @ts-ignore
-        if (Math.abs(swipeVelocities.y) > Math.abs(swipeVelocities.x)) {
-          isDown = swipeDirections.y === PanningProvider.Directions.DOWN;
-        } else {
-          isRight = swipeDirections.x === PanningProvider.Directions.RIGHT;
-        }
-        return {
-          isRight,
-          isDown
-        };
-      }
-      if (hasHorizontalSwipe) {
-        isRight = swipeDirections.x === PanningProvider.Directions.RIGHT;
-      }
-      if (hasVerticalSwipe) {
-        isDown = swipeDirections.y === PanningProvider.Directions.DOWN;
-      }
-    } else {
-      // got here from a drag beyond threshold
-      const hasHorizontalDrag = !_isUndefined(dragDirections.x);
-      const hasVerticalDrag = !_isUndefined(dragDirections.y);
-      if (!allowDiagonalDismiss && hasHorizontalDrag && hasVerticalDrag) {
-        // @ts-ignore
-        if (Math.abs(dragDeltas.y) > Math.abs(dragDeltas.x)) {
-          isDown = dragDirections.y === PanningProvider.Directions.DOWN;
-        } else {
-          isRight = dragDirections.x === PanningProvider.Directions.RIGHT;
-        }
-        return {
-          isRight,
-          isDown
-        };
-      }
-      if (hasHorizontalDrag) {
-        isRight = dragDirections.x === PanningProvider.Directions.RIGHT;
-      }
-      if (hasVerticalDrag) {
-        isDown = dragDirections.y === PanningProvider.Directions.DOWN;
-      }
-    }
-    return {
-      isRight,
-      isDown
-    };
-  };
-
-  // Send undefined to not animate in the horizontal\vertical direction
-  // isRight === true --> animate to the right
-  // isRight === false --> animate to the left
-  // isDown === true --> animate to the bottom
-  // isDown === false --> animate to the top
-  animateDismiss = () => {
-    const {
-      isAnimating
-    } = this.state;
-    if (isAnimating) {
-      this.shouldDismissAfterReset = true;
-    } else {
-      const {
-        directions = []
-      } = this.props;
-      const hasUp = directions.includes(PanningProvider.Directions.UP);
-      const hasRight = directions.includes(PanningProvider.Directions.RIGHT);
-      const hasLeft = directions.includes(PanningProvider.Directions.LEFT);
-      const hasDown = !hasUp && !hasLeft && !hasRight; // default
-      const verticalDismiss = hasDown ? true : hasUp ? false : undefined;
-      const horizontalDismiss = hasRight ? true : hasLeft ? false : undefined;
-      this._animateDismiss(horizontalDismiss, verticalDismiss);
-    }
-  };
-  _animateDismiss = (isRight, isDown) => {
-    const {
-      animationOptions
-    } = this.props;
-    const {
-      duration
-    } = animationOptions || DEFAULT_ANIMATION_OPTIONS;
-    const animations = [];
-    let toX;
-    let toY;
-    if (!_isUndefined(isRight)) {
-      const maxSize = Constants.screenWidth + this.width;
-      toX = isRight ? maxSize : -maxSize;
-    }
-    if (!_isUndefined(isDown)) {
-      const maxSize = Constants.screenHeight + this.height;
-      toY = isDown ? maxSize : -maxSize;
-    }
-    if (!_isUndefined(toX)) {
-      animations.push(Animated.timing(this.animTranslateX, {
-        toValue: Math.round(toX),
-        useNativeDriver: true,
-        duration
-      }));
-    }
-    if (!_isUndefined(toY)) {
-      animations.push(Animated.timing(this.animTranslateY, {
-        toValue: Math.round(toY),
-        useNativeDriver: true,
-        duration
-      }));
-    }
-    this.setState({
-      isAnimating: true
-    }, () => {
-      Animated.parallel(animations).start(this.onDismissAnimationFinished);
-    });
-  };
-  onDismissAnimationFinished = ({
-    finished
-  }) => {
-    if (finished) {
-      this.props.onDismiss?.();
-    }
-  };
-  render() {
-    const {
-      style
-    } = this.props;
-    const {
-      isAnimating
-    } = this.state;
-    const transform = isAnimating ? [{
-      translateX: this.animTranslateX
-    }, {
-      translateY: this.animTranslateY
-    }] : [];
-    return <Animated.View
-    // @ts-ignore
-    ref={this.ref} style={[style, {
-      transform
-    }]} onLayout={this.onLayout}>
-        {this.props.children}
-      </Animated.View>;
-  }
-}
-export default asPanViewConsumer(PanDismissibleView);

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

@@ -1,23 +0,0 @@
-import React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-export declare enum GestureDirections {
-    UP = "up",
-    DOWN = "down"
-}
-export interface PanGestureViewProps {
-    /**
-     * Additional styling
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * onDismiss callback
-     */
-    onDismiss?: () => void;
-    /**
-     * The direction of the allowed pan (default is down)
-     */
-    direction?: GestureDirections | `${GestureDirections}`;
-    children?: React.ReactNode;
-}
-declare const _default: React.ForwardRefExoticComponent<PanGestureViewProps & React.RefAttributes<any>>;
-export default _default;

package/src/components/panningViews/panGestureView.js

@@ -1,156 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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;