@momo-kits/foundation 0.81.27 → 0.81.28

package/Application/BottomTab.tsx

@@ -1,13 +1,29 @@
-import React, {useContext} from 'react';
+import React, {useContext, useEffect} from 'react';
 import {View} from 'react-native';
-import {BottomTabProps} from './types';
+import {BottomTabProps, NavigationScreenProps} from './types';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import {createStackNavigator} from '@react-navigation/stack';
 import {Icon} from '../Icon';
 import {Text} from '../Text';
 import {ApplicationContext} from './index';
+import {getStackOptions} from './utils';
+import StackScreen from './StackScreen';
 
 const Tab = createBottomTabNavigator();
+const Stack = createStackNavigator();
 
+const TabScreen: React.FC<NavigationScreenProps> = ({route}) => {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen
+        name="Stack"
+        component={StackScreen}
+        initialParams={{screen: route.params?.screen}}
+        options={{...getStackOptions(), ...route.params?.options}}
+      />
+    </Stack.Navigator>
+  );
+};
 const BottomTab: React.FC<BottomTabProps> = ({
   tabs,
   listeners,
@@ -16,14 +32,13 @@ const BottomTab: React.FC<BottomTabProps> = ({
 }) => {
   const {theme} = useContext(ApplicationContext);
 
-  const defaultListener = {
-    focus: (item: any) => {
-      const focusItem = tabs.find(i => item.target.includes(i.name));
-      if (focusItem?.options) {
-        navigation?.setOptions?.(focusItem.options);
-      }
-    },
-  };
+  useEffect(() => {
+    navigation?.setOptions({
+      headerShown: false,
+      headerTransparent: true,
+      headerBackground: undefined,
+    });
+  }, []);
 
   return (
     <Tab.Navigator
@@ -34,8 +49,9 @@ const BottomTab: React.FC<BottomTabProps> = ({
           <Tab.Screen
             key={item.name}
             name={item.name}
-            component={item.screen}
-            listeners={listeners ?? defaultListener}
+            component={TabScreen}
+            initialParams={item}
+            listeners={listeners}
             options={{
               tabBarLabel: ({color, focused}) => {
                 return (

package/Application/Components.tsx

@@ -94,8 +94,8 @@ const styles = StyleSheet.create({
   },
   badge: {
     position: 'absolute',
-    top: -6,
-    right: -6,
+    top: -8,
+    right: -8,
   },
 });
 

package/Badge/Badge.tsx

@@ -4,7 +4,7 @@ import {View} from 'react-native';
 import {ApplicationContext} from '../Application';
 import {BadgeProps} from './types';
 import styles from './styles';
-import {Colors} from '../Consts';
+import {Colors, Spacing} from '../Consts';
 import {Text} from '../Text';
 
 const Badge: FC<BadgeProps> = ({label = 'Label', style, backgroundColor}) => {

package/Badge/styles.ts

@@ -4,15 +4,13 @@ import {scaleSize} from '../Text';
 
 export default StyleSheet.create({
   badge: {
-    paddingHorizontal: Spacing.XS,
     borderRadius: Radius.M,
     justifyContent: 'center',
-    alignItems: 'center',
     height: scaleSize(16),
     flexDirection: 'row',
-    borderWidth: 1,
     borderColor: Colors.black_01,
-    alignSelf: 'baseline',
+    paddingHorizontal: Spacing.XS,
+    alignItems: 'center',
   },
   dot: {
     width: 16,

package/Input/Input.tsx

@@ -36,6 +36,7 @@ const Input = forwardRef(
       leadingIcon,
       leadingIconColor,
       fontWeight = 'Regular',
+      onPressIcon,
       style,
       ...props
     }: InputProps,
@@ -72,7 +73,11 @@ const Input = forwardRef(
         return <Loader type={'spinner'} color={color} />;
       }
       if (icon) {
-        return <Icon color={color} source={icon} size={24} />;
+        return (
+          <TouchableOpacity onPress={onPressIcon} disabled={!onPressIcon}>
+            <Icon color={color} source={icon} size={24} />
+          </TouchableOpacity>
+        );
       }
     };
 

package/Input/InputOTP.tsx

@@ -1,4 +1,12 @@
-import React, {FC, useContext, useEffect, useRef, useState} from 'react';
+import React, {
+  FC,
+  forwardRef,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
 import {
   Animated,
   NativeSyntheticEvent,
@@ -56,156 +64,169 @@ const OTPCaret: FC<CaretProps> = ({index, length}) => {
   );
 };
 
-const InputOTP: FC<InputOTPProps> = ({
-  length,
-  errorMessage,
-  errorSpacing,
-  floatingValue,
-  floatingIconColor,
-  floatingIcon,
-  placeholder,
-  onChangeText,
-  onFocus,
-  onBlur,
-  dataType = 'number',
-  style,
-  ...props
-}) => {
-  const MAX_LENGTH = 10;
-  const [value, setValue] = useState('');
-  const [focused, setFocused] = useState(false);
-  const inputRef = useRef<TextInput>(null);
-  const {theme} = useContext(ApplicationContext);
-  const accessibilityLabel = `InputOTP/${floatingValue ?? placeholder}`;
-
-  const onFocusInput = () => {
-    setFocused(true);
-    inputRef.current?.focus();
-  };
-
-  const onBlurInput = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-    setFocused(false);
-    onBlur?.(e);
-  };
-
-  const _onChangeText = (text: string) => {
-    if (text.length > MAX_LENGTH) return;
-    if (dataType === 'number' && isNaN(Number(text))) return;
-    if (
-      !isNaN(Number(text)) &&
-      value.length >= Number(length) &&
-      text.length >= value.length
-    )
-      return;
-
-    setValue(text);
-    onChangeText?.(text);
-  };
-
-  const renderInputs = (length: number) => {
-    const TextInputs: React.ReactNode[] = [];
-    for (let i = 0; i < length; i++) {
-      TextInputs.push(
-        <View>
-          {focused && value.length === i ? (
-            <OTPCaret index={i} length={length} />
-          ) : (
-            <Text
-              style={i !== length - 1 && {marginRight: Spacing.L}}
-              color={
-                !!value[i] ? theme.colors.text.default : theme.colors.text.hint
-              }
-              typography={!!value[i] ? 'title_s' : 'paragraph_default'}>
-              {value[i] || '-'}
-            </Text>
-          )}
-        </View>,
-      );
-    }
-    return TextInputs;
-  };
+const InputOTP = forwardRef(
+  (
+    {
+      length,
+      errorMessage,
+      errorSpacing,
+      floatingValue,
+      floatingIconColor,
+      floatingIcon,
+      placeholder,
+      onChangeText,
+      onFocus,
+      onBlur,
+      dataType = 'number',
+      style,
+      ...props
+    }: InputOTPProps,
+    ref,
+  ) => {
+    const MAX_LENGTH = 10;
+    const [value, setValue] = useState('');
+    const [focused, setFocused] = useState(false);
+    const inputRef = useRef<TextInput>(null);
+    const {theme} = useContext(ApplicationContext);
+    const accessibilityLabel = `InputOTP/${floatingValue ?? placeholder}`;
 
-  const renderUnidentifiedInputs = () => {
-    const splitValue = value.split('');
+    useImperativeHandle(ref, () => ({
+      onChangeText: (text: string) => {
+        _onChangeText(text);
+      },
+    }));
 
-    if (!focused && value.length === 0 && !!placeholder) {
-      return (
-        <Text color={theme.colors.text.hint} typography={'description_s'}>
-          {placeholder}
-        </Text>
-      );
-    }
+    const onFocusInput = () => {
+      setFocused(true);
+      inputRef.current?.focus();
+    };
 
-    return (
-      <View style={{flexDirection: 'row'}}>
-        {splitValue.map((letter, index) => {
-          return (
-            <Text
-              style={
-                (index !== value.length - 1 ||
-                  (focused && value.length !== MAX_LENGTH)) && {
-                  marginRight: Spacing.L,
+    const onBlurInput = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setFocused(false);
+      onBlur?.(e);
+    };
+
+    const _onChangeText = (text: string) => {
+      if (text.length > MAX_LENGTH) return;
+      if (dataType === 'number' && isNaN(Number(text))) return;
+      if (
+        !isNaN(Number(text)) &&
+        value.length >= Number(length) &&
+        text.length >= value.length
+      )
+        return;
+
+      setValue(text);
+      onChangeText?.(text);
+    };
+
+    const renderInputs = (length: number) => {
+      const TextInputs: React.ReactNode[] = [];
+      for (let i = 0; i < length; i++) {
+        TextInputs.push(
+          <View>
+            {focused && value.length === i ? (
+              <OTPCaret index={i} length={length} />
+            ) : (
+              <Text
+                style={i !== length - 1 && {marginRight: Spacing.L}}
+                color={
+                  !!value[i]
+                    ? theme.colors.text.default
+                    : theme.colors.text.hint
                 }
-              }
-              typography={'title_s'}>
-              {letter}
-            </Text>
-          );
-        })}
-        {focused && value.length !== MAX_LENGTH && <OTPCaret />}
-      </View>
-    );
-  };
+                typography={!!value[i] ? 'title_s' : 'paragraph_default'}>
+                {value[i] || '-'}
+              </Text>
+            )}
+          </View>,
+        );
+      }
+      return TextInputs;
+    };
 
-  const renderInputView = () => {
-    return (
-      <View
-        style={[
-          styles.otpInput,
-          {backgroundColor: theme.colors.background.surface},
-          getBorderColor(theme, focused, errorMessage),
-        ]}>
-        {!!floatingValue && (
-          <View
-            style={[
-              styles.otpFloatingView,
-              {backgroundColor: theme.colors.background.surface},
-            ]}>
-            <Text typography={'description_s'}>{floatingValue}</Text>
-          </View>
-        )}
-        <View style={styles.otpInputsView}>
-          {length ? renderInputs(length) : renderUnidentifiedInputs()}
+    const renderUnidentifiedInputs = () => {
+      const splitValue = value.split('');
+
+      if (!focused && value.length === 0 && !!placeholder) {
+        return (
+          <Text color={theme.colors.text.hint} typography={'description_s'}>
+            {placeholder}
+          </Text>
+        );
+      }
+
+      return (
+        <View style={{flexDirection: 'row'}}>
+          {splitValue.map((letter, index) => {
+            return (
+              <Text
+                style={
+                  (index !== value.length - 1 ||
+                    (focused && value.length !== MAX_LENGTH)) && {
+                    marginRight: Spacing.L,
+                  }
+                }
+                typography={'title_s'}>
+                {letter}
+              </Text>
+            );
+          })}
+          {focused && value.length !== MAX_LENGTH && <OTPCaret />}
         </View>
-        <View style={styles.inputView}>
-          <TextInput
-            {...props}
-            accessibilityLabel={accessibilityLabel}
-            ref={inputRef}
-            value={value}
-            onChangeText={_onChangeText}
-            keyboardType={dataType === 'number' ? 'number-pad' : 'default'}
-            onFocus={onFocusInput}
-            onBlur={onBlurInput}
-            style={{opacity: 0}}
-            selectionColor={theme.colors.primary}
-            placeholderTextColor={theme.colors.text.hint}
-          />
+      );
+    };
+
+    const renderInputView = () => {
+      return (
+        <View
+          style={[
+            styles.otpInput,
+            {backgroundColor: theme.colors.background.surface},
+            getBorderColor(theme, focused, errorMessage),
+          ]}>
+          {!!floatingValue && (
+            <View
+              style={[
+                styles.otpFloatingView,
+                {backgroundColor: theme.colors.background.surface},
+              ]}>
+              <Text typography={'description_s'}>{floatingValue}</Text>
+            </View>
+          )}
+          <View style={styles.otpInputsView}>
+            {length ? renderInputs(length) : renderUnidentifiedInputs()}
+          </View>
+          <View style={styles.inputView}>
+            <TextInput
+              {...props}
+              accessibilityLabel={accessibilityLabel}
+              ref={inputRef}
+              value={value}
+              onChangeText={_onChangeText}
+              keyboardType={dataType === 'number' ? 'number-pad' : 'default'}
+              onFocus={onFocusInput}
+              onBlur={onBlurInput}
+              style={{opacity: 0}}
+              selectionColor={theme.colors.primary}
+              placeholderTextColor={theme.colors.text.hint}
+            />
+          </View>
         </View>
-      </View>
-    );
-  };
+      );
+    };
 
-  return (
-    <TouchableOpacity
-      activeOpacity={1}
-      onPress={onFocusInput}
-      style={[style, styles.otpWrapper]}
-      accessibilityLabel={accessibilityLabel}>
-      {renderInputView()}
-      <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-    </TouchableOpacity>
-  );
-};
+    return (
+      <TouchableOpacity
+        activeOpacity={1}
+        onPress={onFocusInput}
+        style={[style, styles.otpWrapper]}
+        accessibilityLabel={accessibilityLabel}>
+        {renderInputView()}
+        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+      </TouchableOpacity>
+    );
+  },
+);
 
 export default InputOTP;

package/Input/index.tsx

@@ -78,6 +78,8 @@ export interface InputProps extends TextInputProps {
   leadingIconColor?: string;
 
   fontWeight?: 'Regular' | 'Bold';
+
+  onPressIcon?: () => void;
 }
 
 type InputPropsWithoutSizeAndIcon = Omit<

package/Layout/Screen.tsx

@@ -28,6 +28,7 @@ import Navigation from '../Application/Navigation';
 import styles from './styles';
 import {AnimatedHeader, NavigationOptions} from '../Application/types';
 import {Image} from '../Image';
+import {HeaderType} from './types';
 
 export interface ScreenProps extends ViewProps {
   children: React.ReactNode;
@@ -47,9 +48,9 @@ export interface ScreenProps extends ViewProps {
   scrollable?: boolean;
 
   /**
-   * Optional. If `true`, use an extended header for the screen.
+   * Optional. Set type of header.
    */
-  useExtendedHeader?: boolean;
+  headerType?: HeaderType;
 
   /**
    * Optional. Props for the animated component or bool used top navigation animated.
@@ -89,13 +90,13 @@ const Screen = forwardRef(
       enableKeyboardAvoidingView = false,
       scrollable = false,
       navigation,
-      useExtendedHeader,
       animatedHeader,
       scrollViewProps,
       headerComponent: Header,
       footerComponent: Footer,
       layoutOffset = -56,
       backgroundColor,
+      headerType = 'default',
     }: ScreenProps,
     ref,
   ) => {
@@ -111,23 +112,14 @@ const Screen = forwardRef(
     let keyboardVerticalOffset = heightHeader - 20;
     animatedValue.current = undefined;
 
-    if (useExtendedHeader || animatedHeader) {
+    if (headerType == 'extended' || animatedHeader) {
       keyboardVerticalOffset = -20;
     }
 
-    if (useExtendedHeader) {
+    if (headerType == 'extended') {
       headerBackground = theme.assets?.headerBackground;
     }
 
-    useEffect(() => {
-      if (useExtendedHeader) {
-        navigation?.setOptions({
-          headerTransparent: true,
-          headerBackground: () => null,
-        });
-      }
-    }, [useExtendedHeader]);
-
     useEffect(() => {
       if (animatedHeader) {
         styleAnimatedHeader = {
@@ -168,6 +160,69 @@ const Screen = forwardRef(
       }
     }, [animatedHeader]);
 
+    useEffect(() => {
+      if (!animatedHeader) {
+        let headerOptions: NavigationOptions = {};
+        switch (headerType) {
+          case 'none':
+            headerOptions = {
+              headerTransparent: true,
+              headerBackground: () => null,
+              headerShown: false,
+            };
+            break;
+
+          case 'surface':
+            headerOptions = {
+              headerTransparent: false,
+              headerShown: true,
+              headerTintColor: theme.colors.text.default,
+              headerBackground: (props: any) => (
+                <HeaderBackground
+                  {...props}
+                  image={null}
+                  backgroundColor={theme.colors.background.surface}
+                  useBorder={true}
+                  animatedValue={animatedValue.current}
+                />
+              ),
+              headerTitle: (props: any) => (
+                <HeaderTitle {...props} animatedValue={animatedValue.current} />
+              ),
+            };
+            break;
+
+          case 'extended':
+            headerOptions = {
+              headerShown: true,
+              headerTransparent: true,
+              headerTintColor: Colors.black_01,
+              headerBackground: () => null,
+              headerTitle: (props: any) => <HeaderTitle {...props} />,
+            };
+            break;
+
+          default:
+            headerOptions = {
+              headerTransparent: false,
+              headerShown: true,
+              headerTintColor: Colors.black_01,
+              headerBackground: (props: any) => <HeaderBackground {...props} />,
+            };
+        }
+
+        navigation?.setOptions(headerOptions);
+        const current: any = navigation;
+        const parent = current?.getParent?.();
+        if (parent) {
+          return current?.addListener?.('focus', () => {
+            const stackNavigation = new Navigation(parent, theme);
+            stackNavigation?.setOptions(headerOptions);
+          });
+        }
+      }
+    }, [headerType]);
+
     /**
      * animated when use scroll && animated value
      */
@@ -292,11 +347,13 @@ const Screen = forwardRef(
           </Component>
           {Footer && (
             <View
-              style={{
-                paddingTop: Spacing.S,
-                paddingBottom: Math.min(insets.bottom, 20) + Spacing.S,
-                backgroundColor: theme.colors.background.surface,
-              }}>
+              style={[
+                styles.footerContainer,
+                {
+                  paddingBottom: Math.min(insets.bottom, 21) + Spacing.S,
+                  backgroundColor: theme.colors.background.surface,
+                },
+              ]}>
               <Section>{Footer}</Section>
             </View>
           )}

package/Layout/styles.ts

@@ -1,5 +1,5 @@
-import {StyleSheet} from 'react-native';
-import {Radius} from '../Consts';
+import {Platform, StyleSheet} from 'react-native';
+import {Colors, Radius, Spacing} from '../Consts';
 
 export default StyleSheet.create({
   extendedHeader: {
@@ -45,7 +45,6 @@ export default StyleSheet.create({
     flexDirection: 'row',
     flexWrap: 'wrap',
     borderRadius: Radius.M,
-
     padding: 12,
   },
   item: {
@@ -81,4 +80,18 @@ export default StyleSheet.create({
     paddingHorizontal: undefined,
     paddingVertical: undefined,
   },
+  footerContainer: {
+    paddingTop: Spacing.S,
+    ...Platform.select({
+      android: {
+        elevation: 4,
+      },
+      ios: {
+        shadowColor: Colors.black_20,
+        shadowOffset: {width: 0, height: -2},
+        shadowOpacity: 0.1,
+        shadowRadius: 3,
+      },
+    }),
+  },
 });

package/Layout/types.ts

@@ -1,3 +1,5 @@
+export type HeaderType = 'default' | 'surface' | 'extended' | 'none';
+
 export type GridContextProps = {
   /**
    * Represents the number of columns in the grid.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.81.27",
+    "version": "0.81.28",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {