@momo-kits/foundation 0.81.1-optimize.21 → 0.81.1-rc.0

package/Application/BottomSheet.tsx

@@ -1,18 +1,18 @@
-import React, {useCallback, useContext, useEffect, useRef} from 'react';
+import React, {useRef, useEffect, useCallback, useContext} from 'react';
 import {
   Animated,
   Dimensions,
   KeyboardAvoidingView,
-  Modal,
   PanResponder,
   Platform,
   StyleSheet,
   TouchableOpacity,
   View,
+  Modal,
 } from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {ApplicationContext} from './index';
 import {BottomSheetParams} from './types';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {Colors, Radius, Spacing, Styles} from '../Consts';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
@@ -24,6 +24,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   const {
     screen: Screen,
     options,
+    useNativeModal = false,
     surface,
     barrierDismissible = false,
     draggable = true,
@@ -36,6 +37,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       x: 0,
     })
   ).current;
+
   const panResponder = useRef(
     PanResponder.create({
       onStartShouldSetPanResponder: () => draggable,
@@ -61,7 +63,10 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       },
     })
   ).current;
-
+  let Container: any = View;
+  if (useNativeModal) {
+    Container = Modal;
+  }
   let backgroundColor = theme.colors.background.default;
   if (surface) {
     backgroundColor = theme.colors.background.surface;
@@ -88,20 +93,22 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     if (barrierDismissible && !force) {
       return;
     }
+    setTimeout(() => {
+      callback?.();
+    }, 300);
     Animated.timing(pan, {
       toValue: {x: 0, y: heightDevice},
       useNativeDriver: false,
-      duration: 100,
+      duration: 200,
     }).start(() => {
       navigator?.pop();
-      callback?.();
     });
   };
 
   /**
-   * manual close
+   * on request close
    */
-  const requestClose = useCallback((callback?: () => void) => {
+  const onRequestClose = useCallback((callback?: () => void) => {
     onDismiss(true, callback);
   }, []);
 
@@ -146,7 +153,11 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   }, []);
 
   return (
-    <Modal transparent visible={true} onRequestClose={() => onDismiss()}>
+    <Container
+      transparent
+      visible={true}
+      onRequestClose={() => onDismiss()}
+      style={styles.overlay}>
       <KeyboardAvoidingView
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
         keyboardVerticalOffset={keyboardVerticalOffset ?? -20}
@@ -162,7 +173,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
             <Screen
               {...props}
               {...props.route.params}
-              requestClose={requestClose}
+              onRequestClose={onRequestClose}
             />
             {useBottomInset && (
               <View style={{height: Math.min(insets.bottom, 21)}} />
@@ -170,23 +181,14 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
           </View>
         </Animated.View>
       </KeyboardAvoidingView>
-    </Modal>
+    </Container>
   );
 };
 
-export default BottomSheet;
-
 const styles = StyleSheet.create({
-  container: {
-    width: '100%',
-    height: 0,
-    overflow: 'hidden',
-    borderTopLeftRadius: Radius.M,
-    borderTopRightRadius: Radius.M,
-  },
-  draggableContainer: {
-    width: '100%',
-    alignItems: 'center',
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'flex-end',
   },
   indicator: {
     width: 40,
@@ -210,3 +212,5 @@ const styles = StyleSheet.create({
     marginHorizontal: Spacing.M,
   },
 });
+
+export default BottomSheet;

package/Application/BottomTab/BottomTabBar.tsx

@@ -125,7 +125,7 @@ export default function BottomTabBar({
         );
       });
     },
-    [JSON.stringify(routes), state, descriptors, focusedTab],
+    [JSON.stringify(routes), state, descriptors, focusedTab]
   );
 
   /**
@@ -153,7 +153,7 @@ export default function BottomTabBar({
           </View>
           <View
             style={{
-              top: -6,
+              top: -4,
               backgroundColor: activeTintColor ?? theme.colors.primary,
               borderRadius: Radius.XL,
               paddingHorizontal: 6,

package/Application/BottomTab/index.tsx

@@ -17,10 +17,9 @@ const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
 
 const TabScreen: React.FC<NavigationScreenProps> = ({route}) => {
-  const {theme} = useContext(ApplicationContext);
   let options = {};
   if (route.params?.options) {
-    options = getOptions(route.params?.options, theme);
+    options = getOptions(route.params?.options);
   }
 
   if (route.params?.nested) {
@@ -101,7 +100,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
             name={item.name}
             component={TabScreen}
             initialParams={{...item, nested}}
-            listeners={listeners}
+            listeners={item.listeners ?? listeners}
             options={{
               tabBarLabel: ({color, focused}) => {
                 return (

package/Application/Components.tsx

@@ -1,14 +1,17 @@
 import React, {
-  Fragment,
+  Ref,
   useCallback,
   useContext,
   useEffect,
+  useRef,
   useState,
 } from 'react';
 import {
+  Alert,
   Animated,
   BackHandler,
   DeviceEventEmitter,
+  Dimensions,
   StatusBar,
   StyleSheet,
   TouchableOpacity,
@@ -29,7 +32,18 @@ import {scaleSize, Text} from '../Text';
 import {Icon} from '../Icon';
 import {PopupNotify} from '../Popup';
 import {Badge, BadgeDot} from '../Badge';
+import {HeaderType} from '../Layout/types';
+import Navigation from './Navigation';
+import {InputRef, InputSearch, InputSearchProps} from '../Input';
+import {BadgeDotAnimation} from '../Badge';
 
+const SCREEN_PADDING = 12;
+const BACK_WIDTH = 28;
+const {width: screenWidth} = Dimensions.get('window');
+
+/**
+ * default navigation button used header nav
+ */
 const NavigationButton: React.FC<NavigationButtonProps> = ({
   icon,
   tintColor,
@@ -58,6 +72,11 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
     if (badgeType === 'dot') {
       return <BadgeDot size="small" style={styles.badgeDot} />;
     }
+    if (badgeType === 'dot-animation') {
+      return (
+        <BadgeDotAnimation size="small" style={styles.badgeDotAnimation} />
+      );
+    }
 
     if (isNumber(badgeValue)) {
       return <Badge label={badgeValue} style={styles.badge} />;
@@ -65,7 +84,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   }, [badgeType, badgeValue]);
 
   return (
-    <View style={{width: scaleSize(28)}}>
+    <View style={{width: 28}}>
       <TouchableOpacity
         accessibilityLabel={accessibilityLabel}
         style={[styles.navigationButton, buttonStyle]}
@@ -81,13 +100,18 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   );
 };
 
