From 8cee2e1d79ea4e5acd9c22ded2bbdc63f8414bb5 Mon Sep 17 00:00:00 2001 From: Majed Date: Mon, 8 Jan 2024 11:51:11 +0300 Subject: [PATCH] add blur options --- src/components/backdrop/Backdrop.tsx | 30 ++++++++++++++-------- src/components/backdrop/index.ts | 1 + src/components/backdrop/types.d.ts | 18 +++++++++++++ src/components/provider/Provider.tsx | 4 ++- src/components/provider/types.d.ts | 4 ++- website/docs/props.md | 38 ++++++++++++++++++++++++---- 6 files changed, 78 insertions(+), 17 deletions(-) create mode 100644 src/components/backdrop/types.d.ts diff --git a/src/components/backdrop/Backdrop.tsx b/src/components/backdrop/Backdrop.tsx index dc5fa35a..21786fd5 100644 --- a/src/components/backdrop/Backdrop.tsx +++ b/src/components/backdrop/Backdrop.tsx @@ -1,5 +1,9 @@ import React, { memo } from 'react'; import { StyleSheet } from 'react-native'; +import { + TapGestureHandler, + TapGestureHandlerGestureEvent, +} from 'react-native-gesture-handler'; import Animated, { useAnimatedGestureHandler, useAnimatedProps, @@ -7,27 +11,26 @@ import Animated, { withDelay, withTiming, } from 'react-native-reanimated'; -import { - TapGestureHandler, - TapGestureHandlerGestureEvent, -} from 'react-native-gesture-handler'; // Components import { BlurView } from 'expo-blur'; // Utils -import { styles } from './styles'; import { CONTEXT_MENU_STATE, HOLD_ITEM_TRANSFORM_DURATION, IS_IOS, WINDOW_HEIGHT, } from '../../constants'; +import { useInternal } from '../../hooks'; import { - BACKDROP_LIGHT_BACKGROUND_COLOR, BACKDROP_DARK_BACKGROUND_COLOR, + BACKDROP_LIGHT_BACKGROUND_COLOR, } from './constants'; -import { useInternal } from '../../hooks'; +import { styles } from './styles'; + +// Types +import { BackdropProps } from './types'; const AnimatedBlurView = IS_IOS ? Animated.createAnimatedComponent(BlurView) @@ -40,7 +43,10 @@ type Context = { }; }; -const BackdropComponent = () => { +const BackdropComponent = ({ + enableBlur = true, + blurIntensity = 100, +}: BackdropProps) => { const { state, theme } = useInternal(); const tapGestureEvent = useAnimatedGestureHandler< @@ -95,7 +101,11 @@ const BackdropComponent = () => { const animatedContainerProps = useAnimatedProps(() => { return { intensity: withTiming( - state.value === CONTEXT_MENU_STATE.ACTIVE ? 100 : 0, + state.value === CONTEXT_MENU_STATE.ACTIVE + ? enableBlur + ? blurIntensity + : 0 + : 0, { duration: HOLD_ITEM_TRANSFORM_DURATION, } @@ -109,7 +119,7 @@ const BackdropComponent = () => { ? BACKDROP_LIGHT_BACKGROUND_COLOR : BACKDROP_DARK_BACKGROUND_COLOR; - return { backgroundColor }; + return { backgroundColor: enableBlur ? backgroundColor : 'transparent' }; }, [theme]); return ( diff --git a/src/components/backdrop/index.ts b/src/components/backdrop/index.ts index 70cf60d9..c29fbd01 100644 --- a/src/components/backdrop/index.ts +++ b/src/components/backdrop/index.ts @@ -1 +1,2 @@ export { default as Backdrop } from './Backdrop'; +export type { BackdropProps } from './types'; diff --git a/src/components/backdrop/types.d.ts b/src/components/backdrop/types.d.ts new file mode 100644 index 00000000..a314e1fc --- /dev/null +++ b/src/components/backdrop/types.d.ts @@ -0,0 +1,18 @@ +export type BackdropProps = { + /** + * Blur enabled. Optional. + * @type "true" | "false" + * @default "true" + * @examples + * enableBlur="false" + */ + enableBlur?: boolean; + /** + * Blur radius. Optional. + * @type number + * @default 100 + * @examples + * blurIntensity={20} + */ + blurIntensity?: number; +}; diff --git a/src/components/provider/Provider.tsx b/src/components/provider/Provider.tsx index 234ecf8e..aa2b3fb1 100644 --- a/src/components/provider/Provider.tsx +++ b/src/components/provider/Provider.tsx @@ -23,6 +23,8 @@ export let AnimatedIcon: any; const ProviderComponent = ({ children, + enableBlur, + blurIntensity, theme: selectedTheme, iconComponent, safeAreaInsets, @@ -92,7 +94,7 @@ const ProviderComponent = ({ {children} - + diff --git a/src/components/provider/types.d.ts b/src/components/provider/types.d.ts index 3ed79c8a..1c7998a5 100644 --- a/src/components/provider/types.d.ts +++ b/src/components/provider/types.d.ts @@ -1,4 +1,6 @@ -export interface HoldMenuProviderProps { +import type { BackdropProps } from '../backdrop'; + +export interface HoldMenuProviderProps extends BackdropProps { /** * Theme of hold menu. Effects to backdrop and context menu styles. Optional. * @type "light" | "dark" diff --git a/website/docs/props.md b/website/docs/props.md index 6e1548e2..9e80e0b1 100644 --- a/website/docs/props.md +++ b/website/docs/props.md @@ -37,6 +37,34 @@ Values: ``` +### `enableBlur` + +Enable or disable the backdrop blur + +#### Example + +```tsx + +``` + +| type | default | required | +| ------- | ------- | -------- | +| boolean | true | NO | + +### `blurIntensity` + +the intensity of the backdrop blur + +#### Example + +```tsx + +``` + +| type | default | required | +| ------ | ------- | -------- | +| number | 100 | NO | + ### `safeAreaInsets` Set object of safe area inset values to prevent the menu to be opened under the unsafe area @@ -56,7 +84,7 @@ Fires callback when menu is opened ```tsx const onOpen = useCallback(() => { - console.log('App onOpen') + console.log('App onOpen'); }, []); ; @@ -70,7 +98,7 @@ Fires callback when menu is opened ```tsx const onClose = useCallback(() => { - console.log('App onClose') + console.log('App onClose'); }, []); ; @@ -244,9 +272,9 @@ Set true if you want to close menu when tap to HoldItem Set delay before long tap will activate gesture. May be useful to increase this value in lists -| type | default | required | -| ------- | ------- | -------- | -| number | 150 | NO | +| type | default | required | +| ------ | ------- | -------- | +| number | 150 | NO | #### Example