@momo-kits/foundation 0.168.1-rn862.1 → 0.169.2

package/Application/BottomSheet.hooks.ts

@@ -0,0 +1,195 @@
+import { MutableRefObject, useCallback, useEffect, useState } from 'react';
+import {
+  Extrapolation,
+  interpolate,
+  SharedValue,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+import {
+  BackHandler,
+  Dimensions,
+  Keyboard,
+  KeyboardEvent,
+  LayoutAnimation,
+  Platform,
+  useWindowDimensions,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useHeaderHeight } from '@react-navigation/elements';
+import { scheduleOnRN } from 'react-native-worklets';
+import { BottomSheetParams, NavigatorProps } from './types';
+import { isIPhoneDuo } from './utils';
+import { useModalLayout } from './modalLayout';
+
+/**
+ * Sheet geometry for the current window: foldable placement and size from
+ * `useModalLayout`, plus the insets and offsets the keyboard handling needs.
+ */
+export const useBottomSheetLayout = () => {
+  const windowSize = useWindowDimensions();
+  const isDuo = isIPhoneDuo();
+  const { isFoldable, placement, sheet, scrimOpacity } = useModalLayout();
+  // 'screen' is the outer display on iPhone Duo, even when unfolded
+  const screenHeight = Dimensions.get('screen').height;
+  const heightDevice = isDuo ? windowSize.height : screenHeight;
+  const insets = useSafeAreaInsets();
+  const heightHeader = useHeaderHeight();
+  const isIOS = Platform.OS === 'ios';
+  const bottomInset = isIOS ? Math.min(insets.bottom, 21) : insets.bottom;
+  const keyboardOffset = heightHeader - bottomInset;
+
+  return {
+    windowSize,
+    isDuo,
+    isFoldable,
+    placement,
+    sheet,
+    scrimOpacity,
+    heightDevice,
+    bottomInset,
+    keyboardOffset,
+  };
+};
+
+// KeyboardAvoidingView lifts the whole sheet past the top on iPhone Duo,
+// so lift it here and shrink maxHeight by the same amount instead
+export const useDuoKeyboardLift = (
+  isDuo: boolean,
+  useKeyboardAvoidingView: boolean,
+  windowHeight: number,
+  bottomInset: number,
+  keyboardVerticalOffset?: number,
+) => {
+  const [keyboardLift, setKeyboardLift] = useState(0);
+
+  useEffect(() => {
+    if (!isDuo || !useKeyboardAvoidingView) {
+      return;
+    }
+    const onKeyboardChange = (e: KeyboardEvent) => {
+      const overlap = windowHeight - e.endCoordinates.screenY;
+      const lift = Math.max(
+        overlap - bottomInset - (keyboardVerticalOffset ?? 0),
+        0,
+      );
+      if (e.duration) {
+        LayoutAnimation.configureNext({
+          duration: e.duration,
+          update: {
+            duration: e.duration,
+            type: LayoutAnimation.Types[e.easing] || 'keyboard',
+          },
+        });
+      }
+      setKeyboardLift(lift);
+    };
+    const subscriptions = [
+      Keyboard.addListener('keyboardWillChangeFrame', onKeyboardChange),
+      Keyboard.addListener('keyboardWillHide', onKeyboardChange),
+    ];
+    return () => subscriptions.forEach(sub => sub.remove());
+  }, [
+    bottomInset,
+    isDuo,
+    keyboardVerticalOffset,
+    useKeyboardAvoidingView,
+    windowHeight,
+  ]);
+
+  return keyboardLift;
+};
+
+/**
+ * Slide of the sheet and fade of the scrim behind it, up to the
+ * `scrimOpacity` of the modal spec (lighter on foldables).
+ */
+export const useSheetAnimatedStyles = (
+  translateY: SharedValue<number>,
+  heightDevice: number,
+  scrimOpacity: number,
+) => {
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateY: translateY.value }],
+    };
+  });
+
+  const animatedOverlayStyle = useAnimatedStyle(() => {
+    return {
+      opacity: interpolate(
+        translateY.value,
+        [0, heightDevice],
+        [scrimOpacity, 0],
+        Extrapolation.CLAMP,
+      ),
+    };
+  });
+
+  return { animatedStyle, animatedOverlayStyle };
+};
+
+type SheetDismissParams = {
+  barrierDismissible: boolean;
+  closeAnimation: (callback?: () => void) => void;
+  navigator?: NavigatorProps;
+  leftOptions: BottomSheetParams['leftOptions'];
+  action: MutableRefObject<undefined | string>;
+};
+
+export const useSheetDismiss = ({
+  barrierDismissible,
+  closeAnimation,
+  navigator,
+  leftOptions,
+  action,
+}: SheetDismissParams) => {
+  /**
+   * handler dismiss
+   */
+  const onDismiss = useCallback(
+    (force = false, callback?: () => void) => {
+      if (barrierDismissible && !force) {
+        return;
+      }
+      closeAnimation(() => {
+        navigator?.pop();
+        scheduleOnRN(() => {
+          callback?.();
+        });
+      });
+    },
+    [barrierDismissible, closeAnimation, navigator],
+  );
+
+  /**
+   * on request close
+   */
+  const onRequestClose = useCallback(
+    (callback?: () => void) => {
+      onDismiss(true, callback);
+    },
+    [onDismiss],
+  );
+
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      () => {
+        onDismiss();
+        return true;
+      },
+    );
+    return () => backHandler.remove();
+  }, [barrierDismissible, onDismiss]);
+
+  const onPressBack = useCallback(() => {
+    onDismiss(true, leftOptions?.onPressIconLeft);
+  }, [leftOptions, onDismiss]);
+
+  const onPressClose = useCallback(() => {
+    action.current = 'icon_close';
+    onDismiss(true);
+  }, [action, onDismiss]);
+
+  return { onDismiss, onRequestClose, onPressBack, onPressClose };
+};