+/**
+ * default header title used for nav
+ */
 const HeaderTitle: React.FC<any> = props => {
   const {theme} = useContext(ApplicationContext);
-  const opacity = props.animatedValue?.interpolate({
-    inputRange: [0, 200],
-    outputRange: [0, 1],
-    extrapolate: 'clamp',
-  });
+  const opacity = props.animatedValue?.interpolate(
+    props.interpolate ?? {
+      inputRange: [0, 200],
+      outputRange: [0, 1],
+      extrapolate: 'clamp',
+    }
+  );
 
   return (
     <Animated.Text
@@ -101,6 +125,9 @@ const HeaderTitle: React.FC<any> = props => {
   );
 };
 
+/**
+ * default header left used for nav
+ */
 const HeaderLeft: React.FC<HeaderBackProps> = ({
   tintColor,
   preventBack,
@@ -113,7 +140,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   useEffect(() => {
     const backHandler = BackHandler.addEventListener(
       'hardwareBackPress',
-      goBackSafe,
+      goBackSafe
     );
 
     return () => backHandler.remove();
@@ -168,6 +195,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
     }
     return true;
   };
+
   return (
     <View style={styles.headerLeft}>
       <NavigationButton
@@ -181,6 +209,9 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   );
 };
 
+/**
+ * header background for default
+ */
 const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   image,
   animatedValue,
@@ -229,6 +260,10 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   );
 };
 
+/**
+ * Header custom with image, title, subtitle
+ * @constructor
+ */
 const HeaderCustom: React.FC<TitleCustomProps> = ({
   title,
   subTitle,
@@ -263,37 +298,42 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
   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.',
-      );
+/**
+ * main component for header right
+ */
+const HeaderRight: React.FC<any> = ({type, children, onLayout, ...props}) => {
+  if (type === 'icon') {
+    let buttons = props?.buttons || [];
+    if (buttons?.length > 3) {
+      buttons = buttons.slice(0, 3);
     }
-    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 style={styles.headerRightButton} onLayout={onLayout}>
+        {buttons?.map?.((item: NavigationButtonProps, index: number) => {
+          return (
+            <View
+              key={`HeaderRightAction ${index}`}
+              style={{
+                marginLeft: index !== 0 ? Spacing.S : 0,
+              }}>
+              <NavigationButton {...item} tintColor={props?.tintColor} />
+            </View>
+          );
+        })}
       </View>
     );
-  };
-  return <View style={styles.headerRightButton}>{renderAction()}</View>;
+  }
+
+  return (
+    <View style={styles.headerRightButton} onLayout={onLayout}>
+      {children ?? <HeaderToolkitAction {...props} />}
+    </View>
+  );
 };
 
