@mustmove/bottom-sheet 1.0.0

package/src/components/bottomSheetDebugView/BottomSheetDebugView.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+import ReText from './ReText';
+import { styles } from './styles';
+
+interface BottomSheetDebugViewProps {
+  values: Record<string, SharedValue<number | boolean | object> | number>;
+}
+
+const BottomSheetDebugView = ({ values }: BottomSheetDebugViewProps) => {
+  return (
+    <View pointerEvents="none" style={styles.container}>
+      {Object.keys(values).map(key => (
+        <ReText
+          key={`item-${key}`}
+          value={values[key]}
+          style={styles.text}
+          text={key}
+        />
+      ))}
+    </View>
+  );
+};
+
+export default BottomSheetDebugView;

package/src/components/bottomSheetDebugView/ReText.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { type TextProps as RNTextProps, TextInput } from 'react-native';
+import Animated, {
+  type SharedValue,
+  type AnimatedProps,
+  useAnimatedProps,
+  useDerivedValue,
+} from 'react-native-reanimated';
+
+interface TextProps {
+  text: string;
+  value: SharedValue<number | boolean | object> | number;
+  style?: AnimatedProps<RNTextProps>['style'];
+}
+
+const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
+
+Animated.addWhitelistedNativeProps({ text: true });
+
+const ReText = ({ text, value: _providedValue, style }: TextProps) => {
+  const providedValue = useDerivedValue(() => {
+    if (!_providedValue) {
+      return '';
+    }
+
+    let rawValue: number | string | object | boolean = '';
+    if (typeof _providedValue === 'number') {
+      rawValue = _providedValue as number;
+    } else if (typeof _providedValue.get === 'function') {
+      rawValue = _providedValue.get();
+    }
+
+    if (typeof rawValue === 'object') {
+      const rawValueObject = Object.entries(rawValue)
+        .map(item => `${item[0]}: ${item[1]}`)
+        .reduce((result, current, index) => {
+          if (index !== 0) {
+            result = `${result} \n`;
+          }
+
+          result = `${result}- ${current}`;
+          return result;
+        }, '');
+
+      return `${text}\n${rawValueObject}`;
+    }
+
+    if (typeof rawValue === 'number') {
+      rawValue = rawValue.toFixed(2);
+    }
+
+    return `${text}: ${rawValue}`;
+  }, [text, _providedValue]);
+  const animatedProps = useAnimatedProps(() => {
+    return {
+      text: providedValue.get(),
+    };
+  }, [providedValue]);
+  return (
+    <AnimatedTextInput
+      underlineColorAndroid="transparent"
+      editable={false}
+      value={providedValue?.get() ?? ''}
+      style={style}
+      // @ts-ignore
+      animatedProps={animatedProps}
+      multiline={true}
+    />
+  );
+};
+
+export default ReText;

package/src/components/bottomSheetDebugView/ReText.webx.tsx

@@ -0,0 +1,55 @@
+import React, { useRef } from 'react';
+import { type TextProps as RNTextProps, TextInput } from 'react-native';
+import Animated, {
+  type SharedValue,
+  useAnimatedReaction,
+  useDerivedValue,
+} from 'react-native-reanimated';
+
+interface TextProps {
+  text: string;
+  value: SharedValue<number | boolean> | number;
+  style?: Animated.AnimateProps<RNTextProps>['style'];
+}
+
+const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
+
+const ReText = (props: TextProps) => {
+  const { text, value: _providedValue, style } = { style: {}, ...props };
+  const textRef = useRef<TextInput>(null);
+
+  const providedValue = useDerivedValue(() => {
+    const value =
+      typeof _providedValue === 'number'
+        ? _providedValue
+        : typeof _providedValue.value === 'number'
+          ? _providedValue.value.toFixed(2)
+          : _providedValue.value;
+
+    return `${text}: ${value}`;
+  }, [_providedValue, text]);
+
+  //region effects
+  useAnimatedReaction(
+    () => providedValue.value,
+    result => {
+      textRef.current?.setNativeProps({
+        text: result,
+      });
+    },
+    []
+  );
+  //endregion
+
+  return (
+    <AnimatedTextInput
+      ref={textRef}
+      underlineColorAndroid="transparent"
+      editable={false}
+      value={providedValue.value}
+      style={style}
+    />
+  );
+};
+
+export default ReText;

package/src/components/bottomSheetDebugView/index.ts

