@momo-kits/foundation 0.167.1-duotest.2 → 0.167.1

package/Application/BottomTab/DuoBarCompression.tsx

@@ -1,135 +0,0 @@
-import React, {
-  createContext,
-  ReactNode,
-  useContext,
-  useMemo,
-  useState,
-} from 'react';
-import { Spacing } from '../../Consts';
-import { useScreenLayout } from '../../Layout';
-import { DuoMetrics } from '../../Layout/utils';
-
-export type DuoBarCompressionBehavior = 'toolbar' | 'tabBar';
-
-type DuoBarCompression = {
-  toolbarCompressed: boolean;
-  tabBarCompressed: boolean;
-  // the open rail needs the toolbar button slot too: only Back stays
-  toolbarHidden?: boolean;
-  // tapping the compressed bar expands it and compresses the other one
-  expandToolbar?: () => void;
-  expandTabBar?: () => void;
-  // a rail opened from the compressed state closes once a tab is picked
-  onTabSelected?: () => void;
-  // header buttons report their full height so the tab bar knows what is left
-  setToolbarHeight?: (height: number) => void;
-};
-
-const RAIL_PADDING = 6;
-const RAIL_GAP = Spacing.XXS;
-// space kept between the top and the bottom groups (HIG Vertical controls)
-const GROUP_GAP = Spacing.M;
-// Back, then the right toolkit: help + home capsule
-const DEFAULT_TOOLBAR_HEIGHT =
-  DuoMetrics.controlSize + Spacing.M + 2 * DuoMetrics.itemPitch;
-// Back, then the single button the toolbar folds into
-const COMPRESSED_TOOLBAR_HEIGHT = 2 * DuoMetrics.controlSize + Spacing.M;
-// Back alone, while a rail opened from the compressed state takes the toolbar slot
-const BACK_ONLY_HEIGHT = DuoMetrics.controlSize;
-
-const NO_COMPRESSION: DuoBarCompression = {
-  toolbarCompressed: false,
-  tabBarCompressed: false,
-};
-
-const DuoBarCompressionContext =
-  createContext<DuoBarCompression>(NO_COMPRESSION);
-
-/**
- * height of the vertical tab rail, plus the QR button under it
- */
-const getRailHeight = (tabCount: number, hasQr: boolean) =>
-  2 * RAIL_PADDING +
-  tabCount * DuoMetrics.controlSize +
-  Math.max(tabCount - 1, 0) * RAIL_GAP +
-  (hasQr ? Spacing.M + DuoMetrics.controlSize : 0);
-
-/**
- * keeps the side bar's toolbar and tab bar clear of each other (HIG, Designing for
- * iPhone Duo: Vertical controls):
- * - both fit: both stay whole
- * - one fits whole beside the other compressed: one is compressed, tapping it swaps them
- * - otherwise both rest compressed; tapping one opens it for a moment (the rail closes
- *   again once a tab is picked)
- */
-const DuoBarCompressionProvider: React.FC<{
-  behavior?: DuoBarCompressionBehavior;
-  tabCount: number;
-  hasQr: boolean;
-  children: ReactNode;
-}> = ({ behavior = 'toolbar', tabCount, hasQr, children }) => {
-  const { height, sideBar } = useScreenLayout();
-  const [toolbarHeight, setToolbarHeight] = useState(DEFAULT_TOOLBAR_HEIGHT);
-  // 'toolbar' compression keeps the tab bar whole until the toolbar is tapped
-  const [expanded, setExpanded] = useState<'toolbar' | 'tabBar'>(
-    behavior === 'toolbar' ? 'tabBar' : 'toolbar',
-  );
-  // bar opened for a moment while both rest compressed
-  const [opened, setOpened] = useState<'toolbar' | 'tabBar'>();
-
-  const value = useMemo(() => {
-    if (!sideBar) {
-      return NO_COMPRESSION;
-    }
-    const room = height - sideBar.bottom - sideBar.top - GROUP_GAP;
-    const tabBar = getRailHeight(tabCount, hasQr);
-    const compressedTabBar = getRailHeight(1, hasQr) - 2 * RAIL_PADDING;
-    const fits = (toolbar: number, tabs: number) => toolbar + tabs <= room;
-
-    if (fits(toolbarHeight, tabBar)) {
-      return { ...NO_COMPRESSION, setToolbarHeight };
-    }
-    const canSwap =
-      fits(COMPRESSED_TOOLBAR_HEIGHT, tabBar) &&
-      fits(toolbarHeight, compressedTabBar);
-    if (canSwap) {
-      return {
-        toolbarCompressed: expanded === 'tabBar',
-        tabBarCompressed: expanded === 'toolbar',
-        expandToolbar: () => setExpanded('toolbar'),
-        expandTabBar: () => setExpanded('tabBar'),
-        setToolbarHeight,
-      };
-    }
-
-    const open = {
-      expandToolbar: () => setOpened('toolbar'),
-      expandTabBar: () => setOpened('tabBar'),
-      setToolbarHeight,
-    };
-    if (opened === 'tabBar' && fits(BACK_ONLY_HEIGHT, tabBar)) {
-      return {
-        ...open,
-        toolbarCompressed: true,
-        toolbarHidden: true,
-        tabBarCompressed: false,
-        onTabSelected: () => setOpened(undefined),
-      };
-    }
-    return {
-      ...open,
-      toolbarCompressed: opened !== 'toolbar',
-      tabBarCompressed: true,
-    };
-  }, [expanded, opened, hasQr, height, sideBar, tabCount, toolbarHeight]);
-
-  return (
-    <DuoBarCompressionContext.Provider value={value}>
-      {children}
-    </DuoBarCompressionContext.Provider>
-  );
-};
-
-const useDuoBarCompression = () => useContext(DuoBarCompressionContext);
-
-export { DuoBarCompressionProvider, useDuoBarCompression };