package/Application/BottomSheet.parts.tsx

@@ -0,0 +1,147 @@
+import React from 'react';
+import { PanResponderInstance, View, ViewStyle } from 'react-native';
+import { Spacing, Styles } from '../Consts';
+import layoutStyles from '../Layout/styles';
+import { Text } from '../Text';
+import { INDICATOR_HEIGHT, styles } from './BottomSheet.styles';
+import { ModalIconButton } from './ModalIconButton';
+import { type ModalLayout } from './modalLayout';
+import { BottomSheetParams, Theme } from './types';
+
+type SheetHeaderParams = {
+  panHandlers: PanResponderInstance['panHandlers'];
+  useDivider: boolean;
+  theme: Theme;
+  showBack: boolean;
+  onPressBack: () => void;
+  onPressClose: () => void;
+  iconBack: string;
+  options: BottomSheetParams['options'];
+  leftOptions: BottomSheetParams['leftOptions'];
+};
+
+/**
+ * Drag handle and header row: back, title (or a custom header) and close, with
+ * the 32 modal icon buttons on every device.
+ */
+export const renderSheetHeader = ({
+  panHandlers,
+  useDivider,
+  theme,
+  showBack,
+  onPressBack,
+  onPressClose,
+  iconBack,
+  options,
+  leftOptions,
+}: SheetHeaderParams) => (
+  <View {...panHandlers}>
+    <View style={{ height: INDICATOR_HEIGHT }}>
+      <View style={styles.indicator} />
+    </View>
+    <View
+      style={[
+        styles.header,
+        useDivider && styles.headerDivider,
+        useDivider && {
+          borderBottomColor: theme.colors.border.default,
+        },
+      ]}
+    >
+      {showBack ? (
+        <ModalIconButton icon={iconBack} onPress={onPressBack} />
+      ) : null}
+
+      {options.header ? (
+        <View style={Styles.flex}>{options.header}</View>
+      ) : (
+        <>
+          {!leftOptions ? <View style={styles.iconButtonSpace} /> : null}
+          <Text
+            style={[Styles.flex, styles.title]}
+            numberOfLines={1}
+            typography="header_default_bold"
+          >
+            {options.title ?? ''}
+          </Text>
+        </>
+      )}
+      <ModalIconButton icon="navigation_close" onPress={onPressClose} />
+    </View>
+  </View>
+);
+
+/**
+ * Footer pinned under the sheet content, `null` when the sheet has none.
+ */
+export const renderSheetFooter = ({
+  footerComponent,
+  theme,
+}: {
+  footerComponent: BottomSheetParams['footerComponent'];
+  theme: Theme;
+}) => {
+  if (!footerComponent) {
+    return null;
+  }
+  return (
+    <View
+      style={[
+        layoutStyles.shadow,
+        {
+          paddingBottom: Spacing.S,
+          backgroundColor: theme.colors.background.surface,
+        },
+      ]}
+    >
+      {footerComponent}
+    </View>
+  );
+};
+
+type SheetStyleParams = {
+  backgroundColor: string;
+  isDuo: boolean;
+  isFoldable: boolean;
+  placement: ModalLayout['placement'];
+  sheet: ModalLayout['sheet'];
+  keyboardLift: number;
+  showBaseLineDebug: boolean;
+};
+
+/**
+ * Sheet container style. On foldables the sheet is centered in the placement
+ * area, clear of the iPhone Duo control column and on the right half when half
+ * folded; the keyboard lift comes off its max height.
+ */
+export const getSheetStyle = ({
+  backgroundColor,
+  isDuo,
+  isFoldable,
+  placement,
+  sheet,
+  keyboardLift,
+  showBaseLineDebug,
+}: SheetStyleParams) => {
+  const { width, maxHeight } = sheet;
+  let foldableStyle: ViewStyle | undefined;
+  if (isFoldable && width !== undefined && maxHeight !== undefined) {
+    foldableStyle = {
+      width,
+      marginLeft: placement.x + (placement.width - width) / 2,
+      maxHeight: maxHeight - keyboardLift,
+      minHeight: sheet.minHeight,
+    };
+  }
+  return [
+    styles.sheetContainer,
+    {
+      backgroundColor,
+      borderTopLeftRadius: sheet.radius,
+      borderTopRightRadius: sheet.radius,
+    },
+    isDuo && { marginBottom: keyboardLift },
+    foldableStyle,
+    showBaseLineDebug && styles.debugBaseLine,
+  ];
+};