@@ -0,0 +1 @@
+export { default } from './BottomSheetDebugView';

package/src/components/bottomSheetDebugView/styles.ts

@@ -0,0 +1,19 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    right: 4,
+    top: 0,
+    paddingHorizontal: 4,
+    backgroundColor: 'rgba(0, 0,0,0.5)',
+  },
+  text: {
+    fontSize: 14,
+    lineHeight: 16,
+    textAlignVertical: 'center',
+    padding: 0,
+    marginVertical: 4,
+    color: 'white',
+  },
+});

package/src/components/bottomSheetDebugView/styles.web.ts

@@ -0,0 +1,20 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    left: 4,
+    top: 80,
+    padding: 2,
+    width: 400,
+    backgroundColor: 'rgba(0, 0,0,0.5)',
+  },
+  text: {
+    fontSize: 14,
+    lineHeight: 16,
+    textAlignVertical: 'center',
+    height: 20,
+    padding: 0,
+    color: 'white',
+  },
+});

package/src/components/bottomSheetDraggableView/BottomSheetDraggableView.tsx

@@ -0,0 +1,123 @@
+import React, { useMemo, memo } from 'react';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated from 'react-native-reanimated';
+import { BottomSheetDraggableContext } from '../../contexts/gesture';
+import {
+  useBottomSheetGestureHandlers,
+  useBottomSheetInternal,
+} from '../../hooks';
+import type { BottomSheetDraggableViewProps } from './types';
+
+const BottomSheetDraggableViewComponent = ({
+  nativeGestureRef,
+  refreshControlGestureRef,
+  style,
+  children,
+  ...rest
+}: BottomSheetDraggableViewProps) => {
+  //#region hooks
+  const {
+    enableContentPanningGesture,
+    simultaneousHandlers: _providedSimultaneousHandlers,
+    waitFor,
+    activeOffsetX,
+    activeOffsetY,
+    failOffsetX,
+    failOffsetY,
+  } = useBottomSheetInternal();
+  const { contentPanGestureHandler } = useBottomSheetGestureHandlers();
+  //#endregion
+
+  //#region variables
+  const simultaneousHandlers = useMemo(() => {
+    const refs = [];
+
+    if (nativeGestureRef) {
+      refs.push(nativeGestureRef);
+    }
+
+    if (refreshControlGestureRef) {
+      refs.push(refreshControlGestureRef);
+    }
+
+    if (_providedSimultaneousHandlers) {
+      if (Array.isArray(_providedSimultaneousHandlers)) {
+        refs.push(..._providedSimultaneousHandlers);
+      } else {
+        refs.push(_providedSimultaneousHandlers);
+      }
+    }
+
+    return refs;
+  }, [
+    _providedSimultaneousHandlers,
+    nativeGestureRef,
+    refreshControlGestureRef,
+  ]);
+  const draggableGesture = useMemo(() => {
+    let gesture = Gesture.Pan()
+      .enabled(enableContentPanningGesture)
+      .shouldCancelWhenOutside(false)
+      .runOnJS(false)
+      .onStart(contentPanGestureHandler.handleOnStart)
+      .onChange(contentPanGestureHandler.handleOnChange)
+      .onEnd(contentPanGestureHandler.handleOnEnd)
+      .onFinalize(contentPanGestureHandler.handleOnFinalize);
+
+    if (waitFor) {
+      gesture = gesture.requireExternalGestureToFail(waitFor);
+    }
+
+    if (simultaneousHandlers) {
+      gesture = gesture.simultaneousWithExternalGesture(
+        simultaneousHandlers as never
+      );
+    }
+
+    if (activeOffsetX) {
+      gesture = gesture.activeOffsetX(activeOffsetX);
+    }
+
+    if (activeOffsetY) {
+      gesture = gesture.activeOffsetY(activeOffsetY);
+    }
+
+    if (failOffsetX) {
+      gesture = gesture.failOffsetX(failOffsetX);
+    }
+
+    if (failOffsetY) {
+      gesture = gesture.failOffsetY(failOffsetY);
+    }
+
+    return gesture;
+  }, [
+    activeOffsetX,
+    activeOffsetY,
+    enableContentPanningGesture,
+    failOffsetX,
+    failOffsetY,
+    simultaneousHandlers,
+    waitFor,
+    contentPanGestureHandler.handleOnChange,
+    contentPanGestureHandler.handleOnEnd,
+    contentPanGestureHandler.handleOnFinalize,
+    contentPanGestureHandler.handleOnStart,
+  ]);
+  //#endregion
+
+  return (
+    <GestureDetector gesture={draggableGesture}>
+      <BottomSheetDraggableContext.Provider value={draggableGesture}>
+        <Animated.View style={style} {...rest}>
+          {children}
+        </Animated.View>
+      </BottomSheetDraggableContext.Provider>
+    </GestureDetector>
+  );
+};
+
+const BottomSheetDraggableView = memo(BottomSheetDraggableViewComponent);
+BottomSheetDraggableView.displayName = 'BottomSheetDraggableView';
+
+export default BottomSheetDraggableView;