package/Application/BottomTab/DuoTabBar.tsx

@@ -1,462 +0,0 @@
-import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
-import { CommonActions, Route } from '@react-navigation/native';
-import React, { useContext, useEffect, useRef, useState } from 'react';
-import {
-  LayoutChangeEvent,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withSpring,
-} from 'react-native-reanimated';
-import { Colors, Radius, Spacing } from '../../Consts';
-import { ApplicationContext } from '../../Context';
-import { Icon } from '../../Icon';
-import { DuoMetrics, useScreenLayout } from '../../Layout/utils';
-import { Text } from '../../Text';
-import { GlassView } from '../Components/OptionalGlassView';
-import { useDuoBarCompression } from './DuoBarCompression';
-import { FloatingButtonProps } from '../types';
-import { TabBarIcon } from './TabBarIcon';
-
-type Props = BottomTabBarProps & {
-  activeTintColor: string;
-  inactiveTintColor: string;
-  floatingButton?: FloatingButtonProps;
-};
-
-const ITEM_SIZE = DuoMetrics.controlSize;
-const ICON_SIZE = 28;
-const QR_ICON_SIZE = 24;
-const RAIL_PADDING = 6;
-const RAIL_GAP = Spacing.XXS;
-// selection bubble overflows the 48 rail cell by 5 above and below (Figma MT2)
-const RAIL_BUBBLE_WIDTH = 44;
-const RAIL_BUBBLE_HEIGHT = 58;
-const FLOATING_HEIGHT = 62;
-const FLOATING_PADDING = Spacing.XS;
-const FLOATING_QR_SIZE = 44;
-// floating bar spans 6 of the 8 portrait grid columns, like the content
-const GRID_COLUMNS = 8;
-const GRID_SPAN = 6;
-const SPRING = { damping: 18, stiffness: 220, mass: 0.8 };
-
-/**
- * space tab content leaves under the Duo floating tab bar, 0 elsewhere
- */
-const useDuoTabBarInset = () => {
-  const { isIPhoneDuo, sideBar, insets } = useScreenLayout();
-  return isIPhoneDuo && !sideBar
-    ? FLOATING_HEIGHT + Spacing.M + insets.bottom
-    : 0;
-};
-
-const gridSpanWidth = (width: number) => {
-  const columnWidth =
-    (width - 2 * Spacing.M - (GRID_COLUMNS - 1) * Spacing.M) / GRID_COLUMNS;
-  return columnWidth * GRID_SPAN + (GRID_SPAN - 1) * Spacing.M;
-};
-
-const BarMaterial: React.FC<{ radius: number }> = ({ radius }) => {
-  const { theme } = useContext(ApplicationContext);
-  if (GlassView) {
-    return (
-      <GlassView
-        pointerEvents={'none'}
-        effect={'glass'}
-        cornerRadius={radius}
-        useShadow
-        style={StyleSheet.absoluteFill}
-      />
-    );
-  }
-  return (
-    <View
-      pointerEvents={'none'}
-      style={[
-        StyleSheet.absoluteFill,
-        styles.fallbackMaterial,
-        {
-          borderRadius: radius,
-          backgroundColor: theme.colors.background.surface,
-          borderColor: theme.colors.border.default,
-        },
-      ]}
-    />
-  );
-};
-
-const getTabItems = ({
-  state,
-  descriptors,
-  navigation,
-  activeTintColor,
-  inactiveTintColor,
-}: Props) => {
-  return state.routes.map((route: Route<string>, index: number) => {
-    const { options } = descriptors[route.key];
-    const focused = index === state.index;
-    const label = options.title ?? route.name;
-
-    const onPress = () => {
-      const event = navigation.emit({
-        type: 'tabPress',
-        target: route.key,
-        canPreventDefault: true,
-      });
-      if (!focused && !event.defaultPrevented) {
-        navigation.dispatch({
-          ...CommonActions.navigate(route.name),
-          target: state.key,
-        });
-      }
-    };
-
-    const onLongPress = () => {
-      navigation.emit({ type: 'tabLongPress', target: route.key });
-    };
-
-    const icon = options.tabBarIcon && (
-      <TabBarIcon
-        route={route}
-        badge={options.tabBarBadge}
-        badgeStyle={options.tabBarBadgeStyle}
-        activeOpacity={focused ? 1 : 0}
-        inactiveOpacity={focused ? 0 : 1}
-        activeTintColor={activeTintColor}
-        inactiveTintColor={inactiveTintColor}
-        renderIcon={options.tabBarIcon}
-        style={styles.icon}
-      />
-    );
-
-    return { route, focused, label, onPress, onLongPress, icon };
-  });
-};
-
-const QrIcon: React.FC<{ icon: FloatingButtonProps['icon']; size: number }> = ({
-  icon,
-  size,
-}) => {
-  if (typeof icon === 'string') {
-    return <Icon source={icon} size={size} color={Colors.black_01} />;
-  }
-  return <>{icon}</>;
-};
-
-type TabItem = ReturnType<typeof getTabItems>[number];
-
-/**
- * glass column of tab items with the sliding selection bubble
- */
-const Rail: React.FC<{
-  items: TabItem[];
-  index: number;
-  onItemPress?: () => void;
-}> = ({ items, index, onItemPress }) => {
-  const { theme } = useContext(ApplicationContext);
-  const bubbleOffset = useSharedValue(index * (ITEM_SIZE + RAIL_GAP));
-
-  useEffect(() => {
-    bubbleOffset.value = withSpring(index * (ITEM_SIZE + RAIL_GAP), SPRING);
-  }, [index, bubbleOffset]);
-
-  const bubbleStyle = useAnimatedStyle(() => ({
-    transform: [{ translateY: bubbleOffset.value }],
-  }));
-
-  return (
-    <View style={styles.rail} accessibilityLabel={'bottom_tab_bar'}>
-      <BarMaterial radius={Radius.XL} />
-      <Animated.View
-        pointerEvents={'none'}
-        style={[
-          styles.railBubble,
-          { backgroundColor: theme.colors.background.selected },
-          bubbleStyle,
-        ]}
-      />
-      {items.map(item => (
-        <TouchableOpacity
-          key={item.route.key}
-          accessibilityRole={'tab'}
-          accessibilityLabel={item.label}
-          accessibilityState={{ selected: item.focused }}
-          onPress={() => {
-            item.onPress();
-            onItemPress?.();
-          }}
-          onLongPress={item.onLongPress}
-          style={styles.railItem}
-        >
-          {item.icon}
-        </TouchableOpacity>
-      ))}
-    </View>
-  );
-};
-
-/**
- * vertical bar anchored to the bottom of the Duo side bar, QR button below it (Figma MT1-C/E).
- * When the side bar is short, it can shrink to one button showing the current tab
- * (HIG "Tab bar compressed"); tapping it expands the rail and compresses the toolbar
- */
-const DuoRailTabBar: React.FC<Props> = props => {
-  const { theme } = useContext(ApplicationContext);
-  const { sideBar } = useScreenLayout();
-  const { tabBarCompressed, expandTabBar, onTabSelected } =
-    useDuoBarCompression();
-  const { state, floatingButton } = props;
-  const items = getTabItems(props);
-  const current = items[state.index];
-
-  const columnStyle = sideBar && [
-    styles.railColumn,
-    {
-      [sideBar.edge]: 0,
-      width: sideBar.width,
-      bottom: sideBar.bottom,
-    },
-    sideBar.edge === 'right'
-      ? { alignItems: 'flex-start' as const, paddingLeft: Spacing.M }
-      : { alignItems: 'flex-end' as const, paddingRight: Spacing.M },
-  ];
-
-  const qr = floatingButton && (
-    <TouchableOpacity
-      accessibilityRole={'button'}
-      accessibilityLabel={floatingButton.label}
-      onPress={floatingButton.onPress}
-      style={[styles.railQr, { backgroundColor: theme.colors.primary }]}
-    >
-      <QrIcon icon={floatingButton.icon} size={QR_ICON_SIZE} />
-    </TouchableOpacity>
-  );
-
-  if (!sideBar) {
-    return null;
-  }
-
-  if (!tabBarCompressed) {
-    return (
-      <View pointerEvents={'box-none'} style={columnStyle}>
-        <Rail items={items} index={state.index} onItemPress={onTabSelected} />
-        {qr}
-      </View>
-    );
-  }
-
-  return (
-    <View pointerEvents={'box-none'} style={columnStyle}>
-      <TouchableOpacity
-        accessibilityRole={'button'}
-        accessibilityLabel={current?.label}
-        accessibilityHint={'bottom_tab_bar'}
-        onPress={expandTabBar}
-        style={styles.railCompact}
-      >
-        <BarMaterial radius={Radius.XL} />
-        {current?.icon}
-      </TouchableOpacity>
-      {qr}
-    </View>
-  );
-};
-
-/**
- * floating labelled bar for the unfolded portrait display, QR in the middle cell (Figma MT1-M)
- */
-const DuoFloatingTabBar: React.FC<Props> = props => {
-  const { theme } = useContext(ApplicationContext);
-  const { width, insets } = useScreenLayout();
-  const { state, floatingButton, activeTintColor, inactiveTintColor } = props;
-  const items = getTabItems(props);
-  const [rowWidth, setRowWidth] = useState(0);
-  const barWidth = gridSpanWidth(width);
-
-  const useQr = !!floatingButton && state.routes.length % 2 === 0;
-  const middle = state.routes.length / 2;
-  const cellWidth = rowWidth / (state.routes.length + (useQr ? 1 : 0));
-  const visualIndex =
-    useQr && state.index >= middle ? state.index + 1 : state.index;
-
-  const bubbleOffset = useSharedValue(0);
-  const measured = useRef(false);
-
-  useEffect(() => {
-    const target = visualIndex * cellWidth;
-    // snap on first layout so the bubble doesn't slide in from the left edge
-    bubbleOffset.value = measured.current ? withSpring(target, SPRING) : target;
-    measured.current = cellWidth > 0;
-  }, [visualIndex, cellWidth, bubbleOffset]);
-
-  const bubbleStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: bubbleOffset.value }],
-  }));
-
-  const onRowLayout = (e: LayoutChangeEvent) =>
-    setRowWidth(e.nativeEvent.layout.width);
-
-  const cells = items.map(item => (
-    <TouchableOpacity
-      key={item.route.key}
-      accessibilityRole={'tab'}
-      accessibilityLabel={item.label}
-      accessibilityState={{ selected: item.focused }}
-      onPress={item.onPress}
-      onLongPress={item.onLongPress}
-      style={styles.floatingItem}
-    >
-      {item.icon}
-      <Text
-        numberOfLines={1}
-        typography={'label_xs_medium'}
-        color={item.focused ? activeTintColor : inactiveTintColor}
-      >
-        {item.label}
-      </Text>
-    </TouchableOpacity>
-  ));
-
-  if (useQr && floatingButton) {
-    cells.splice(
-      middle,
-      0,
-      <View key={'duo_tab_qr'} style={styles.floatingItem}>
-        <TouchableOpacity
-          accessibilityRole={'button'}
-          accessibilityLabel={floatingButton.label}
-          onPress={floatingButton.onPress}
-          style={[styles.floatingQr, { backgroundColor: theme.colors.primary }]}
-        >
-          <QrIcon icon={floatingButton.icon} size={QR_ICON_SIZE} />
-        </TouchableOpacity>
-      </View>,
-    );
-  }
-
-  return (
-    <View
-      style={[
-        styles.floating,
-        {
-          width: barWidth,
-          left: (width - barWidth) / 2,
-          bottom: insets.bottom + Spacing.M,
-        },
-      ]}
-      accessibilityLabel={'bottom_tab_bar'}
-    >
-      <BarMaterial radius={FLOATING_HEIGHT / 2} />
-      <View style={styles.floatingRow} onLayout={onRowLayout}>
-        {rowWidth > 0 && (
-          <Animated.View
-            pointerEvents={'none'}
-            style={[
-              styles.floatingBubble,
-              {
-                width: cellWidth,
-                backgroundColor: theme.colors.background.selected,
-              },
-              bubbleStyle,
-            ]}
-          />
-        )}
-        {cells}
-      </View>
-    </View>
-  );
-};
-
-/**
- * iPhone Duo tab bar: glass rail in the side bar, or a floating glass bar when unfolded portrait
- */
-const DuoTabBar: React.FC<Props> = props => {
-  const { sideBar } = useScreenLayout();
-  return sideBar ? (
-    <DuoRailTabBar {...props} />
-  ) : (
-    <DuoFloatingTabBar {...props} />
-  );
-};
-
-const styles = StyleSheet.create({
-  fallbackMaterial: {
-    borderWidth: 1,
-  },
-  icon: {
-    width: ICON_SIZE,
-    height: ICON_SIZE,
-  },
-  railColumn: {
-    position: 'absolute',
-    gap: Spacing.M,
-  },
-  railCompact: {
-    width: ITEM_SIZE,
-    height: ITEM_SIZE,
-    borderRadius: ITEM_SIZE / 2,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  rail: {
-    width: ITEM_SIZE,
-    paddingVertical: RAIL_PADDING,
-    gap: RAIL_GAP,
-  },
-  railBubble: {
-    position: 'absolute',
-    top: RAIL_PADDING - (RAIL_BUBBLE_HEIGHT - ITEM_SIZE) / 2,
-    left: (ITEM_SIZE - RAIL_BUBBLE_WIDTH) / 2,
-    width: RAIL_BUBBLE_WIDTH,
-    height: RAIL_BUBBLE_HEIGHT,
-    borderRadius: RAIL_BUBBLE_WIDTH / 2,
-  },
-  railItem: {
-    width: ITEM_SIZE,
-    height: ITEM_SIZE,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  railQr: {
-    width: ITEM_SIZE,
-    height: ITEM_SIZE,
-    borderRadius: ITEM_SIZE / 2,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  floating: {
-    position: 'absolute',
-    height: FLOATING_HEIGHT,
-    padding: FLOATING_PADDING,
-  },
-  floatingRow: {
-    flex: 1,
-    flexDirection: 'row',
-  },
-  floatingBubble: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    borderRadius: (FLOATING_HEIGHT - 2 * FLOATING_PADDING) / 2,
-  },
-  floatingItem: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: Spacing.XXS,
-  },
-  floatingQr: {
-    width: FLOATING_QR_SIZE,
-    height: FLOATING_QR_SIZE,
-    borderRadius: FLOATING_QR_SIZE / 2,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-
-export { DuoTabBar, useDuoTabBarInset };