@momo-kits/foundation 0.168.1-beta.9 → 0.168.1-duo.2

package/Application/BottomSheet.tsx

@@ -16,6 +16,7 @@ import {
   PanResponder,
   Platform,
   Pressable,
+  StatusBar,
   StyleSheet,
   TouchableOpacity,
   useWindowDimensions,
@@ -39,18 +40,39 @@ import Animated, {
 } from 'react-native-reanimated';
 import { scheduleOnRN } from 'react-native-worklets';
 import layoutStyles from '../Layout/styles';
+import { DuoMetrics, InnerEdgeStyles, useScreenLayout } from '../Layout/utils';
 import { getDuoTopInset, isIPhoneDuo } from './device';
+import { SideBarButton } from './Components/SideBarButton';
 
 // iPhone Duo inner display: center the sheet instead of spanning the width
 const DUO_REGULAR_MIN_WIDTH = 600;
 
+const INDICATOR_HEIGHT = 16;
+const HEADER_HEIGHT = 56;
+const DUO_ORIENTATIONS = ['portrait', 'landscape'];
+const SIDE_COLUMN_OFFSET =
+  INDICATOR_HEIGHT + (HEADER_HEIGHT - DuoMetrics.controlSize) / 2;
+
+const getSideInset = (inset: number) => Math.max(inset - Spacing.M, 0);
+
 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;
+  const isDuoCentered =
+    isDuo &&
+    Math.min(windowSize.width, windowSize.height) >= DUO_REGULAR_MIN_WIDTH;
+  const isDuoFloating = isDuo && !isDuoCentered;
+  const { sideBar } = useScreenLayout();
+  const sideColumnWidth = (sideBar?.width ?? 0) - Spacing.M;
+  const sideColumn =
+    isDuoFloating &&
+    sideColumnWidth >= DuoMetrics.controlSize + Spacing.M &&
+    sideBar
+      ? sideBar
+      : undefined;
+  const hasSideColumn = !!sideColumn;
   // 'screen' is the outer display on iPhone Duo, even when unfolded
   const screenHeight = Dimensions.get('screen').height;
   const heightDevice = isDuo ? windowSize.height : screenHeight;
@@ -58,9 +80,14 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   const insets = useSafeAreaInsets();
   const heightHeader = useHeaderHeight();
   const topGap = Math.max(
-    getDuoTopInset(insets, windowSize.width, windowSize.height),
+    sideColumn
+      ? insets.top
+      : getDuoTopInset(insets, windowSize.width, windowSize.height),
     Spacing.XL,
   );
+  const sideInsetLeft = isDuoFloating ? getSideInset(insets.left) : 0;
+  const sideInsetRight = isDuoFloating ? getSideInset(insets.right) : 0;
+  const indicatorShift = (sideInsetRight - sideInsetLeft) / 2;
   const isIOS = Platform.OS === 'ios';
   const bottomInset = isIOS ? Math.min(insets.bottom, 21) : insets.bottom;
   const keyboardOffset = heightHeader - bottomInset;
@@ -83,7 +110,10 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   }: BottomSheetParams = props.route.params;
 
   const translateY = useSharedValue(heightDevice);
+  const onDismissRef = useRef(props.route.params?.onDismiss);
+  onDismissRef.current = props.route.params?.onDismiss;
   const [keyboardLift, setKeyboardLift] = useState(0);
+  const [sheetTop, setSheetTop] = useState(windowSize.height);
 
   // KeyboardAvoidingView lifts the whole sheet past the top on iPhone Duo,
   // so lift it here and shrink maxHeight by the same amount instead
@@ -179,15 +209,15 @@ 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]);
+  }, [openAnimation]);
 
   /**
    * handler dismiss
@@ -228,14 +258,50 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     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 showBack = !!leftOptions?.onPressIconLeft;
+  const iconBack = leftOptions?.iconLeft ?? 'ic_back';
+  const sideColumnCount = showBack ? 2 : 1;
+  const sideColumnHeight =
+    sideColumnCount * DuoMetrics.controlSize +
+    (sideColumnCount - 1) * Spacing.M;
+  const coversStatusBar = !!sideColumn && sheetTop < sideColumn.top;
+
+  useEffect(() => {
+    if (!coversStatusBar) {
+      return;
+    }
+    const entry = StatusBar.pushStackEntry({
+      barStyle: theme.dark ? 'light-content' : 'dark-content',
+      animated: true,
+    });
+    return () => StatusBar.popStackEntry(entry);
+  }, [coversStatusBar, theme.dark]);
+
   /**
    * render header
    */
   const renderHeader = useCallback(() => {
+    const showButtons = !hasSideColumn;
     return (
       <View {...panResponder.panHandlers}>
-        <View style={{ height: 16 }}>
-          <View style={styles.indicator} />
+        <View style={{ height: INDICATOR_HEIGHT }}>
+          <View
+            style={[
+              styles.indicator,
+              indicatorShift !== 0 && {
+                transform: [{ translateX: indicatorShift }],
+              },
+            ]}
+          />
         </View>
         <View
           style={[
@@ -246,14 +312,9 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
             },
           ]}
         >
-          {leftOptions?.onPressIconLeft ? (
-            <TouchableOpacity
-              style={styles.iconButton}
-              onPress={() => {
-                onDismiss(true, leftOptions.onPressIconLeft);
-              }}
-            >
-              <Icon source={leftOptions.iconLeft ?? 'ic_back'} />
+          {showButtons && showBack ? (
+            <TouchableOpacity style={styles.iconButton} onPress={onPressBack}>
+              <Icon source={iconBack} />
             </TouchableOpacity>
           ) : null}
 
@@ -261,9 +322,15 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
             <View style={Styles.flex}>{options.header}</View>
           ) : (
             <>
-              {!leftOptions ? <View style={styles.iconButton} /> : null}
+              {showButtons && !leftOptions ? (
+                <View style={styles.iconButton} />
+              ) : null}
               <Text
-                style={[Styles.flex, { textAlign: 'center' }]}
+                style={[
+                  Styles.flex,
+                  styles.title,
+                  !showButtons && styles.titleInset,
+                ]}
                 numberOfLines={1}
                 typography="header_default_bold"
               >
@@ -271,28 +338,64 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               </Text>
             </>
           )}
-          <TouchableOpacity
-            style={styles.iconButton}
-            onPress={() => {
-              action.current = 'icon_close';
-              onDismiss(true);
-            }}
-          >
-            <Icon source="navigation_close" />
-          </TouchableOpacity>
+          {showButtons ? (
+            <TouchableOpacity style={styles.iconButton} onPress={onPressClose}>
+              <Icon source="navigation_close" />
+            </TouchableOpacity>
+          ) : null}
         </View>
       </View>
     );
   }, [
-    onDismiss,
+    hasSideColumn,
+    iconBack,
+    indicatorShift,
     leftOptions,
+    onPressBack,
+    onPressClose,
     options.header,
     options.title,
     panResponder.panHandlers,
+    showBack,
     theme.colors.border.default,
     useDivider,
   ]);
 