+/**
+ * Header toolkit action
+ */
 const HeaderToolkitAction: React.FC<any> = ({
   tintColor,
   pinnedTool,
@@ -327,7 +367,7 @@ const HeaderToolkitAction: React.FC<any> = ({
       (config: any) => {
         navigator.toolkitConfig = config;
         setToolConfig(navigator?.toolkitConfig);
-      },
+      }
     );
   };
 
@@ -338,9 +378,9 @@ const HeaderToolkitAction: React.FC<any> = ({
       {runtimeTools},
       (res: {item: {action?: string; key: string}}) => {
         const {item} = res;
-        navigator?.toolkitCallback?.(item);
+        navigator?.toolkitCallback?.(item.key);
         getToolkitConfig();
-      },
+      }
     );
   };
 
@@ -357,7 +397,7 @@ const HeaderToolkitAction: React.FC<any> = ({
                 navigator?.maxApi?.dispatchFunction?.(
                   'dismiss',
                   undefined,
-                  undefined,
+                  undefined
                 );
               },
             }}
@@ -385,10 +425,10 @@ const HeaderToolkitAction: React.FC<any> = ({
           onPress={() => {
             navigator?.maxApi?.dispatchFunction?.(
               'onToolAction',
-              [pinTool?.key],
+              {item: pinTool},
               () => {
                 getToolkitConfig();
-              },
+              }
             );
             navigator?.toolkitCallback?.(pinTool.key);
           }}
@@ -397,7 +437,7 @@ const HeaderToolkitAction: React.FC<any> = ({
   };
   if (toolConfig) {
     return (
-      <View style={styles.headerRightButton}>
+      <View style={Styles.row}>
         {renderPinnedTool()}
         <View
           style={[
@@ -405,6 +445,7 @@ const HeaderToolkitAction: React.FC<any> = ({
             {
               backgroundColor: backgroundColor ?? '#00000066',
               borderWidth: backgroundColor ? 0.5 : 0,
+              marginLeft: renderPinnedTool() ? Spacing.S : 0,
             },
           ]}>
           <TouchableOpacity
@@ -430,6 +471,9 @@ const HeaderToolkitAction: React.FC<any> = ({
   return <View />;
 };
 
+/**
+ * default header banner for header animated
+ */
 const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   animatedValue,
   image,
@@ -470,6 +514,191 @@ const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   );
 };
 
+/**
+ * Header extended with background image
+ * @constructor
+ */
+const HeaderExtendHeader: React.FC<{
+  headerType?: HeaderType;
+  animatedValue: Animated.Value;
+  heightHeader: number;
+  inputSearchProps?: InputSearchProps;
+  inputSearchRef?: Ref<InputRef>;
+  navigation?: Navigation;
+}> = ({
+  headerType = 'default',
+  animatedValue,
+  heightHeader,
+  inputSearchProps,
+  inputSearchRef,
+  navigation,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const [rightSpace, setRightSpace] = useState(0);
+  const animated = useRef(new Animated.Value(0));
+
+  useEffect(() => {
+    const listener = animatedValue.addListener(({value}) => {
+      animated.current.setValue(value);
+    });
+    return () => {
+      animatedValue?.removeListener(listener);
+    };
+  }, []);
+
+  const height = animated.current.interpolate({
+    inputRange: [0, 100],
+    outputRange: [heightHeader + 52, heightHeader],
+    extrapolate: 'clamp',
+  });
+
+  const translateX = animated.current.interpolate({
+    inputRange: [0, 100],
+    outputRange: [SCREEN_PADDING, BACK_WIDTH + SCREEN_PADDING * 2],
+    extrapolate: 'clamp',
+  });
+
+  if (navigation) {
+    navigation.onHeaderRightChange = (width: number) => {
+      setRightSpace(width);
+    };
+  }
+
+  const renderInputView = (hasColorBG: boolean = false) => {
+    return (
+      <Animated.View
+        style={{
+          justifyContent: 'flex-end',
+          height,
+        }}>
+        <Animated.View
+          style={{
+            transform: [{translateX}],
+            marginVertical: Spacing.S,
+            width: animated.current.interpolate({
+              inputRange: [0, 100],
+              outputRange: [
+                screenWidth - SCREEN_PADDING * 2,
+                screenWidth - SCREEN_PADDING * 3 - BACK_WIDTH - rightSpace,
+              ],
+              extrapolate: 'clamp',
+            }),
+          }}>
+          <InputSearch
+            {...inputSearchProps}
+            ref={inputSearchRef}
+            hasColorBG={hasColorBG}
+            showButtonText={false}
+          />
+        </Animated.View>
+      </Animated.View>
+    );
+  };
+
+  if (inputSearchProps) {
+    if (headerType === 'surface') {
+      return (
+        <>
+          <Animated.View
+            style={[
+              styles.headerBox,
+              {
+                backgroundColor: theme.colors.background.surface,
+                borderBottomWidth: 1,
+                borderColor: theme.colors.border.default,
+                height,
+              },
+            ]}
+          />
+          {renderInputView(true)}
+        </>
+      );
+    }
+
+    if (headerType === 'extended') {
+      return (
+        <>
+          <Animated.View
+            style={[
+              styles.headerBox,
+              {
+                height,
+              },
+            ]}>
+            <Image
+              source={{
+                uri: theme.assets?.headerBackground,
+              }}
+              style={styles.headerBackground}
+            />
+          </Animated.View>
+          {renderInputView()}
+        </>
+      );
+    }
+
+    return (
+      <>
+        <View style={[styles.headerBox, {height: heightHeader}]}>
+          <Image
+            source={{
+              uri: theme.assets?.headerBackground,
+            }}
+            style={styles.headerBackground}
+          />
+        </View>
+        {renderInputView()}
+      </>
+    );
+  }
+
+  if (headerType === 'extended') {
+    return (
+      <View style={{minHeight: heightHeader}}>
+        <Image
+          source={{
+            uri: theme.assets?.headerBackground,
+          }}
+          style={styles.extendedHeader}
+        />
+      </View>
+    );
+  }
+
+  return <View />;
+};
+
+const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
+  if (__DEV__) {
+    Alert.alert(
+      'HeaderRightAction',
+      'This component is deprecated and will removed 10/2024, please use new type headerRight specs instead v0.92.34'
+    );
+  }
+  const validateType = (child: React.ReactElement) => {
+    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 styles = StyleSheet.create({
   navigationButton: {
     height: 28,
@@ -509,7 +738,6 @@ const styles = StyleSheet.create({
     paddingRight: Spacing.M,
   },
   toolkitContainer: {
-    marginLeft: Spacing.S,
     padding: Spacing.XS,
     height: 28,
     borderRadius: 14,
@@ -541,6 +769,22 @@ const styles = StyleSheet.create({
     top: -Spacing.XS,
     right: -Spacing.XS,
   },
+  badgeDotAnimation: {
+    position: 'absolute',
+    top: -Spacing.XS,
+    right: -Spacing.XS,
+  },
+  extendedHeader: {
+    aspectRatio: 1.75,
+    position: 'absolute',
+    width: '100%',
+    height: 210,
+  },
+  headerBox: {
+    width: '100%',
+    position: 'absolute',
+    overflow: 'hidden',
+  },
 });
 
 export {
@@ -548,8 +792,10 @@ export {
   HeaderTitle,
   HeaderLeft,
   HeaderBackground,
-  HeaderRightAction,
   HeaderToolkitAction,
   HeaderCustom,
   HeaderAnimated,
+  HeaderRight,
+  HeaderExtendHeader,
+  HeaderRightAction,
 };

package/Application/Localize.ts

@@ -0,0 +1,44 @@
+import {NativeModules} from 'react-native';
+import {LocalizationObject} from './types';
+import defaultLanguage from '../Assets/language.json';
+
+class Localize {
+  private assets: LocalizationObject;
+  private currentLanguage: 'en' | 'vi';
+
+  constructor(assets: LocalizationObject) {
+    this.assets = {
+      vi: {...assets?.vi, ...defaultLanguage.vi},
+      en: {...assets?.en, ...defaultLanguage.en},
+    };
+    this.currentLanguage = 'vi';
+    if (NativeModules?.RNResource?.language === 'en') {
+      this.currentLanguage = 'en';
+    }
+  }
+
+  get getCurrentLanguage() {
+    return this.currentLanguage;
+  }
+
+  translate(key: string) {
+    return this.assets[this.currentLanguage]?.[key] || key;
+  }
+
+  translateData(data: {vi: string; en: string}) {
+    return data[this.currentLanguage] || data.vi || JSON.stringify(data);
+  }
+
+  addTranslations(translations: LocalizationObject) {
+    this.assets = {
+      vi: {...translations?.vi, ...this.assets.vi},
+      en: {...translations?.en, ...this.assets.en},
+    };
+  }
+
+  setLanguage(language: 'en' | 'vi') {
+    this.currentLanguage = language;
+  }
+}
+
+export default Localize;