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

package/Application/BottomSheet.hooks.ts

@@ -0,0 +1,215 @@
+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 { Spacing } from '../Consts';
+import { DuoMetrics, useScreenLayout } from '../Layout/utils';
+import { scheduleOnRN } from 'react-native-worklets';
+import { BottomSheetParams, NavigatorProps } from './types';
+import { getDuoTopInset, isIPhoneDuo } from './utils';
+import { DUO_REGULAR_MIN_WIDTH, getSideInset } from './BottomSheet.styles';
+
+export const useBottomSheetLayout = () => {
+  const windowSize = useWindowDimensions();
+  const isDuo = isIPhoneDuo();
+  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;
+  const insets = useSafeAreaInsets();
+  const heightHeader = useHeaderHeight();
+  const topGap = Math.max(
+    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;
+
+  return {
+    windowSize,
+    isDuo,
+    isDuoCentered,
+    isDuoFloating,
+    sideColumn,
+    sideColumnWidth,
+    hasSideColumn,
+    heightDevice,
+    insets,
+    topGap,
+    sideInsetLeft,
+    sideInsetRight,
+    indicatorShift,
+    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;
+};
+
+export const useSheetAnimatedStyles = (
+  translateY: SharedValue<number>,
+  heightDevice: number,
+) => {
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateY: translateY.value }],
+    };
+  });
+
+  const animatedOverlayStyle = useAnimatedStyle(() => {
+    return {
+      opacity: interpolate(
+        translateY.value,
+        [0, heightDevice],
+        [1, 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,231 @@
+import React from 'react';
+import {
+  PanResponderInstance,
+  ScaledSize,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import type { EdgeInsets } from 'react-native-safe-area-context';
+import { Radius, Spacing, Styles } from '../Consts';
+import layoutStyles from '../Layout/styles';
+import { Text } from '../Text';
+import { Icon } from '../Icon';
+import { InnerEdgeStyles, type SideBarLayout } from '../Layout/utils';
+import { SideBarButton } from './Components/SideBarButton';
+import {
+  INDICATOR_HEIGHT,
+  SIDE_COLUMN_OFFSET,
+  styles,
+} from './BottomSheet.styles';
+import { BottomSheetParams, Theme } from './types';
+
+type SheetPartsParams = {
+  panHandlers: PanResponderInstance['panHandlers'];
+  indicatorShift: number;
+  useDivider: boolean;
+  theme: Theme;
+  hasSideColumn: boolean;
+  showBack: boolean;
+  onPressBack: () => void;
+  onPressClose: () => void;
+  iconBack: string;
+  options: BottomSheetParams['options'];
+  leftOptions: BottomSheetParams['leftOptions'];
+  sideColumn?: SideBarLayout;
+  windowHeight: number;
+  sheetTop: number;
+  sideColumnHeight: number;
+  sideColumnWidth: number;
+};
+
+export const renderSheetHeader = ({
+  panHandlers,
+  indicatorShift,
+  useDivider,
+  theme,
+  hasSideColumn,
+  showBack,
+  onPressBack,
+  onPressClose,
+  iconBack,
+  options,
+  leftOptions,
+}: SheetPartsParams) => {
+  const showButtons = !hasSideColumn;
+  return (
+    <View {...panHandlers}>
+      <View style={{ height: INDICATOR_HEIGHT }}>
+        <View
+          style={[
+            styles.indicator,
+            indicatorShift !== 0 && {
+              transform: [{ translateX: indicatorShift }],
+            },
+          ]}
+        />
+      </View>
+      <View
+        style={[
+          styles.header,
+          useDivider && styles.headerDivider,
+          useDivider && {
+            borderBottomColor: theme.colors.border.default,
+          },
+        ]}
+      >
+        {showButtons && showBack ? (
+          <TouchableOpacity style={styles.iconButton} onPress={onPressBack}>
+            <Icon source={iconBack} />
+          </TouchableOpacity>
+        ) : null}
+
+        {options.header ? (
+          <View style={Styles.flex}>{options.header}</View>
+        ) : (
+          <>
+            {showButtons && !leftOptions ? (
+              <View style={styles.iconButton} />
+            ) : null}
+            <Text
+              style={[
+                Styles.flex,
+                styles.title,
+                !showButtons && styles.titleInset,
+              ]}
+              numberOfLines={1}
+              typography="header_default_bold"
+            >
+              {options.title ?? ''}
+            </Text>
+          </>
+        )}
+        {showButtons ? (
+          <TouchableOpacity style={styles.iconButton} onPress={onPressClose}>
+            <Icon source="navigation_close" />
+          </TouchableOpacity>
+        ) : null}
+      </View>
+    </View>
+  );
+};
+
+/**
+ * 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.
+ */
+export const renderSheetSideColumn = ({
+  sideColumn,
+  windowHeight,
+  sheetTop,
+  sideColumnHeight,
+  sideColumnWidth,
+  showBack,
+  iconBack,
+  onPressBack,
+  onPressClose,
+}: SheetPartsParams) => {
+  if (!sideColumn) {
+    return null;
+  }
+  const lowestTop =
+    windowHeight - 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>
+  );
+};
+
+export const renderSheetFooter = ({
+  footerComponent,
+  theme,
+  sideInsetStyle,
+}: {
+  footerComponent: BottomSheetParams['footerComponent'];
+  theme: Theme;
+  sideInsetStyle: any;
+}) =>
+  footerComponent && (
+    <View
+      style={[
+        layoutStyles.shadow,
+        {
+          paddingBottom: Spacing.S,
+          backgroundColor: theme.colors.background.surface,
+        },
+        sideInsetStyle,
+      ]}
+    >
+      {footerComponent}
+    </View>
+  );
+
+type SheetStyleParams = {
+  backgroundColor: string;
+  isDuo: boolean;
+  isDuoFloating: boolean;
+  isDuoCentered: boolean;
+  windowSize: ScaledSize;
+  topGap: number;
+  keyboardLift: number;
+  sideColumn?: SideBarLayout;
+  sideColumnHeight: number;
+  insets: EdgeInsets;
+  showBaseLineDebug: boolean;
+};
+
+export const getSheetStyle = ({
+  backgroundColor,
+  isDuo,
+  isDuoFloating,
+  isDuoCentered,
+  windowSize,
+  topGap,
+  keyboardLift,
+  sideColumn,
+  sideColumnHeight,
+  insets,
+  showBaseLineDebug,
+}: SheetStyleParams) => [
+  styles.sheetContainer,
+  {
+    backgroundColor,
+    borderTopLeftRadius: isDuo ? Radius.XL : Radius.M,
+    borderTopRightRadius: isDuo ? Radius.XL : Radius.M,
+  },
+  isDuo && {
+    maxHeight: windowSize.height - topGap - keyboardLift,
+    marginBottom: keyboardLift,
+  },
+  isDuoFloating && { marginHorizontal: Spacing.M },
+  sideColumn && {
+    minHeight: SIDE_COLUMN_OFFSET + sideColumnHeight + sideColumn.bottom,
+  },
+  isDuoCentered && styles.centered,
+  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,
+    ),
+  },
+  showBaseLineDebug && styles.debugBaseLine,
+];

package/Application/BottomSheet.styles.ts

@@ -0,0 +1,59 @@
+import { StyleSheet } from 'react-native';
+import { Colors, Radius, Spacing } from '../Consts';
+import { DuoMetrics } from '../Layout/utils';
+
+// iPhone Duo inner display: center the sheet instead of spanning the width
+export const DUO_REGULAR_MIN_WIDTH = 600;
+
+export const INDICATOR_HEIGHT = 16;
+export const HEADER_HEIGHT = 56;
+export const DUO_ORIENTATIONS = ['portrait', 'landscape'];
+export const SIDE_COLUMN_OFFSET =
+  INDICATOR_HEIGHT + (HEADER_HEIGHT - DuoMetrics.controlSize) / 2;
+
+export const getSideInset = (inset: number) => Math.max(inset - Spacing.M, 0);
+
+export 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: HEADER_HEIGHT,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  title: { textAlign: 'center' },
+  titleInset: { paddingHorizontal: Spacing.M },
+  iconButton: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+    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 },
+  headerDivider: { borderBottomWidth: 1 },
+  sheetContainer: { overflow: 'hidden' },
+  centered: { alignSelf: 'center' },
+});

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