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

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
-};

package/src/components/tabController/useScrollToItem.d.ts

@@ -1,79 +0,0 @@
-import { RefObject } from 'react';
-import { LayoutChangeEvent } from 'react-native';
-import { ScrollToSupportedViews, ScrollToResultProps } from 'hooks';
-export declare enum OffsetType {
-    CENTER = "CENTER",
-    DYNAMIC = "DYNAMIC",
-    LEFT = "LEFT",
-    RIGHT = "RIGHT"
-}
-export type ScrollToItemProps<T extends ScrollToSupportedViews> = {
-    scrollViewRef?: RefObject<T>;
-    /**
-     * The number of items
-     */
-    itemsCount: number;
-    /**
-     * The selected item's index
-     */
-    selectedIndex?: number;
-    /**
-     * The container width, should update on orientation change
-     */
-    containerWidth: number;
-    /**
-     * Where would the item be located (default to CENTER)
-     */
-    offsetType?: OffsetType | `${OffsetType}`;
-    /**
-     * Add a margin to the offset (default to true)
-     * This gives a better UX
-     * Not relevant to OffsetType.CENTER
-     */
-    addOffsetMargin?: boolean;
-    /**
-     * How much space (padding \ margin) is there on the left\right of the items
-     */
-    outerSpacing?: number;
-    /**
-     * How much space (padding \ margin) is there between each item
-     */
-    innerSpacing?: number;
-};
-export type ScrollToItemResultProps<T extends ScrollToSupportedViews> = Pick<ScrollToResultProps<T>, 'scrollViewRef'> & {
-    /**
-     * This should be called by each ot the items' onLayout
-     */
-    onItemLayout: (event: LayoutChangeEvent, index: number) => void;
-    /**
-     * The items' width as share animated value
-     */
-    itemsWidthsAnimated: any;
-    /**
-     * The items' offsets as share animated value
-     */
-    itemsOffsetsAnimated: any;
-    /**
-     * Use in order to focus the item with the specified index (use when the selectedIndex is not changed)
-     */
-    focusIndex: (index: number, animated?: boolean) => void;
-    /**
-     * Use in order to reset the data.
-     */
-    reset: () => void;
-    /**
-     * onContentSizeChange callback (should be set to your onContentSizeChange).
-     * Needed for RTL support on Android.
-     */
-    onContentSizeChange: (contentWidth: number, contentHeight: number) => void;
-    /**
-     * onLayout callback (should be set to your onLayout).
-     * Needed for RTL support on Android.
-     */
-    onLayout: (event: LayoutChangeEvent) => void;
-};
-declare const useScrollToItem: {
-    <T extends ScrollToSupportedViews>(props: ScrollToItemProps<T>): ScrollToItemResultProps<T>;
-    offsetType: typeof OffsetType;
-};
-export default useScrollToItem;

package/src/components/tabController/useScrollToItem.js