package/src/components/bottomSheetDraggableView/index.ts

@@ -0,0 +1 @@
+export { default } from './BottomSheetDraggableView';

package/src/components/bottomSheetDraggableView/types.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import type { ViewProps as RNViewProps } from 'react-native';
+import type { GestureRef } from 'react-native-gesture-handler/lib/typescript/handlers/gestures/gesture';
+
+export type BottomSheetDraggableViewProps = RNViewProps & {
+  nativeGestureRef?: Exclude<GestureRef, number>;
+  refreshControlGestureRef?: Exclude<GestureRef, number>;
+  children: ReactNode[] | ReactNode;
+};

package/src/components/bottomSheetFooter/BottomSheetFooter.tsx

@@ -0,0 +1,119 @@
+import React, { memo, useCallback, useMemo, useRef } from 'react';
+import type { LayoutChangeEvent } from 'react-native';
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+import { KEYBOARD_STATUS } from '../../constants';
+import {
+  type BoundingClientRect,
+  useBottomSheetInternal,
+  useBoundingClientRect,
+} from '../../hooks';
+import { print } from '../../utilities';
+import { styles } from './styles';
+import type { BottomSheetDefaultFooterProps } from './types';
+
+function BottomSheetFooterComponent({
+  animatedFooterPosition,
+  bottomInset = 0,
+  style,
+  children,
+}: BottomSheetDefaultFooterProps) {
+  //#region refs
+  const ref = useRef<Animated.View>(null);
+  //#endregion
+
+  //#region hooks
+  const { animatedLayoutState, animatedKeyboardState } =
+    useBottomSheetInternal();
+  //#endregion
+
+  //#region styles
+  const containerAnimatedStyle = useAnimatedStyle(() => {
+    let footerTranslateY = animatedFooterPosition.get();
+
+    /**
+     * Offset the bottom inset only when keyboard is not shown
+     */
+    if (animatedKeyboardState.get().status !== KEYBOARD_STATUS.SHOWN) {
+      footerTranslateY = footerTranslateY - bottomInset;
+    }
+
+    return {
+      transform: [
+        {
+          translateY: Math.max(0, footerTranslateY),
+        },
+      ],
+    };
+  }, [bottomInset, animatedKeyboardState, animatedFooterPosition]);
+  const containerStyle = useMemo(
+    () => [styles.container, style, containerAnimatedStyle],
+    [style, containerAnimatedStyle]
+  );
+  //#endregion
+
+  //#region callbacks
+  const handleContainerLayout = useCallback(
+    ({
+      nativeEvent: {
+        layout: { height },
+      },
+    }: LayoutChangeEvent) => {
+      animatedLayoutState.modify(state => {
+        'worklet';
+        state.footerHeight = height;
+        return state;
+      });
+
+      if (__DEV__) {
+        print({
+          component: 'BottomSheetFooter',
+          method: 'handleContainerLayout',
+          category: 'layout',
+          params: {
+            height,
+          },
+        });
+      }
+    },
+    [animatedLayoutState]
+  );
+  const handleBoundingClientRect = useCallback(
+    ({ height }: BoundingClientRect) => {
+      animatedLayoutState.modify(state => {
+        'worklet';
+        state.footerHeight = height;
+        return state;
+      });
+
+      if (__DEV__) {
+        print({
+          component: 'BottomSheetFooter',
+          method: 'handleBoundingClientRect',
+          category: 'layout',
+          params: {
+            height,
+          },
+        });
+      }
+    },
+    [animatedLayoutState]
+  );
+  //#endregion
+
+  //#region effects
+  useBoundingClientRect(ref, handleBoundingClientRect);
+  //#endregion
+
+  return children !== null ? (
+    <Animated.View
+      ref={ref}
+      onLayout={handleContainerLayout}
+      style={containerStyle}
+    >
+      {children}
+    </Animated.View>
+  ) : null;
+}
+
+export const BottomSheetFooter = memo(BottomSheetFooterComponent);
+BottomSheetFooter.displayName = 'BottomSheetFooter';