+  /**
+   * iPhone Duo folded: back and close move to the side bar column, drawn on
+   * the part of the sheet under the side safe area. They line up with the
+   * header row, stay below the status bar cluster on a tall sheet and above a
+   * camera at the bottom end of the strip.
+   */
+  const renderSideColumn = () => {
+    if (!sideColumn) {
+      return null;
+    }
+    const lowestTop =
+      windowSize.height - sideColumn.bottom - sideColumnHeight - sheetTop;
+    const top = Math.min(
+      Math.max(sideColumn.top - sheetTop, SIDE_COLUMN_OFFSET),
+      lowestTop,
+    );
+
+    return (
+      <View
+        pointerEvents={'box-none'}
+        style={[
+          styles.sideColumn,
+          sideColumn.edge === 'right' ? styles.alignRight : styles.alignLeft,
+          InnerEdgeStyles[sideColumn.edge],
+          { top, width: sideColumnWidth },
+        ]}
+      >
+        {showBack ? (
+          <SideBarButton icon={iconBack} onPress={onPressBack} />
+        ) : null}
+        <SideBarButton icon="navigation_close" onPress={onPressClose} />
+      </View>
+    );
+  };
+
   const animatedStyle = useAnimatedStyle(() => {
     return {
       transform: [{ translateY: translateY.value }],
@@ -310,12 +413,9 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     };
   });
 
-  // 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,
+  const sideInsetStyle = isDuoFloating && {
+    paddingLeft: sideInsetLeft,
+    paddingRight: sideInsetRight,
   };
 
   const screen = (
@@ -335,6 +435,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       }}
       style={StyleSheet.absoluteFillObject}
       isModalKit={true}
+      supportedOrientations={isDuo ? DUO_ORIENTATIONS : undefined}
     >
       <KeyboardAvoidingView
         behavior={Platform.select({
@@ -357,18 +458,26 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         </Pressable>
 
         <Animated.View
+          onLayout={
+            isDuoFloating ? e => setSheetTop(e.nativeEvent.layout.y) : undefined
+          }
           style={[
             animatedStyle,
             {
               backgroundColor,
-              borderTopLeftRadius: Radius.M,
-              borderTopRightRadius: Radius.M,
+              borderTopLeftRadius: isDuo ? Radius.XL : Radius.M,
+              borderTopRightRadius: isDuo ? Radius.XL : Radius.M,
               overflow: 'hidden',
             },
             isDuo && {
               maxHeight: windowSize.height - topGap - keyboardLift,
               marginBottom: keyboardLift,
             },
+            isDuoFloating && { marginHorizontal: Spacing.M },
+            sideColumn && {
+              minHeight:
+                SIDE_COLUMN_OFFSET + sideColumnHeight + sideColumn.bottom,
+            },
             isDuoCentered && {
               // keeps the portrait width in landscape, like system sheets
               width: Math.min(
@@ -415,6 +524,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               }}
             />
           )}
+          {renderSideColumn()}
         </Animated.View>
       </KeyboardAvoidingView>
     </Container>
@@ -440,10 +550,12 @@ const styles = StyleSheet.create({
     top: Spacing.S,
   },
   header: {
-    height: 56,
+    height: HEADER_HEIGHT,
     flexDirection: 'row',
     alignItems: 'center',
   },
+  title: { textAlign: 'center' },
+  titleInset: { paddingHorizontal: Spacing.M },
   iconButton: {
     width: 24,
     height: 24,
@@ -452,6 +564,12 @@ const styles = StyleSheet.create({
     marginHorizontal: Spacing.M,
   },
   shrink: { flexShrink: 1 },
+  sideColumn: {
+    position: 'absolute',
+    gap: Spacing.M,
+  },
+  alignRight: { right: 0 },
+  alignLeft: { left: 0 },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });
 

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 };