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

package/Application/BottomTab/tabItems.ts

@@ -0,0 +1,46 @@
+import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
+import { CommonActions, Route } from '@react-navigation/native';
+
+/**
+ * navigation items of the tab bar, with the press handlers of the system tab bar
+ */
+const getTabItems = ({ state, descriptors, navigation }: BottomTabBarProps) => {
+  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 });
+    };
+
+    return {
+      route,
+      focused,
+      label,
+      icon: options.tabBarIcon as any,
+      badge: options.tabBarBadge,
+      onPress,
+      onLongPress,
+    };
+  });
+};
+
+type TabItem = ReturnType<typeof getTabItems>[number];
+
+export { getTabItems };
+export type { TabItem };

package/Application/BottomTab/usePressLift.ts

@@ -0,0 +1,32 @@
+import {
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+
+const SPRING = { damping: 18, stiffness: 220, mass: 0.8 };
+// the button grows by a tenth while held
+const PRESSED_SCALE = 1.1;
+
+/**
+ * lift for a single button, e.g. the compressed rail
+ */
+const usePressLift = () => {
+  const reduceMotion = useReducedMotion();
+  const lift = useSharedValue(0);
+  const style = useAnimatedStyle(() => ({
+    transform: [{ scale: 1 + lift.value * (PRESSED_SCALE - 1) }],
+  }));
+  const onPressIn = () => {
+    if (!reduceMotion) {
+      lift.value = withSpring(1, SPRING);
+    }
+  };
+  const onPressOut = () => {
+    lift.value = withSpring(0, SPRING);
+  };
+  return { style, onPressIn, onPressOut };
+};
+
+export { usePressLift };

package/Application/Components/DuoGlassBackground.tsx

@@ -9,13 +9,12 @@ import Animated, {
 import { ApplicationContext } from '../../Context';
 import { Shadow } from '../../Consts';
 import { Image } from '../../Image';
-import { AnimatedCompatValue, useNormalizedSharedValue } from '../utils';
+import { type AnimatedCompatValue } from '../utils';
+import { useNormalizedSharedValue } from '../hooks';
+import { useScreenLayout } from '../../Layout';
 
-// extended headers run their gradient this far below the header, as off Duo
 const EXTENDED_GRADIENT_EXTRA = 52;
-// scroll distance over which the extended gradient collapses to the header
 const EXTENDED_COLLAPSE_DISTANCE = 100;
-// scroll distance over which the bar material fades in
 const FADE_DISTANCE = 16;
 const TRANSLUCENT_ALPHA = 'CC';
 
@@ -25,11 +24,12 @@ const TRANSLUCENT_ALPHA = 'CC';
  */
 const DuoGlassBackground: React.FC<{
   animatedValue?: AnimatedCompatValue;
-  // scroll offset where the bar starts to show, e.g. below an animated banner
-  fadeStart?: number;
-}> = ({ animatedValue, fadeStart = 0 }) => {
+  bannerBottom?: number;
+}> = ({ animatedValue, bannerBottom = 0 }) => {
   const { theme } = useContext(ApplicationContext);
+  const { headerHeight } = useScreenLayout();
   const sharedValue = useNormalizedSharedValue(animatedValue);
+  const fadeStart = Math.max(bannerBottom - headerHeight, 0);
 
   const fadeStyle = useAnimatedStyle(() => ({
     opacity: interpolate(
@@ -68,7 +68,6 @@ const DuoScrollGradient: React.FC<{
   headerBackground?: string;
   heightHeader: number;
   extended?: boolean;
-  // quick return header: the gradient leaves with the content instead of fading
   followScroll?: boolean;
 }> = ({
   animatedValue,
@@ -147,7 +146,6 @@ const styles = StyleSheet.create({
     right: 0,
     overflow: 'hidden',
   },
-  // banner image keeps its 375:154 shape, the gradient box clips it
   gradientFill: {
     width: '100%',
     position: 'absolute',

package/Application/Components/HeaderAnimated.tsx

@@ -8,7 +8,7 @@ import { type HeaderAnimatedProps } from '../types';
 import React from 'react';
 import { Image } from '../../Image';
 import { Colors } from '../../Consts';
-import { useNormalizedSharedValue } from '../utils';
+import { useNormalizedSharedValue } from '../hooks';
 
 const ASPECT_RATIOS: Record<
   NonNullable<HeaderAnimatedProps['aspectRatio']>,

package/Application/Components/HeaderBackground.tsx

@@ -7,7 +7,7 @@ import { ApplicationContext, MiniAppContext } from '../../Context';
 import { Colors, Styles } from '../../Consts';
 import { Image } from '../../Image';
 import BackgroundImageView from './BackgroundImageView';
-import { useNormalizedSharedValue } from '../utils';
+import { useNormalizedSharedValue } from '../hooks';
 
 const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   animatedValue,

package/Application/Components/HeaderExtendHeader.tsx

@@ -14,7 +14,8 @@ import { Colors, Radius, Spacing } from '../../Consts';
 import { Image } from '../../Image';
 import { SearchHeaderProps } from '../types';
 import BackgroundImageView from './BackgroundImageView';
-import { AnimatedCompatValue, useNormalizedSharedValue } from '../utils';
+import { type AnimatedCompatValue } from '../utils';
+import { useNormalizedSharedValue } from '../hooks';
 import { useScreenLayout } from '../../Layout';
 import { DuoMetrics, HeaderMetrics } from '../../Layout/utils';
 
@@ -147,7 +148,9 @@ const HeaderExtendHeader: React.FC<{
 
   if (inputSearchProps) {
     return (
-      <View style={[{ zIndex: 0 }, showBaseLineDebug && styles.debugBaseLine]}>
+      <View
+        style={[styles.container, showBaseLineDebug && styles.debugBaseLine]}
+      >
         <Animated.View style={heightStyle} />
         <BackgroundImageView
           useShadowHeader={useShadowHeader}
@@ -186,14 +189,7 @@ const HeaderExtendHeader: React.FC<{
           )}
         </Animated.View>
         <Animated.View
-          style={[
-            {
-              justifyContent: 'flex-end',
-              position: 'absolute',
-              zIndex: 2,
-            },
-            heightStyle,
-          ]}
+          style={[styles.searchContainer, heightStyle]}
         >
           <Animated.View
             style={[{ marginVertical: Spacing.S }, searchTranslateStyle]}
@@ -216,7 +212,9 @@ const HeaderExtendHeader: React.FC<{
 
   if (headerType === 'extended') {
     return (
-      <View style={[{ zIndex: 0 }, showBaseLineDebug && styles.debugBaseLine]}>
+      <View
+        style={[styles.container, showBaseLineDebug && styles.debugBaseLine]}
+      >
         <BackgroundImageView
           useShadowHeader={useShadowHeader}
           heightHeader={heightHeader}
@@ -283,6 +281,14 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
   },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
+  container: {
+    zIndex: 0,
+  },
+  searchContainer: {
+    justifyContent: 'flex-end',
+    position: 'absolute',
+    zIndex: 2,
+  },
 });
 
 export { HeaderExtendHeader };

package/Application/Components/HeaderRight.styles.ts

@@ -0,0 +1,144 @@
+import { Platform, StyleSheet } from 'react-native';
+import { Colors, Spacing } from '../../Consts';
+
+export const styles = StyleSheet.create({
+  navigationButton: {
+    height: 28,
+    width: 28,
+    borderRadius: 14,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: Colors.black_01 + '99',
+    borderColor: Colors.black_20 + '33',
+    borderWidth: 0.2,
+  },
+  headerBackground: {
+    width: '100%',
+    height: undefined,
+    position: 'absolute',
+    aspectRatio: 375 / 154,
+  },
+  headerTitleContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '70%',
+  },
+  circle: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    borderWidth: 0.5,
+    borderColor: Colors.black_04,
+  },
+  dotAvatar: {
+    position: 'absolute',
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    bottom: -2,
+    right: -2,
+    borderWidth: 2,
+    borderColor: Colors.black_01,
+  },
+  headerButton: { paddingHorizontal: 4 },
+  headerRightButton: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingRight: Spacing.M,
+  },
+  toolkitContainer: {
+    height: 28,
+    borderRadius: 14,
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+    backgroundColor: Colors.black_01 + '99',
+    borderColor: Colors.black_20 + '33',
+    borderWidth: 0.2,
+    marginLeft: Spacing.S,
+  },
+  toolkitButton: {
+    padding: 4,
+  },
+  divider: {
+    width: 0.5,
+    height: 12,
+  },
+  sideBarColumn: {
+    gap: Spacing.M,
+  },
+  sideBarRow: {
+    flexDirection: 'row',
+    gap: Spacing.M,
+  },
+  headerLeft: {
+    marginLeft: 12,
+  },
+  badge: {
+    position: 'absolute',
+    top: -Spacing.S,
+    right: -6,
+  },
+  badgeDot: {
+    position: 'absolute',
+    top: -Spacing.XXS,
+    right: -Spacing.XXS,
+  },
+  badgeDotAnimation: {
+    position: 'absolute',
+    top: -Spacing.XS,
+    right: -Spacing.XS,
+  },
+  gradientContainer: {
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    overflow: 'hidden',
+  },
+  extendedHeader: {
+    aspectRatio: 2.43,
+    position: 'absolute',
+    width: '100%',
+  },
+  verifiedDot: {
+    width: 4,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: Colors.green_03,
+    position: 'absolute',
+    alignSelf: 'center',
+  },
+  shadowHeader: {
+    ...Platform.select({
+      ios: {
+        shadowColor: Colors.black_20,
+        shadowOffset: {
+          width: 3,
+          height: 3,
+        },
+        shadowOpacity: 0.12,
+        shadowRadius: 10,
+      },
+      android: {
+        shadowColor: Colors.black_17,
+        shadowOffset: {
+          width: 3,
+          height: 3,
+        },
+        shadowOpacity: 0.12,
+        shadowRadius: 10,
+        elevation: 10,
+      },
+    }),
+  },
+  onBoarding: {
+    marginRight: Spacing.M,
+  },
+  toolkitWide: {
+    width: 65,
+  },
+  toolkitNarrow: {
+    width: 28,
+  },
+});