@mustmove/bottom-sheet 1.0.0

package/src/components/bottomSheetHandle/BottomSheetHandleContainer.tsx

@@ -0,0 +1,187 @@
+import React, { memo, useCallback, useMemo, useRef } from 'react';
+import type { LayoutChangeEvent, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated from 'react-native-reanimated';
+import {
+  type BoundingClientRect,
+  useBottomSheetGestureHandlers,
+  useBottomSheetInternal,
+  useBoundingClientRect,
+} from '../../hooks';
+import { print } from '../../utilities';
+import { DEFAULT_ENABLE_HANDLE_PANNING_GESTURE } from '../bottomSheet/constants';
+import type { BottomSheetHandleContainerProps } from './types';
+
+function BottomSheetHandleContainerComponent({
+  animatedIndex,
+  animatedPosition,
+  simultaneousHandlers: _internalSimultaneousHandlers,
+  enableHandlePanningGesture = DEFAULT_ENABLE_HANDLE_PANNING_GESTURE,
+  handleComponent: HandleComponent,
+  handleStyle: _providedHandleStyle,
+  handleIndicatorStyle: _providedIndicatorStyle,
+}: BottomSheetHandleContainerProps) {
+  //#region refs
+  const ref = useRef<View>(null);
+  //#endregion
+
+  //#region hooks
+  const {
+    animatedLayoutState,
+    activeOffsetX,
+    activeOffsetY,
+    failOffsetX,
+    failOffsetY,
+    waitFor,
+    simultaneousHandlers: _providedSimultaneousHandlers,
+  } = useBottomSheetInternal();
+  const { handlePanGestureHandler } = useBottomSheetGestureHandlers();
+  //#endregion
+
+  //#region variables
+  const simultaneousHandlers = useMemo<unknown[]>(() => {
+    const refs = [];
+
+    if (_internalSimultaneousHandlers) {
+      refs.push(_internalSimultaneousHandlers);
+    }
+
+    if (_providedSimultaneousHandlers) {
+      if (Array.isArray(_providedSimultaneousHandlers)) {
+        refs.push(..._providedSimultaneousHandlers);
+      } else {
+        refs.push(_providedSimultaneousHandlers);
+      }
+    }
+
+    return refs;
+  }, [_providedSimultaneousHandlers, _internalSimultaneousHandlers]);
+  const panGesture = useMemo(() => {
+    let gesture = Gesture.Pan()
+      .enabled(enableHandlePanningGesture)
+      .shouldCancelWhenOutside(false)
+      .runOnJS(false)
+      .onStart(handlePanGestureHandler.handleOnStart)
+      .onChange(handlePanGestureHandler.handleOnChange)
+      .onEnd(handlePanGestureHandler.handleOnEnd)
+      .onFinalize(handlePanGestureHandler.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,
+    enableHandlePanningGesture,
+    failOffsetX,
+    failOffsetY,
+    simultaneousHandlers,
+    waitFor,
+    handlePanGestureHandler.handleOnChange,
+    handlePanGestureHandler.handleOnEnd,
+    handlePanGestureHandler.handleOnFinalize,
+    handlePanGestureHandler.handleOnStart,
+  ]);
+  //#endregion
+
+  //#region callbacks
+  const handleContainerLayout = useCallback(
+    function handleContainerLayout({
+      nativeEvent: {
+        layout: { height },
+      },
+    }: LayoutChangeEvent) {
+      animatedLayoutState.modify(state => {
+        'worklet';
+        state.handleHeight = height;
+        return state;
+      });
+
+      if (__DEV__) {
+        print({
+          component: 'BottomSheetHandleContainer',
+          method: 'handleContainerLayout',
+          category: 'layout',
+          params: {
+            height,
+          },
+        });
+      }
+    },
+    [animatedLayoutState]
+  );
+  const handleBoundingClientRect = useCallback(
+    ({ height }: BoundingClientRect) => {
+      animatedLayoutState.modify(state => {
+        'worklet';
+        state.handleHeight = height;
+        return state;
+      });
+
+      if (__DEV__) {
+        print({
+          component: 'BottomSheetHandleContainer',
+          method: 'handleBoundingClientRect',
+          category: 'layout',
+          params: {
+            height,
+          },
+        });
+      }
+    },
+    [animatedLayoutState]
+  );
+  //#endregion
+
+  //#region effects
+  useBoundingClientRect(ref, handleBoundingClientRect);
+  //#endregion
+
+  //#region renders
+  return (
+    <GestureDetector gesture={panGesture}>
+      <Animated.View
+        ref={ref}
+        onLayout={handleContainerLayout}
+        key="BottomSheetHandleContainer"
+      >
+        <HandleComponent
+          animatedIndex={animatedIndex}
+          animatedPosition={animatedPosition}
+          style={_providedHandleStyle}
+          indicatorStyle={_providedIndicatorStyle}
+        />
+      </Animated.View>
+    </GestureDetector>
+  );
+  //#endregion
+}
+
+const BottomSheetHandleContainer = memo(BottomSheetHandleContainerComponent);
+BottomSheetHandleContainer.displayName = 'BottomSheetHandleContainer';
+
+export default BottomSheetHandleContainer;

package/src/components/bottomSheetHandle/constants.ts

@@ -0,0 +1,12 @@
+const DEFAULT_ACCESSIBLE = true;
+const DEFAULT_ACCESSIBILITY_ROLE = 'adjustable';
+const DEFAULT_ACCESSIBILITY_LABEL = 'Bottom sheet handle';
+const DEFAULT_ACCESSIBILITY_HINT =
+  'Drag up or down to extend or minimize the bottom sheet';
+
+export {
+  DEFAULT_ACCESSIBLE,
+  DEFAULT_ACCESSIBILITY_ROLE,
+  DEFAULT_ACCESSIBILITY_LABEL,
+  DEFAULT_ACCESSIBILITY_HINT,
+};

package/src/components/bottomSheetHandle/index.ts

@@ -0,0 +1,6 @@
+export { default as BottomSheetHandle } from './BottomSheetHandle';
+export { default as BottomSheetHandleContainer } from './BottomSheetHandleContainer';
+export type {
+  BottomSheetHandleProps,
+  BottomSheetHandleContainerProps,
+} from './types';

package/src/components/bottomSheetHandle/styles.ts

@@ -0,0 +1,23 @@
+import { Platform, StyleSheet } from 'react-native';
+import { WINDOW_WIDTH } from '../../constants';
+
+
+export const styles = StyleSheet.create({
+  container: {
+    padding: 10,
+    ...Platform.select({
+      web: {
+        cursor: 'pointer' as const
+      },
+      default: {}
+    }),
+  },
+
+  indicator: {
+    alignSelf: 'center',
+    width: (7.5 * WINDOW_WIDTH) / 100,
+    height: 4,
+    borderRadius: 4,
+    backgroundColor: 'rgba(0, 0, 0, 0.75)',
+  },
+});

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

@@ -0,0 +1,52 @@
+import type React from 'react';
+import type { View, ViewProps } from 'react-native';
+import type { PanGestureHandlerProperties } from 'react-native-gesture-handler';
+import type { AnimateProps, SharedValue } from 'react-native-reanimated';
+import type { useInteractivePanGestureHandlerConfigs } from '../../hooks/useGestureHandler';
+import type {
+  BottomSheetVariables,
+  NullableAccessibilityProps,
+} from '../../types';
+import type { BottomSheetProps } from '../bottomSheet';
+
+export type BottomSheetHandleProps = BottomSheetVariables;
+export interface BottomSheetDefaultHandleProps
+  extends BottomSheetHandleProps,
+    NullableAccessibilityProps {
+  /**
+   * View style to be applied to the handle container.
+   * @type ViewStyle
+   * @default undefined
+   */
+  style?: ViewProps['style'];
+  /**
+   * View style to be applied to the handle indicator.
+   * @type ViewStyle
+   * @default undefined
+   */
+  indicatorStyle?: ViewProps['style'];
+  /**
+   * Content to be added below the indicator.
+   * @type React.ReactNode | React.ReactNode[];
+   * @default undefined
+   */
+  children?: React.ReactNode | React.ReactNode[];
+}
+
+export type BottomSheetHandleContainerProps = Pick<
+  PanGestureHandlerProperties,
+  'simultaneousHandlers'
+> & {
+  handleComponent: React.FC<BottomSheetDefaultHandleProps>;
+} & Pick<
+    BottomSheetProps,
+    'enableHandlePanningGesture' | 'handleIndicatorStyle' | 'handleStyle'
+  > &
+  Pick<
+    useInteractivePanGestureHandlerConfigs,
+    | 'enableOverDrag'
+    | 'enablePanDownToClose'
+    | 'overDragResistanceFactor'
+    | 'keyboardBehavior'
+  > &
+  BottomSheetHandleProps;

package/src/components/bottomSheetHostingContainer/BottomSheetHostingContainer.tsx

@@ -0,0 +1,130 @@
+import React, { memo, useCallback, useMemo, useRef } from 'react';
+import {
+  type LayoutChangeEvent,
+  StatusBar,
+  type StyleProp,
+  View,
+  type ViewStyle,
+} from 'react-native';
+import { WINDOW_HEIGHT } from '../../constants';
+import { print } from '../../utilities';
+import { styles } from './styles';
+import type { BottomSheetHostingContainerProps } from './types';
+
+function BottomSheetHostingContainerComponent({
+  containerLayoutState,
+  layoutState,
+  topInset = 0,
+  bottomInset = 0,
+  shouldCalculateHeight = true,
+  detached,
+  style,
+  children,
+}: BottomSheetHostingContainerProps) {
+  //#region refs
+  const containerRef = useRef<View>(null);
+  //#endregion
+
+  //#region styles
+  const containerStyle = useMemo<StyleProp<ViewStyle>>(
+    () => [
+      style,
+      styles.container,
+      {
+        top: topInset,
+        bottom: bottomInset,
+        overflow: detached ? 'visible' : 'hidden',
+      },
+    ],
+    [style, detached, topInset, bottomInset]
+  );
+  //#endregion
+
+  //#region callbacks
+  const handleLayoutEvent = useCallback(
+    function handleLayoutEvent({
+      nativeEvent: {
+        layout: { height },
+      },
+    }: LayoutChangeEvent) {
+      if (containerLayoutState) {
+        containerLayoutState.modify(state => {
+          'worklet';
+          state.height = height;
+          return state;
+        });
+      }
+
+      if (layoutState) {
+        layoutState.modify(state => {
+          'worklet';
+          state.rawContainerHeight = height;
+          return state;
+        });
+      }
+
+      containerRef.current?.measure(
+        (_x, _y, _width, _height, _pageX, pageY) => {
+          const offset = {
+            bottom: Math.max(
+              0,
+              WINDOW_HEIGHT -
+                ((pageY ?? 0) + height + (StatusBar.currentHeight ?? 0))
+            ),
+            top: pageY ?? 0,
+            left: 0,
+            right: 0,
+          };
+
+          if (containerLayoutState) {
+            containerLayoutState.modify(state => {
+              'worklet';
+              state.offset = offset;
+              return state;
+            });
+          }
+
+          if (layoutState) {
+            layoutState.modify(state => {
+              'worklet';
+              state.containerOffset = offset;
+              return state;
+            });
+          }
+        }
+      );
+
+      if (__DEV__) {
+        print({
+          component: 'BottomSheetHostingContainer',
+          method: 'handleLayoutEvent',
+          category: 'layout',
+          params: {
+            height,
+          },
+        });
+      }
+    },
+    [layoutState, containerLayoutState]
+  );
+  //#endregion
+
+  //#region render
+  return (
+    <View
+      ref={containerRef}
+      pointerEvents="box-none"
+      onLayout={shouldCalculateHeight ? handleLayoutEvent : undefined}
+      style={containerStyle}
+      collapsable={true}
+    >
+      {children}
+    </View>
+  );
+  //#endregion
+}
+
+export const BottomSheetHostingContainer = memo(
+  BottomSheetHostingContainerComponent
+);
+BottomSheetHostingContainer.displayName = 'BottomSheetHostingContainer';

package/src/components/bottomSheetHostingContainer/index.ts

@@ -0,0 +1,2 @@
+export { BottomSheetHostingContainer } from './BottomSheetHostingContainer';
+export type { BottomSheetHostingContainerProps } from './types';

package/src/components/bottomSheetHostingContainer/styles.ts

@@ -0,0 +1,5 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: { ...StyleSheet.absoluteFillObject, pointerEvents: 'box-none' },
+});

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

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    top: 0,
+  },
+});

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

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import type { Insets, StyleProp, ViewStyle } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+import type { ContainerLayoutState, LayoutState } from '../../types';
+import type { BottomSheetProps } from '../bottomSheet/types';
+
+export interface BottomSheetHostingContainerProps
+  extends Partial<
+    Pick<BottomSheetProps, 'topInset' | 'bottomInset' | 'detached'>
+  > {
+  containerLayoutState?: SharedValue<ContainerLayoutState>;
+  layoutState?: SharedValue<LayoutState>;
+
+  shouldCalculateHeight?: boolean;
+  style?: StyleProp<ViewStyle>;
+  children?: ReactNode;
+}