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

package/Application/BottomTab/DuoRailTabBar.tsx

@@ -0,0 +1,227 @@
+import React, { useContext } from 'react';
+import { Pressable, TouchableOpacity, View } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { Colors, Radius } from '../../Consts';
+import { ApplicationContext } from '../../Context';
+import { Icon } from '../../Icon';
+import { useScreenLayout } from '../../Layout/utils';
+import { Text } from '../../Text';
+import { FloatingButtonProps } from '../types';
+import { useDuoBarCompression } from './DuoBarCompression';
+import { useCenterActionPress } from './BottomTabBar';
+import { TabItemContent } from './CustomBottomTabItem';
+import { CurvedContainer } from './CurvedContainer';
+import { TabBarMetrics } from './metrics';
+import { getTabItems, TabItem } from './tabItems';
+import { FixedScaleText } from './TabBarIcon';
+import { usePressLift } from './usePressLift';
+import { ActiveIndicator } from './ActiveIndicator';
+import {
+  RAIL_COMPACT_SIZE,
+  RAIL_ITEM_HEIGHT,
+  styles,
+} from './DuoTabBar.styles';
+import type { DuoTabBarProps } from './DuoTabBar';
+
+/**
+ * Center action icon: an icon name drawn at the CTA size, or a custom node
+ */
+const CtaIcon: React.FC<{ icon: FloatingButtonProps['icon'] }> = ({ icon }) => {
+  if (typeof icon === 'string') {
+    return (
+      <Icon
+        source={icon}
+        size={TabBarMetrics.ctaIconSize}
+        color={Colors.black_01}
+      />
+    );
+  }
+  return <>{icon}</>;
+};
+
+/**
+ * vertical container (.Nav/Duo/Item column) with the sliding active indicator
+ */
+const Rail: React.FC<{
+  items: TabItem[];
+  index: number;
+  activeTintColor: string;
+  inactiveTintColor: string;
+  onItemPress?: () => void;
+}> = ({ items, index, activeTintColor, inactiveTintColor, onItemPress }) => (
+  <View style={styles.rail} accessibilityLabel={'bottom_tab_bar'}>
+    <CurvedContainer
+      width={TabBarMetrics.railContainerWidth}
+      height={items.length * RAIL_ITEM_HEIGHT + TabBarMetrics.railPaddingBottom}
+      radius={Radius.XL}
+    />
+    <ActiveIndicator
+      axis={'y'}
+      offset={index * RAIL_ITEM_HEIGHT}
+      radius={TabBarMetrics.railIndicatorRadius}
+      style={styles.railIndicator}
+    />
+    {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}
+      >
+        <TabItemContent
+          vertical
+          fixedFontScale
+          label={item.label}
+          focused={item.focused}
+          icon={item.icon}
+          badge={item.badge}
+          activeTintColor={activeTintColor}
+          inactiveTintColor={inactiveTintColor}
+        />
+      </TouchableOpacity>
+    ))}
+  </View>
+);
+
+/**
+ * center action of the rail: round button with its label, under the container
+ */
+const RailCenterAction: React.FC<{ floatingButton: FloatingButtonProps }> = ({
+  floatingButton,
+}) => {
+  const { theme } = useContext(ApplicationContext);
+  const { buttonStyle, onPressIn, onPressOut } = useCenterActionPress();
+  return (
+    <Pressable
+      accessibilityRole={'button'}
+      accessibilityLabel={floatingButton.label}
+      onPress={floatingButton.onPress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      style={styles.railCta}
+    >
+      <Animated.View
+        style={[
+          styles.railCtaButton,
+          { backgroundColor: theme.colors.primary },
+          buttonStyle,
+        ]}
+      >
+        <CtaIcon icon={floatingButton.icon} />
+      </Animated.View>
+      <View style={styles.railCtaLabel}>
+        <FixedScaleText>
+          <Text
+            numberOfLines={1}
+            typography={'label_xs_medium'}
+            color={theme.colors.text.secondary}
+          >
+            {floatingButton.label}
+          </Text>
+        </FixedScaleText>
+        {floatingButton.labelContent && (
+          <View pointerEvents={'none'} style={styles.railCtaLabelOverlay}>
+            {floatingButton.labelContent}
+          </View>
+        )}
+      </View>
+    </Pressable>
+  );
+};
+
+/**
+ * vertical bar anchored to the bottom of the Duo side bar, center action below it.
+ * 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<DuoTabBarProps> = props => {
+  const { sideBar } = useScreenLayout();
+  const { tabBarCompressed, expandTabBar, onTabSelected } =
+    useDuoBarCompression();
+  const compactLift = usePressLift();
+  const { state, floatingButton, activeTintColor, inactiveTintColor } = props;
+  const items = getTabItems(props);
+  const current = items[state.index];
+
+  if (!sideBar) {
+    return null;
+  }
+
+  // the rail lines up with the header buttons in the side bar: centered on a 48 lane kept 12
+  // from the strip's inner edge
+  const columnStyle = [
+    styles.railColumn,
+    {
+      [sideBar.edge]: 0,
+      width: sideBar.width,
+      bottom: sideBar.bottom,
+    },
+    sideBar.edge === 'right' ? styles.railColumnRight : styles.railColumnLeft,
+  ];
+  const cta = floatingButton && (
+    <RailCenterAction floatingButton={floatingButton} />
+  );
+
+  if (!tabBarCompressed) {
+    return (
+      <View pointerEvents={'box-none'} style={columnStyle}>
+        <View pointerEvents={'box-none'} style={styles.railLane}>
+          <Rail
+            items={items}
+            index={state.index}
+            activeTintColor={activeTintColor}
+            inactiveTintColor={inactiveTintColor}
+            onItemPress={onTabSelected}
+          />
+          {cta}
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View pointerEvents={'box-none'} style={columnStyle}>
+      <View pointerEvents={'box-none'} style={styles.railLane}>
+        <Animated.View style={compactLift.style}>
+          <TouchableOpacity
+            accessibilityRole={'button'}
+            accessibilityLabel={current?.label}
+            accessibilityHint={'bottom_tab_bar'}
+            activeOpacity={1}
+            onPressIn={compactLift.onPressIn}
+            onPressOut={compactLift.onPressOut}
+            onPress={expandTabBar}
+            style={styles.railCompact}
+          >
+            <CurvedContainer
+              width={RAIL_COMPACT_SIZE}
+              height={RAIL_COMPACT_SIZE}
+              radius={RAIL_COMPACT_SIZE / 2}
+            />
+            {current && (
+              <TabItemContent
+                vertical
+                hideLabel
+                focused
+                label={current.label}
+                icon={current.icon}
+                badge={current.badge}
+                activeTintColor={activeTintColor}
+                inactiveTintColor={inactiveTintColor}
+              />
+            )}
+          </TouchableOpacity>
+        </Animated.View>
+        {cta}
+      </View>
+    </View>
+  );
+};
+
+export { DuoRailTabBar };

package/Application/BottomTab/DuoTabBar.styles.ts

@@ -0,0 +1,81 @@
+import { StyleSheet } from 'react-native';
+import { Spacing } from '../../Consts';
+import { DuoMetrics } from '../../Layout/utils';
+import { CTA_SHADOW, TabBarMetrics } from './metrics';
+
+export const RAIL_ITEM_WIDTH = TabBarMetrics.railItemWidth;
+export const RAIL_ITEM_HEIGHT = TabBarMetrics.railItemHeight;
+export const RAIL_COMPACT_SIZE = DuoMetrics.controlSize;
+
+export const styles = StyleSheet.create({
+  railColumn: {
+    position: 'absolute',
+  },
+  railColumnRight: {
+    alignItems: 'flex-start',
+    paddingLeft: Spacing.M,
+  },
+  railColumnLeft: {
+    alignItems: 'flex-end',
+    paddingRight: Spacing.M,
+  },
+  // as wide as the header buttons; the wider rail and center action overflow it evenly
+  railLane: {
+    width: DuoMetrics.controlSize,
+    alignItems: 'center',
+    gap: TabBarMetrics.railCtaGap,
+  },
+  railCompact: {
+    width: RAIL_COMPACT_SIZE,
+    height: RAIL_COMPACT_SIZE,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  rail: {
+    width: TabBarMetrics.railContainerWidth,
+    paddingHorizontal: TabBarMetrics.railPaddingHorizontal,
+    paddingBottom: TabBarMetrics.railPaddingBottom,
+  },
+  railIndicator: {
+    top: Spacing.XS,
+    left: TabBarMetrics.railPaddingHorizontal,
+    width: RAIL_ITEM_WIDTH,
+    height: TabBarMetrics.railIndicatorHeight,
+  },
+  railItem: {
+    width: RAIL_ITEM_WIDTH,
+    height: RAIL_ITEM_HEIGHT,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  railCta: {
+    width: TabBarMetrics.railCtaWidth,
+    height: TabBarMetrics.railCtaHeight,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: TabBarMetrics.railCtaLabelGap,
+  },
+  // custom label content over the label text, centered and unclipped
+  railCtaLabelOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  railCtaLabel: {
+    paddingHorizontal: Spacing.XS,
+  },
+  railCtaButton: {
+    boxShadow: CTA_SHADOW,
+    width: TabBarMetrics.railCtaSize,
+    height: TabBarMetrics.railCtaSize,
+    borderRadius: TabBarMetrics.railCtaSize / 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  floating: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+  },
+});