@mustmove/bottom-sheet 1.0.0

package/src/components/bottomSheetScrollable/ScrollableContainer.web.tsx

@@ -0,0 +1,102 @@
+import React, {
+  type ComponentProps,
+  forwardRef,
+  useCallback,
+  useRef,
+} from 'react';
+import type { LayoutChangeEvent, ViewProps } from 'react-native';
+import type { SimultaneousGesture } from 'react-native-gesture-handler';
+import Animated from 'react-native-reanimated';
+import { INITIAL_LAYOUT_VALUE } from '../../constants';
+import { useBottomSheetInternal } from '../../hooks';
+import { BottomSheetDraggableScrollable } from './BottomSheetDraggableScrollable';
+
+interface ScrollableContainerProps {
+  nativeGesture: SimultaneousGesture;
+  setContentSize: (contentHeight: number) => void;
+  // biome-ignore lint/suspicious/noExplicitAny: 🤷‍♂️
+  ScrollableComponent: any;
+  onLayout: ViewProps['onLayout'];
+}
+
+/**
+ * Detect if the current browser is Safari or not.
+ */
+const isWebkit = () => {
+  // @ts-ignore
+  return navigator.userAgent.indexOf('Safari') > -1;
+};
+
+export const ScrollableContainer = forwardRef<
+  never,
+  ScrollableContainerProps & { animatedProps: never }
+>(function ScrollableContainer(
+  {
+    nativeGesture,
+    ScrollableComponent,
+    animatedProps,
+    setContentSize,
+    onLayout,
+    ...rest
+  },
+  ref
+) {
+  //#region refs
+  const isInitialContentHeightCaptured = useRef(false);
+  //#endregion
+
+  //#region hooks
+  const { animatedLayoutState } = useBottomSheetInternal();
+  //#endregion
+
+  //#region callbacks
+  const renderScrollComponent = useCallback(
+    (props: ComponentProps<typeof Animated.ScrollView>) => (
+      <Animated.ScrollView {...props} animatedProps={animatedProps} />
+    ),
+    [animatedProps]
+  );
+
+  /**
+   * A workaround a bug in React Native Web [#1502](https://github.com/necolas/react-native-web/issues/1502),
+   * where the `onContentSizeChange` won't be call on initial render.
+   */
+  const handleOnLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      if (onLayout) {
+        onLayout(event);
+      }
+
+      if (!isInitialContentHeightCaptured.current) {
+        isInitialContentHeightCaptured.current = true;
+        if (!isWebkit()) {
+          return;
+        }
+
+        /**
+         * early exit if the content height been calculated.
+         */
+        if (animatedLayoutState.get().contentHeight !== INITIAL_LAYOUT_VALUE) {
+          return;
+        }
+        // @ts-ignore
+        window.requestAnimationFrame(() => {
+          // @ts-ignore
+          setContentSize(event.nativeEvent.target.clientHeight);
+        });
+      }
+    },
+    [onLayout, setContentSize, animatedLayoutState]
+  );
+  //#endregion
+  return (
+    <BottomSheetDraggableScrollable scrollableGesture={nativeGesture}>
+      <ScrollableComponent
+        ref={ref}
+        {...rest}
+        onLayout={handleOnLayout}
+        renderScrollComponent={renderScrollComponent}
+      />
+    </BottomSheetDraggableScrollable>
+  );
+});

package/src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx

@@ -0,0 +1,153 @@
+import React, {
+  forwardRef,
+  useContext,
+  useImperativeHandle,
+  useMemo,
+} from 'react';
+import { Gesture } from 'react-native-gesture-handler';
+import { useAnimatedProps } from 'react-native-reanimated';
+import {
+  SCROLLABLE_DECELERATION_RATE_MAPPER,
+  SCROLLABLE_STATUS,
+  type SCROLLABLE_TYPE,
+} from '../../constants';
+import { BottomSheetDraggableContext } from '../../contexts/gesture';
+import {
+  useBottomSheetContentContainerStyle,
+  useBottomSheetInternal,
+  useScrollHandler,
+  useScrollableSetter,
+  useStableCallback,
+} from '../../hooks';
+import { ScrollableContainer } from './ScrollableContainer';
+import { useBottomSheetContentSizeSetter } from './useBottomSheetContentSizeSetter';
+
+export function createBottomSheetScrollableComponent<T, P>(
+  type: SCROLLABLE_TYPE,
+  // biome-ignore lint: to be addressed!
+  ScrollableComponent: any
+) {
+  return forwardRef<T, P>((props, ref) => {
+    //#region props
+    const {
+      // hooks
+      focusHook,
+      scrollEventsHandlersHook,
+      // props
+      enableFooterMarginAdjustment = false,
+      overScrollMode = 'never',
+      keyboardDismissMode = 'interactive',
+      showsVerticalScrollIndicator = true,
+      contentContainerStyle: _providedContentContainerStyle,
+      refreshing,
+      onRefresh,
+      progressViewOffset,
+      refreshControl,
+      // events
+      onScroll,
+      onScrollBeginDrag,
+      onScrollEndDrag,
+      onContentSizeChange,
+      ...rest
+      // biome-ignore lint: to be addressed!
+    }: any = props;
+    //#endregion
+
+    //#region hooks
+    const draggableGesture = useContext(BottomSheetDraggableContext);
+    const { scrollableRef, scrollableContentOffsetY, scrollHandler } =
+      useScrollHandler(
+        scrollEventsHandlersHook,
+        onScroll,
+        onScrollBeginDrag,
+        onScrollEndDrag
+      );
+    const {
+      animatedScrollableStatus: animatedScrollableState,
+      enableContentPanningGesture,
+    } = useBottomSheetInternal();
+    const { setContentSize } = useBottomSheetContentSizeSetter();
+    //#endregion
+
+    if (!draggableGesture && enableContentPanningGesture) {
+      throw "'Scrollable' cannot be used out of the BottomSheet!";
+    }
+
+    //#region variables
+    const scrollableAnimatedProps = useAnimatedProps(
+      () => ({
+        decelerationRate:
+          SCROLLABLE_DECELERATION_RATE_MAPPER[animatedScrollableState.value],
+        showsVerticalScrollIndicator: showsVerticalScrollIndicator
+          ? animatedScrollableState.value === SCROLLABLE_STATUS.UNLOCKED
+          : showsVerticalScrollIndicator,
+      }),
+      [animatedScrollableState, showsVerticalScrollIndicator]
+    );
+
+    const scrollableGesture = useMemo(
+      () =>
+        draggableGesture
+          ? Gesture.Native()
+              // @ts-ignore
+              .simultaneousWithExternalGesture(draggableGesture)
+              .shouldCancelWhenOutside(false)
+          : undefined,
+      [draggableGesture]
+    );
+    //#endregion
+
+    //#region callbacks
+    const handleContentSizeChange = useStableCallback(
+      (contentWidth: number, contentHeight: number) => {
+        setContentSize(contentHeight);
+        if (onContentSizeChange) {
+          onContentSizeChange(contentWidth, contentHeight);
+        }
+      }
+    );
+    //#endregion
+
+    //#region styles
+    const contentContainerStyle = useBottomSheetContentContainerStyle(
+      enableFooterMarginAdjustment,
+      _providedContentContainerStyle
+    );
+    //#endregion
+
+    //#region effects
+    // @ts-ignore
+    useImperativeHandle(ref, () => scrollableRef.current);
+    useScrollableSetter(
+      scrollableRef,
+      type,
+      scrollableContentOffsetY,
+      onRefresh !== undefined,
+      focusHook
+    );
+    //#endregion
+
+    //#region render
+    return (
+      <ScrollableContainer
+        ref={scrollableRef}
+        nativeGesture={scrollableGesture}
+        animatedProps={scrollableAnimatedProps}
+        overScrollMode={overScrollMode}
+        keyboardDismissMode={keyboardDismissMode}
+        refreshing={refreshing}
+        scrollEventThrottle={16}
+        progressViewOffset={progressViewOffset}
+        contentContainerStyle={contentContainerStyle}
+        onRefresh={onRefresh}
+        onScroll={scrollHandler}
+        onContentSizeChange={handleContentSizeChange}
+        setContentSize={setContentSize}
+        ScrollableComponent={ScrollableComponent}
+        refreshControl={refreshControl}
+        {...rest}
+      />
+    );
+    //#endregion
+  });
+}

