@momo-kits/foundation 0.80.9 → 0.81.2

package/Application/Components.tsx

@@ -1,12 +1,11 @@
 import React, {Fragment, useContext, useEffect, useState} from 'react';
 import {
-  Alert,
   Animated,
   DeviceEventEmitter,
   Platform,
   StatusBar,
   StyleSheet,
-  TouchableOpacity as TouchableRN,
+  TouchableOpacity,
   View,
 } from 'react-native';
 import {TouchableOpacity as TouchableGesture} from 'react-native-gesture-handler';
@@ -14,6 +13,7 @@ import {ApplicationContext} from './index';
 import {Colors, Radius, Spacing, Styles} from '../Consts';
 import {Image} from '../Image';
 import {
+  HeaderAnimatedProps,
   HeaderBackgroundProps,
   HeaderBackProps,
   HeaderToolkitProps,
@@ -24,7 +24,8 @@ import {scaleSize, Text} from '../Text';
 import {Icon} from '../Icon';
 import {PopupNotify} from '../Popup';
 
-const Touchable = Platform.OS === 'android' ? TouchableGesture : TouchableRN;
+const Touchable =
+  Platform.OS === 'android' ? TouchableGesture : TouchableOpacity;
 
 const styles = StyleSheet.create({
   navigationButton: {
@@ -208,7 +209,7 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
     headerImage = undefined;
   }
   const opacity = animatedValue?.interpolate({
-    inputRange: [0, 200],
+    inputRange: [0, 114],
     outputRange: [0, 1],
     extrapolate: 'clamp',
   });
@@ -274,8 +275,7 @@ const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
   const validateType = (child: React.ReactElement) => {
     const valid = child?.type === NavigationButton || child?.type == Fragment;
     if (__DEV__ && !valid) {
-      Alert.alert(
-        'Rule',
+      console.warn(
         'HeaderRightAction contains element type of NavigationButton, Please check again.',
       );
     }
@@ -416,6 +416,46 @@ const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
   return <View />;
 };
 
+const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
+  animatedValue,
+  image,
+  onPress,
+}) => {
+  const scale = animatedValue.interpolate({
+    inputRange: [-300, 0, 300],
+    outputRange: [4, 1, 1],
+    extrapolate: 'clamp',
+  });
+  const opacity = animatedValue.interpolate({
+    inputRange: [0, 150, 300],
+    outputRange: [1, 0.5, 0],
+    extrapolate: 'clamp',
+  });
+  const translateY = animatedValue.interpolate({
+    inputRange: [-300, 0],
+    outputRange: [-80, -2],
+    extrapolate: 'clamp',
+  });
+
+  return (
+    <TouchableOpacity onPress={onPress}>
+      <Animated.View
+        style={{
+          height: 210,
+          opacity: opacity,
+          transform: [{scale}, {translateY}],
+        }}>
+        <Image
+          source={{
+            uri: image,
+          }}
+          style={{width: '100%', height: '100%'}}
+        />
+      </Animated.View>
+    </TouchableOpacity>
+  );
+};
+
 export {
   NavigationButton,
   HeaderTitle,
@@ -424,4 +464,5 @@ export {
   HeaderRightAction,
   HeaderToolkitAction,
   HeaderCustom,
+  HeaderAnimated,
 };

package/Application/ModalScreen.tsx

@@ -1,11 +1,12 @@
-import React, {useContext, useEffect, useMemo, useRef} from 'react';
+import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {
+  Dimensions,
+  Keyboard,
   KeyboardAvoidingView,
   Platform,
   Pressable,
   StyleSheet,
   View,
-  Keyboard,
 } from 'react-native';
 import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
 import {
@@ -90,6 +91,7 @@ const Modal: React.FC<ModalParams> = props => {
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const insets = useSafeAreaInsets();
   const {theme, navigator} = useContext(ApplicationContext);
+  const [keyboardSnap, setKeyboardSnap] = useState(0);
   const {screen, options, snapPoint}: BottomSheetParams = props.route.params;
   const Component = useRef(screen).current;
   const navigation = new Navigation(props.navigation, theme);
@@ -102,28 +104,41 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
 
   const snapPoints = useMemo(() => {
     if (snapPoint) {
-      return [snapPoint];
+      const current = parseInt(snapPoint) + keyboardSnap * 100;
+      return [`${current}%`];
     }
     return ['50%', '70%', '90%'];
-  }, []);
+  }, [keyboardSnap]);
 
   const bottomSheetRef = useRef<any>(null);
   const mountedRef = useRef(true);
 
   let backgroundColor = theme.colors.background.default;
+  let bottomInset = keyboardSnap * Dimensions.get('window').height;
+  if (bottomInset > 16) {
+    bottomInset -= 16;
+  }
   if (options?.surface) {
     backgroundColor = theme.colors.background.surface;
   }
 
   useEffect(() => {
-    const keyboardDidShow = Keyboard.addListener('keyboardDidShow', () =>
-      bottomSheetRef.current?.expand(),
-    );
+    const keyboardDidShow = Keyboard.addListener('keyboardDidShow', e => {
+      setKeyboardSnap(
+        e.endCoordinates.height / Dimensions.get('window').height,
+      );
+      bottomSheetRef.current?.expand();
+    });
+
+    const keyboardDidHide = Keyboard.addListener('keyboardDidHide', () => {
+      setKeyboardSnap(0);
+    });
 
     bottomSheetRef.current?.present();
     return () => {
       mountedRef.current = false;
       keyboardDidShow.remove();
+      keyboardDidHide.remove();
     };
   }, []);
 
@@ -145,6 +160,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
             navigator?.pop();
           }
         }}
