@momo-kits/foundation 0.168.1-beta.35 → 0.168.1-beta.37

package/Application/BottomSheet.tsx

@@ -1,65 +1,50 @@
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import {
-  BackHandler,
-  Dimensions,
-  Keyboard,
   KeyboardAvoidingView,
-  KeyboardEvent,
-  LayoutAnimation,
   Modal,
   PanResponder,
   Platform,
   Pressable,
   StyleSheet,
-  useWindowDimensions,
   View,
 } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ApplicationContext, MiniAppContext } from '../Context';
 import { BottomSheetParams } from './types';
-import { Colors, Radius, Spacing, Styles } from '../Consts';
-import { Text } from '../Text';
-import { useHeaderHeight } from '@react-navigation/elements';
 import Animated, {
   Easing,
-  Extrapolation,
-  interpolate,
-  useAnimatedStyle,
   useSharedValue,
   withSpring,
   withTiming,
 } from 'react-native-reanimated';
 import { scheduleOnRN } from 'react-native-worklets';
-import layoutStyles from '../Layout/styles';
-import { isIPhoneDuo } from './device';
-import { useModalLayout } from './modalLayout';
-import { MODAL_ICON_BUTTON_SIZE, ModalIconButton } from './ModalIconButton';
-
-const INDICATOR_HEIGHT = 16;
-const HEADER_HEIGHT = 56;
-const DUO_ORIENTATIONS = ['portrait', 'landscape'];
+import { DUO_ORIENTATIONS, styles } from './BottomSheet.styles';
+import {
+  useBottomSheetLayout,
+  useDuoKeyboardLift,
+  useSheetDismiss,
+  useSheetAnimatedStyles,
+} from './BottomSheet.hooks';
+import {
+  getSheetStyle,
+  renderSheetFooter,
+  renderSheetHeader,
+} from './BottomSheet.parts';
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const { theme, navigator } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
-  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 {
+    windowSize,
+    isDuo,
+    isFoldable,
+    placement,
+    sheet,
+    scrimOpacity,
+    heightDevice,
+    bottomInset,
+    keyboardOffset,
+  } = useBottomSheetLayout();
   const action = useRef<undefined | string>(undefined);
-  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;
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
@@ -81,43 +66,13 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   const translateY = useSharedValue(heightDevice);
   const onDismissRef = useRef(props.route.params?.onDismiss);
   onDismissRef.current = props.route.params?.onDismiss;
