@momo-kits/foundation 0.77.8-beta.4 → 0.77.8-beta.6

package/Application/ModalScreen.tsx

@@ -1,12 +1,6 @@
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, {useContext, useEffect, useRef} from 'react';
 import {
+  Dimensions,
   KeyboardAvoidingView,
   Platform,
   Pressable,
@@ -91,10 +85,11 @@ const Modal: React.FC<ModalParams> = props => {
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const {theme, navigator} = useContext(ApplicationContext);
+  const {height} = Dimensions.get('window');
   const {
     screen,
     options,
-    useSnap = true,
+    snapPoints = [height * 0.5, height * 0.9],
   }: BottomSheetParams = props.route.params;
   const Component = useRef(screen).current;
   const navigation = new Navigation(props.navigation, theme);
@@ -105,31 +100,9 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
 
   delete params.screen;
 
-  const [contentHeight, setContentHeight] = useState(undefined);
-  const snapPoints = useMemo(() => {
-    if (useSnap) {
-      return ['50%', '90%'];
-    }
-    return [contentHeight ?? '50%'];
-  }, [contentHeight]);
-
   const bottomSheetRef = useRef<any>(null);
   const mountedRef = useRef(true);
 
-  let handleOnLayout;
-  if (useSnap) {
-    handleOnLayout = useCallback(
-      ({
-        nativeEvent: {
-          layout: {height},
-        },
-      }) => {
-        setContentHeight(height);
-      },
-      [],
-    );
-  }
-
   let backgroundColor = theme.colors.background.default;
   if (options?.surface) {
     backgroundColor = theme.colors.background.surface;
@@ -154,7 +127,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     <SafeAreaView style={Styles.flex}>
       <BottomSheetModal
         ref={bottomSheetRef}
-        snapPoints={snapPoints}
+        snapPoints={snapPoints?.map(item => item + 68)}
         onDismiss={() => {
           if (mountedRef.current) {
             navigator?.pop();
@@ -162,7 +135,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         }}
         handleComponent={null}
         backdropComponent={backdropComponent}>
-        <View onLayout={handleOnLayout} accessibilityLabel={'BottomSheet'}>
+        <View accessibilityLabel={'BottomSheet'}>
           <View style={[styles.sheetContainer, {backgroundColor}]}>
             <View style={styles.indicatorContainer}>
               <View

package/Application/NavigationContainer.tsx

@@ -21,10 +21,12 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   theme,
   options,
   maxApi,
+  localization,
 }) => {
   const navigationRef = React.useRef<NavigationContainerRef>(null);
   const navigator = useRef(new Navigator(navigationRef));
   const [showGrid, setShowGrid] = useState(false);
+  const [language, setLanguage] = useState<'vi' | 'en'>('vi');
 
   useEffect(() => {
     const subscription = DeviceEventEmitter.addListener(
@@ -38,13 +40,32 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     };
   }, []);
 
+  useEffect(() => {
+    const listener = maxApi?.observer?.('language', (lang: 'vi' | 'en') => {
+      setLanguage(lang);
+    });
+    return () => {
+      listener?.();
+    };
+  }, []);
+
   navigator.current.maxApi = maxApi;
 
+  const translate = (key: string) => {
+    return localization?.[language]?.[key] || '';
+  };
+
   return (
     <SafeAreaProvider>
       <BottomSheetModalProvider>
         <ApplicationContext.Provider
-          value={{theme, navigator: navigator.current, showGrid}}>
+          value={{
+            theme,
+            navigator: navigator.current,
+            showGrid,
+            language,
+            translate,
+          }}>
           <ReactNavigationContainer
             theme={{
               ...theme,

package/Application/types.ts

@@ -1,5 +1,5 @@
-import {Animated, ScrollViewProps, ViewProps} from 'react-native';
-import React, {ReactNode} from 'react';
+import {Animated} from 'react-native';
+import React from 'react';
 import Navigator from './Navigator';
 import {PopupNotifyProps} from '../Popup/types';
 import Navigation from './Navigation';
@@ -65,6 +65,17 @@ export type Context = {
   theme: Theme;
   navigator?: Navigator;
   showGrid?: boolean;
+  language: 'vi' | 'en';
+  translate: (key: string) => string;
+};
+
+export type LocalizationObject = {
+  vi: {
+    [key: string]: string;
+  };
+  en: {
+    [key: string]: string;
+  };
 };
 
 export type NavigationContainerProps = {
@@ -72,6 +83,7 @@ export type NavigationContainerProps = {
   options?: NavigationOptions;
   theme: Theme;
   maxApi?: any;
+  localization: LocalizationObject;
 };
 
 export type NavigationScreenProps = {
@@ -80,19 +92,6 @@ export type NavigationScreenProps = {
   navigation: Navigation;
 };
 
-export interface ScreenProps extends ViewProps {
-  navigation?: Navigation;
-  enableKeyboardAvoidingView?: boolean;
-  headerBackground?: string;
-  scrollable?: boolean;
-  useAnimatedHeader?: boolean;
-  useExtendedHeader?: boolean;
-  scrollViewProps?: ScrollViewProps;
-  footerComponent?: ReactNode;
-  marginHeader?: number;
-  backgroundColor?: string;
-}
-
 export type ScreenParams = {
   [key: string]: any;
   screen: Screen;
@@ -108,7 +107,7 @@ export interface ModalParams extends ScreenParams {
 export interface BottomSheetParams extends ScreenParams {
   [key: string]: any;
   onDismiss?: () => void;
-  useSnap?: boolean;
+  snapPoints?: ReadonlyArray<number>;
 }
 
 export type NavigationButtonProps = {

package/Button/index.tsx

@@ -11,6 +11,7 @@ import {Typography} from '../Text/types';
 import {Colors} from '../Consts';
 import styles from './styles';
 import {Icon} from '../Icon';
+import {Loader} from '../Loader';
 
 export interface ButtonProps extends TouchableOpacityProps {
   /**
@@ -55,6 +56,11 @@ export interface ButtonProps extends TouchableOpacityProps {
    */
   useTintColor?: boolean;
 
+  /**
+   *  If true, the icon of button will use be show indicator loading.
+   */
+  loading?: boolean;
+
   /**
    *  A callback function that is called when the button is pressed.
    */
@@ -68,6 +74,7 @@ const Button: FC<ButtonProps> = ({
   full = true,
   iconRight,
   iconLeft,
+  loading = false,
   title = 'Button',
   onPress,
   ...rest
@@ -223,6 +230,19 @@ const Button: FC<ButtonProps> = ({
   const renderTrailing = () => {
     const marginLeft = getIconSpace();
     const color = useTintColor ? getTextColor() : undefined;
+    if (loading) {
+      const iconSize = getIconSize();
+      const color = getTextColor();
+      return (
+        <View
+          style={[
+            styles.trailing,
+            {width: iconSize, height: iconSize, marginLeft},
+          ]}>
+          <Loader type="spinner" color={color} />
+        </View>
+      );
+    }
     if (iconRight) {
       const iconSize = getIconSize();
       return (

package/Divider/index.tsx

@@ -1,6 +1,7 @@
 import React, {useContext} from 'react';
 import {View} from 'react-native';
 import {ApplicationContext} from '../Application';
+import {Spacing} from '../Consts';
 
 const Divider = () => {
   const {theme} = useContext(ApplicationContext);
@@ -11,6 +12,7 @@ const Divider = () => {
         height: 1,
         width: '100%',
         backgroundColor: theme.colors.border.default,
+        marginVertical: Spacing.XS,
       }}
     />
   );

package/Input/Input.tsx

@@ -1,4 +1,4 @@
-import React, {FC, useContext, useRef, useState} from 'react';
+import React, {FC, forwardRef, useContext, useRef, useState} from 'react';
 import {
   NativeSyntheticEvent,
   TextInput,
@@ -12,125 +12,144 @@ import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputProps} from './index';
 import {Icon} from '../Icon';
 import {checkTyping} from './utils';
+import {Loader} from '../Loader';
 
-const Input: FC<InputProps> = ({
-  value,
-  onChangeText,
-  floatingValue,
-  floatingIcon,
-  size,
-  placeholder,
-  onBlur,
-  onFocus,
-  errorMessage,
-  icon,
-  disabled,
-  floatingIconColor,
-  iconColor,
-  required,
-  errorSpacing,
-  ...props
-}) => {
-  const {theme} = useContext(ApplicationContext);
-  const [focused, setFocused] = useState(false);
-  const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
+const Input: FC<InputProps> = forwardRef(
+  (
+    {
+      value,
+      onChangeText,
+      floatingValue,
+      floatingIcon,
+      size,
+      placeholder,
+      onBlur,
+      onFocus,
+      errorMessage,
+      icon,
+      disabled,
+      floatingIconColor,
+      iconColor,
+      required,
+      errorSpacing,
+      loading,
+      ...props
+    },
+    ref,
+  ) => {
+    const {theme} = useContext(ApplicationContext);
+    const [focused, setFocused] = useState(false);
+    const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
+    const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
 
-  const inputRef = useRef<any>(null);
+    const onClearText = () => {
+      inputRef?.current?.clear();
+      _onChangeText('');
+    };
 
-  const onClearText = () => {
-    inputRef?.current?.clear();
-    _onChangeText('');
-  };
+    const _onChangeText = (text: string) => {
+      checkTyping(text, haveValue, setHaveValue);
+      onChangeText?.(text);
+    };
 
-  const _onChangeText = (text: string) => {
-    checkTyping(text, haveValue, setHaveValue);
-    onChangeText?.(text);
-  };
+    const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setFocused(true);
+      onFocus?.(e);
+    };
 
-  const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-    setFocused(true);
-    onFocus?.(e);
-  };
+    const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setFocused(false);
+      onBlur?.(e);
+    };
 
-  const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-    setFocused(false);
-    onBlur?.(e);
-  };
+    const renderIcon = (color: string | undefined) => {
+      if (loading) {
+        return <Loader type={'spinner'} color={color} />;
+      }
+      if (icon) {
+        return <Icon color={color} source={icon} size={24} />;
+      }
+    };
 
-  const renderInputView = () => {
-    const disabledColor = theme.colors.text.disable;
-    let textColor = theme.colors.text.default;
-    let placeholderColor = theme.colors.text.hint;
-    let iconTintColor = iconColor;
+    const renderInputView = () => {
+      const disabledColor = theme.colors.text.disable;
+      let textColor = theme.colors.text.default;
+      let placeholderColor = theme.colors.text.hint;
+      let iconTintColor = iconColor;
 
-    if (disabled) {
-      textColor = disabledColor;
-      placeholderColor = disabledColor;
-      iconTintColor = disabledColor;
-    }
+      if (disabled) {
+        textColor = disabledColor;
+        placeholderColor = disabledColor;
+        iconTintColor = disabledColor;
+      }
 
-    return (
-      <View
-        style={[
-          styles.inputWrapper,
-          {backgroundColor: theme.colors.background.surface},
-          getSizeStyle(size),
-          getBorderColor(theme, focused, errorMessage, disabled),
-        ]}>
-        <FloatingView
-          floatingValue={floatingValue}
-          floatingIconColor={floatingIconColor}
-          disabled={disabled}
-          required={required}
-          floatingIcon={floatingIcon}
-        />
-        <View style={styles.inputView}>
-          <TextInput
-            {...props}
-            accessibilityLabel={`TextInput`}
-            editable={!disabled}
-            textAlignVertical="top"
-            ref={inputRef}
-            style={[
-              styles.input,
-              {
-                color: textColor,
-                fontFamily: `${theme.font}-Regular`,
-              },
-            ]}
-            textBreakStrategy="highQuality"
-            value={value}
-            onChangeText={_onChangeText}
-            onFocus={_onFocus}
-            onBlur={_onBlur}
-            placeholder={placeholder}
-            selectionColor={theme.colors.primary}
-            placeholderTextColor={placeholderColor}
+      return (
+        <View
+          style={[
+            styles.inputWrapper,
+            {backgroundColor: theme.colors.background.surface},
+            getSizeStyle(size),
+            getBorderColor(theme, focused, errorMessage, disabled),
+          ]}>
+          <FloatingView
+            floatingValue={floatingValue}
+            floatingIconColor={floatingIconColor}
+            disabled={disabled}
+            required={required}
+            floatingIcon={floatingIcon}
           />
+          <View style={styles.inputView}>
+            <TextInput
+              {...props}
+              accessibilityLabel={`TextInput`}
+              editable={!disabled}
+              textAlignVertical="top"
+              ref={inputRef}
+              style={[
+                styles.input,
+                {
+                  color: textColor,
+                  fontFamily: `${theme.font}-Regular`,
+                },
+              ]}
+              textBreakStrategy="highQuality"
+              value={value}
+              onChangeText={_onChangeText}
+              onFocus={_onFocus}
+              onBlur={_onBlur}
+              placeholder={placeholder}
+              selectionColor={theme.colors.primary}
+              placeholderTextColor={placeholderColor}
+            />
+          </View>
+          <View style={styles.iconView}>
+            {focused && haveValue && (
+              <TouchableOpacity
+                style={styles.iconWrapper}
+                onPress={onClearText}>
+                <Icon
+                  source="24_navigation_close_circle_full"
+                  size={16}
+                  color={theme.colors.text.hint}
+                />
+              </TouchableOpacity>
+            )}
+            {renderIcon(iconTintColor)}
+          </View>
         </View>
-        <View style={styles.iconView}>
-          {focused && haveValue && (
-            <TouchableOpacity style={styles.iconWrapper} onPress={onClearText}>
-              <Icon
-                source="24_navigation_close_circle_full"
-                size={16}
-                color={theme.colors.text.hint}
-              />
-            </TouchableOpacity>
-          )}
-          {!!icon && <Icon color={iconTintColor} source={icon} size={24} />}
-        </View>
+      );
+    };
+
+    return (
+      <View
+        style={styles.wrapper}
+        accessibilityLabel={`Input/${floatingValue}`}>
+        {renderInputView()}
+        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
       </View>
     );
-  };
-
-  return (
-    <View style={styles.wrapper} accessibilityLabel={`Input/${floatingValue}`}>
-      {renderInputView()}
-      <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-    </View>
-  );
-};
+  },
+);
 
 Input.defaultProps = {
   size: 'small',