package/src/components/bottomSheetScrollable/index.ts

@@ -0,0 +1,15 @@
+export { createBottomSheetScrollableComponent } from './createBottomSheetScrollableComponent';
+export { default as BottomSheetSectionList } from './BottomSheetSectionList';
+export { default as BottomSheetFlatList } from './BottomSheetFlatList';
+export { default as BottomSheetScrollView } from './BottomSheetScrollView';
+export { default as BottomSheetVirtualizedList } from './BottomSheetVirtualizedList';
+
+export { default as BottomSheetFlashList } from './BottomSheetFlashList';
+
+export type {
+  BottomSheetFlatListMethods,
+  BottomSheetScrollViewMethods,
+  BottomSheetSectionListMethods,
+  BottomSheetVirtualizedListMethods,
+  BottomSheetScrollableProps,
+} from './types';

package/src/components/bottomSheetScrollable/styles.ts

@@ -0,0 +1,8 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    overflow: 'visible',
+  },
+});

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

@@ -0,0 +1,280 @@
+import type {
+  DependencyList,
+  EffectCallback,
+  ReactNode,
+  Ref,
+  RefObject,
+} from 'react';
+import type {
+  FlatListProps,
+  NodeHandle,
+  ScrollResponderMixin,
+  ScrollViewComponent,
+  ScrollViewProps,
+  SectionListProps,
+  SectionListScrollParams,
+  View,
+  VirtualizedListProps,
+} from 'react-native';
+import type Animated from 'react-native-reanimated';
+import type { ScrollEventsHandlersHookType } from '../../types';
+
+export interface BottomSheetScrollableProps {
+  /**
+   * Adjust the scrollable bottom margin to avoid the animated footer.
+   *
+   * @type boolean
+   * @default false
+   */
+  enableFooterMarginAdjustment?: boolean;
+
+  /**
+   * This needed when bottom sheet used with multiple scrollables to allow bottom sheet
+   * detect the current scrollable ref, especially when used with `React Navigation`.
+   * You will need to provide `useFocusEffect` from `@react-navigation/native`.
+   *
+   * @type (effect: EffectCallback, deps?: DependencyList) => void
+   * @default useEffect
+   */
+  focusHook?: (effect: EffectCallback, deps?: DependencyList) => void;
+
+  /**
+   * Custom hook to provide scroll events handler, which will allow advance and
+   * customize handling for scrollables.
+   *
+   * @warning this is an experimental feature and the hook signature can change without a major version bump.
+   * @type ScrollEventsHandlersHookType
+   * @default useScrollEventsHandlersDefault
+   */
+  scrollEventsHandlersHook?: ScrollEventsHandlersHookType;
+}
+
+export type ScrollableProps<T> =
+  | ScrollViewProps
+  | FlatListProps<T>
+  | SectionListProps<T>;
+
+//#region FlatList
+export type BottomSheetFlatListProps<T> = Omit<
+  Animated.AnimateProps<FlatListProps<T>>,
+  'decelerationRate' | 'onScroll' | 'scrollEventThrottle'
+> &
+  BottomSheetScrollableProps & {
+    ref?: Ref<BottomSheetFlatListMethods>;
+  };
+
+export interface BottomSheetFlatListMethods {
+  /**
+   * Scrolls to the end of the content. May be janky without `getItemLayout` prop.
+   */
+  scrollToEnd: (params?: { animated?: boolean | null }) => void;
+
+  /**
+   * Scrolls to the item at the specified index such that it is positioned in the viewable area
+   * such that viewPosition 0 places it at the top, 1 at the bottom, and 0.5 centered in the middle.
+   * Cannot scroll to locations outside the render window without specifying the getItemLayout prop.
+   */
+  scrollToIndex: (params: {
+    animated?: boolean | null;
+    index: number;
+    viewOffset?: number;
+    viewPosition?: number;
+  }) => void;
+
+  /**
+   * Requires linear scan through data - use `scrollToIndex` instead if possible.
+   * May be janky without `getItemLayout` prop.
+   */
+  scrollToItem: (params: {
+    animated?: boolean | null;
+    // biome-ignore lint: to be addressed!
+    item: any;
+    viewPosition?: number;
+  }) => void;
+
+  /**
+   * Scroll to a specific content pixel offset, like a normal `ScrollView`.
+   */
+  scrollToOffset: (params: {
+    animated?: boolean | null;
+    offset: number;
+  }) => void;
+
+  /**
+   * Tells the list an interaction has occured, which should trigger viewability calculations,
+   * e.g. if waitForInteractions is true and the user has not scrolled. This is typically called
+   * by taps on items or by navigation actions.
+   */
+  recordInteraction: () => void;
+
+  /**
+   * Displays the scroll indicators momentarily.
+   */
+  flashScrollIndicators: () => void;
+
+  /**
+   * Provides a handle to the underlying scroll responder.
+   */
+  getScrollResponder: () => ScrollResponderMixin | null | undefined;
+
+  /**
+   * Provides a reference to the underlying host component
+   */
+  getNativeScrollRef: () =>
+    | RefObject<View>
+    | RefObject<ScrollViewComponent>
+    | null
+    | undefined;
+
+  // biome-ignore lint: to be addressed!
+  getScrollableNode: () => any;
+
+  // biome-ignore lint: to be addressed!
+  setNativeProps: (props: { [key: string]: any }) => void;
+}
+//#endregion
+
+//#region ScrollView
+export type BottomSheetScrollViewProps = Omit<
+  Animated.AnimateProps<ScrollViewProps>,
+  'decelerationRate' | 'scrollEventThrottle'
+> &
+  BottomSheetScrollableProps & {
+    ref?: Ref<BottomSheetScrollViewMethods>;
+    children: ReactNode | ReactNode[];
+  };
+
+export interface BottomSheetScrollViewMethods {
+  /**
+   * Scrolls to a given x, y offset, either immediately or with a smooth animation.
+   * Syntax:
+   *
+   * scrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true})
+   *
+   * Note: The weird argument signature is due to the fact that, for historical reasons,
+   * the function also accepts separate arguments as an alternative to the options object.
+   * This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED.
+   */
+  scrollTo(
+    y?: number | { x?: number; y?: number; animated?: boolean },
+    x?: number,
+    animated?: boolean
+  ): void;
+
+  /**
+   * A helper function that scrolls to the end of the scrollview;
+   * If this is a vertical ScrollView, it scrolls to the bottom.
+   * If this is a horizontal ScrollView scrolls to the right.
+   *
+   * The options object has an animated prop, that enables the scrolling animation or not.
+   * The animated prop defaults to true
+   */
+  scrollToEnd(options?: { animated: boolean }): void;
+
+  /**
+   * Returns a reference to the underlying scroll responder, which supports
+   * operations like `scrollTo`. All ScrollView-like components should
+   * implement this method so that they can be composed while providing access
+   * to the underlying scroll responder's methods.
+   */
+  getScrollResponder(): ScrollResponderMixin;
+
+  // biome-ignore lint: to be addressed!
+  getScrollableNode(): any;
+
+  // biome-ignore lint: to be addressed!
+  getInnerViewNode(): any;
+
+  /**
+   * @deprecated Use scrollTo instead
+   */
+  scrollWithoutAnimationTo?: (y: number, x: number) => void;
+
+  /**
+   * This function sends props straight to native. They will not participate in
+   * future diff process - this means that if you do not include them in the
+   * next render, they will remain active (see [Direct
+   * Manipulation](https://reactnative.dev/docs/direct-manipulation)).
+   */
+  setNativeProps(nativeProps: object): void;
+}
+//#endregion
+
+//#region SectionList
+export type BottomSheetSectionListProps<ItemT, SectionT> = Omit<
+  Animated.AnimateProps<SectionListProps<ItemT, SectionT>>,
+  'decelerationRate' | 'scrollEventThrottle'
+> &
+  BottomSheetScrollableProps & {
+    ref?: Ref<BottomSheetSectionListMethods>;
+  };
+
+export interface BottomSheetSectionListMethods {
+  /**
+   * Scrolls to the item at the specified sectionIndex and itemIndex (within the section)
+   * positioned in the viewable area such that viewPosition 0 places it at the top
+   * (and may be covered by a sticky header), 1 at the bottom, and 0.5 centered in the middle.
+   */
+  scrollToLocation(params: SectionListScrollParams): void;
+
+  /**
+   * Tells the list an interaction has occurred, which should trigger viewability calculations, e.g.
+   * if `waitForInteractions` is true and the user has not scrolled. This is typically called by
+   * taps on items or by navigation actions.
+   */
+  recordInteraction(): void;
+
+  /**
+   * Displays the scroll indicators momentarily.
+   *
+   * @platform ios
+   */
+  flashScrollIndicators(): void;
+
+  /**
+   * Provides a handle to the underlying scroll responder.
+   */
+  getScrollResponder(): ScrollResponderMixin | undefined;
+
+  /**
+   * Provides a handle to the underlying scroll node.
+   */
+  getScrollableNode(): NodeHandle | undefined;
+}
+//#endregion
+
+//#region
+export type BottomSheetVirtualizedListProps<T> = Omit<
+  Animated.AnimateProps<VirtualizedListProps<T>>,
+  'decelerationRate' | 'scrollEventThrottle'
+> &
+  BottomSheetScrollableProps & {
+    ref?: Ref<BottomSheetVirtualizedListMethods>;
+  };
+
+export interface BottomSheetVirtualizedListMethods {
+  scrollToEnd: (params?: { animated?: boolean }) => void;
+  scrollToIndex: (params: {
+    animated?: boolean;
+    index: number;
+    viewOffset?: number;
+    viewPosition?: number;
+  }) => void;
+  scrollToItem: (params: {
+    animated?: boolean;
+    // biome-ignore lint: to be addressed!
+    item: any;
+    viewPosition?: number;
+  }) => void;
+
+  /**
+   * Scroll to a specific content pixel offset in the list.
+   * Param `offset` expects the offset to scroll to. In case of horizontal is true, the
+   * offset is the x-value, in any other case the offset is the y-value.
+   * Param `animated` (true by default) defines whether the list should do an animation while scrolling.
+   */
+  scrollToOffset: (params: { animated?: boolean; offset: number }) => void;
+
+  recordInteraction: () => void;
+}
+//#endregion

package/src/components/bottomSheetScrollable/useBottomSheetContentSizeSetter.ts

@@ -0,0 +1,32 @@
+import { useCallback } from 'react';
+import { useBottomSheetInternal } from '../../hooks';
+
+/**
+ * A hook to set the content size properly into the bottom sheet,
+ * internals.
+ */
+export function useBottomSheetContentSizeSetter() {
+  //#region hooks
+  const { enableDynamicSizing, animatedLayoutState } = useBottomSheetInternal();
+  //#endregion
+
+  //#region methods
+  const setContentSize = useCallback(
+    (contentHeight: number) => {
+      if (!enableDynamicSizing) {
+        return;
+      }
+      animatedLayoutState.modify(state => {
+        'worklet';
+        state.contentHeight = contentHeight;
+        return state;
+      });
+    },
+    [enableDynamicSizing, animatedLayoutState]
+  );
+  //#endregion
+
+  return {
+    setContentSize,
+  };
+}