@@ -1,159 +0,0 @@
-import _isUndefined from "lodash/isUndefined";
-import _includes from "lodash/includes";
-import _isEmpty from "lodash/isEmpty";
-import _times from "lodash/times";
-import { useState, useCallback, useEffect, useRef } from 'react';
-import { useSharedValue } from 'react-native-reanimated';
-import { useScrollTo } from "../../hooks";
-import { Constants } from "../../commons/new";
-const FIX_RTL = Constants.isRTL;
-export let OffsetType = /*#__PURE__*/function (OffsetType) {
-  OffsetType["CENTER"] = "CENTER";
-  OffsetType["DYNAMIC"] = "DYNAMIC";
-  OffsetType["LEFT"] = "LEFT";
-  OffsetType["RIGHT"] = "RIGHT";
-  return OffsetType;
-}({});
-
-// TODO: this is what I want, is there a better way to do it?
-
-const useScrollToItem = props => {
-  const {
-    scrollViewRef: propsScrollViewRef,
-    itemsCount,
-    selectedIndex,
-    containerWidth,
-    offsetType = OffsetType.CENTER,
-    addOffsetMargin = true,
-    outerSpacing = 0,
-    innerSpacing = 0
-  } = props;
-  const itemsWidths = useRef(_times(itemsCount, () => null));
-  const itemsWidthsAnimated = useSharedValue(_times(itemsCount, () => 0));
-  const itemsOffsetsAnimated = useSharedValue(_times(itemsCount, () => 0));
-  const currentIndex = useRef(selectedIndex || 0);
-  const [offsets, setOffsets] = useState({
-    CENTER: [],
-    LEFT: [],
-    RIGHT: []
-  });
-  const {
-    scrollViewRef,
-    scrollTo,
-    onContentSizeChange,
-    onLayout
-  } = useScrollTo({
-    scrollViewRef: propsScrollViewRef
-  });
-
-  // TODO: reset?
-  //   useEffect(() => {
-  //     itemsWidths.current = _.times(itemsCount, () => null);
-  //   }, [itemsCount]);
-
-  // const contentWidth = _.sum(itemsWidths);
-  // TODO: const scrollEnabled = contentWidth.current > containerWidth;
-
-  const setSnapBreakpoints = useCallback(widths => {
-    if (_isEmpty(widths)) {
-      return;
-    }
-    const screenCenter = containerWidth / 2;
-    let index = 0;
-    const centeredOffsets = [];
-    let currentCenterOffset = outerSpacing;
-    const leftOffsets = [];
-    leftOffsets.push(outerSpacing - innerSpacing);
-    const rightOffsets = [];
-    rightOffsets.push(-containerWidth + widths[0] + outerSpacing + innerSpacing);
-    while (index < itemsCount) {
-      /* calc center, left and right offsets */
-      centeredOffsets[index] = currentCenterOffset - screenCenter + widths[index] / 2;
-      ++index;
-      currentCenterOffset += widths[index - 1] + innerSpacing;
-      leftOffsets[index] = leftOffsets[index - 1] + widths[index - 1] + innerSpacing;
-      rightOffsets[index] = rightOffsets[index - 1] + widths[index] + innerSpacing;
-    }
-    if (addOffsetMargin) {
-      index = 1;
-      while (index < itemsCount - 1) {
-        leftOffsets[index] -= widths[index - 1];
-        rightOffsets[index] += widths[index + 1] + innerSpacing;
-        ++index;
-      }
-    }
-    setOffsets({
-      CENTER: centeredOffsets,
-      LEFT: leftOffsets,
-      RIGHT: rightOffsets
-    }); // default for DYNAMIC is CENTER
-
-    // Update shared values
-    // @ts-expect-error pretty sure this is a bug in reanimated since itemsWidthsAnimated is defined as SharedValue<number[]>
-    itemsWidthsAnimated.modify(value => {
-      'worklet';
-
-      return value.map((_, index) => widths[index]);
-    });
-    itemsOffsetsAnimated.modify(value => {
-      'worklet';
-
-      value.forEach((_, index) => {
-        if (index > 0) {
-          value[index] = value[index - 1] + widths[index - 1];
-        }
-      });
-      return value;
-    });
-  }, [itemsCount, outerSpacing, innerSpacing, addOffsetMargin, containerWidth]);
-  const onItemLayout = useCallback((event, index) => {
-    const {
-      width
-    } = event.nativeEvent.layout;
-    itemsWidths.current[index] = width;
-    if (!_includes(itemsWidths.current, null)) {
-      setSnapBreakpoints(itemsWidths.current);
-    }
-  }, [setSnapBreakpoints]);
-  const focusIndex = useCallback((index, animated = true) => {
-    if (index >= 0 && offsets.CENTER.length > index) {
-      const rtlIndex = FIX_RTL ? itemsCount - index - 1 : index;
-      if (offsetType !== OffsetType.DYNAMIC) {
-        scrollTo(offsets[offsetType][rtlIndex], animated);
-      } else {
-        const movingLeft = index < currentIndex.current;
-        currentIndex.current = rtlIndex;
-        scrollTo(movingLeft ? offsets[OffsetType.RIGHT][rtlIndex] : offsets[OffsetType.LEFT][rtlIndex], animated);
-      }
-    }
-  }, [offsets, offsetType, scrollTo]);
-  useEffect(() => {
-    if (!_isUndefined(selectedIndex)) {
-      focusIndex(selectedIndex, false);
-    }
-  }, [selectedIndex, focusIndex]);
-  const reset = useCallback(() => {
-    for (let i = 0; i < itemsCount; ++i) {
-      itemsWidths.current[i] = null;
-      itemsWidthsAnimated.value[i] = 0;
-      itemsOffsetsAnimated.value[i] = 0;
-    }
-    setOffsets({
-      CENTER: [],
-      LEFT: [],
-      RIGHT: []
-    });
-  }, [itemsCount]);
-  return {
-    scrollViewRef,
-    onItemLayout,
-    itemsWidthsAnimated,
-    itemsOffsetsAnimated,
-    focusIndex,
-    reset,
-    onContentSizeChange,
-    onLayout
-  };
-};
-useScrollToItem.offsetType = OffsetType;
-export default useScrollToItem;