package/src/components/bottomSheetFooter/BottomSheetFooterContainer.tsx

@@ -0,0 +1,43 @@
+import React, { memo } from 'react';
+import { useDerivedValue } from 'react-native-reanimated';
+import { INITIAL_LAYOUT_VALUE, KEYBOARD_STATUS } from '../../constants';
+import { useBottomSheetInternal } from '../../hooks';
+import type { BottomSheetFooterContainerProps } from './types';
+
+const BottomSheetFooterContainerComponent = ({
+  footerComponent: FooterComponent,
+}: BottomSheetFooterContainerProps) => {
+  //#region hooks
+  const { animatedLayoutState, animatedPosition, animatedKeyboardState } =
+    useBottomSheetInternal();
+  //#endregion
+
+  //#region variables
+  const animatedFooterPosition = useDerivedValue(() => {
+    const { handleHeight, footerHeight, containerHeight } =
+      animatedLayoutState.get();
+    if (handleHeight === INITIAL_LAYOUT_VALUE) {
+      return 0;
+    }
+
+    const { status: keyboardStatus, heightWithinContainer: keyboardHeight } =
+      animatedKeyboardState.get();
+    const position = animatedPosition.get();
+
+    let footerTranslateY = Math.max(0, containerHeight - position);
+    if (keyboardStatus === KEYBOARD_STATUS.SHOWN) {
+      footerTranslateY = footerTranslateY - keyboardHeight;
+    }
+
+    footerTranslateY = footerTranslateY - footerHeight - handleHeight;
+    return footerTranslateY;
+  }, [animatedKeyboardState, animatedPosition, animatedLayoutState]);
+  //#endregion
+
+  return <FooterComponent animatedFooterPosition={animatedFooterPosition} />;
+};
+
+export const BottomSheetFooterContainer = memo(
+  BottomSheetFooterContainerComponent
+);
+BottomSheetFooterContainer.displayName = 'BottomSheetFooterContainer';

package/src/components/bottomSheetFooter/index.ts

@@ -0,0 +1,3 @@
+export { BottomSheetFooter } from './BottomSheetFooter';
+export { BottomSheetFooterContainer } from './BottomSheetFooterContainer';
+export type { BottomSheetFooterProps } from './types';

package/src/components/bottomSheetFooter/styles.ts

@@ -0,0 +1,12 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 9999,
+    pointerEvents: 'box-none',
+  },
+});

package/src/components/bottomSheetFooter/types.d.ts

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+import type { ViewStyle } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+import type { BottomSheetProps } from '../bottomSheet/types';
+
+export interface BottomSheetFooterProps {
+  /**
+   * Calculated footer animated position.
+   *
+   * @type SharedValue<number>
+   */
+  animatedFooterPosition: SharedValue<number>;
+}
+
+export interface BottomSheetDefaultFooterProps extends BottomSheetFooterProps {
+  /**
+   * Bottom inset to be added below the footer, usually comes
+   * from `react-native-safe-area-context` hook `useSafeArea`.
+   *
+   * @type number
+   * @default 0
+   */
+  bottomInset?: number;
+
+  /**
+   * Container style.
+   *
+   * @type ViewStyle
+   */
+  style?: ViewStyle;
+
+  /**
+   * Component to be placed in the footer.
+   *
+   * @type {ReactNode|ReactNode[]}
+   */
+  children?: ReactNode | ReactNode[];
+}
+
+export interface BottomSheetFooterContainerProps
+  extends Required<Pick<BottomSheetProps, 'footerComponent'>> {}

package/src/components/bottomSheetGestureHandlersProvider/BottomSheetGestureHandlersProvider.tsx