package/Application/BottomSheet.styles.ts

@@ -0,0 +1,43 @@
+import { StyleSheet } from 'react-native';
+import { Colors, Radius, Spacing } from '../Consts';
+import { MODAL_ICON_BUTTON_SIZE } from './ModalIconButton';
+
+export const INDICATOR_HEIGHT = 16;
+export const HEADER_HEIGHT = 56;
+export const DUO_ORIENTATIONS = ['portrait', 'landscape'];
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  overlay: {
+    flex: 1,
+    backgroundColor: Colors.black_20,
+  },
+  indicator: {
+    width: 40,
+    height: 4,
+    borderRadius: Radius.S,
+    backgroundColor: Colors.black_06,
+    position: 'absolute',
+    alignSelf: 'center',
+    top: Spacing.S,
+  },
+  header: {
+    height: HEADER_HEIGHT,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: Spacing.M,
+    gap: Spacing.S,
+  },
+  title: { textAlign: 'center' },
+  iconButtonSpace: {
+    width: MODAL_ICON_BUTTON_SIZE,
+    height: MODAL_ICON_BUTTON_SIZE,
+  },
+  shrink: { flexShrink: 1 },
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
+  headerDivider: { borderBottomWidth: 1 },
+  sheetContainer: { overflow: 'hidden' },
+});