@momo-kits/foundation 0.92.26-beta.2 → 0.92.26-beta.21

package/Application/types.ts

@@ -115,6 +115,7 @@ export type BottomSheetParams = {
     title: string;
     surface?: boolean;
   };
+  useNativeModal?: boolean;
   surface?: boolean;
   onDismiss?: (type?: string) => void;
   barrierDismissible?: boolean;
@@ -145,19 +146,29 @@ export type RuntimeToolType = {
   key: string;
 };
 
-export interface NavigationOptions extends StackNavigationOptions {
+export interface NavigationOptions
+  extends Omit<StackNavigationOptions, 'headerRight'> {
   preventBack?: PopupNotifyProps;
   onPressLeftHeader?: () => void;
   surface?: boolean;
   hiddenBack?: boolean;
   customTitle?: TitleCustomProps;
-  toolkitParams?: {
-    pinnedTool?: PinnedToolType;
-    runtimeTools?: RuntimeToolType[];
-    preventClose?: PopupNotifyProps;
-  };
+  headerRight?: HeaderRightToolkit | HeaderRightActions | any;
 }
 
+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;

package/Application/utils.tsx

@@ -7,11 +7,13 @@ import {
   HeaderBackground,
   HeaderCustom,
   HeaderLeft,
+  HeaderRight,
   HeaderTitle,
-  HeaderToolkitAction,
 } from './Components';
-import {NavigationOptions, Theme} from './types';
+import {NavigationOptions} from './types';
 import {Colors} from '../Consts';
+import Navigation from './Navigation';
+import {LayoutChangeEvent} from 'react-native';
 
 /**
  * default options for stack screen
@@ -22,7 +24,7 @@ const getStackOptions = (): StackNavigationOptions => {
     headerTitle: HeaderTitle,
     headerBackground: (props: any) => <HeaderBackground {...props} />,
     headerLeft: (props: any) => <HeaderLeft {...props} />,
-    headerRight: (props: any) => <HeaderToolkitAction {...props} />,
+    headerRight: (props: any) => <HeaderRight {...props} />,
     headerTintColor: Colors.black_01,
   };
 };
@@ -72,33 +74,42 @@ const getModalOptions = (): StackNavigationOptions => {
 /**
  * build react-navigation options
  */
-const getOptions = (params: NavigationOptions, theme: Theme) => {
+const getOptions = (params: NavigationOptions, navigation?: Navigation) => {
   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: params.hiddenBack
-        ? null
-        : (props: any) => (
-            <HeaderLeft
-              {...props}
-              preventBack={params.preventBack}
-              onPressLeftHeader={params.onPressLeftHeader}
-            />
-          ),
+      headerLeft,
     };
   }
 
+  /**
+   * surface header style
+   */
   if (typeof params.surface === 'boolean') {
+    console.warn('surface options is deprecated, headerType instead in screen');
     if (params.surface) {
       options = {
         ...options,
-        headerTintColor: theme.colors.text.default,
+        headerTintColor: Colors.black_17,
         headerBackground: () => (
           <HeaderBackground image={null} useSurface={true} />
         ),
@@ -112,7 +123,13 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
     }
   }
 
+  /**
+   * custom title
+   */
   if (params.customTitle) {
+    console.warn(
+      'customTitle options is deprecated, please used headerTitle instead'
+    );
     options = {
       ...options,
       headerTitleAlign: 'left',
@@ -122,12 +139,37 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
     };
   }
 
-  if (params.toolkitParams) {
+  /**
+   *  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) => {
+        return (
+          <HeaderRight
+            {...props}
+            onLayout={(e: LayoutChangeEvent) => {
+              navigation?.onHeaderRightChange?.(e.nativeEvent.layout.width);
+            }}>
+            {params.headerRight(props)}
+          </HeaderRight>
+        );
+      };
+    }
     options = {
       ...options,
-      headerRight: (props: any) => {
-        return <HeaderToolkitAction {...params.toolkitParams} {...props} />;
-      },
+      headerRight,
     };
   }
 

package/Button/index.tsx

@@ -297,7 +297,6 @@ const Button: FC<ButtonProps> = ({
   };
 
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
-
   return (
     <ComponentContext.Provider
       value={{

package/Input/InputMoney.tsx

@@ -44,7 +44,7 @@ const InputMoney = forwardRef(
       value: _value,
       ...props
     }: InputMoneyProps,
-    ref,
+    ref
   ) => {
     const {theme} = useContext(ApplicationContext);
     const [focused, setFocused] = useState(false);
@@ -63,7 +63,7 @@ const InputMoney = forwardRef(
     };
 
     const [value, setValue] = useState(
-      defaultValue ? validateText(defaultValue) : '',
+      defaultValue ? validateText(defaultValue) : ''
     );
 
     const onClearText = () => {
@@ -198,7 +198,7 @@ const InputMoney = forwardRef(
         </View>
       </ComponentContext.Provider>
     );
-  },
+  }
 );
 
 export default InputMoney;

package/Input/InputOTP.tsx

@@ -41,7 +41,7 @@ const OTPCaret: FC<CaretProps> = ({index, length}) => {
           duration: DURATION,
           useNativeDriver: true,
         }),
-      ]),
+      ])
     ).start();
   }, []);
   const spacingStyle = !isNaN(Number(length)) &&
@@ -81,7 +81,7 @@ const InputOTP = forwardRef(
       hintText,
       ...props
     }: InputOTPProps,
-    ref,
+    ref
   ) => {
     const MAX_LENGTH = 10;
     const [value, setValue] = useState('');
@@ -143,7 +143,7 @@ const InputOTP = forwardRef(
                 {value[i] || '-'}
               </Text>
             )}
-          </View>,
+          </View>
         );
       }
       return TextInputs;
@@ -248,7 +248,7 @@ const InputOTP = forwardRef(
         </TouchableOpacity>
       </ComponentContext.Provider>
     );
-  },
+  }
 );
 
 export default InputOTP;

package/Input/InputSearch.tsx

@@ -1,6 +1,9 @@
 import React, {
+  FC,
   forwardRef,
+  ForwardRefRenderFunction,
   useContext,
+  useEffect,
   useImperativeHandle,
   useRef,
   useState,
@@ -15,177 +18,279 @@ import {
 import {ApplicationContext, ComponentContext} from '../Application';
 import {Icon} from '../Icon';
 import {Text} from '../Text';
-import {InputSearchProps} from './index';
+import {InputRef, InputSearchProps} from './index';
 import styles from './styles';
 import {checkTyping} from './utils';
 
-const InputSearch = forwardRef(
-  (
-    {
-      placeholder,
-      onFocus,
-      onBlur,
-      iconColor,
-      value,
-      onChangeText,
-      icon,
-      buttonText = 'Hủy',
-      showButtonText = true,
-      style,
-      defaultValue,
-      onPressButtonText,
-      params,
-      hasColorBG = false,
-      accessibilityLabel,
-      ...props
-    }: InputSearchProps,
-    ref,
-  ) => {
-    const {theme} = useContext(ApplicationContext);
-    const [focused, setFocused] = useState(false);
-    const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
-    const inputRef = useRef<TextInput | null>(null);
-
-    const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-      setFocused(true);
-      onFocus?.(e);
+const TextTyping: FC<any> = ({
+  data = [],
+  timeDelayEnd = 2000,
+  timeDelayNextChar = 20,
+}) => {
+  const textRef = useRef<TextInput>(null);
+
+  const currentIndex = useRef<number>(0);
+  const currentCharIndex = useRef<number>(0);
+  const currentText = useRef('');
+
+  useEffect(() => {
+    setTimeout(() => {
+      playAnimation();
+    }, 1000);
+  }, []);
+
+  const playAnimation = () => {
+    const handleResetList = () => {
+      currentIndex.current = 0;
+      handleAnimation();
+    };
+
+    const handleAnimation = () => {
+      const listChar = data?.[currentIndex.current]?.split('') || [];
+      listChar.length !== 0 && showChar(listChar?.[currentCharIndex.current]);
+    };
+
+    currentIndex.current >= data?.length
+      ? handleResetList()
+      : handleAnimation();
+  };
+
+  const showChar = (char?: string) => {
+    const handleResetString = () => {
+      setTimeout(() => {
+        reset();
+      }, timeDelayEnd);
     };
 
-    const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-      setFocused(false);
-      onBlur?.(e);
+    const handleShowChar = () => {
+      setTimeout(() => {
+        textRef.current?.setNativeProps?.({
+          text: currentText.current + char,
+        });
+        currentText.current += char;
+        currentCharIndex.current++;
+        playAnimation();
+      }, timeDelayNextChar);
     };
 
-    const onClearText = () => {
-      inputRef?.current?.clear();
-      _onChangeText('');
+    currentCharIndex.current >= (data?.[currentIndex.current]?.length || 0)
+      ? handleResetString()
+      : handleShowChar();
+  };
+
+  const reset = () => {
+    const handleNextString = () => {
+      currentIndex.current++;
+      playAnimation();
     };
 
-    const _onChangeText = (text: string) => {
-      checkTyping(text, haveValue, setHaveValue);
-      onChangeText?.(text);
+    const handleReset = () => {
+      setTimeout(() => {
+        textRef.current?.setNativeProps?.({
+          text: currentText.current.slice(0, -1),
+        });
+        currentText.current = currentText.current.slice(0, -1);
+        currentCharIndex.current--;
+        reset();
+      }, timeDelayNextChar);
     };
 
-    useImperativeHandle(ref, () => {
-      return {
-        clear: onClearText,
-        focus: () => inputRef.current?.focus(),
-        blur: () => inputRef.current?.blur(),
-        setText: (text: string) => _onChangeText(text),
-      };
-    });
+    currentCharIndex.current <= 0 ? handleNextString() : handleReset();
+  };
+
+  return (
+    <TextInput
+      style={styles.inputStyle}
+      ref={textRef}
+      editable={false}
+      autoCorrect={false}
+      pointerEvents={'none'}
+      numberOfLines={1}
+    />
+  );
+};
+
+const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
+  {
+    placeholder,
+    onFocus,
+    onBlur,
+    iconColor,
+    value,
+    onChangeText,
+    icon,
+    buttonText = 'Hủy',
+    showButtonText = true,
+    style,
+    defaultValue,
+    onPressButtonText,
+    params,
+    hasColorBG = false,
+    accessibilityLabel,
+    typingData = [],
+    onPress,
+    ...props
+  },
+  ref
+) => {
+  const {theme} = useContext(ApplicationContext);
+  const [focused, setFocused] = useState(false);
+  const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
+  const inputRef = useRef<TextInput | null>(null);
 
-    const renderInputView = () => {
+  const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    setFocused(true);
+    onFocus?.(e);
+  };
+
+  const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    setFocused(false);
+    onBlur?.(e);
+  };
+
+  const onClearText = () => {
+    inputRef?.current?.clear();
+    _onChangeText('');
+  };
+
+  const _onChangeText = (text: string) => {
+    checkTyping(text, haveValue, setHaveValue);
+    onChangeText?.(text);
+  };
+
+  useImperativeHandle(ref, () => {
+    return {
+      clear: onClearText,
+      focus: () => inputRef.current?.focus(),
+      blur: () => inputRef.current?.blur(),
+      setText: (text: string) => _onChangeText(text),
+    };
+  });
+
+  const renderInputView = () => {
+    if (typingData?.length > 0) {
       return (
-        <TextInput
-          {...props}
-          accessibilityLabel={accessibilityLabel}
-          textAlignVertical="center"
-          ref={inputRef}
+        <TouchableOpacity
           style={[
             styles.searchInput,
             {
-              color: theme.colors.text.default,
+              justifyContent: 'center',
             },
           ]}
-          value={value}
-          onChangeText={_onChangeText}
-          onFocus={_onFocus}
-          onBlur={_onBlur}
-          placeholder={placeholder}
-          selectionColor={theme.colors.primary}
-          placeholderTextColor={theme.colors.text.hint}
-        />
-      );
-    };
-
-    const renderIconView = () => {
-      return (
-        <View
-          style={{
-            flexDirection: 'row',
-          }}>
-          {focused && haveValue && (
-            <TouchableOpacity style={styles.iconWrapper} onPress={onClearText}>
-              <Icon
-                source="24_navigation_close_circle_full"
-                size={16}
-                color={theme.colors.text.hint}
-              />
-            </TouchableOpacity>
-          )}
-          {!!icon && (
-            <View style={{flexDirection: 'row'}}>
-              <View
-                style={[
-                  styles.divider,
-                  {
-                    backgroundColor: theme.colors.primary,
-                  },
-                ]}
-              />
-              <Icon
-                color={iconColor}
-                source={icon}
-                style={styles.iconSearchInput}
-              />
-            </View>
-          )}
-        </View>
+          onPress={onPress}
+          activeOpacity={onPress ? 0.6 : 1}>
+          <TextTyping data={typingData} />
+        </TouchableOpacity>
       );
-    };
-
-    let inputState = 'empty';
-
-    if (focused) {
-      inputState = 'focus';
-    }
-
-    if (value && value?.length > 0) {
-      inputState = 'filled';
     }
 
-    const backgroundColor = hasColorBG
-      ? theme.colors.background.default
-      : theme.colors.background.surface;
+    return (
+      <TextInput
+        {...props}
+        accessibilityLabel={accessibilityLabel}
+        textAlignVertical="center"
+        ref={inputRef}
+        style={[
+          styles.searchInput,
+          {
+            color: theme.colors.text.default,
+          },
+        ]}
+        value={value}
+        onChangeText={_onChangeText}
+        onFocus={_onFocus}
+        onBlur={_onBlur}
+        placeholder={placeholder}
+        selectionColor={theme.colors.primary}
+        placeholderTextColor={theme.colors.text.hint}
+      />
+    );
+  };
 
+  const renderIconView = () => {
     return (
-      <ComponentContext.Provider
-        value={{
-          componentName: 'InputSearch',
-          params,
-          state: inputState,
-          componentId: accessibilityLabel,
+      <View
+        style={{
+          flexDirection: 'row',
         }}>
-        <View style={[style, styles.searchInputContainer]}>
-          <View
-            style={[
-              styles.searchInputWrapper,
-              {
-                backgroundColor,
-              },
-            ]}>
+        {focused && haveValue && (
+          <TouchableOpacity style={styles.iconWrapper} onPress={onClearText}>
             <Icon
-              source={'navigation_search'}
-              size={24}
+              source="24_navigation_close_circle_full"
+              size={16}
               color={theme.colors.text.hint}
             />
-            {renderInputView()}
-            {renderIconView()}
+          </TouchableOpacity>
+        )}
+        {!!icon && (
+          <View style={{flexDirection: 'row'}}>
+            <View
+              style={[
+                styles.divider,
+                {
+                  backgroundColor: theme.colors.primary,
+                },
+              ]}
+            />
+            <Icon
+              color={iconColor}
+              source={icon}
+              style={styles.iconSearchInput}
+            />
           </View>
-          {showButtonText && (
-            <TouchableOpacity onPress={onPressButtonText}>
-              <Text
-                typography={'action_default_bold'}
-                style={styles.textButton}>
-                {buttonText}
-              </Text>
-            </TouchableOpacity>
-          )}
-        </View>
-      </ComponentContext.Provider>
+        )}
+      </View>
     );
-  },
-);
+  };
+
+  let inputState = 'empty';
+
+  if (focused) {
+    inputState = 'focus';
+  }
+
+  if (value && value?.length > 0) {
+    inputState = 'filled';
+  }
+
+  const backgroundColor = hasColorBG
+    ? theme.colors.background.default
+    : theme.colors.background.surface;
+
+  return (
+    <ComponentContext.Provider
+      value={{
+        componentName: 'InputSearch',
+        params,
+        state: inputState,
+        componentId: accessibilityLabel,
+      }}>
+      <View style={[style, styles.searchInputContainer]}>
+        <View
+          style={[
+            styles.searchInputWrapper,
+            {
+              backgroundColor,
+            },
+          ]}>
+          <Icon
+            source={'navigation_search'}
+            size={24}
+            color={theme.colors.text.hint}
+          />
+          {renderInputView()}
+          {renderIconView()}
+        </View>
+        {showButtonText && (
+          <TouchableOpacity onPress={onPressButtonText}>
+            <Text typography={'action_default_bold'} style={styles.textButton}>
+              {buttonText}
+            </Text>
+          </TouchableOpacity>
+        )}
+      </View>
+    </ComponentContext.Provider>
+  );
+};
 
-export default InputSearch;
+export default forwardRef(InputSearch);