+        bottomInset={bottomInset}
         handleComponent={null}
         backdropComponent={backdropComponent}>
         <BottomSheetView accessibilityLabel={'BottomSheet'}>
@@ -193,6 +209,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
                       />
                     );
                   },
+                  headerTintColor: theme.colors.text.default,
                   headerBackground: () => (
                     <HeaderBackground backgroundColor={backgroundColor} />
                   ),

package/Application/Navigation.ts

@@ -1,5 +1,5 @@
+import React from 'react';
 import {NavigationProp} from '@react-navigation/native';
-import {Alert} from 'react-native';
 import {NavigationOptions, Theme} from './types';
 import {HeaderRightAction} from './index';
 import {getOptions} from './utils';
@@ -16,14 +16,12 @@ class Navigation {
 
   private filterParams = (params: NavigationOptions) => {
     if (params.headerRight) {
-      const headerRight = params.headerRight?.();
+      const headerRight = params.headerRight?.({}) as React.ReactElement;
       const type = headerRight?.type;
       if (type !== HeaderRightAction && type !== HeaderToolkitAction) {
-        Alert.alert(
-          'Rule',
+        console.warn(
           'headerRight contains element type of HeaderRightAction | HeaderToolkitAction, Please check again.',
         );
-        delete params.headerRight;
       }
     }
     return params;

package/Application/NavigationContainer.tsx

@@ -93,12 +93,12 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
                 name="Stack"
                 component={StackScreen}
                 initialParams={{screen}}
-                options={{...getStackOptions(theme), ...options}}
+                options={{...getStackOptions(), ...options}}
               />
               <Stack.Screen
                 name="Dialog"
                 component={StackScreen}
-                options={getDialogOptions(theme)}
+                options={getDialogOptions()}
                 initialParams={{screen}}
               />
               <Stack.Screen

package/Application/index.ts

@@ -1,24 +1,31 @@
 import {NavigationContainer} from './NavigationContainer';
 import Screen from '../Layout/Screen';
 import {
-  HeaderRightAction,
   NavigationButton,
-  HeaderToolkitAction,
   HeaderTitle,
+  HeaderLeft,
+  HeaderBackground,
+  HeaderRightAction,
+  HeaderToolkitAction,
+  HeaderCustom,
+  HeaderAnimated,
 } from './Components';
 import BottomTab from './BottomTab';
 import {createContext} from 'react';
 import {defaultContext} from '../Consts';
 
 const ApplicationContext = createContext(defaultContext);
-
 export {
   NavigationContainer,
   ApplicationContext,
   Screen,
+  BottomTab,
   NavigationButton,
+  HeaderTitle,
+  HeaderLeft,
+  HeaderBackground,
   HeaderRightAction,
   HeaderToolkitAction,
-  HeaderTitle,
-  BottomTab,
+  HeaderCustom,
+  HeaderAnimated,
 };

package/Application/types.ts

@@ -1,4 +1,5 @@
 import {Animated} from 'react-native';
+import {StackNavigationOptions} from '@react-navigation/stack';
 import React from 'react';
 import Navigator from './Navigator';
 import {PopupNotifyProps} from '../Popup/types';
@@ -119,19 +120,15 @@ export type NavigationButtonProps = {
   accessibilityLabel?: string;
 };
 
-export type NavigationOptions = {
+export interface NavigationOptions extends StackNavigationOptions {
   preventBack?: PopupNotifyProps;
   onPressLeftHeader?: () => void;
   surface?: boolean;
-  headerTransparent?: boolean;
   hiddenBack?: boolean;
-  title?: string;
-  headerTitle?: (props?: any) => React.ReactElement;
   headerTitleAlign?: 'left' | 'center';
   customTitle?: TitleCustomProps;
-  headerRight?: (props?: any) => React.ReactElement;
   animatedValue?: Animated.Value;
-};
+}
 
 export interface HeaderBackProps extends NavigationButtonProps {
   preventBack?: PopupNotifyProps;
@@ -164,6 +161,12 @@ export type HeaderToolkitProps = {
   onAction?: (action: string) => void;
 };
 
+export type HeaderAnimatedProps = {
+  animatedValue: Animated.Value;
+  image: string;
+  onPress?: () => void;
+};
+
 export type BottomTabItemProps = {
   name: string;
   label: string;
@@ -182,3 +185,8 @@ export type BottomTabProps = {
     focus?: any;
   };
 };
+
+export type AnimatedHeader = {
+  type: 'default' | 'surface';
+  component?: (props?: any) => React.ReactElement;
+};

package/Application/utils.tsx

@@ -13,35 +13,24 @@ import {
 import {NavigationOptions, Theme} from './types';
 import {Colors} from '../Consts';
 
-const getTintColor = (theme: Theme): any => {
-  if (theme.assets?.headerBackground) {
-    return {
-      headerTintColor: Colors.black_01,
-    };
-  }
-  return {
-    headerTintColor: theme.colors.text.default,
-  };
-};
-
-const getStackOptions = (theme: Theme): StackNavigationOptions => {
+const getStackOptions = (): StackNavigationOptions => {
   return {
     headerTitleAlign: 'left',
     headerTitle: HeaderTitle,
-    headerBackground: HeaderBackground,
+    headerBackground: (props: any) => <HeaderBackground {...props} />,
     headerLeft: (props: any) => <HeaderLeft {...props} />,
     headerRight: (props: any) => <HeaderToolkitAction {...props} />,
-    ...getTintColor(theme),
+    headerTintColor: Colors.black_01,
   };
 };
 
-const getDialogOptions = (theme: Theme): StackNavigationOptions => {
+const getDialogOptions = (): StackNavigationOptions => {
   return {
     headerTitleAlign: 'left',
     headerTitle: HeaderTitle,
     headerLeft: (props: any) => <HeaderLeft {...props} />,
-    headerBackground: HeaderBackground,
-    ...getTintColor(theme),
+    headerBackground: (props: any) => <HeaderBackground {...props} />,
+    headerTintColor: Colors.black_01,
     ...TransitionPresets.ModalTransition,
   };
 };
@@ -72,8 +61,6 @@ const getModalOptions = (): StackNavigationOptions => {
 };
 
 const getOptions = (params: NavigationOptions, theme: Theme) => {
-  let backgroundProps: any;
-  let titleProps: any;
   let options = {};
 
   if (
@@ -99,36 +86,24 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
     if (params.surface) {
       options = {
         ...options,
-        ...getTintColor({
-          ...theme,
-          assets: {...theme.assets, headerBackground: undefined},
-        }),
-      };
-      backgroundProps = {
-        image: null,
-        backgroundColor: theme.colors.background.surface,
-        useBorder: true,
+        headerTintColor: theme.colors.text.default,
+        headerBackground: () => (
+          <HeaderBackground
+            image={null}
+            backgroundColor={theme.colors.background.surface}
+            useBorder={true}
+          />
+        ),
       };
     } else {
       options = {
         ...options,
-        ...getTintColor(theme),
+        headerTintColor: Colors.black_01,
         headerBackground: HeaderBackground,
       };
     }
   }
 
-  if (params.animatedValue) {
-    backgroundProps = {...backgroundProps, animatedValue: params.animatedValue};
-    titleProps = {animatedValue: params.animatedValue};
-    options = {
-      ...options,
-      headerTitle: (props: any) => {
-        return <HeaderTitle {...titleProps} {...props} />;
-      },
-    };
-  }
-
   if (params.customTitle) {
     options = {
       ...options,
@@ -139,13 +114,6 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
     };
   }
 
-  if (backgroundProps) {
-    options = {
-      ...options,
-      headerBackground: () => <HeaderBackground {...backgroundProps} />,
-    };
-  }
-
   return {
     ...params,
     ...options,

package/Consts/colors+spacing+radius.ts

@@ -152,6 +152,10 @@ const Spacing = {
   M: 12,
   L: 16,
   XL: 24,
+  XXL: 32,
+  Size48: 48,
+  Size56: 56,
+  Size64: 64,
 };
 
 const Radius = {

package/Image/index.tsx

@@ -1,4 +1,4 @@
-import React, {useContext, useState} from 'react';
+import React, {useContext, useRef, useState} from 'react';
 import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
 import FastImage from 'react-native-fast-image';
 import styles from './styles';
@@ -14,6 +14,8 @@ export interface ImageProps extends FastImagePropsWithoutStyle {
   accessibilityLabel?: string;
 }
 
+type Status = 'success' | 'loading' | 'error';
+
 const Image: React.FC<ImageProps> = ({
   style,
   source,
@@ -21,19 +23,20 @@ const Image: React.FC<ImageProps> = ({
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
-  const [loading, setLoading] = useState(rest.loading);
-  const [fail, setFail] = useState(false);
+  const error = useRef(false);
+  const [status, setStatus] = useState<Status>(
+    rest.loading ? 'loading' : 'success',
+  );
 
   /**
    * render content loading | fail | rendered
-   * @returns {JSX.Element}
    */
   const renderContent = () => {
-    if (loading || fail) {
+    if (status == 'loading' || status == 'error') {
       let content = (
         <Skeleton style={[StyleSheet.absoluteFill, styles.image]} />
       );
-      if (fail) {
+      if (status == 'error') {
         content = (
           <View style={Styles.flexCenter}>
             <Icon source="media_fail" color={theme.colors.text.disable} />
@@ -63,12 +66,19 @@ const Image: React.FC<ImageProps> = ({
         {...rest}
         source={source}
         style={styles.image}
-        onLoad={() => {
-          setFail(false);
-          setLoading(rest.loading);
+        onLoadStart={() => {
+          error.current = false;
+        }}
+        onLoadEnd={() => {
+          if (error.current) {
+            setStatus('error');
+          } else {
+            setStatus('success');
+          }
+        }}
+        onError={() => {
+          error.current = true;
         }}
-        onLoadEnd={() => setLoading(false)}
-        onError={() => setFail(true)}
       />
       {renderContent()}
     </View>

package/Input/Input.tsx

@@ -35,6 +35,7 @@ const Input = forwardRef(
       loading,
       leadingIcon,
       leadingIconColor,
+      style,
       ...props
     }: InputProps,
     ref,
@@ -43,6 +44,7 @@ const Input = forwardRef(
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
+    const accessibilityLabel = `Input/${floatingValue ?? placeholder}`;
 
     const onClearText = () => {
       inputRef?.current?.clear();
@@ -112,7 +114,7 @@ const Input = forwardRef(
             )}
             <TextInput
               {...props}
-              accessibilityLabel={`TextInput`}
+              accessibilityLabel={accessibilityLabel}
               editable={!disabled}
               textAlignVertical="center"
               ref={inputRef}
@@ -153,8 +155,8 @@ const Input = forwardRef(
 
     return (
       <View
-        style={styles.wrapper}
-        accessibilityLabel={`Input/${floatingValue}`}>
+        style={[style, styles.wrapper]}
+        accessibilityLabel={accessibilityLabel}>
         {renderInputView()}
         <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
       </View>

package/Input/InputDropDown.tsx

@@ -25,10 +25,13 @@ const InputDropDown = ({
   loading,
   leadingIcon,
   leadingIconColor,
+  style,
   ...props
 }: InputDropDownProps) => {
   const {theme} = useContext(ApplicationContext);
   const full = !!value || !!placeholder;
+  const accessibilityLabel = `InputDropDown/${floatingValue ?? placeholder}`;
+
   const renderIcon = (color: string | undefined) => {
     if (loading) {
       return <Loader type={'spinner'} color={color} />;
@@ -79,7 +82,7 @@ const InputDropDown = ({
             <TextInput
               {...props}
               onPressIn={onPress}
-              accessibilityLabel={`TextInput`}
+              accessibilityLabel={accessibilityLabel}
               editable={false}
               textAlignVertical="top"
               style={[
@@ -105,8 +108,8 @@ const InputDropDown = ({
   return (
     <TouchableOpacity
       onPress={onPress}
-      style={full && styles.wrapper}
-      accessibilityLabel={`InputDropDown/${floatingValue}`}>
+      style={[style, full && styles.wrapper]}
+      accessibilityLabel={accessibilityLabel}>
       {renderInputView()}
       <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
     </TouchableOpacity>

package/Input/InputMoney.tsx

@@ -29,6 +29,7 @@ const InputMoney = forwardRef(
       iconColor,
       required,
       errorSpacing,
+      style,
       ...props
     }: InputMoneyProps,
     ref,
@@ -37,6 +38,8 @@ const InputMoney = forwardRef(
     const [focused, setFocused] = useState(false);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
     const [value, setValue] = useState('');
+    const accessibilityLabel = `InputMoney/${floatingValue}`;
+
     const onClearText = () => {
       inputRef?.current?.clear();
       setValue('');
@@ -91,7 +94,7 @@ const InputMoney = forwardRef(
           <View style={styles.inputView}>
             <TextInput
               {...props}
-              accessibilityLabel={`TextInput`}
+              accessibilityLabel={accessibilityLabel}
               editable={!disabled}
               textAlignVertical="top"
               ref={inputRef}
@@ -131,8 +134,8 @@ const InputMoney = forwardRef(
 
     return (
       <View
-        style={styles.wrapper}
-        accessibilityLabel={`InputMoney/${floatingValue}`}>
+        style={[style, styles.wrapper]}
+        accessibilityLabel={accessibilityLabel}>
         {renderInputView()}
         <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
       </View>

package/Input/InputOTP.tsx

@@ -1,7 +1,6 @@
 import React, {FC, useContext, useEffect, useRef, useState} from 'react';
 import {
   Animated,
-  KeyboardType,
   NativeSyntheticEvent,
   TextInput,
   TextInputFocusEventData,
@@ -69,6 +68,7 @@ const InputOTP: FC<InputOTPProps> = ({
   onFocus,
   onBlur,
   dataType = 'number',
+  style,
   ...props
 }) => {
   const MAX_LENGTH = 10;
@@ -76,6 +76,7 @@ const InputOTP: FC<InputOTPProps> = ({
   const [focused, setFocused] = useState(false);
   const inputRef = useRef<TextInput>(null);
   const {theme} = useContext(ApplicationContext);
+  const accessibilityLabel = `InputOTP/${floatingValue ?? placeholder}`;
 
   const onFocusInput = () => {
     setFocused(true);
@@ -157,9 +158,6 @@ const InputOTP: FC<InputOTPProps> = ({
   };
 
   const renderInputView = () => {
-    let placeholderColor = theme.colors.text.hint;
-    const keyboardType: KeyboardType =
-      dataType === 'number' ? 'number-pad' : 'default';
     return (
       <View
         style={[
@@ -182,16 +180,16 @@ const InputOTP: FC<InputOTPProps> = ({
         <View style={styles.inputView}>
           <TextInput
             {...props}
-            accessibilityLabel={`TextInput`}
+            accessibilityLabel={accessibilityLabel}
             ref={inputRef}
             value={value}
             onChangeText={_onChangeText}
-            keyboardType={keyboardType}
+            keyboardType={dataType === 'number' ? 'number-pad' : 'default'}
             onFocus={onFocusInput}
             onBlur={onBlurInput}
             style={{opacity: 0}}
             selectionColor={theme.colors.primary}
-            placeholderTextColor={placeholderColor}
+            placeholderTextColor={theme.colors.text.hint}
           />
         </View>
       </View>
@@ -202,8 +200,8 @@ const InputOTP: FC<InputOTPProps> = ({
     <TouchableOpacity
       activeOpacity={1}
       onPress={onFocusInput}
-      style={styles.otpWrapper}
-      accessibilityLabel={`Input/${floatingValue}`}>
+      style={[style, styles.otpWrapper]}
+      accessibilityLabel={accessibilityLabel}>
       {renderInputView()}
       <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
     </TouchableOpacity>