@momo-kits/foundation 0.81.51-beta.0 → 0.81.52

package/Application/types.ts

@@ -1,15 +1,9 @@
-import {EventArg} from '@react-navigation/core';
+import {Animated} from 'react-native';
 import {StackNavigationOptions} from '@react-navigation/stack';
 import React from 'react';
-import {Animated, ViewProps} from 'react-native';
+import Navigator from './Navigator';
 import {PopupNotifyProps} from '../Popup/types';
-import Localize from './Localize';
 import Navigation from './Navigation';
-import Navigator from './Navigator';
-import {
-  NavigationActionCallbackErrorEnum,
-  NavigationActionCallbackStatusEnum,
-} from './constants';
 
 type Screen = React.ComponentType<NavigationScreenProps>;
 
@@ -76,6 +70,16 @@ export type Context = {
   translate?: (key: string) => string;
 };
 
+export type MiniAppInfo = {
+  [key: string]: any;
+  code: string;
+  appId: string;
+  buildNumber: number;
+  flowPartnerId?: string;
+  toolkitConfig?: any;
+  fromCode?: string;
+};
+
 export type LocalizationObject = {
   vi: {
     [key: string]: string;
@@ -90,8 +94,7 @@ export type NavigationContainerProps = {
   options?: NavigationOptions;
   theme: Theme;
   maxApi: any;
-  initialParams?: any;
-  localize: Localize;
+  localization?: LocalizationObject;
 };
 
 export type NavigationScreenProps = {
@@ -106,43 +109,32 @@ export type ScreenParams = {
   options?: NavigationOptions;
 };
 
-export type ModalParams = {
+export interface ModalParams extends ScreenParams {
   [key: string]: any;
-  screen: React.ComponentType;
   onDismiss?: () => void;
   barrierDismissible?: boolean;
-};
+}
 
-export type BottomSheetParams = {
+export interface BottomSheetParams extends ScreenParams {
   [key: string]: any;
-  screen: React.ComponentType;
-  options: {
-    title: string;
-    surface?: boolean;
-  };
-  useNativeModal?: boolean;
-  surface?: boolean;
-  onDismiss?: (type?: string) => void;
-  barrierDismissible?: boolean;
-  draggable?: boolean;
-  useBottomInset?: boolean;
-  keyboardVerticalOffset?: number;
-};
+  onDismiss?: () => void;
+  snapPoint?: '30%' | '50%' | '70%' | '90%' | 'content';
+  indicatorColor?: string;
+}
 
 export type NavigationButtonProps = {
   icon: string;
   tintColor?: string;
   useBorder?: boolean;
   onPress: () => void;
-  badgeType?: 'dot' | 'number' | 'dot-animation';
+  badgeType?: 'dot' | 'number';
   badgeValue?: number;
-  accessibilityLabel?: string;
 };
 
 export type PinnedToolType = {
   key: string;
   badgeValue?: number;
-  badgeType?: 'number' | 'dot' | 'dot-animation';
+  badgeType?: 'number' | 'dot';
 };
 
 export type RuntimeToolType = {
@@ -151,29 +143,18 @@ export type RuntimeToolType = {
   key: string;
 };
 
-export interface NavigationOptions
-  extends Omit<StackNavigationOptions, 'headerRight'> {
+export interface NavigationOptions extends StackNavigationOptions {
   preventBack?: PopupNotifyProps;
   onPressLeftHeader?: () => void;
   surface?: boolean;
   hiddenBack?: boolean;
   customTitle?: TitleCustomProps;
-  headerRight?: HeaderRightToolkit | HeaderRightActions | any;
+  toolkitParams?: {
+    pinnedTool?: PinnedToolType;
+    runtimeTools?: RuntimeToolType[];
+  };
 }
 
-export type HeaderRightToolkit = {
-  type?: 'toolkit';
-  pinnedTool?: PinnedToolType;
-  runtimeTools?: RuntimeToolType[];
-  preventClose?: PopupNotifyProps;
-  useMore?: boolean;
-};
-
-export type HeaderRightActions = {
-  type?: 'icon';
-  buttons: NavigationButtonProps[];
-};
-
 export interface HeaderBackProps extends NavigationButtonProps {
   preventBack?: PopupNotifyProps;
   onPressLeftHeader?: () => void;
@@ -181,8 +162,9 @@ export interface HeaderBackProps extends NavigationButtonProps {
 
 export type HeaderBackgroundProps = {
   image?: string | null;
+  backgroundColor?: string | null;
   animatedValue?: Animated.Value;
-  useSurface?: boolean;
+  useBorder?: boolean;
 };
 
 export type TitleCustomProps = {
@@ -201,25 +183,20 @@ export type HeaderToolkitProps = {
   configs: any[];
 };
 
-export interface HeaderAnimatedProps extends ViewProps {
+export type HeaderAnimatedProps = {
   animatedValue: Animated.Value;
   image: string;
-}
+  onPress?: () => void;
+};
 
 export type BottomTabItemProps = {
   name: string;
   label: string;
   icon: string;
   showDot?: boolean;
-  badgeLabel?: string | number;
+  badgeLabel?: string;
   screen: Screen;
   options: NavigationOptions;
-  initialParams?: any;
-  listeners?: {
-    tabPress?: (e: EventArg<'tabPress', true, undefined>) => void;
-    focus?: (e: EventArg<'focus', false, unknown>) => void;
-    blur?: (e: EventArg<'blur', false, unknown>) => void;
-  };
 };
 
 export type BottomTabProps = {
@@ -228,35 +205,12 @@ export type BottomTabProps = {
   initialRouteName?: string;
   navigation: Navigation;
   listeners?: {
-    tabPress?: (e: EventArg<'tabPress', true, undefined>) => void;
-    focus?: (e: EventArg<'focus', false, unknown>) => void;
-    blur?: (e: EventArg<'blur', false, unknown>) => void;
+    tabPress?: any;
+    focus?: any;
   };
-  floatingButton?: FloatingButtonProps;
-};
-
-export type FloatingButtonProps = {
-  container?: React.ReactNode;
-  icon: string | React.ReactNode;
-  label: string;
-  onPress: () => void;
 };
 
 export type AnimatedHeader = {
   type: 'default' | 'surface';
   component?: (props?: any) => React.ReactElement;
-  headerTitle?: (props?: any) => React.ReactElement;
-};
-
-type NavigatorActionSuccessCallbackType = {
-  status: NavigationActionCallbackStatusEnum.Success;
-};
-
-type NavigatorActionFailCallbackType = {
-  status: NavigationActionCallbackStatusEnum.Failed;
-  type: NavigationActionCallbackErrorEnum;
 };
-
-export type NavigatorCallbackParamsType =
-  | NavigatorActionSuccessCallbackType
-  | NavigatorActionFailCallbackType;

package/Application/utils.tsx

@@ -7,13 +7,11 @@ import {
   HeaderBackground,
   HeaderCustom,
   HeaderLeft,
-  HeaderRight,
   HeaderTitle,
+  HeaderToolkitAction,
 } from './Components';
-import {NavigationOptions} from './types';
+import {NavigationOptions, Theme} from './types';
 import {Colors} from '../Consts';
-import Navigation from './Navigation';
-import {LayoutChangeEvent} from 'react-native';
 
 /**
  * default options for stack screen
@@ -24,7 +22,7 @@ const getStackOptions = (): StackNavigationOptions => {
     headerTitle: HeaderTitle,
     headerBackground: (props: any) => <HeaderBackground {...props} />,
     headerLeft: (props: any) => <HeaderLeft {...props} />,
-    headerRight: (props: any) => <HeaderRight {...props} />,
+    headerRight: (props: any) => <HeaderToolkitAction {...props} />,
     headerTintColor: Colors.black_01,
   };
 };
@@ -74,44 +72,39 @@ const getModalOptions = (): StackNavigationOptions => {
 /**
  * build react-navigation options
  */
-const getOptions = (params: NavigationOptions, navigation?: Navigation) => {
+const getOptions = (params: NavigationOptions, theme: Theme) => {
   let options = {};
 
-  /**
-   * left header factory
-   */
   if (
     typeof params.onPressLeftHeader === 'function' ||
     params.preventBack !== undefined ||
     typeof params.hiddenBack === 'boolean'
   ) {
-    let headerLeft: any = (props: any) => (
-      <HeaderLeft
-        {...props}
-        preventBack={params.preventBack}
-        onPressLeftHeader={params.onPressLeftHeader}
-      />
-    );
-    if (params.hiddenBack) {
-      headerLeft = null;
-    }
     options = {
       ...options,
-      headerLeft,
+      headerLeft: params.hiddenBack
+        ? null
+        : (props: any) => (
+            <HeaderLeft
+              {...props}
+              preventBack={params.preventBack}
+              onPressLeftHeader={params.onPressLeftHeader}
+            />
+          ),
     };
   }
 
-  /**
-   * surface header style
-   */
-  if (typeof params.surface === 'boolean') {
-    console.warn('surface options is deprecated, headerType instead in screen');
+  if (typeof params.surface == 'boolean') {
     if (params.surface) {
       options = {
         ...options,
-        headerTintColor: Colors.black_17,
+        headerTintColor: theme.colors.text.default,
         headerBackground: () => (
-          <HeaderBackground image={null} useSurface={true} />
+          <HeaderBackground
+            image={null}
+            backgroundColor={theme.colors.background.surface}
+            useBorder={true}
+          />
         ),
       };
     } else {
@@ -123,13 +116,7 @@ const getOptions = (params: NavigationOptions, navigation?: Navigation) => {
     }
   }
 
-  /**
-   * custom title
-   */
   if (params.customTitle) {
-    console.warn(
-      'customTitle options is deprecated, please used headerTitle instead'
-    );
     options = {
       ...options,
       headerTitleAlign: 'left',
@@ -139,39 +126,19 @@ const getOptions = (params: NavigationOptions, navigation?: Navigation) => {
     };
   }
 
-  /**
-   *  header right
-   */
-  if (params.headerRight) {
-    let headerRight: any = (props: any) => {
-      return (
-        <HeaderRight
-          {...props}
-          {...params.headerRight}
-          onLayout={(e: LayoutChangeEvent) => {
-            navigation?.onHeaderRightChange?.(e.nativeEvent.layout.width);
-          }}
-        />
-      );
-    };
-    if (typeof params.headerRight === 'function') {
-      headerRight = (props: any) => {
+    options = {
+      ...options,
+      headerRight: (props: any) => {
         return (
-          <HeaderRight
+          <HeaderToolkitAction
+            preventBack={params.preventBack}
+            pinnedTool={params.toolkitParams?.pinnedTool}
+            runtimeTools={params.toolkitParams?.runtimeTools}
             {...props}
-            onLayout={(e: LayoutChangeEvent) => {
-              navigation?.onHeaderRightChange?.(e.nativeEvent.layout.width);
-            }}>
-            {params.headerRight(props)}
-          </HeaderRight>
+          />
         );
-      };
-    }
-    options = {
-      ...options,
-      headerRight,
+      },
     };
-  }
 
   return {
     ...params,
@@ -179,17 +146,4 @@ const getOptions = (params: NavigationOptions, navigation?: Navigation) => {
   };
 };
 
-const formatNameLength = (name = '') => {
-  let formattedName = name;
-  if (formattedName.length > 100) {
-    formattedName = formattedName.substring(0, 100);
-  }
-  return formattedName;
-};
-export {
-  getStackOptions,
-  getDialogOptions,
-  getModalOptions,
-  getOptions,
-  formatNameLength,
-};
+export {getStackOptions, getDialogOptions, getModalOptions, getOptions};

package/Assets/icon_bank.json

@@ -503,4 +503,4 @@
   "zalopay_icon": {
     "uri": "https://static.momocdn.net/app/img/kits/icon_bank/zalopay_icon.png"
   }
-}
+}

package/Badge/Badge.tsx

@@ -46,7 +46,7 @@ const Badge: FC<BadgeProps> = ({label = 'Label', style, backgroundColor}) => {
 
   return (
     <View style={[style, styles.badge, {backgroundColor: badgeColor}]}>
-      <Text color={Colors.black_01} typography={'action_xxs_bold'}>
+      <Text color={Colors.black_01} typography={'action_xs_bold'}>
         {formatTitle()}
       </Text>
     </View>

package/Badge/index.tsx

@@ -1,8 +1,7 @@
 import Badge from './Badge';
 import BadgeDot from './BadgeDot';
 import BadgeRibbon from './BadgeRibbon';
-import BadgeDotAnimation from './BadgeDotAnimation';
 import {BadgeProps, BadgeDotProps, BadgeRibbonProps} from './types';
 
-export {Badge, BadgeRibbon, BadgeDot, BadgeDotAnimation};
+export {Badge, BadgeRibbon, BadgeDot};
 export type {BadgeProps, BadgeDotProps, BadgeRibbonProps};

package/Badge/styles.ts

@@ -2,10 +2,6 @@ import {StyleSheet} from 'react-native';
 import {Colors, Radius, Spacing} from '../Consts';
 import {scaleSize} from '../Text';
 
-const DOT_SIZE = 16;
-
-const DOT_SMALL_SIZE = 10;
-
 export default StyleSheet.create({
   badge: {
     paddingHorizontal: Spacing.XS,
@@ -19,61 +15,21 @@ export default StyleSheet.create({
     borderColor: Colors.black_01,
     alignSelf: 'baseline',
   },
-  dotAnimationContainer: {
-    position: 'relative',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
   dot: {
-    width: DOT_SIZE,
-    height: DOT_SIZE,
+    width: 16,
+    height: 16,
     borderWidth: 2,
     borderColor: Colors.black_01,
     backgroundColor: Colors.red_03,
-    borderRadius: DOT_SIZE / 2,
+    borderRadius: 8,
   },
   dotSmall: {
-    width: DOT_SMALL_SIZE,
-    height: DOT_SMALL_SIZE,
+    width: 10,
+    height: 10,
     borderWidth: 1,
     borderColor: Colors.black_01,
     backgroundColor: Colors.red_03,
-    borderRadius: DOT_SMALL_SIZE / 2,
-  },
-  dotAnimation: {
-    width: DOT_SIZE,
-    height: DOT_SIZE,
-    borderColor: Colors.black_01,
-    backgroundColor: Colors.red_03,
-    borderRadius: DOT_SIZE / 2,
-    borderWidth: 0,
-  },
-  dotAnimationSmall: {
-    width: DOT_SMALL_SIZE,
-    height: DOT_SMALL_SIZE,
-    borderColor: Colors.black_01,
-    backgroundColor: Colors.red_03,
-    borderRadius: DOT_SMALL_SIZE / 2,
-    borderWidth: 0,
-  },
-  wave: {
-    width: DOT_SIZE,
-    height: DOT_SIZE,
-    borderColor: Colors.black_01,
-    backgroundColor: Colors.red_03,
-    borderRadius: DOT_SIZE / 2,
-    opacity: 0,
-    position: 'absolute',
-    borderWidth: 0,
-  },
-  waveSmall: {
-    width: DOT_SMALL_SIZE,
-    height: DOT_SMALL_SIZE,
-    borderColor: Colors.black_01,
-    backgroundColor: Colors.red_03,
-    borderRadius: DOT_SMALL_SIZE / 2,
-    borderWidth: 0,
-    position: 'absolute',
+    borderRadius: 5,
   },
   ribbon: {
     alignSelf: 'baseline',

package/Button/index.tsx

@@ -6,8 +6,9 @@ import {
   TouchableOpacityProps,
   View,
 } from 'react-native';
+
 import LinearGradient from 'react-native-linear-gradient';
-import {ApplicationContext, ComponentContext} from '../Application';
+import {ApplicationContext} from '../Application';
 import {Text} from '../Text';
 import {Typography} from '../Text/types';
 import {Colors, Spacing} from '../Consts';
@@ -58,7 +59,7 @@ export interface ButtonProps extends TouchableOpacityProps {
   /**
    *  If true, the icon of button will use the tint color provided by its container.
    */
-  tintColor?: string;
+  useTintColor?: boolean;
 
   /**
    *  If true, the icon of button will use be show indicator loading.
@@ -69,39 +70,30 @@ export interface ButtonProps extends TouchableOpacityProps {
    *  A callback function that is called when the button is pressed.
    */
   onPress: () => void;
-
-  params?: any;
 }
 
 const Button: FC<ButtonProps> = ({
   type = 'primary',
   size = 'large',
-  tintColor = null,
+  useTintColor = true,
   full = true,
   iconRight,
   iconLeft,
   loading = false,
   title = 'Button',
   onPress,
-  params,
-  accessibilityLabel,
   ...rest
 }) => {
   const {theme, config} = useContext(ApplicationContext);
   const {gradient, color} = config?.navigationBar?.buttonColors ?? {};
   let gradientPros;
-  let state = 'enabled';
-  if (loading) {
-    state = 'loading';
-  }
-  if (gradient?.length > 0 && type === 'primary') {
+  if (gradient?.length > 0 && type == 'primary') {
     gradientPros = {
       colors: gradient,
       start: {x: 1, y: 0.5},
       end: {x: 0, y: 0.5},
     };
   }
-
   const getSizeStyle = () => {
     const styleSheet: {[key: string]: any} = styles;
     return styleSheet[size ?? 'small'];
@@ -217,9 +209,9 @@ const Button: FC<ButtonProps> = ({
    */
   const renderTitle = () => {
     const typography = getTypography();
-    const textColor = getTextColor();
+    const color = getTextColor();
     return (
-      <Text typography={typography} color={textColor} numberOfLines={1}>
+      <Text typography={typography} color={color} numberOfLines={1}>
         {title}
       </Text>
     );
@@ -231,7 +223,7 @@ const Button: FC<ButtonProps> = ({
   const renderLeading = () => {
     const iconSize = getIconSize();
     const marginRight = getIconSpace();
-    const textColor = tintColor ?? getTextColor();
+    const color = useTintColor ? getTextColor() : undefined;
 
     if (loading) {
       return (
@@ -245,7 +237,7 @@ const Button: FC<ButtonProps> = ({
               borderRadius: Spacing.M,
             },
           ]}>
-          <Loader type="spinner" color={getTextColor()} />
+          <Loader type="spinner" color={color} />
         </View>
       );
     }
@@ -256,7 +248,7 @@ const Button: FC<ButtonProps> = ({
             styles.leading,
             {width: iconSize, height: iconSize, marginRight},
           ]}>
-          <Icon color={textColor} source={iconLeft} size={iconSize} />
+          <Icon color={color} source={iconLeft} size={iconSize} />
         </View>
       );
     }
@@ -266,7 +258,7 @@ const Button: FC<ButtonProps> = ({
    * render trailing
    */
   const renderTrailing = () => {
-    const textColor = tintColor ?? getTextColor();
+    const color = useTintColor ? getTextColor() : undefined;
     const marginLeft = getIconSpace();
 
     if (iconRight) {
@@ -277,7 +269,7 @@ const Button: FC<ButtonProps> = ({
             styles.trailing,
             {width: iconSize, height: iconSize, marginLeft},
           ]}>
-          <Icon color={textColor} source={iconRight} size={iconSize} />
+          <Icon color={color} source={iconRight} size={iconSize} />
         </View>
       );
     }
@@ -297,31 +289,21 @@ const Button: FC<ButtonProps> = ({
   };
 
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
+
   return (
-    <ComponentContext.Provider
-      value={{
-        componentName: 'Button',
-        params,
-        state: state,
-        componentId: accessibilityLabel,
-        componentValue: title,
-        action: 'click',
-      }}>
-      <TouchableOpacity
-        {...rest}
-        accessibilityLabel={accessibilityLabel}
-        activeOpacity={activeOpacity}
-        onPress={onPressButton}
-        style={buttonStyle}>
-        {renderLeading()}
-        {renderTitle()}
-        {renderTrailing()}
-        {gradientPros && (
-          <AnimationLinear {...gradientPros} style={styles.gradientView} />
-        )}
-        {gradientPros && <View style={styles.strokeView} />}
-      </TouchableOpacity>
-    </ComponentContext.Provider>
+    <TouchableOpacity
+      {...rest}
+      activeOpacity={activeOpacity}
+      onPress={onPressButton}
+      style={buttonStyle}>
+      {renderLeading()}
+      {renderTitle()}
+      {renderTrailing()}
+      {gradientPros && (
+        <AnimationLinear {...gradientPros} style={styles.gradientView} />
+      )}
+      {gradientPros && <View style={styles.strokeView} />}
+    </TouchableOpacity>
   );
 };