react-native-ui-lib 7.46.3 → 8.0.0

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