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

package/Application/BottomSheet.tsx

@@ -1,69 +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,
-  TouchableOpacity,
-  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 { Icon } from '../Icon';
-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 { getDuoTopInset, isIPhoneDuo } from './device';
-
-// iPhone Duo inner display: center the sheet instead of spanning the width
-const DUO_REGULAR_MIN_WIDTH = 600;
+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 isDuoCentered = isDuo && windowSize.width >= DUO_REGULAR_MIN_WIDTH;
-  const isPortrait = windowSize.height > windowSize.width;
-  // '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 topGap = Math.max(
-    getDuoTopInset(insets, windowSize.width, windowSize.height),
-    Spacing.XL,
-  );
-  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;
 
@@ -83,43 +64,15 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   }: BottomSheetParams = props.route.params;
 
   const translateY = useSharedValue(heightDevice);
-  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 onDismissRef = useRef(props.route.params?.onDismiss);
+  onDismissRef.current = props.route.params?.onDismiss;
+  const keyboardLift = useDuoKeyboardLift(
     isDuo,
-    keyboardVerticalOffset,
     useKeyboardAvoidingView,
     windowSize.height,
-  ]);
+    bottomInset,
+    keyboardVerticalOffset,
+  );
 
   const openAnimation = useCallback(() => {
     translateY.value = withTiming(0, {
@@ -179,145 +132,46 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   }
 
   /**
-   * emit dismiss event
+   * emit dismiss event, once: folding or rotating iPhone Duo changes the
+   * window height while the sheet stays open
    */
   useEffect(() => {
-    translateY.value = heightDevice;
     openAnimation();
     return () => {
-      props.route.params?.onDismiss?.(action.current);
+      onDismissRef.current?.(action.current);
     };
-  }, [heightDevice, openAnimation, props.route.params, translateY]);
-
-  /**
-   * 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]);
+  }, [openAnimation]);
+
+  const { onDismiss, onRequestClose, onPressBack, onPressClose } =
+    useSheetDismiss({
+      barrierDismissible,
+      closeAnimation,
+      navigator,
+      leftOptions,
+      action,
+    });
 
-  /**
-   * render header
-   */
-  const renderHeader = useCallback(() => {
-    return (
-      <View {...panResponder.panHandlers}>
-        <View style={{ height: 16 }}>
-          <View style={styles.indicator} />
-        </View>
-        <View
-          style={[
-            styles.header,
-            useDivider && {
-              borderBottomColor: theme.colors.border.default,
-              borderBottomWidth: 1,
-            },
-          ]}
-        >
-          {leftOptions?.onPressIconLeft ? (
-            <TouchableOpacity
-              style={styles.iconButton}
-              onPress={() => {
-                onDismiss(true, leftOptions.onPressIconLeft);
-              }}
-            >
-              <Icon source={leftOptions.iconLeft ?? 'ic_back'} />
-            </TouchableOpacity>
-          ) : null}
+  const showBack = !!leftOptions?.onPressIconLeft;
+  const iconBack = leftOptions?.iconLeft ?? 'ic_back';
 
-          {options.header ? (
-            <View style={Styles.flex}>{options.header}</View>
-          ) : (
-            <>
-              {!leftOptions ? <View style={styles.iconButton} /> : null}
-              <Text
-                style={[Styles.flex, { textAlign: 'center' }]}
-                numberOfLines={1}
-                typography="header_default_bold"
-              >
-                {options.title ?? ''}
-              </Text>
-            </>
-          )}
-          <TouchableOpacity
-            style={styles.iconButton}
-            onPress={() => {
-              action.current = 'icon_close';
-              onDismiss(true);
-            }}
-          >
-            <Icon source="navigation_close" />
-          </TouchableOpacity>
-        </View>
-      </View>
-    );
-  }, [
-    onDismiss,
-    leftOptions,
-    options.header,
-    options.title,
-    panResponder.panHandlers,
-    theme.colors.border.default,
+  const headerParams = {
+    panHandlers: panResponder.panHandlers,
     useDivider,
-  ]);
-
-  const animatedStyle = useAnimatedStyle(() => {
-    return {
-      transform: [{ translateY: translateY.value }],
-    };
-  });
-
-  const animatedOverlayStyle = useAnimatedStyle(() => {
-    return {
-      opacity: interpolate(
-        translateY.value,
-        [0, heightDevice],
-        [1, 0],
-        Extrapolation.CLAMP,
-      ),
-    };
-  });
-
-  // landscape side buttons span the full height, so inset the content; in
-  // portrait the side status bar only covers the top corner
-  const needsSideInset = isDuo && !isDuoCentered && !isPortrait;
-  const sideInsetStyle = needsSideInset && {
-    paddingLeft: insets.left,
-    paddingRight: insets.right,
+    theme,
+    showBack,
+    onPressBack,
+    onPressClose,
+    iconBack,
+    options,
+    leftOptions,
   };
 
+  const { animatedStyle, animatedOverlayStyle } = useSheetAnimatedStyles(
+    translateY,
+    heightDevice,
+    scrimOpacity,
+  );
+
   const screen = (
     <Screen
       {...props}
@@ -333,8 +187,9 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       onRequestClose={() => {
         onDismiss();
       }}
-      style={StyleSheet.absoluteFill}
+      style={StyleSheet.absoluteFillObject}
       isModalKit={true}
+      supportedOrientations={isDuo ? DUO_ORIENTATIONS : undefined}
     >
       <KeyboardAvoidingView
         behavior={Platform.select({
@@ -347,7 +202,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         style={styles.container}
       >
         <Pressable
-          style={StyleSheet.absoluteFill}
+          style={StyleSheet.absoluteFillObject}
           onPress={() => {
             action.current = 'touch';
             onDismiss();
@@ -359,54 +214,30 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         <Animated.View
           style={[
             animatedStyle,
-            {
+            getSheetStyle({
               backgroundColor,
-              borderTopLeftRadius: Radius.M,
-              borderTopRightRadius: Radius.M,
-              overflow: 'hidden',
-            },
-            isDuo && {
-              maxHeight: windowSize.height - topGap - keyboardLift,
-              marginBottom: keyboardLift,
-            },
-            isDuoCentered && {
-              // keeps the portrait width in landscape, like system sheets
-              width: Math.min(
-                Math.min(windowSize.width, windowSize.height) - Spacing.L * 2,
-                windowSize.width -
-                  Math.max(insets.left, insets.right, Spacing.L) * 2,
-              ),
-              alignSelf: 'center',
-            },
-            showBaseLineDebug && styles.debugBaseLine,
+              isDuo,
+              isFoldable,
+              placement,
+              sheet,
+              keyboardLift,
+              showBaseLineDebug,
+            }),
           ]}
         >
-          {isDuo ? (
+          {isFoldable ? (
             // content shrinks so a tall sheet keeps its header and footer
-            <View style={[styles.shrink, sideInsetStyle]}>
-              {renderHeader()}
+            <View style={styles.shrink}>
+              {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,
-                },
-                sideInsetStyle,
-              ]}
-            >
-              {footerComponent}
-            </View>
-          )}
+          {renderSheetFooter({ footerComponent, theme })}
           {useBottomInset && (
             <View
               style={{
@@ -421,38 +252,4 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'flex-end',
-  },
-  overlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.6)',
-  },
-  indicator: {
-    width: 40,
-    height: 4,
-    borderRadius: Radius.S,
-    backgroundColor: Colors.black_06,
-    position: 'absolute',
-    alignSelf: 'center',
-    top: Spacing.S,
-  },
-  header: {
-    height: 56,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  iconButton: {
-    width: 24,
-    height: 24,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginHorizontal: Spacing.M,
-  },
-  shrink: { flexShrink: 1 },
-  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
-});
-
 export default BottomSheet;

package/Application/BottomTab/ActiveIndicator.tsx

@@ -0,0 +1,90 @@
+import React, { useContext, useEffect, useRef } from 'react';
+import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { ApplicationContext } from '../../Context';
+import { getIndicatorShadow, TabBarMotion } from './metrics';
+
+type Props = {
+  axis: 'x' | 'y';
+  // position of the selected item along the axis, undefined until it is measured
+  offset?: number;
+  // horizontal bar: width of the selected item
+  extent?: number;
+  radius: number;
+  style: StyleProp<ViewStyle>;
+};
+
+/**
+ * one active indicator per bar (Background/tonal with its inner shadows) sliding to the
+ * selected item; it lands in place on the first measure and slides from then on
+ */
+const ActiveIndicator: React.FC<Props> = ({
+  axis,
+  offset,
+  extent,
+  radius,
+  style,
+}) => {
+  const { theme } = useContext(ApplicationContext);
+  const position = useSharedValue(offset ?? 0);
+  const size = useSharedValue(extent ?? 0);
+  const visible = useSharedValue(offset === undefined ? 0 : 1);
+  const placed = useRef(offset !== undefined);
+
+  useEffect(() => {
+    if (offset === undefined) {
+      return;
+    }
+    size.value = extent ?? 0;
+    if (!placed.current) {
+      placed.current = true;
+      position.value = offset;
+      visible.value = 1;
+      return;
+    }
+    position.value = withTiming(offset, TabBarMotion.indicator);
+  }, [offset, extent, position, size, visible]);
+
+  const animatedStyle = useAnimatedStyle(() =>
+    axis === 'x'
+      ? {
+          opacity: visible.value,
+          width: size.value,
+          transform: [{ translateX: position.value }],
+        }
+      : {
+          opacity: visible.value,
+          transform: [{ translateY: position.value }],
+        },
+  );
+
+  return (
+    <Animated.View
+      pointerEvents={'none'}
+      style={[
+        styles.indicator,
+        {
+          borderRadius: radius,
+          backgroundColor: theme.colors.background.tonal,
+          boxShadow: getIndicatorShadow(theme.colors.primary),
+        },
+        style,
+        animatedStyle,
+      ]}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  indicator: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+  },
+});
+
+export { ActiveIndicator };

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 },
+});