-  const [keyboardLift, setKeyboardLift] = useState(0);
-
-  // KeyboardAvoidingView lifts the whole sheet past the top on iPhone Duo,
-  // so lift it here and shrink maxHeight by the same amount instead
-  useEffect(() => {
-    if (!isDuo || !useKeyboardAvoidingView) {
-      return;
-    }
-    const onKeyboardChange = (e: KeyboardEvent) => {
-      const overlap = windowSize.height - 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,
+  const keyboardLift = useDuoKeyboardLift(
     isDuo,
-    keyboardVerticalOffset,
     useKeyboardAvoidingView,
     windowSize.height,
-  ]);
+    bottomInset,
+    keyboardVerticalOffset,
+  );
 
   const openAnimation = useCallback(() => {
     translateY.value = withTiming(0, {
@@ -187,126 +142,35 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     };
   }, [openAnimation]);
 
-  /**
-   * 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);
-  }, [onDismiss]);
+  const { onDismiss, onRequestClose, onPressBack, onPressClose } =
+    useSheetDismiss({
+      barrierDismissible,
+      closeAnimation,
+      navigator,
+      leftOptions,
+      action,
+    });
 
   const showBack = !!leftOptions?.onPressIconLeft;
   const iconBack = leftOptions?.iconLeft ?? 'ic_back';
 
-  /**
-   * render header
-   */
-  const renderHeader = useCallback(() => {
-    return (
-      <View {...panResponder.panHandlers}>
-        <View style={{ height: INDICATOR_HEIGHT }}>
-          <View style={styles.indicator} />
-        </View>
-        <View
-          style={[
-            styles.header,
-            useDivider && {
-              borderBottomColor: theme.colors.border.default,
-              borderBottomWidth: 1,
-            },
-          ]}
-        >
-          {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>
-    );
-  }, [
-    iconBack,
-    leftOptions,
+  const headerParams = {
+    panHandlers: panResponder.panHandlers,
+    useDivider,
+    theme,
+    showBack,
     onPressBack,
     onPressClose,
-    options.header,
-    options.title,
-    panResponder.panHandlers,
-    showBack,
-    theme.colors.border.default,
-    useDivider,
-  ]);
-
-  const animatedStyle = useAnimatedStyle(() => {
-    return {
-      transform: [{ translateY: translateY.value }],
-    };
-  });
+    iconBack,
+    options,
+    leftOptions,
+  };
 
-  const animatedOverlayStyle = useAnimatedStyle(() => {
-    return {
-      opacity: interpolate(
-        translateY.value,
-        [0, heightDevice],
-        [scrimOpacity, 0],
-        Extrapolation.CLAMP,
-      ),
-    };
-  });
+  const { animatedStyle, animatedOverlayStyle } = useSheetAnimatedStyles(
+    translateY,
+    heightDevice,
+    scrimOpacity,
+  );
 
   const screen = (
     <Screen
@@ -350,51 +214,30 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         <Animated.View
           style={[
             animatedStyle,
-            {
+            getSheetStyle({
               backgroundColor,
-              borderTopLeftRadius: sheet.radius,
-              borderTopRightRadius: sheet.radius,
-              overflow: 'hidden',
-            },
-            isDuo && { marginBottom: keyboardLift },
-            isFoldable &&
-              sheet.width !== undefined &&
-              sheet.maxHeight !== undefined && {
-                // centered in the placement area, clear of the iPhone Duo
-                // control column and on the right half when half folded
-                width: sheet.width,
-                marginLeft: placement.x + (placement.width - sheet.width) / 2,
-                maxHeight: sheet.maxHeight - keyboardLift,
-                minHeight: sheet.minHeight,
-              },
-            showBaseLineDebug && styles.debugBaseLine,
+              isDuo,
+              isFoldable,
+              placement,
+              sheet,
+              keyboardLift,
+              showBaseLineDebug,
+            }),
           ]}
         >
           {isFoldable ? (
             // content shrinks so a tall sheet keeps its header and footer
             <View style={styles.shrink}>
-              {renderHeader()}
+              {renderSheetHeader(headerParams)}
               <View style={styles.shrink}>{screen}</View>
             </View>
           ) : (
             <>
-              {renderHeader()}
+              {renderSheetHeader(headerParams)}
               {screen}
             </>
           )}
-          {footerComponent && (
-            <View
-              style={[
-                layoutStyles.shadow,
-                {
-                  paddingBottom: Spacing.S,
-                  backgroundColor: theme.colors.background.surface,
-                },
-              ]}
-            >
-              {footerComponent}
-            </View>
-          )}
+          {renderSheetFooter({ footerComponent, theme })}
           {useBottomInset && (
             <View
               style={{
@@ -409,38 +252,4 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   );
 };
 
-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 },
-});
-
 export default BottomSheet;

package/Application/BottomTab/BottomTabBar.styles.ts

@@ -0,0 +1,65 @@
+import { StyleSheet } from 'react-native';
+import { Colors, Spacing } from '../../Consts';
+import { CTA_SHADOW, TabBarMetrics } from './metrics';
+
+export const styles = StyleSheet.create({
+  bar: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: 'center',
+  },
+  // transparent strip that keeps the rising center action touchable
+  barCtaRise: {
+    paddingTop: TabBarMetrics.ctaLift,
+  },
+  container: {
+    height: TabBarMetrics.height,
+  },
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: TabBarMetrics.itemGap,
+    paddingVertical: TabBarMetrics.paddingVertical,
+    paddingHorizontal: TabBarMetrics.paddingHorizontal,
+  },
+  indicator: {
+    height: TabBarMetrics.indicatorHeight,
+  },
+  ctaSlot: {
+    width: TabBarMetrics.ctaSlotWidth,
+    alignSelf: 'stretch',
+  },
+  // the button rises ctaLift above the container top, the label ends on the item baseline
+  cta: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: -TabBarMetrics.ctaLift - TabBarMetrics.paddingVertical,
+    alignItems: 'center',
+    gap: TabBarMetrics.ctaLabelGap,
+  },
+  ctaButton: {
+    boxShadow: CTA_SHADOW,
+    width: TabBarMetrics.ctaSize,
+    height: TabBarMetrics.ctaSize,
+    borderRadius: TabBarMetrics.ctaSize / 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  // custom label content over the label text, centered and unclipped
+  ctaLabelOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  ctaLabel: {
+    maxWidth: TabBarMetrics.ctaSlotWidth,
+    minHeight: TabBarMetrics.ctaLabelHeight,
+    paddingHorizontal: Spacing.XXS,
+    justifyContent: 'center',
+  },
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
+});

package/Application/BottomTab/BottomTabBar.tsx

@@ -1,12 +1,6 @@
 import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
 import React, { useContext, useState } from 'react';
-import {
-  Platform,
-  Pressable,
-  StyleSheet,
-  useWindowDimensions,
-  View,
-} from 'react-native';
+import { Platform, Pressable, useWindowDimensions, View } from 'react-native';
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
@@ -21,14 +15,10 @@ import CustomBottomTabItem from './CustomBottomTabItem';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { CurvedContainer } from './CurvedContainer';
 import { ActiveIndicator } from './ActiveIndicator';
-import {
-  CTA_SHADOW,
-  getHorizontalBarWidth,
-  TabBarMetrics,
-  TabBarMotion,
-} from './metrics';
+import { getHorizontalBarWidth, TabBarMetrics, TabBarMotion } from './metrics';
 import { getTabItems, TabItem } from './tabItems';
 import { FixedScaleText } from './TabBarIcon';
+import { styles } from './BottomTabBar.styles';
 
 type Props = BottomTabBarProps & {
   activeTintColor: string;
@@ -258,8 +248,8 @@ export default function BottomTabBar(props: Props) {
       pointerEvents={'box-none'}
       style={[
         styles.bar,
+        withCta && styles.barCtaRise,
         {
-          paddingTop: withCta ? TabBarMetrics.ctaLift : 0,
           paddingBottom: getSystemIndicatorHeight(insets.bottom),
           // centered between the side safe areas
           paddingLeft: insets.left,
@@ -278,64 +268,6 @@ export default function BottomTabBar(props: Props) {
   );
 }
 
-const styles = StyleSheet.create({
-  bar: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    bottom: 0,
-    alignItems: 'center',
-  },
-  container: {
-    height: TabBarMetrics.height,
-  },
-  content: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: TabBarMetrics.itemGap,
-    paddingVertical: TabBarMetrics.paddingVertical,
-    paddingHorizontal: TabBarMetrics.paddingHorizontal,
-  },
-  indicator: {
-    height: TabBarMetrics.indicatorHeight,
-  },
-  ctaSlot: {
-    width: TabBarMetrics.ctaSlotWidth,
-    alignSelf: 'stretch',
-  },
-  // the button rises ctaLift above the container top, the label ends on the item baseline
-  cta: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: -TabBarMetrics.ctaLift - TabBarMetrics.paddingVertical,
-    alignItems: 'center',
-    gap: TabBarMetrics.ctaLabelGap,
-  },
-  ctaButton: {
-    boxShadow: CTA_SHADOW,
-    width: TabBarMetrics.ctaSize,
-    height: TabBarMetrics.ctaSize,
-    borderRadius: TabBarMetrics.ctaSize / 2,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  // custom label content over the label text, centered and unclipped
-  ctaLabelOverlay: {
-    ...StyleSheet.absoluteFillObject,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  ctaLabel: {
-    maxWidth: TabBarMetrics.ctaSlotWidth,
-    minHeight: TabBarMetrics.ctaLabelHeight,
-    paddingHorizontal: Spacing.XXS,
-    justifyContent: 'center',
-  },
-  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
-});
-
 export {
   HorizontalTabBar,
   getSystemIndicatorHeight,