@momo-kits/foundation 0.169.1 → 0.169.3-beta.1

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

@@ -1,60 +1,65 @@
-import { Platform, StyleSheet } from 'react-native';
-import { Colors, Radius } from '../../Consts';
+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,
   },
-  tabBar: {
-    left: 0,
-    right: 0,
-    bottom: 0,
-    borderTopWidth: StyleSheet.hairlineWidth,
-    elevation: 8,
+  indicator: {
+    height: TabBarMetrics.indicatorHeight,
   },
-  tabBarFloatingButton: {
-    left: 0,
-    right: 0,
-    bottom: 0,
-    zIndex: 1,
-    shadowColor: Colors.black_20,
-    shadowOffset: { width: 0, height: -2 },
-    shadowOpacity: 0.05,
-    shadowRadius: 3,
-    elevation: 8,
-  },
-  floatingContainer: {
+  ctaSlot: {
+    width: TabBarMetrics.ctaSlotWidth,
+    alignSelf: 'stretch',
+  },
+  // the button rises ctaLift above the container top, the label ends on the item baseline
+  cta: {
     position: 'absolute',
-    alignItems: 'center',
     left: 0,
     right: 0,
-    top: -2,
-    bottom: Platform.OS === 'ios' ? -6 : 4,
+    top: -TabBarMetrics.ctaLift - TabBarMetrics.paddingVertical,
+    alignItems: 'center',
+    gap: TabBarMetrics.ctaLabelGap,
   },
-  floatingContent: {
+  ctaButton: {
+    boxShadow: CTA_SHADOW,
+    width: TabBarMetrics.ctaSize,
+    height: TabBarMetrics.ctaSize,
+    borderRadius: TabBarMetrics.ctaSize / 2,
     alignItems: 'center',
     justifyContent: 'center',
-    height: 48,
-    width: 48,
-    borderRadius: 24,
-    top: -10,
-  },
-  indicator: {
-    height: 2,
-    width: 44,
-    alignSelf: 'center',
-    borderBottomLeftRadius: 1,
-    borderBottomRightRadius: 1,
   },
-  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
-  floatingLabel: {
-    top: -4,
-    borderRadius: Radius.XL,
-    paddingHorizontal: 6,
+  // custom label content over the label text, centered and unclipped
+  ctaLabelOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
   },
-  indicatorContainer: {
-    position: 'absolute',
-    top: 0,
+  ctaLabel: {
+    maxWidth: TabBarMetrics.ctaSlotWidth,
+    minHeight: TabBarMetrics.ctaLabelHeight,
+    paddingHorizontal: Spacing.XXS,
+    justifyContent: 'center',
   },
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });