@momo-kits/foundation 0.75.1-beta.3

package/Navigation/Components.tsx

@@ -0,0 +1,329 @@
+import React, {useContext, useEffect, useState} from 'react';
+import {
+  Animated,
+  DeviceEventEmitter,
+  StatusBar,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {ApplicationContext, NavigationButton} from './index';
+import {Colors, Radius, Spacing, Styles} from '../Consts';
+import {Image} from '../Image';
+import {
+  HeaderBackgroundProps,
+  HeaderBackProps,
+  TitleCustomProps,
+} from './types';
+import {Text} from '../Text';
+import {Icon} from '../Icon';
+import {requestApi} from './utils';
+import Observer from './Observer';
+import {PopupNotify} from '../Popup';
+
+const styles = StyleSheet.create({
+  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,
+  },
+  headerRightButton: {
+    flexDirection: 'row',
+    overflow: 'hidden',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingRight: Spacing.M,
+  },
+  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: 15, lineHeight: 22, fontWeight: 'bold'},
+});
+
+const HeaderTitle: React.FC<any> = props => {
+  const opacity = props.animatedValue?.interpolate({
+    inputRange: [0, 200],
+    outputRange: [0, 1],
+    extrapolate: 'clamp',
+  });
+  return (
+    <Animated.Text
+      {...props}
+      accessibilityLabel={`HeaderTitle/${props.children}`}
+      style={[styles.title, {opacity, color: props.tintColor}]}
+    />
+  );
+};
+
+const HeaderLeft: React.FC<HeaderBackProps> = ({tintColor, preventBack}) => {
+  const {navigator} = useContext(ApplicationContext);
+  const goBack = () => {
+    const canGoBack = navigator?.ref.current?.canGoBack();
+    if (canGoBack) {
+      if (preventBack) {
+        navigator?.showModal({
+          screen: () => (
+            <PopupNotify
+              {...preventBack}
+              primary={{
+                title: preventBack.primary.title,
+                onPress: () => {
+                  preventBack?.primary.onPress();
+                  navigator?.ref.current?.goBack();
+                },
+              }}
+            />
+          ),
+        });
+      } else {
+        navigator?.ref.current?.goBack();
+      }
+    } else {
+      const currentTime = new Date().getTime();
+      const requestId = `navigationBackPress#${currentTime}`;
+      DeviceEventEmitter.emit('dismiss', {requestId});
+    }
+  };
+
+  return (
+    <View style={styles.headerLeft}>
+      <NavigationButton
+        icon="ic_back"
+        tintColor={tintColor}
+        onPress={goBack}
+        accessibilityLabel={'Back'}
+      />
+    </View>
+  );
+};
+
+const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
+  image,
+  backgroundColor,
+  animatedValue,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  let headerImage = theme.assets?.headerBackground;
+  let borderBottomWidth = 0;
+  if (image === null) {
+    borderBottomWidth = 1;
+    headerImage = undefined;
+  }
+  const opacity = animatedValue?.interpolate({
+    inputRange: [0, 200],
+    outputRange: [0, 1],
+    extrapolate: 'clamp',
+  });
+
+  return (
+    <Animated.View
+      style={[
+        Styles.flex,
+        {
+          backgroundColor: backgroundColor ?? theme.colors.background.default,
+          overflow: 'hidden',
+          borderBottomWidth: borderBottomWidth,
+          borderColor: theme.colors.border.default,
+          opacity,
+        },
+      ]}>
+      <StatusBar
+        barStyle={headerImage || theme.dark ? 'light-content' : 'dark-content'}
+      />
+      {!!headerImage && (
+        <Image style={styles.headerBackground} source={{uri: headerImage}} />
+      )}
+    </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, Styles.paddingHorizontal8]}>
+        <Text typography="title_xs" color={tintColor}>
+          {title}
+        </Text>
+        <Text typography="description_s" color={tintColor}>
+          {subTitle}
+        </Text>
+      </View>
+    </View>
+  );
+  return <View style={styles.headerTitleContainer}>{content ?? header}</View>;
+};
+
+const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
+  const validType = (item: any) => {
+    if (item.type !== NavigationButton) {
+      console.warn(
+        'element type of NavigationButton, Please migrate to use NavigationButton of kits.',
+      );
+    }
+  };
+  const renderAction = () => {
+    if (Array.isArray(children)) {
+      return children.map((child, index) => {
+        validType(child);
+        return (
+          <React.Fragment key={index}>
+            {React.cloneElement(child, {...restProps})}
+          </React.Fragment>
+        );
+      });
+    }
+
+    validType(children);
+    return React.cloneElement(children, {...restProps});
+  };
+  return <View style={styles.headerRightButton}>{renderAction()}</View>;
+};
+
+const HeaderToolkitAction: React.FC<any> = ({tintColor, utilityToolConfig}) => {
+  const {appCode, hidden, type, onAction} = utilityToolConfig ?? {};
+  const {theme} = useContext(ApplicationContext);
+  const [showUtility, setShowUtility] = useState(hidden === false);
+
+  let backgroundColor;
+  if (tintColor != Colors.black_01) {
+    backgroundColor = theme.colors.background.surface;
+  }
+
+  useEffect(() => {
+    let addFavorite: any;
+    let removeFavorite: any;
+    if (appCode && type === 'addFavorite') {
+      const addSchema = `observerToolkit_addFavorite_${appCode}`;
+      const removeSchema = `observerToolkit_removeFavorite_${appCode}`;
+      addFavorite = Observer?.getInstance(addSchema);
+      removeFavorite = Observer?.getInstance(removeSchema);
+
+      addFavorite?.attach((data: any) => {
+        if (data?.status) {
+          setShowUtility(false);
+        }
+      });
+      removeFavorite?.attach((data: any) => {
+        if (data?.status) {
+          setShowUtility(true);
+        }
+      });
+    }
+    return () => {
+      addFavorite?.();
+      removeFavorite?.();
+    };
+  }, []);
+
+  const onUtilityTool = () => {
+    onAction?.('onUtilityTool');
+    requestApi(type, [undefined], undefined);
+  };
+
+  const onMore = () => {
+    onAction?.('onMore');
+    requestApi('showToolkit', [utilityToolConfig], undefined);
+  };
+
+  const onClose = () => {
+    onAction?.('onClose');
+    requestApi('dismiss', [], undefined);
+  };
+
+  const renderUtilityTool = () => {
+    if (showUtility) {
+      return (
+        <NavigationButton
+          icon={type}
+          tintColor={tintColor}
+          onPress={onUtilityTool}
+        />
+      );
+    }
+  };
+
+  return (
+    <View style={styles.headerRightButton}>
+      {renderUtilityTool()}
+      <View
+        style={[
+          styles.toolkitContainer,
+          {
+            backgroundColor: backgroundColor ?? '#00000066',
+            borderWidth: backgroundColor ? 0.5 : 0,
+          },
+        ]}>
+        <TouchableOpacity accessibilityLabel={'Toolkit/More'} onPress={onMore}>
+          <Icon color={tintColor} source="navigation_more_horiz" size={20} />
+        </TouchableOpacity>
+        <View style={[styles.divider, {backgroundColor: tintColor}]} />
+        <TouchableOpacity
+          accessibilityLabel={'Toolkit/Close'}
+          onPress={onClose}>
+          <Icon
+            color={tintColor}
+            source="16_navigation_close_circle"
+            size={20}
+          />
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+export {
+  HeaderTitle,
+  HeaderLeft,
+  HeaderBackground,
+  HeaderRightAction,
+  HeaderToolkitAction,
+  HeaderCustom,
+};

package/Navigation/ModalScreen.tsx

@@ -0,0 +1,207 @@
+import React, {useContext, useEffect, useMemo, useRef} from 'react';
+import {
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+  StyleSheet,
+  View,
+} from 'react-native';
+import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
+import {BottomSheetBackdrop, BottomSheetModal} from '@gorhom/bottom-sheet';
+import {BottomSheetModalMethods} from '@gorhom/bottom-sheet/lib/typescript/types';
+import Navigation from './Navigation';
+import {BottomSheetParams, ModalParams} from './types';
+import {Radius, Spacing, Styles} from '../Consts';
+import {
+  ApplicationContext,
+  HeaderRightAction,
+  NavigationButton,
+  NavigationContainer,
+} from './index';
+
+const ModalScreen: React.FC<any> = props => {
+  useEffect(() => {
+    return () => {
+      props.route.params?.onDismiss?.();
+    };
+  }, []);
+
+  if (props.route?.params?.isBottomSheet) {
+    return <BottomSheet {...props} />;
+  }
+  return <Modal {...props} />;
+};
+
+const Modal: React.FC<ModalParams> = ({navigation, route}) => {
+  const {theme} = useContext(ApplicationContext);
+  const {screen, barrierDismissible}: ModalParams = route.params;
+  const Component = useRef(screen).current;
+  const params = {
+    ...route.params,
+    navigation: new Navigation(navigation, theme),
+  };
+  delete params.screen;
+
+  const onDismiss = (pop = true) => {
+    if (barrierDismissible) {
+      return;
+    }
+    navigation.pop();
+  };
+
+  return (
+    <KeyboardAvoidingView
+      style={Styles.flex}
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+      <View style={styles.container}>
+        <Pressable
+          style={styles.modalSpaceHorizontal}
+          onPress={() => onDismiss()}
+        />
+        <View style={styles.modalCenterStage}>
+          <Pressable
+            style={styles.modalSpaceVertical}
+            onPress={() => onDismiss()}
+          />
+          <View style={styles.modalContent} accessibilityLabel={'Modal'}>
+            <Component {...params} />
+          </View>
+          <Pressable
+            style={styles.modalSpaceVertical}
+            onPress={() => onDismiss()}
+          />
+        </View>
+        <Pressable
+          style={styles.modalSpaceHorizontal}
+          onPress={() => onDismiss()}
+        />
+      </View>
+    </KeyboardAvoidingView>
+  );
+};
+
+const BottomSheet: React.FC<BottomSheetParams> = ({navigation, route}) => {
+  const {theme} = useContext(ApplicationContext);
+  const {screen, options}: BottomSheetParams = route.params;
+  const Component = useRef(screen).current;
+  const params = {
+    ...route.params,
+    navigation: new Navigation(navigation, theme),
+  };
+  delete params.screen;
+
+  const snapPoints = useMemo(() => ['50%', '90%'], []);
+  const {bottom} = useSafeAreaInsets();
+  const bottomSheetRef = useRef<BottomSheetModalMethods>(null);
+  const mountedRef = useRef(true);
+
+  useEffect(() => {
+    bottomSheetRef.current?.present();
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  const backdropComponent = (backdropProps: any) => (
+    <BottomSheetBackdrop
+      disappearsOnIndex={-1}
+      appearsOnIndex={0}
+      {...backdropProps}
+    />
+  );
+
+  let backgroundColor = theme.colors.background.default;
+  if (options?.surface) {
+    backgroundColor = theme.colors.background.surface;
+  }
+  const sheetTheme = {...theme, assets: undefined};
+
+  return (
+    <SafeAreaView style={Styles.flex}>
+      <BottomSheetModal
+        ref={bottomSheetRef}
+        snapPoints={snapPoints}
+        onDismiss={() => {
+          if (mountedRef.current) {
+            navigation.pop();
+          }
+        }}
+        handleComponent={null}
+        backdropComponent={backdropComponent}>
+        <View
+          style={{paddingBottom: bottom}}
+          accessibilityLabel={'BottomSheet'}>
+          <View style={[styles.sheetContainer, {backgroundColor}]}>
+            <View style={styles.indicatorContainer}>
+              <View
+                style={[
+                  styles.indicator,
+                  {backgroundColor: theme.colors.text.disable},
+                ]}
+              />
+            </View>
+            <NavigationContainer
+              theme={sheetTheme}
+              screen={props => <Component {...props} {...params} />}
+              options={{
+                ...options,
+                ...{headerLeft: null, headerTransparent: false},
+                headerTitleAlign: 'center',
+                headerRight: props => (
+                  <HeaderRightAction>
+                    <NavigationButton
+                      {...props}
+                      icon="24_navigation_close"
+                      backgroundColor="transparent"
+                      useBorder={false}
+                      onPress={bottomSheetRef.current?.dismiss}
+                    />
+                  </HeaderRightAction>
+                ),
+              }}
+            />
+          </View>
+        </View>
+      </BottomSheetModal>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {flex: 1, flexDirection: 'row'},
+  modalContent: {
+    maxWidth: '100%',
+    maxHeight: '80%',
+  },
+  modalCenterStage: {
+    maxWidth: '90%',
+  },
+  modalSpaceHorizontal: {
+    flex: 1,
+    minWidth: '5%',
+  },
+  modalSpaceVertical: {
+    flex: 1,
+    minHeight: '10%',
+  },
+  sheetContainer: {
+    height: '100%',
+    width: '100%',
+    borderTopLeftRadius: Radius.M,
+    borderTopRightRadius: Radius.M,
+    overflow: 'hidden',
+  },
+  indicatorContainer: {
+    width: '100%',
+    paddingTop: Spacing.S,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  indicator: {
+    width: 64,
+    height: 4,
+    borderRadius: Radius.S,
+  },
+});
+
+export default ModalScreen;

package/Navigation/Navigation.ts

@@ -0,0 +1,38 @@
+import {NavigationProp} from '@react-navigation/native';
+import {NavigationOptions, Theme} from './types';
+import {HeaderRightAction} from './index';
+import {getOptions} from './utils';
+
+class Navigation {
+  instance: NavigationProp<any>;
+  theme: Theme;
+
+  constructor(instance: any, theme: Theme) {
+    this.instance = instance;
+    this.theme = theme;
+  }
+
+  verifyParams = (params: NavigationOptions) => {
+    if (params.headerRight) {
+      const headerRight = params.headerRight?.();
+      if (headerRight.type !== HeaderRightAction) {
+        console.warn(
+          'headerRight not return element type of HeaderRightAction, Please migrate to use HeaderRightAction of kits.',
+        );
+      }
+    }
+    return params;
+  };
+
+  filterParams = (params: NavigationOptions) => {
+    return params;
+  };
+
+  setOptions = (params: NavigationOptions) => {
+    params = this.verifyParams(params);
+    params = getOptions(params, this.theme);
+    this.instance.setOptions(params);
+  };
+}
+
+export default Navigation;

package/Navigation/NavigationButton.tsx

@@ -0,0 +1,54 @@
+import {Platform, StyleSheet, TouchableOpacity as TouchRN} from 'react-native';
+import {TouchableOpacity as TouchGesture} from 'react-native-gesture-handler';
+import React, {useContext} from 'react';
+import {NavigationButtonProps} from './types';
+import {ApplicationContext} from './index';
+import {Icon} from '../Icon';
+import {Colors} from '../Consts';
+
+const TouchableOpacity = Platform.OS === 'ios' ? TouchRN : TouchGesture;
+const NavigationButton: React.FC<NavigationButtonProps> = ({
+  icon,
+  tintColor,
+  onPress,
+  backgroundColor,
+  useBorder = true,
+  accessibilityLabel,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  if (!backgroundColor && tintColor != Colors.black_01) {
+    backgroundColor = theme.colors.background.surface;
+  }
+
+  return (
+    <TouchableOpacity
+      accessibilityLabel={`NavigationButton/${accessibilityLabel}`}
+      style={[
+        styles.container,
+        {
+          backgroundColor: backgroundColor ?? '#00000066',
+          borderWidth: useBorder && backgroundColor ? 0.5 : 0,
+        },
+      ]}
+      onPress={onPress}>
+      <Icon
+        source={icon}
+        color={tintColor ?? theme.colors.text.default}
+        size={20}
+      />
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    height: 28,
+    width: 28,
+    borderRadius: 14,
+    borderColor: '#00000066',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default NavigationButton;

package/Navigation/NavigationContainer.tsx

@@ -0,0 +1,82 @@
+import React, {createContext, useEffect, useRef} from 'react';
+import {BottomSheetModalProvider} from '@gorhom/bottom-sheet';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
+import {
+  NavigationContainer as ReactNavigationContainer,
+  NavigationContainerRef,
+} from '@react-navigation/native';
+import {createStackNavigator} from '@react-navigation/stack';
+import StackScreen from './StackScreen';
+import ModalScreen from './ModalScreen';
+import Navigator from './Navigator';
+import {getDialogOptions, getModalOptions, getStackOptions} from './utils';
+import {GridSystem} from '../Layout';
+import {defaultContext} from '../Consts';
+import {NavigationContainerProps} from './types';
+
+const Stack = createStackNavigator();
+
+const ApplicationContext = createContext(defaultContext);
+const NavigationContainer: React.FC<NavigationContainerProps> = ({
+  screen,
+  theme,
+  options,
+}) => {
+  const navigationRef = React.useRef<NavigationContainerRef>(null);
+  const navigator = useRef(new Navigator(navigationRef));
+
+  useEffect(() => {
+    if (options) {
+      navigationRef.current?.setParams({options: options});
+    }
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <BottomSheetModalProvider>
+        <ApplicationContext.Provider
+          value={{theme, navigator: navigator.current}}>
+          <ReactNavigationContainer
+            theme={{
+              ...theme,
+              dark: false,
+              colors: {
+                ...theme.colors,
+                background: theme.colors.background.default,
+                card: theme.colors.background.surface,
+                text: theme.colors.text.default,
+                border: theme.colors.border.default,
+                notification: theme.colors.error.primary,
+              },
+            }}
+            ref={navigator.current?.ref}
+            independent={true}>
+            <Stack.Navigator initialRouteName="Stack" headerMode="screen">
+              <Stack.Screen
+                name="Stack"
+                component={StackScreen}
+                initialParams={{screen}}
+                options={getStackOptions(theme)}
+              />
+              <Stack.Screen
+                name="Dialog"
+                component={StackScreen}
+                options={getDialogOptions(theme)}
+                initialParams={{screen}}
+              />
+              <Stack.Screen
+                name="Modal"
+                component={ModalScreen}
+                options={getModalOptions()}
+                initialParams={{screen}}
+              />
+            </Stack.Navigator>
+          </ReactNavigationContainer>
+        </ApplicationContext.Provider>
+      </BottomSheetModalProvider>
+      {__DEV__ && <GridSystem />}
+    </SafeAreaProvider>
+  );
+};
+
+export {ApplicationContext, NavigationContainer};