package/src/incubator/dialog/dialog.api.json

@@ -1,54 +0,0 @@
-{
-  "name": "Dialog",
-  "category": "incubator",
-  "description": "Component for displaying custom content inside a popup dialog",
-  "note": "Use alignment modifiers to control the dialog position (top, bottom, centerV, centerH, etc... by default the dialog is aligned to center).  \nWhen adding a `FlatList` \\ `ScrollView` to the content be sure to use one from `react-native-gesture-handler` (see [this link](https://github.com/software-mansion/react-native-gesture-handler/issues/1380) for `SectionList`).",
-  "modifiers": ["alignment"],
-  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/incubatorScreens/IncubatorDialogScreen.tsx",
-  "props": [
-    {"name": "visible", "type": "boolean", "description": "The visibility of the dialog"},
-    {"name": "headerProps", "type": "DialogHeaderProps", "description": "The Dialog's header (title, subtitle etc)"},
-    {
-      "name": "containerStyle",
-      "type": "ViewStyle",
-      "description": "The Dialog`s container style (it is set to {position: 'absolute'})"
-    },
-    {
-      "name": "containerProps",
-      "type": "ViewProps",
-      "description": "Extra props for the container"
-    },
-    {
-      "name": "onDismiss",
-      "type": "(props?: DialogProps) => void",
-      "description": "Callback that is called after the dialog's dismiss (after the animation has ended)."
-    },
-    {
-      "name": "direction",
-      "type": "up | down | left | right",
-      "description": "The direction from which and to which the dialog is animating \\ panning (default down).",
-      "default": "down"
-    },
-    {
-      "name": "showClose",
-      "type": "boolean",
-      "description": "Show the close button"
-    },
-    {"name": "ignoreBackgroundPress", "type": "boolean", "description": "Whether or not to ignore background press."},
-    {"name": "modalProps", "type": "ModalProps", "description": "Pass props to the dialog modal"},
-    {
-      "name": "testID",
-      "type": "string",
-      "description": "Used to locate this view in end-to-end tests.  \nThe container has the original id.  \nSupported inner elements IDs:  \n`${TestID}.modal` - the Modal's id.  \n`${TestID}.overlayFadingBackground` - the fading background id."
-    }
-  ],
-  "snippet": [
-    "<Dialog",
-    "  visible={isVisible$1}",
-    "  onDismiss={() => console.log('dismissed')$2}",
-    "  panDirection={PanningProvider.Directions.DOWN$3}",
-    ">",
-    "  <Text text60>Content</Text>$4",
-    "</Dialog>"
-  ]
-}

package/src/incubator/dialog/index.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-import DialogHeader from './DialogHeader';
-import { DialogProps, DialogDirections, DialogDirectionsEnum, DialogHeaderProps, DialogMigrationProps } from './types';
-export { DialogProps, DialogDirections, DialogDirectionsEnum, DialogHeaderProps, DialogMigrationProps };
-export interface DialogStatics {
-    directions: typeof DialogDirectionsEnum;
-    Header: typeof DialogHeader;
-}
-export interface DialogImperativeMethods {
-    dismiss: () => void;
-}
-declare const _default: React.ForwardRefExoticComponent<import("./types")._DialogProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<any>> & DialogStatics;
-export default _default;

