@momo-kits/foundation 0.75.1-beta.9 → 0.75.2-beta.0

package/Navigation/Components.tsx

@@ -1,365 +0,0 @@
-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,
-  HeaderToolkitProps,
-  TitleCustomProps,
-} from './types';
-import {Text} from '../Text';
-import {Icon} from '../Icon';
-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 {theme} = useContext(ApplicationContext);
-  const opacity = props.animatedValue?.interpolate({
-    inputRange: [0, 200],
-    outputRange: [0, 1],
-    extrapolate: 'clamp',
-  });
-  return (
-    <Animated.Text
-      {...props}
-      accessibilityLabel={`HeaderTitle/${props.children}`}
-      style={[
-        styles.title,
-        {fontFamily: `${theme.font}-Bold`, opacity, color: props.tintColor},
-      ]}
-    />
-  );
-};
-
-const HeaderLeft: React.FC<HeaderBackProps> = ({
-  tintColor,
-  preventBack,
-  useBorder,
-  backgroundColor,
-}) => {
-  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'}
-        useBorder={useBorder}
-        backgroundColor={backgroundColor}
-      />
-    </View>
-  );
-};
-
-const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
-  image,
-  backgroundColor,
-  animatedValue,
-}) => {
-  const {theme} = useContext(ApplicationContext);
-  let headerImage = theme.assets?.headerBackground;
-  if (image === null) {
-    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: headerImage ? 0 : 1,
-          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.',
-      );
-      return <View />;
-    }
-  };
-  const renderAction = () => {
-    if (Array.isArray(children)) {
-      return children.map((child, index) => {
-        if (__DEV__) {
-          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}) => {
-  const {theme, navigator} = useContext(ApplicationContext);
-  const [toolConfig, setToolConfig] = useState<HeaderToolkitProps>();
-  const {appCode, hidden, type, onAction} = toolConfig ?? {};
-
-  let backgroundColor;
-  if (tintColor != Colors.black_01) {
-    backgroundColor = theme.colors.background.surface;
-  }
-
-  useEffect(() => {
-    navigator?.getToolkit().then(toolConfig => {
-      setToolConfig(toolConfig);
-    });
-  }, []);
-
-  useEffect(() => {
-    let addFavorite: any;
-    let removeFavorite: any;
-    if (appCode) {
-      const addSchema = `observerToolkit_addFavorite_${appCode}`;
-      const removeSchema = `observerToolkit_removeFavorite_${appCode}`;
-      addFavorite = navigator?.requestApi(
-        'observer',
-        [addSchema],
-        (data: any) => {
-          if (data?.status) {
-            setToolConfig({
-              ...(toolConfig as HeaderToolkitProps),
-              hidden: true,
-            });
-          }
-        },
-      );
-      addFavorite = navigator?.requestApi(
-        'observer',
-        [removeSchema],
-        (data: any) => {
-          if (data?.status) {
-            setToolConfig({
-              ...(toolConfig as HeaderToolkitProps),
-              hidden: false,
-            });
-          }
-        },
-      );
-    }
-
-    return () => {
-      addFavorite?.();
-      removeFavorite?.();
-    };
-  }, [appCode]);
-
-  const onUtilityTool = () => {
-    onAction?.('onUtilityTool');
-    navigator?.requestApi(type, undefined, undefined);
-  };
-
-  const onMore = () => {
-    onAction?.('onMore');
-    navigator?.requestApi('showToolkit', [toolConfig], undefined);
-  };
-
-  const onClose = () => {
-    onAction?.('onClose');
-    navigator?.requestApi('dismiss', undefined, undefined);
-  };
-
-  const renderUtilityTool = () => {
-    if (toolConfig?.hidden === false) {
-      return (
-        <NavigationButton
-          icon={type as string}
-          tintColor={tintColor}
-          onPress={onUtilityTool}
-        />
-      );
-    }
-  };
-
-  if (toolConfig) {
-    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>
-    );
-  }
-
-  return <View />;
-};
-
-export {
-  HeaderTitle,
-  HeaderLeft,
-  HeaderBackground,
-  HeaderRightAction,
-  HeaderToolkitAction,
-  HeaderCustom,
-};

package/Navigation/ModalScreen.tsx

@@ -1,226 +0,0 @@
-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';
-import {HeaderBackground, HeaderLeft} from './Components';
-
-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;
-  }
-
-  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={{
-                ...theme,
-                assets: {...theme.assets, headerBackground: undefined},
-              }}
-              screen={props => <Component {...props} {...params} />}
-              options={{
-                ...options,
-                ...{
-                  headerLeft: (props: any) => {
-                    if (props.canGoBack) {
-                      return (
-                        <HeaderLeft
-                          {...props}
-                          useBorder={false}
-                          backgroundColor="transparent"
-                        />
-                      );
-                    }
-                  },
-                  headerBackground: () => (
-                    <HeaderBackground backgroundColor={backgroundColor} />
-                  ),
-                  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

@@ -1,44 +0,0 @@
-import {NavigationProp} from '@react-navigation/native';
-import {NavigationOptions, Theme} from './types';
-import {HeaderRightAction} from './index';
-import {getOptions} from './utils';
-import {HeaderToolkitAction} from './Components';
-
-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 &&
-        headerRight?.type !== HeaderToolkitAction
-      ) {
-        console.warn(
-          'headerRight not return element type of HeaderRightAction | HeaderToolkitAction, Please migrate to use of kits.',
-        );
-      }
-    }
-    return params;
-  };
-
-  filterParams = (params: NavigationOptions) => {
-    return params;
-  };
-
-  setOptions = (params: NavigationOptions) => {
-    if (__DEV__) {
-      params = this.verifyParams(params);
-    }
-    params = getOptions(params, this.theme);
-    this.instance.setOptions(params);
-  };
-}
-
-export default Navigation;

package/Navigation/NavigationButton.tsx

@@ -1,54 +0,0 @@
-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;