Merge branch 'main' into upgrade/react-native/0.71.6-hermes

MetaMask · Jun 29, 2023 · 87b94b1 · 87b94b1
2 parents ab49adc + a3a0126
commit 87b94b1
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 6 deletions.
diff --git a/...ponents/BottomSheets/BottomSheetOverlay/BottomSheetOverlay/BottomSheetOverlay.stories.tsx b/...ponents/BottomSheets/BottomSheetOverlay/BottomSheetOverlay/BottomSheetOverlay.stories.tsx
@@ -0,0 +1,26 @@
+/* eslint-disable no-console, react-native/no-inline-styles */
+
+// Third party dependencies.
+import React from 'react';
+import { storiesOf } from '@storybook/react-native';
+
+// External dependencies.
+import { getOverlayStoryProps } from '../../../Overlay/Overlay.stories';
+
+// Internal dependencies.
+import BottomSheetOverlay from './BottomSheetOverlay';
+import { BottomSheetOverlayProps } from './BottomSheetOverlay.types';
+
+export const getBottomSheetOverlayStoryProps = (): BottomSheetOverlayProps =>
+  getOverlayStoryProps();
+
+const BottomSheetOverlayStory = () => (
+  <BottomSheetOverlay {...getBottomSheetOverlayStoryProps()} />
+);
+
+storiesOf('Component Library / BottomSheets', module).add(
+  'BottomSheetOverlay',
+  BottomSheetOverlayStory,
+);
+
+export default BottomSheetOverlayStory;
diff --git a/...rary/components/BottomSheets/BottomSheetOverlay/BottomSheetOverlay/BottomSheetOverlay.tsx b/...rary/components/BottomSheets/BottomSheetOverlay/BottomSheetOverlay/BottomSheetOverlay.tsx
@@ -0,0 +1,16 @@
+/* eslint-disable react/prop-types */
+
+// Third party dependencies.
+import React from 'react';
+
+// External dependencies.
+import Overlay from '../../../../components/Overlay/Overlay';
+
+// Internal dependencies.
+import { BottomSheetOverlayProps } from './BottomSheetOverlay.types';
+
+const BottomSheetOverlay: React.FC<BottomSheetOverlayProps> = ({
+  ...props
+}) => <Overlay {...props} />;
+
+export default BottomSheetOverlay;
diff --git a/...components/BottomSheets/BottomSheetOverlay/BottomSheetOverlay/BottomSheetOverlay.types.ts b/...components/BottomSheets/BottomSheetOverlay/BottomSheetOverlay/BottomSheetOverlay.types.ts
@@ -0,0 +1,7 @@
+// External dependencies.
+import { OverlayProps } from '../../../Overlay/Overlay.types';
+
+/**
+ * BottomSheetOverlay component props.
+ */
+export type BottomSheetOverlayProps = OverlayProps;
diff --git a/...library/components/BottomSheets/BottomSheetOverlay/BottomSheetOverlay/README.md b/...library/components/BottomSheets/BottomSheetOverlay/BottomSheetOverlay/README.md
@@ -0,0 +1,29 @@
+# BottomSheetOverlay
+
+BottomSheetOverlay is a semi-transparent layer that is placed on top of the page content to provide focus on the content placed above the BottomSheet and prevent interaction with the underlying content.
+
+## Props
+
+This component extends [OverlayProp](../../../Overlay/Overlay.types.ts) component.
+
+### `color`
+
+Optional prop to configure the color of the BottomSheetOverlay.
+
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| ColorValue                                           | No                                                     |
+
+### `onPress`
+
+Function to trigger when pressing the BottomSheetOverlay.
+
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| Function                                            | No                                                     |
+
+## Usage
+
+```javascript
+<BottomSheetOverlay onPress={() => {}}/>;
+```
diff --git a/app/component-library/components/BottomSheets/BottomSheetOverlay/BottomSheetOverlay/index.ts b/app/component-library/components/BottomSheets/BottomSheetOverlay/BottomSheetOverlay/index.ts
@@ -0,0 +1 @@
+export { default } from './BottomSheetOverlay';
diff --git a/app/component-library/components/Overlay/Overlay.tsx b/app/component-library/components/Overlay/Overlay.tsx
@@ -3,7 +3,12 @@
 // Third party dependencies.
 import React from 'react';
 import { TouchableOpacity } from 'react-native';
-import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
 
 // External dependencies.
 import { useStyles } from '../../hooks';
@@ -15,12 +20,21 @@ import { DEFAULT_OVERLAY_ANIMATION_DURATION } from './Overlay.constants';
 
 const Overlay: React.FC<OverlayProps> = ({ style, onPress, color }) => {
   const { styles } = useStyles(styleSheet, { style, color });
+  const opacityVal = useSharedValue(0);
+  const animatedStyles = useAnimatedStyle(
+    () => ({
+      opacity: opacityVal.value,
+    }),
+    [opacityVal.value],
+  );
+
+  opacityVal.value = withTiming(1, {
+    duration: DEFAULT_OVERLAY_ANIMATION_DURATION,
+    easing: Easing.linear,
+  });
+
   return (
-    <Animated.View
-      entering={FadeIn.duration(DEFAULT_OVERLAY_ANIMATION_DURATION)}
-      exiting={FadeOut.duration(DEFAULT_OVERLAY_ANIMATION_DURATION)}
-      style={styles.base}
-    >
+    <Animated.View style={[styles.base, animatedStyles]}>
       {onPress && <TouchableOpacity onPress={onPress} style={styles.fill} />}
     </Animated.View>
   );

diff --git a/storybook/storyLoader.js b/storybook/storyLoader.js
@@ -22,6 +22,7 @@ function loadStories() {
   require('../app/component-library/components/Banners/Banner/variants/BannerTip/BannerTip.stories');
   require('../app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.stories');
   require('../app/component-library/components/BottomSheets/BottomSheetHeader/BottomSheetHeader.stories');
+  require('../app/component-library/components/BottomSheets/BottomSheetOverlay/BottomSheetOverlay/BottomSheetOverlay.stories');
   require('../app/component-library/components/Buttons/Button/Button.stories');
   require('../app/component-library/components/Buttons/Button/foundation/ButtonBase/ButtonBase.stories');
   require('../app/component-library/components/Buttons/Button/variants/ButtonLink/ButtonLink.stories');
@@ -91,6 +92,7 @@ const stories = [
   '../app/component-library/components/Banners/Banner/variants/BannerTip/BannerTip.stories',
   '../app/component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.stories',
   '../app/component-library/components/BottomSheets/BottomSheetHeader/BottomSheetHeader.stories',
+  '../app/component-library/components/BottomSheets/BottomSheetOverlay/BottomSheetOverlay/BottomSheetOverlay.stories',
   '../app/component-library/components/Buttons/Button/Button.stories',
   '../app/component-library/components/Buttons/Button/foundation/ButtonBase/ButtonBase.stories',
   '../app/component-library/components/Buttons/Button/variants/ButtonLink/ButtonLink.stories',
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default } from './BottomSheetOverlay';