react-native-ui-lib 7.46.3 → 8.0.0

package/src/components/panningViews/panListenerView.js

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

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

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

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

package/src/components/panningViews/panningContext.js

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

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

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

@@ -1,101 +0,0 @@
-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/sharedTransition/ShareTransitionContext.js

@@ -1,3 +0,0 @@
-import React from 'react';
-
-export default React.createContext({});

package/src/components/sharedTransition/SharedArea.js

@@ -1,153 +0,0 @@
-import React, {Component} from 'react';
-import {StyleSheet} from 'react-native';
-import Animated, {Easing as _Easing, EasingNode} from 'react-native-reanimated';
-import PropTypes from 'prop-types';
-import _ from 'lodash';
-import TouchableOpacity from '../touchableOpacity';
-import {Colors} from '../../style';
-import ShareTransitionContext from './ShareTransitionContext';
-
-const {interpolate: _interpolate, interpolateNode} = Animated;
-const Easing = EasingNode || _Easing;
-const interpolate = interpolateNode || _interpolate;
-
-// TODO: 2.17 breaks Android (at list the screen, the image is not shown) - move to incubator?
-class SharedArea extends Component {
-  displayName = 'IGNORE';
-  static propTypes = {
-    /**
-     * render details screen
-     */
-    renderDetails: PropTypes.elementType
-  };
-
-  static defaultProps = {
-    renderDetails: _.noop
-  };
-
-  state = {};
-  transition = new Animated.Value(0);
-
-  getProviderContextValue() {
-    const {showDetails} = this.state;
-    return {
-      setSharedData: this.setSharedData,
-      setSource: this.setSource,
-      setTarget: this.setTarget,
-      showDetails
-    };
-  }
-
-  getOverlayStyle() {
-    return {
-      ...StyleSheet.absoluteFillObject,
-      backgroundColor: Colors.white,
-      opacity: interpolate(this.transition, {inputRange: [0, 1], outputRange: [0, 1]})
-    };
-  }
-
-  getDetailsStyle() {
-    return {
-      ...StyleSheet.absoluteFillObject,
-      opacity: interpolate(this.transition, {inputRange: [90, 100], outputRange: [0, 1]})
-    };
-  }
-
-  getElementStyle() {
-    const {sourceLayout, targetLayout} = this.state;
-    if (sourceLayout && this.transition) {
-      return {
-        position: 'absolute',
-        width: interpolate(this.transition, {
-          inputRange: [0, 100],
-          outputRange: [sourceLayout.width, targetLayout.width]
-        }),
-        height: interpolate(this.transition, {
-          inputRange: [0, 100],
-          outputRange: [sourceLayout.height, targetLayout.height]
-        }),
-        top: interpolate(this.transition, {
-          inputRange: [0, 100],
-          outputRange: [sourceLayout.y, targetLayout.y]
-        }),
-        left: interpolate(this.transition, {
-          inputRange: [0, 100],
-          outputRange: [sourceLayout.x, targetLayout.x]
-        })
-      };
-    }
-  }
-
-  setSharedData = data => {
-    this.setState({
-      data
-    });
-  };
-
-  setSource = (sourceLayout, element) => {
-    this.setState({
-      sourceLayout,
-      element,
-      showDetails: true
-    },
-    () => {
-      this.startTransition(true);
-    });
-  };
-
-  setTarget = targetLayout => {
-    this.setState({
-      targetLayout
-    });
-  };
-
-  clearSource = () => {
-    this.startTransition(false, () => {
-      this.setState({
-        showDetails: false,
-        data: undefined,
-        sourceLayout: undefined,
-        element: undefined
-      });
-    });
-  };
-
-  startTransition(show, onAnimationEnd) {
-    Animated.timing(this.transition, {
-      toValue: show ? 100 : 0,
-      duration: 600,
-      easing: Easing.bezier(0.19, 1, 0.22, 1),
-      useNativeDriver: false
-    }).start(onAnimationEnd);
-  }
-
-  renderDetailsOverlay() {
-    const {renderDetails} = this.props;
-    const {data, element} = this.state;
-
-    return (
-      <Animated.View pointerEvents={data ? 'auto' : 'none'} style={this.getOverlayStyle()}>
-        <Animated.View pointerEvents="box-none" style={this.getDetailsStyle()}>
-          {renderDetails(data)}
-        </Animated.View>
-
-        <Animated.View style={this.getElementStyle()}>
-          <TouchableOpacity activeOpacity={1} onPress={this.clearSource} /* _style={[style]} */ style={{flex: 1}}>
-            {element}
-          </TouchableOpacity>
-        </Animated.View>
-      </Animated.View>
-    );
-  }
-
-  render() {
-    return (
-      <ShareTransitionContext.Provider value={this.getProviderContextValue()}>
-        {this.props.children}
-        {this.renderDetailsOverlay()}
-      </ShareTransitionContext.Provider>
-    );
-  }
-}
-
-export default SharedArea;

package/src/components/sharedTransition/SourceElement.js

@@ -1,44 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import TouchableOpacity from '../touchableOpacity';
-
-import ShareTransitionContext from './ShareTransitionContext';
-
-class SourceElement extends Component {
-  displayName = 'IGNORE';
-  static propTypes = {
-    /**
-     * Data to share between shared element and placeholder
-     */
-    data: PropTypes.object
-  };
-
-  state = {};
-
-  onPress = () => {
-    const {data} = this.props;
-    const {setSharedData, setSource} = this.context;
-    setSharedData(data);
-
-    this.element.measure((_x, _y, width, height, pageX, pageY) => {
-      const sourceLayout = {x: pageX, y: pageY, width, height};
-      setSource(sourceLayout, this.props.children);
-    });
-  };
-
-  setRef = ref => {
-    this.element = ref;
-  };
-
-  render() {
-    const {style, children} = this.props;
-    return (
-      <TouchableOpacity activeOpacity={0.9} style={style} ref={this.setRef} onPress={this.onPress}>
-        {children}
-      </TouchableOpacity>
-    );
-  }
-}
-
-SourceElement.contextType = ShareTransitionContext;
-export default SourceElement;

package/src/components/sharedTransition/TargetElement.js

@@ -1,38 +0,0 @@
-import React, {Component} from 'react';
-import TouchableOpacity from '../touchableOpacity';
-
-import ShareTransitionContext from './ShareTransitionContext';
-
-class TargetElement extends Component {
-  displayName = 'IGNORE';
-  state = {};
-
-  componentDidMount() {
-    const {setTarget} = this.context;
-
-    if (!this.targetLayout) {
-      setTimeout(() => {
-        this.element.measure((_x, _y, width, height, pageX, pageY) => {
-          this.targetLayout = {x: pageX, y: pageY, width, height};
-          setTarget(this.targetLayout);
-        });
-      });
-    }
-  }
-
-  setRef = ref => {
-    this.element = ref;
-  };
-
-  render() {
-    const {style, children} = this.props;
-    return (
-      <TouchableOpacity style={[style, {opacity: 0}]} ref={this.setRef}>
-        {children}
-      </TouchableOpacity>
-    );
-  }
-}
-
-TargetElement.contextType = ShareTransitionContext;
-export default TargetElement;

package/src/components/sharedTransition/index.js

@@ -1,9 +0,0 @@
-import Source from './SourceElement';
-import Target from './TargetElement';
-import Area from './SharedArea';
-
-export default {
-  Area,
-  Source,
-  Target
-};