@momo-kits/foundation 0.74.2-react-native.1

package/Application/BottomTab.tsx

@@ -0,0 +1,120 @@
+import React, {useContext, useEffect} from 'react';
+import {Platform} from 'react-native';
+import {BottomTabProps, NavigationScreenProps} from './types';
+import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import {createStackNavigator} from '@react-navigation/stack';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {NavigationContainer} from '@react-navigation/native';
+import {Icon} from '../Icon';
+import {Text} from '../Text';
+import {ApplicationContext} from './index';
+import {getStackOptions} from './utils';
+import StackScreen from './StackScreen';
+
+const Tab = createBottomTabNavigator();
+const Stack = createStackNavigator();
+
+const TabScreen: React.FC<NavigationScreenProps> = ({route}) => {
+  if (route.params?.nested) {
+    return (
+      <Stack.Navigator>
+        <Stack.Screen
+          name="Stack"
+          component={StackScreen}
+          initialParams={{screen: route.params?.screen}}
+          options={{...getStackOptions(), ...route.params?.options}}
+        />
+      </Stack.Navigator>
+    );
+  }
+  return (
+    <NavigationContainer independent={true}>
+      <Stack.Navigator>
+        <Stack.Screen
+          name="Stack"
+          component={StackScreen}
+          initialParams={{screen: route.params?.screen}}
+          options={{...getStackOptions(), ...route.params?.options}}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+};
+const BottomTab: React.FC<BottomTabProps> = ({
+  nested,
+  tabs,
+  listeners,
+  navigation,
+  initialRouteName,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const insets = useSafeAreaInsets();
+
+  useEffect(() => {
+    navigation?.setOptions({
+      headerShown: false,
+      headerTransparent: true,
+      headerBackground: undefined,
+    });
+  }, []);
+
+  return (
+    <Tab.Navigator
+      initialRouteName={initialRouteName}
+      backBehavior={'firstRoute'}
+      screenOptions={{headerShown: false}}
+      tabBarOptions={{
+        style: {
+          height: 68 + Math.min(insets.bottom, 21),
+          borderWidth: 0,
+        },
+        tabStyle: {
+          height: 68,
+          paddingVertical: 8,
+        },
+      }}>
+      {tabs.map(item => {
+        return (
+          <Tab.Screen
+            key={item.name}
+            name={item.name}
+            component={TabScreen}
+            initialParams={{...item, nested}}
+            listeners={listeners}
+            options={{
+              tabBarLabel: ({color, focused}) => {
+                return (
+                  <Text
+                    numberOfLines={1}
+                    typography={
+                      focused ? 'label_xs_medium' : 'description_xs_regular'
+                    }
+                    color={color}>
+                    {item.label}
+                  </Text>
+                );
+              },
+              tabBarBadge: item?.badgeLabel,
+              tabBarBadgeStyle: {
+                borderColor: 'white',
+                borderWidth: 2,
+                fontSize: 10,
+                lineHeight: Platform.OS === 'android' ? 17 : 14,
+                fontWeight: 'bold',
+                alignSelf: 'center',
+                fontFamily: `${theme.font}-Bold`,
+                left: item?.showDot ? 8 : 4,
+                top: item?.showDot ? -2 : -6,
+              },
+              tabBarIcon: ({color}) => (
+                <Icon source={item.icon} color={color} size={28} />
+              ),
+            }}
+          />
+        );
+      })}
+    </Tab.Navigator>
+  );
+};
+
+export default BottomTab;

package/Application/Components.tsx

@@ -0,0 +1,534 @@
+import React, {
+  Fragment,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+import {
+  Animated,
+  BackHandler,
+  DeviceEventEmitter,
+  StatusBar,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
+import {ApplicationContext, MiniAppContext} from './index';
+import {Colors, Radius, Spacing, Styles} from '../Consts';
+import {Image} from '../Image';
+import {
+  HeaderAnimatedProps,
+  HeaderBackgroundProps,
+  HeaderBackProps,
+  NavigationButtonProps,
+  TitleCustomProps,
+} from './types';
+import {scaleSize, Text} from '../Text';
+import {Icon} from '../Icon';
+import {PopupNotify} from '../Popup';
+import {Badge, BadgeDot} from '../Badge';
+
+const NavigationButton: React.FC<NavigationButtonProps> = ({
+  icon,
+  tintColor,
+  onPress,
+  useBorder = true,
+  badgeType,
+  badgeValue,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  let buttonStyle: ViewStyle = {backgroundColor: '#00000066'};
+  if (tintColor != Colors.black_01) {
+    buttonStyle = {
+      backgroundColor: 'transparent',
+      borderColor: '#00000066',
+      borderWidth: useBorder ? 0.5 : 0,
+    };
+  }
+
+  const isNumber = (label: any) => {
+    const numberRegex = /^\d+$/;
+    return numberRegex.test(String(label));
+  };
+
+  const renderBadge = useCallback(() => {
+    if (badgeType === 'dot') {
+      return <BadgeDot size="small" style={styles.badgeDot} />;
+    }
+
+    if (isNumber(badgeValue)) {
+      return <Badge label={badgeValue} style={styles.badge} />;
+    }
+  }, [badgeType, badgeValue]);
+
+  return (
+    <View style={{width: scaleSize(28)}}>
+      <TouchableOpacity
+        style={[styles.navigationButton, buttonStyle]}
+        onPress={onPress}>
+        <Icon
+          source={icon}
+          color={tintColor ?? theme.colors.text.default}
+          size={20}
+        />
+      </TouchableOpacity>
+      {renderBadge()}
+    </View>
+  );
+};
+
+const HeaderTitle: React.FC<any> = props => {
+  const {theme} = useContext(ApplicationContext);
+  const opacity = props.animatedValue?.interpolate({
+    inputRange: [0, 200],
+    outputRange: [0, 1],
+    extrapolate: 'clamp',
+  });
+
+  return (
+    <Animated.Text
+      {...props}
+      style={[
+        styles.title,
+        {fontFamily: `${theme.font}-Bold`, opacity, color: props.tintColor},
+      ]}
+    />
+  );
+};
+
+const HeaderLeft: React.FC<HeaderBackProps> = ({
+  tintColor,
+  preventBack,
+  onPressLeftHeader,
+  useBorder,
+}) => {
+  const context = useContext(MiniAppContext);
+  const {navigator} = useContext(ApplicationContext);
+
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      goBackSafe,
+    );
+
+    return () => backHandler.remove();
+  }, []);
+
+  const goBackSafe = () => {
+    const goBack = () => {
+      const canGoBack = navigator?.ref.current?.canGoBack();
+      if (!canGoBack) {
+        const currentRoute = navigator?.ref?.current.getCurrentRoute();
+        navigator?.maxApi?.trackEvent?.('service_icon_clicked', {
+          ...context,
+          screen_name: currentRoute?.params?.screen?.name ?? currentRoute?.name,
+          trigger_id: '111154000000000000',
+          icon_name: 'back',
+        });
+      }
+      if (canGoBack) {
+        navigator?.ref.current?.goBack();
+      } else if (navigator?.maxApi) {
+        navigator?.maxApi?.dismiss(navigator.dismissData);
+      } else {
+        const currentTime = new Date().getTime();
+        const requestId = `navigationBackPress#${currentTime}`;
+        DeviceEventEmitter.emit('dismiss', {requestId});
+      }
+      onPressLeftHeader?.();
+    };
+
+    if (preventBack) {
+      navigator?.showModal({
+        screen: () => (
+          <PopupNotify
+            {...preventBack}
+            primary={{
+              title: preventBack.primary.title,
+              onPress: () => {
+                preventBack?.primary.onPress();
+                goBack();
+              },
+            }}
+          />
+        ),
+      });
+    } else {
+      goBack();
+    }
+    return true;
+  };
+
+  return (
+    <View style={styles.headerLeft}>
+      <NavigationButton
+        icon="ic_back"
+        tintColor={tintColor}
+        onPress={goBackSafe}
+        useBorder={useBorder}
+      />
+    </View>
+  );
+};
+
+const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
+  image,
+  backgroundColor,
+  animatedValue,
+  useBorder = false,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  let headerImage = theme.assets?.headerBackground;
+  if (image === null) {
+    headerImage = undefined;
+  }
+  const opacity = animatedValue?.interpolate({
+    inputRange: [0, 114],
+    outputRange: [0, 1],
+    extrapolate: 'clamp',
+  });
+
+  return (
+    <Animated.View
+      style={[
+        Styles.flex,
+        {
+          backgroundColor: backgroundColor ?? theme.colors.background.default,
+          overflow: 'hidden',
+          borderBottomWidth: useBorder ? 1 : 0,
+          borderColor: theme.colors.border.default,
+          opacity,
+        },
+      ]}>
+      <StatusBar
+        barStyle={headerImage || theme.dark ? 'light-content' : 'dark-content'}
+        translucent={true}
+        backgroundColor={'transparent'}
+      />
+      {!!headerImage && (
+        <Image
+          style={styles.headerBackground}
+          source={{uri: headerImage}}
+          loading={false}
+        />
+      )}
+    </Animated.View>
+  );
+};
+
+const HeaderCustom: React.FC<TitleCustomProps> = ({
+  title,
+  subTitle,
+  image,
+  imageShape = 'circle',
+  content,
+  tintColor,
+  dotColor,
+}) => {
+  const avatarStyle = imageShape == 'circle' ? styles.circle : styles.square;
+  const header = (
+    <View style={Styles.row}>
+      <View>
+        <Image source={{uri: image}} style={avatarStyle} />
+        {!!dotColor && (
+          <View style={[styles.dotAvatar, {backgroundColor: dotColor}]} />
+        )}
+      </View>
+      <View style={[Styles.flex, {paddingHorizontal: 8}]}>
+        <Text typography="header_default_bold" color={tintColor}>
+          {title}
+        </Text>
+        <Text typography="description_default_regular" color={tintColor}>
+          {subTitle}
+        </Text>
+      </View>
+    </View>
+  );
+  return <View style={styles.headerTitleContainer}>{content ?? header}</View>;
+};
+
+const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
+  const validateType = (child: React.ReactElement) => {
+    const valid = child?.type === NavigationButton || child?.type == Fragment;
+    if (__DEV__ && !valid) {
+      console.warn(
+        'HeaderRightAction contains element type of NavigationButton, Please check again.',
+      );
+    }
+    return child;
+  };
+
+  const renderAction = () => {
+    if (Array.isArray(children)) {
+      return children.map((child, index) => {
+        return (
+          <View key={`HeaderRightAction ${index}`} style={styles.headerButton}>
+            {React.cloneElement(validateType(child), {...restProps})}
+          </View>
+        );
+      });
+    }
+
+    return (
+      <View style={styles.headerButton}>
+        {React.cloneElement(validateType(children), {...restProps})}
+      </View>
+    );
+  };
+  return <View style={styles.headerRightButton}>{renderAction()}</View>;
+};
+
+const HeaderToolkitAction: React.FC<any> = ({
+  tintColor,
+  pinnedTool,
+  runtimeTools = [],
+  preventBack,
+}) => {
+  const {theme, navigator} = useContext(ApplicationContext);
+  const [toolConfig, setToolConfig] = useState<any>();
+  const {onAction} = toolConfig ?? {};
+
+  let backgroundColor;
+  if (tintColor != Colors.black_01) {
+    backgroundColor = theme.colors.background.surface;
+  }
+
+  useEffect(() => {
+    if (navigator?.toolkitConfig) {
+      setToolConfig(navigator?.toolkitConfig);
+    } else {
+      getToolkitConfig();
+    }
+  }, []);
+
+  const getToolkitConfig = () => {
+    navigator?.maxApi?.dispatchFunction?.(
+      'getToolsConfig',
+      [undefined],
+      (config: any) => {
+        navigator.toolkitConfig = config;
+        setToolConfig(navigator?.toolkitConfig);
+      },
+    );
+  };
+
+  const onMore = () => {
+    onAction?.('onMore');
+    navigator?.maxApi?.dispatchFunction?.(
+      'showTools',
+      {runtimeTools},
+      (res: {item: {action?: string; key: string}}) => {
+        const {item} = res;
+        navigator?.toolkitCallback?.(item);
+        getToolkitConfig();
+      },
+    );
+  };
+
+  const onClose = () => {
+    if (preventBack) {
+      navigator?.showModal({
+        screen: () => (
+          <PopupNotify
+            {...preventBack}
+            primary={{
+              title: preventBack.primary.title,
+              onPress: () => {
+                preventBack?.primary.onPress();
+                navigator?.maxApi?.dispatchFunction?.(
+                  'dismiss',
+                  undefined,
+                  undefined,
+                );
+              },
+            }}
+          />
+        ),
+      });
+    } else {
+      navigator?.maxApi?.dispatchFunction?.('dismiss', undefined, undefined);
+    }
+  };
+
+  const renderPinnedTool = () => {
+    const pinKey = pinnedTool?.key || toolConfig?.pinnedTool?.key;
+    const pinTool = toolConfig?.tools?.find((i: any) => i.key === pinKey);
+    const {badgeValue, badgeType} = pinnedTool ?? {};
+
+    if (pinTool)
+      return (
+        <NavigationButton
+          icon={pinTool.icon as string}
+          tintColor={tintColor}
+          badgeValue={badgeValue}
+          badgeType={badgeType}
+          onPress={() => {
+            navigator?.maxApi?.dispatchFunction?.(
+              'onToolAction',
+              [pinTool?.key],
+              () => {
+                getToolkitConfig();
+              },
+            );
+            navigator?.toolkitCallback?.(pinTool.key);
+          }}
+        />
+      );
+  };
+
+  if (toolConfig) {
+    return (
+      <View style={styles.headerRightButton}>
+        {renderPinnedTool()}
+        <View
+          style={[
+            styles.toolkitContainer,
+            {
+              backgroundColor: backgroundColor ?? '#00000066',
+              borderWidth: backgroundColor ? 0.5 : 0,
+            },
+          ]}>
+          <TouchableOpacity onPress={onMore}>
+            <Icon color={tintColor} source="navigation_more_horiz" size={20} />
+          </TouchableOpacity>
+          <View style={[styles.divider, {backgroundColor: tintColor}]} />
+          <TouchableOpacity onPress={onClose}>
+            <Icon
+              color={tintColor}
+              source="16_navigation_close_circle"
+              size={20}
+            />
+          </TouchableOpacity>
+        </View>
+      </View>
+    );
+  }
+
+  return <View />;
+};
+
+const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
+  animatedValue,
+  image,
+  onPress,
+}) => {
+  const scale = animatedValue.interpolate({
+    inputRange: [-300, 0, 300],
+    outputRange: [4, 1, 1],
+    extrapolate: 'clamp',
+  });
+  const opacity = animatedValue.interpolate({
+    inputRange: [0, 150, 300],
+    outputRange: [1, 0.5, 0],
+    extrapolate: 'clamp',
+  });
+  const translateY = animatedValue.interpolate({
+    inputRange: [-300, 0],
+    outputRange: [-80, -2],
+    extrapolate: 'clamp',
+  });
+
+  return (
+    <TouchableOpacity onPress={onPress}>
+      <Animated.View
+        style={{
+          height: 210,
+          opacity: opacity,
+          transform: [{scale}, {translateY}],
+        }}>
+        <Image
+          source={{
+            uri: image,
+          }}
+          style={{width: '100%', height: '100%'}}
+        />
+      </Animated.View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  navigationButton: {
+    height: 28,
+    width: 28,
+    borderRadius: 14,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  headerBackground: {
+    width: '100%',
+    height: undefined,
+    position: 'absolute',
+    aspectRatio: 375 / 154,
+  },
+  headerTitleContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+  },
+  circle: {width: 36, height: 36, borderRadius: 18},
+  square: {width: 36, height: 36, borderRadius: Radius.XS},
+  dotAvatar: {
+    position: 'absolute',
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    bottom: 0,
+    right: 0,
+    borderWidth: 1,
+    borderColor: Colors.black_01,
+  },
+  headerButton: {paddingHorizontal: 4},
+  headerRightButton: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingRight: Spacing.S,
+  },
+  toolkitContainer: {
+    marginLeft: Spacing.S,
+    padding: Spacing.XS,
+    height: 28,
+    borderRadius: 14,
+    borderColor: '#00000066',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  divider: {
+    width: 1,
+    height: 12,
+    marginHorizontal: 4,
+  },
+  headerLeft: {
+    marginLeft: 12,
+  },
+  title: {
+    fontSize: scaleSize(15),
+    lineHeight: scaleSize(22),
+    fontWeight: 'bold',
+  },
+  badge: {
+    position: 'absolute',
+    top: -Spacing.S,
+    right: -6,
+  },
+  badgeDot: {
+    position: 'absolute',
+    top: -Spacing.XS,
+    right: -Spacing.XS,
+  },
+});
+
+export {
+  NavigationButton,
+  HeaderTitle,
+  HeaderLeft,
+  HeaderBackground,
+  HeaderRightAction,
+  HeaderToolkitAction,
+  HeaderCustom,
+  HeaderAnimated,
+};