@@ -0,0 +1,69 @@
+import React, { useMemo } from 'react';
+import { useSharedValue } from 'react-native-reanimated';
+import { GESTURE_SOURCE } from '../../constants';
+import { BottomSheetGestureHandlersContext } from '../../contexts';
+import {
+  useBottomSheetInternal,
+  useGestureEventsHandlersDefault,
+  useGestureHandler,
+} from '../../hooks';
+import type { BottomSheetGestureHandlersProviderProps } from './types';
+
+const BottomSheetGestureHandlersProvider = ({
+  gestureEventsHandlersHook:
+    useGestureEventsHandlers = useGestureEventsHandlersDefault,
+  children,
+}: BottomSheetGestureHandlersProviderProps) => {
+  //#region variables
+  const animatedGestureSource = useSharedValue<GESTURE_SOURCE>(
+    GESTURE_SOURCE.UNDETERMINED
+  );
+  //#endregion
+
+  //#region hooks
+  const { animatedContentGestureState, animatedHandleGestureState } =
+    useBottomSheetInternal();
+  const { handleOnStart, handleOnChange, handleOnEnd, handleOnFinalize } =
+    useGestureEventsHandlers();
+  //#endregion
+
+  //#region gestures
+  const contentPanGestureHandler = useGestureHandler(
+    GESTURE_SOURCE.CONTENT,
+    animatedContentGestureState,
+    animatedGestureSource,
+    handleOnStart,
+    handleOnChange,
+    handleOnEnd,
+    handleOnFinalize
+  );
+
+  const handlePanGestureHandler = useGestureHandler(
+    GESTURE_SOURCE.HANDLE,
+    animatedHandleGestureState,
+    animatedGestureSource,
+    handleOnStart,
+    handleOnChange,
+    handleOnEnd,
+    handleOnFinalize
+  );
+  //#endregion
+
+  //#region context
+  const contextValue = useMemo(
+    () => ({
+      contentPanGestureHandler,
+      handlePanGestureHandler,
+      animatedGestureSource,
+    }),
+    [contentPanGestureHandler, handlePanGestureHandler, animatedGestureSource]
+  );
+  //#endregion
+  return (
+    <BottomSheetGestureHandlersContext.Provider value={contextValue}>
+      {children}
+    </BottomSheetGestureHandlersContext.Provider>
+  );
+};
+
+export default BottomSheetGestureHandlersProvider;

package/src/components/bottomSheetGestureHandlersProvider/index.ts

@@ -0,0 +1 @@
+export { default } from './BottomSheetGestureHandlersProvider';

package/src/components/bottomSheetGestureHandlersProvider/types.d.ts

@@ -0,0 +1,8 @@
+import type { ReactChild } from 'react';
+import React from 'react';
+import type { BottomSheetProps } from '../bottomSheet/types';
+
+export interface BottomSheetGestureHandlersProviderProps
+  extends Pick<BottomSheetProps, 'gestureEventsHandlersHook'> {
+  children?: React.ReactNode;
+}

package/src/components/bottomSheetHandle/BottomSheetHandle.tsx

@@ -0,0 +1,51 @@
+import React, { memo, useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import {
+  DEFAULT_ACCESSIBILITY_HINT,
+  DEFAULT_ACCESSIBILITY_LABEL,
+  DEFAULT_ACCESSIBILITY_ROLE,
+  DEFAULT_ACCESSIBLE,
+} from './constants';
+import { styles } from './styles';
+import type { BottomSheetDefaultHandleProps } from './types';
+
+function BottomSheetHandleComponent({
+  style,
+  indicatorStyle: _indicatorStyle,
+  accessible = DEFAULT_ACCESSIBLE,
+  accessibilityRole = DEFAULT_ACCESSIBILITY_ROLE,
+  accessibilityLabel = DEFAULT_ACCESSIBILITY_LABEL,
+  accessibilityHint = DEFAULT_ACCESSIBILITY_HINT,
+  children,
+}: BottomSheetDefaultHandleProps) {
+  //#region styles
+  const containerStyle = useMemo(
+    () => [styles.container, StyleSheet.flatten(style)],
+    [style]
+  );
+  const indicatorStyle = useMemo(
+    () => [styles.indicator, StyleSheet.flatten(_indicatorStyle)],
+    [_indicatorStyle]
+  );
+  //#endregion
+
+  // render
+  return (
+    <View
+      style={containerStyle}
+      accessible={accessible ?? undefined}
+      accessibilityRole={accessibilityRole ?? undefined}
+      accessibilityLabel={accessibilityLabel ?? undefined}
+      accessibilityHint={accessibilityHint ?? undefined}
+      collapsable={true}
+    >
+      <View style={indicatorStyle} />
+      {children}
+    </View>
+  );
+}
+
+const BottomSheetHandle = memo(BottomSheetHandleComponent);
+BottomSheetHandle.displayName = 'BottomSheetHandle';
+
+export default BottomSheetHandle;