package/src/incubator/dialog/index.js

@@ -1,218 +0,0 @@
-import React, { useMemo, useCallback, useImperativeHandle, forwardRef, useEffect, useState } from 'react';
-import { StyleSheet } from 'react-native';
-import hoistStatics from 'hoist-non-react-statics';
-import { Extrapolation, interpolate, runOnJS, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import { Spacings, Colors, BorderRadiuses } from "../../style";
-import { useDidUpdate } from "../../hooks";
-import { asBaseComponent, Constants } from "../../commons/new";
-import View from "../../components/view";
-import Modal from "../../components/modal";
-import { extractAlignmentsValues } from "../../commons/modifiers";
-import useHiddenLocation from "../hooks/useHiddenLocation";
-import DialogHeader from "./DialogHeader";
-import useDialogContent from "./useDialogContent";
-import { DialogProps, DialogDirections, DialogDirectionsEnum, DialogHeaderProps, DialogMigrationProps } from "./types";
-export { DialogProps, DialogDirections, DialogDirectionsEnum, DialogHeaderProps, DialogMigrationProps };
-const THRESHOLD_VELOCITY = 750;
-const Dialog = (props, ref) => {
-  const {
-    visible = false,
-    headerProps,
-    showCloseButton,
-    closeButtonProps,
-    containerStyle: propsContainerStyle,
-    containerProps: propsContainerProps,
-    width,
-    height,
-    onDismiss,
-    direction = DialogDirectionsEnum.DOWN,
-    ignoreBackgroundPress,
-    modalProps = {},
-    useSafeArea,
-    testID,
-    children
-  } = props;
-  const {
-    overlayBackgroundColor = Colors.rgba(Colors.grey10, 0.65),
-    ...otherModalProps
-  } = modalProps;
-  const visibility = useSharedValue(0); // value between 0 (closed) and 1 (open)
-  const initialTranslation = useSharedValue(0);
-  const [modalVisibility, setModalVisibility] = useState(visible); // unfortunately this is needed when changing visibility by the user (clicking on an option etc)
-
-  const {
-    setRef,
-    onLayout,
-    hiddenLocation: _hiddenLocation
-  } = useHiddenLocation();
-  const hiddenLocation = _hiddenLocation[direction];
-  const wasMeasured = _hiddenLocation.wasMeasured;
-  const isVertical = useMemo(() => {
-    'worklet';
-
-    return direction === DialogDirectionsEnum.DOWN || direction === DialogDirectionsEnum.UP;
-  }, [direction]);
-  const getTranslationInterpolation = useCallback(value => {
-    'worklet';
-
-    return interpolate(value, [0, 1], [hiddenLocation, 0], Extrapolation.CLAMP);
-  }, [hiddenLocation]);
-  const getTranslationReverseInterpolation = useCallback(value => {
-    'worklet';
-
-    return interpolate(value, [hiddenLocation, 0], [0, 1]);
-  }, [hiddenLocation]);
-  const _onDismiss = useCallback(() => {
-    'worklet';
-
-    runOnJS(setModalVisibility)(false);
-  }, []);
-  const close = useCallback(() => {
-    'worklet';
-
-    visibility.value = withTiming(0, undefined, _onDismiss);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [_onDismiss]);
-  const open = useCallback(() => {
-    'worklet';
-
-    visibility.value = withSpring(1);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  useEffect(() => {
-    if (visible) {
-      setModalVisibility(true);
-    } else if (wasMeasured && modalVisibility) {
-      // Close when sending visible = false
-      close();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [visible, wasMeasured]);
-  useDidUpdate(() => {
-    if (wasMeasured) {
-      if (modalVisibility) {
-        open();
-      } else if (Constants.isAndroid) {
-        onDismiss?.();
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [modalVisibility, wasMeasured]);
-  const alignmentStyle = useMemo(() => {
-    return {
-      flex: 1,
-      alignItems: 'center',
-      ...extractAlignmentsValues(props)
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const {
-    renderDialogContent,
-    containerProps,
-    containerStyle
-  } = useDialogContent({
-    showCloseButton,
-    close,
-    closeButtonProps,
-    containerStyle: propsContainerStyle,
-    containerProps: propsContainerProps,
-    headerProps,
-    children
-  });
-  const animatedStyle = useAnimatedStyle(() => {
-    if (isVertical) {
-      return {
-        transform: [{
-          translateY: getTranslationInterpolation(visibility.value)
-        }]
-      };
-    } else {
-      return {
-        transform: [{
-          translateX: getTranslationInterpolation(visibility.value)
-        }]
-      };
-    }
-  });
-  const style = useMemo(() => {
-    return [styles.defaultDialogStyle, {
-      backgroundColor: Colors.$backgroundDefault
-    }, containerStyle, animatedStyle, width ? {
-      width
-    } : undefined, height ? {
-      height
-    } : undefined];
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [containerStyle, width, height]);
-  const shouldClose = event => {
-    'worklet';
-
-    const wasPannedOverThreshold = Math.abs(getTranslationInterpolation(visibility.value)) >= Math.abs(hiddenLocation / 3);
-    let velocity;
-    switch (direction) {
-      case DialogDirectionsEnum.DOWN:
-      default:
-        velocity = event.velocityY;
-        break;
-      case DialogDirectionsEnum.UP:
-        velocity = -event.velocityY;
-        break;
-      case DialogDirectionsEnum.LEFT:
-        velocity = -event.velocityX;
-        break;
-      case DialogDirectionsEnum.RIGHT:
-        velocity = event.velocityX;
-        break;
-    }
-    const wasFlung = velocity >= THRESHOLD_VELOCITY;
-    return wasPannedOverThreshold || wasFlung;
-  };
-  const panGesture = Gesture.Pan().onStart(event => {
-    initialTranslation.value = getTranslationReverseInterpolation(isVertical ? event.translationY : event.translationX) - visibility.value;
-  }).onUpdate(event => {
-    visibility.value = getTranslationReverseInterpolation(isVertical ? event.translationY : event.translationX) - initialTranslation.value;
-  }).onEnd(event => {
-    if (shouldClose(event)) {
-      close();
-    } else {
-      open();
-    }
-  });
-  useImperativeHandle(ref, () => ({
-    dismiss: close
-  }));
-  const renderDialog = () => <GestureDetector gesture={panGesture}>
-      <View {...containerProps} reanimated={!Constants.accessibility.isReduceMotionEnabled} style={style} onLayout={onLayout} ref={setRef} testID={testID}>
-        {renderDialogContent()}
-      </View>
-    </GestureDetector>;
-  const overlayStyle = useAnimatedStyle(() => {
-    return {
-      opacity: visibility.value,
-      backgroundColor: overlayBackgroundColor
-    };
-  }, [overlayBackgroundColor]);
-  const renderOverlayView = () => <View testID={`${testID}.overlayFadingBackground`} absF reanimated style={overlayStyle} pointerEvents="none" />;
-  return <Modal transparent animationType={'none'} {...otherModalProps} testID={`${testID}.modal`} useGestureHandlerRootView visible={modalVisibility} onBackgroundPress={ignoreBackgroundPress ? undefined : close} onRequestClose={ignoreBackgroundPress ? undefined : close} onDismiss={onDismiss}>
-      {renderOverlayView()}
-      <View useSafeArea={useSafeArea} pointerEvents={'box-none'} style={alignmentStyle}>
-        {renderDialog()}
-      </View>
-    </Modal>;
-};
-Dialog.displayName = 'Incubator.Dialog';
-Dialog.directions = DialogDirectionsEnum;
-Dialog.Header = DialogHeader;
-const _Dialog = forwardRef(Dialog);
-hoistStatics(_Dialog, Dialog);
-export default asBaseComponent(_Dialog);
-const styles = StyleSheet.create({
-  defaultDialogStyle: {
-    marginBottom: Spacings.s5,
-    maxHeight: '60%',
-    width: 250,
-    borderRadius: BorderRadiuses.br20,
-    overflow: 'hidden'
-  }
-});