@momo-kits/foundation 1.0.1 → 1.0.3

package/Input/common.tsx

@@ -0,0 +1,70 @@
+import {View} from 'react-native';
+import styles from './styles';
+import {Text} from '../Text';
+import {Image} from '../Image';
+import React, {useContext} from 'react';
+import {ApplicationContext} from '../Navigation';
+
+export const getBorderColor = (
+  focused: boolean,
+  errorMessage?: string,
+  disabled?: boolean,
+) => {
+  const {theme} = useContext(ApplicationContext);
+
+  let borderColor = theme.colors.border.default;
+
+  if (focused) {
+    borderColor = theme.colors.primary;
+  }
+
+  if (!!errorMessage) {
+    borderColor = theme.colors.error.primary;
+  }
+
+  if (disabled) {
+    borderColor = theme.colors.border.disable;
+  }
+
+  return {borderColor};
+};
+
+export const renderFloatingView = (
+  floatingValue?: string,
+  floatingIconColor?: string,
+  disabled?: boolean,
+  floatingIcon?: string,
+) => {
+  const {theme} = useContext(ApplicationContext);
+
+  if (floatingValue) {
+    let floatingTextColor = theme.colors.text.hint;
+    let floatingIconTintColor = floatingIconColor;
+    if (disabled) {
+      floatingTextColor = theme.colors.text.disable;
+      floatingIconTintColor = theme.colors.text.disable;
+    }
+
+    return (
+      <View
+        style={[
+          styles.floatingView,
+          {
+            backgroundColor: theme.colors.background.surface,
+            zIndex: 10,
+          },
+        ]}>
+        <Text color={floatingTextColor} typography={'label_s'}>
+          {floatingValue}
+        </Text>
+        {floatingIcon && (
+          <Image
+            tintColor={floatingIconTintColor}
+            source={{uri: floatingIcon}}
+            style={styles.floatingIcon}
+          />
+        )}
+      </View>
+    );
+  }
+};

package/Input/index.tsx

@@ -1,200 +1,26 @@
-import React, {FC, useContext, useRef, useState} from 'react';
-import {
-  NativeSyntheticEvent,
-  TextInput,
-  TextInputFocusEventData,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import {ApplicationContext} from '../Navigation';
-import styles from './styles';
-import {InputProps} from './types';
+import Input from './Input';
 import TextArea from './TextArea';
-import {Text} from '../Text';
-import {Image} from '../Image';
-import {Colors} from '../Consts';
+import {TextInputProps} from 'react-native';
+
+export interface InputProps extends TextInputProps {
+  size?: 'small' | 'large';
+  floatingValue?: string;
+  floatingIcon?: string;
+  errorMessage?: string;
+  icon?: string;
+  disabled?: boolean;
+  floatingIconColor?: string;
+  iconColor?: string;
+}
+
+export interface TextAreaProps extends TextInputProps {
+  errorMessage: string;
+  floatingValue: string;
+  floatingIcon: string;
+  disabled: boolean;
+  floatingIconColor: string;
+  placeholder: string;
+  height: number;
+}
 
-const errorMessageIcon =
-  'https://img.mservice.com.vn/app/img/kits/error_mess_icon.png';
-const ic_clear =
-  'https://img.mservice.io/momo_app_v2/new_version/img/appx_icon/24_navigation_close_circle_full.png';
-const MAX_LENGTH = 100;
-const Input: FC<InputProps> = props => {
-  const {theme} = useContext(ApplicationContext);
-  const {
-    value,
-    onChangeText,
-    floatingValue,
-    floatingIcon,
-    size,
-    placeholder,
-    onBlur,
-    onFocus,
-    errorMessage,
-    icon,
-    disabled,
-    floatingIconColor,
-    iconColor,
-  } = props;
-
-  const [focused, setFocused] = useState(false);
-  const inputRef = useRef(null);
-
-  const onClearText = () => {
-    inputRef?.current?.clear();
-  };
-
-  const _onChangeText = (text: string) => {
-    onChangeText?.(text);
-  };
-  const getSizeStyle = () => {
-    if (size === 'small') {
-      return styles.smallContainer;
-    }
-    return styles.container;
-  };
-
-  const getBorderColor = () => {
-    let borderColor = theme.colors.border.default;
-
-    if (focused) {
-      borderColor = theme.colors.primary;
-    }
-
-    if (!!errorMessage) {
-      borderColor = theme.colors.error.primary;
-    }
-
-    if (disabled) {
-      borderColor = theme.colors.border.disable;
-    }
-
-    return {borderColor};
-  };
-
-  const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-    setFocused(true);
-    onFocus?.(e);
-  };
-
-  const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-    setFocused(false);
-    onBlur?.(e);
-  };
-
-  const renderFloatingView = () => {
-    if (floatingValue) {
-      let floatingTextColor = theme.colors.text.hint;
-      let floatingIconTintColor = floatingIconColor;
-      if (disabled) {
-        floatingTextColor = theme.colors.text.disable;
-        floatingIconTintColor = theme.colors.text.disable;
-      }
-
-      return (
-        <View
-          style={[
-            styles.floatingView,
-            {
-              backgroundColor: Colors.black_01,
-              zIndex: 10,
-            },
-          ]}>
-          <Text color={floatingTextColor} typography={'label_s'}>
-            {floatingValue}
-          </Text>
-          {floatingIcon && (
-            <Image
-              tintColor={floatingIconTintColor}
-              source={{uri: floatingIcon}}
-              style={styles.floatingIcon}
-            />
-          )}
-        </View>
-      );
-    }
-  };
-
-  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;
-    }
-
-    return (
-      <View style={[getSizeStyle(), getBorderColor(), styles.inputWrapper]}>
-        {renderFloatingView()}
-        <View style={styles.inputView}>
-          <TextInput
-            editable={!disabled}
-            textAlignVertical="top"
-            ref={inputRef}
-            style={[
-              styles.input,
-              {
-                color: textColor,
-              },
-            ]}
-            value={value}
-            onChangeText={_onChangeText}
-            onFocus={_onFocus}
-            onBlur={_onBlur}
-            placeholder={placeholder}
-            selectionColor={theme.colors.primary}
-            placeholderTextColor={placeholderColor}
-          />
-        </View>
-        <View style={styles.iconView}>
-          {focused && (
-            <TouchableOpacity style={styles.iconWrapper} onPress={onClearText}>
-              <Image
-                tintColor={theme.colors.text.hint}
-                source={{uri: ic_clear}}
-                style={styles.iconClose}
-              />
-            </TouchableOpacity>
-          )}
-          {icon && (
-            <Image
-              tintColor={iconTintColor}
-              source={{uri: icon}}
-              style={styles.icon}
-            />
-          )}
-        </View>
-      </View>
-    );
-  };
-
-  const renderErrorView = () => {
-    if (errorMessage) {
-      return (
-        <View style={styles.errorView}>
-          <Image style={styles.errorIcon} source={{uri: errorMessageIcon}} />
-          <Text color={theme.colors.error.primary} typography={'description_s'}>
-            {errorMessage}
-          </Text>
-        </View>
-      );
-    }
-  };
-
-  return (
-    <View style={styles.wrapper}>
-      {renderInputView()}
-      {renderErrorView()}
-    </View>
-  );
-};
-
-Input.defaultProps = {
-  size: 'large',
-  maxLength: MAX_LENGTH,
-};
 export {Input, TextArea};

package/Layout/GridSystem.tsx

@@ -5,7 +5,7 @@ import {ApplicationContext} from '../Navigation';
 import {useGridSystem} from './index';
 import {Colors, Spacing} from '../Consts';
 
-const GridSystem: React.FC<any> = () => {
+const GridSystem: React.FC = () => {
   const {theme} = useContext(ApplicationContext);
   const grid = useGridSystem();
   const insets = useSafeAreaInsets();

package/Layout/ScreenContainer.tsx

@@ -22,12 +22,18 @@ const ScreenContainer: React.FC<ScreenContainerProps> = ({
     Component = ScrollView;
   }
 
+  /**
+   * handle set options for navigation if have props options
+   */
   useLayoutEffect(() => {
     if (options) {
       navigation.setOptions(options);
     }
   }, [navigation, options]);
 
+  /**
+   * build content for screen
+   */
   const renderContent = () => {
     const results = validateChildren(children, ScreenSection);
     if (Array.isArray(results)) {

package/Layout/ScreenSection.tsx

@@ -7,6 +7,9 @@ import {ScreenSectionProps} from './types';
 const ScreenSection: React.FC<ScreenSectionProps> = ({children}) => {
   const grid = useGridSystem();
 
+  /**
+   * render overlay only dev mode
+   */
   const renderOverlay = () => {
     return (
       <View
@@ -24,6 +27,12 @@ const ScreenSection: React.FC<ScreenSectionProps> = ({children}) => {
     );
   };
 
+  /**
+   * build a row view in side session
+   * @param rows
+   * @param cursor
+   * @param endRow
+   */
   const addRowView = (
     rows: any[],
     cursor: number = 0,
@@ -50,6 +59,10 @@ const ScreenSection: React.FC<ScreenSectionProps> = ({children}) => {
     );
   };
 
+  /**
+   * render children content for session
+   * @param children
+   */
   const renderView = (
     children: any,
   ): React.ReactElement | React.ReactElement[] => {

package/Layout/SectionItem.tsx

@@ -13,6 +13,9 @@ const SectionItem: React.FC<SectionItemProps> = ({
   const {theme} = useContext(ApplicationContext);
   const grid = useGridSystem();
 
+  /**
+   * render overlay view only dev mode
+   */
   const renderOverlay = () => {
     return (
       <View

package/Layout/utils.ts

@@ -2,6 +2,10 @@ import {Alert, Dimensions} from 'react-native';
 import React, {ReactElement} from 'react';
 import {GutterSize, NumberOfColumns, ScreenPadding} from '../Consts';
 
+/**
+ * hook component for use grid system
+ * @param useMargin
+ */
 const useGridSystem = (useMargin: boolean = true) => {
   const isDevMode = false;
   const gutterSize = GutterSize;
@@ -12,6 +16,10 @@ const useGridSystem = (useMargin: boolean = true) => {
   const totalGutterSize = gutterSize * (numberOfColumns - 1);
   const sizePerSpan = (parentWidth - totalGutterSize) / numberOfColumns;
 
+  /**
+   * get size of element with number span
+   * @param span
+   */
   const getSizeSpan = (span: number = numberOfColumns): number => {
     return span * sizePerSpan + (span - 1) * gutterSize;
   };
@@ -25,6 +33,12 @@ const useGridSystem = (useMargin: boolean = true) => {
     getSizeSpan,
   };
 };
+
+/**
+ * validate children type
+ * @param children
+ * @param childrenType
+ */
 const validateChildren = (
   children:
     | React.ReactElement<any, string | React.JSXElementConstructor<any>>

package/Navigation/Components.tsx

@@ -3,6 +3,8 @@ import {StatusBar, StyleSheet, View} from 'react-native';
 import {ApplicationContext, NavigationButton} from './index';
 import {Styles} from '../Consts';
 import {Image} from '../Image';
+import {HeaderBackgroundProps, TitleCustomProps} from './types';
+import {useGridSystem} from '../Layout';
 
 const styles = StyleSheet.create({
   headerBackground: {
@@ -11,29 +13,52 @@ const styles = StyleSheet.create({
     position: 'absolute',
     aspectRatio: 375 / 154,
   },
+  headerTitleContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
 });
 
-const HeaderBackground = () => {
+const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
+  surface = false,
+  image,
+}) => {
   const {theme} = useContext(ApplicationContext);
+  const allowImage = !surface && theme.assets?.headerBackground;
   return (
     <View
       style={[
         Styles.flex,
         {backgroundColor: theme.colors.background.surface, overflow: 'hidden'},
       ]}>
-      {theme.assets?.headerBackground && (
-        <>
-          <StatusBar barStyle="light-content" />
-          <Image
-            style={styles.headerBackground}
-            source={{uri: theme.assets?.headerBackground}}
-          />
-        </>
+      <StatusBar
+        barStyle={allowImage || theme.dark ? 'light-content' : 'dark-content'}
+      />
+      {allowImage && (
+        <Image
+          style={styles.headerBackground}
+          source={{uri: image ?? theme.assets?.headerBackground}}
+        />
       )}
     </View>
   );
 };
 
+const HeaderCustom: React.FC<TitleCustomProps> = ({
+  title,
+  subTitle,
+  image,
+  content,
+}) => {
+  const {getSizeSpan} = useGridSystem();
+
+  return (
+    <View style={[styles.headerTitleContainer, {width: getSizeSpan(10)}]}>
+      {content ?? <View />}
+    </View>
+  );
+};
+
 const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
   const validType = (item: any) => {
     if (item.type !== NavigationButton) {
@@ -60,4 +85,4 @@ const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
   return <View style={Styles.headerRightButton}>{renderAction()}</View>;
 };
 
-export {HeaderBackground, HeaderRightAction};
+export {HeaderBackground, HeaderRightAction, HeaderCustom};

package/Navigation/ModalScreen.tsx

@@ -12,12 +12,21 @@ import {BottomSheetModalMethods} from '@gorhom/bottom-sheet/lib/typescript/types
 import Navigation from './Navigation';
 import {ModalParams} from './types';
 import {Radius, Spacing, Styles} from '../Consts';
-import {ApplicationContext, NavigationContainer} from './index';
+import {
+  ApplicationContext,
+  HeaderRightAction,
+  NavigationButton,
+  NavigationContainer,
+} from './index';
 
-const ModalScreen: React.FC<any> = props => {
-  const {navigation, route} = props;
+const ModalScreen: React.FC<ModalParams> = ({navigation, route, ...rest}) => {
   const {theme} = useContext(ApplicationContext);
-  const {isBottomSheet, screen, onRequestClose}: ModalParams = route.params;
+  const {
+    isBottomSheet,
+    backgroundColor,
+    screen,
+    barrierDismissible,
+  }: ModalParams = route.params;
   const Component = useRef(screen).current;
   const params = {
     ...route.params,
@@ -33,11 +42,7 @@ const ModalScreen: React.FC<any> = props => {
     if (!pop) {
       action = () => {};
     }
-    if (typeof onRequestClose === 'function' && !isBottomSheet) {
-      onRequestClose(() => {
-        params?.onDismiss?.();
-        action();
-      });
+    if (barrierDismissible && !isBottomSheet) {
       return;
     }
     params?.onDismiss?.();
@@ -48,16 +53,39 @@ const ModalScreen: React.FC<any> = props => {
    * build bottom sheet
    */
   if (isBottomSheet) {
+    const bgColor = backgroundColor ?? theme.colors.background.surface;
     return (
-      <BottomSheet {...props} onDismiss={onDismiss}>
-        <View style={{height: '100%'}}>
+      <BottomSheet {...rest} onDismiss={onDismiss}>
+        <View style={[styles.sheetContainer, {backgroundColor: bgColor}]}>
+          <View style={styles.indicatorContainer}>
+            <View
+              style={[
+                styles.indicator,
+                {backgroundColor: theme.colors.text.disable},
+              ]}
+            />
+          </View>
           <NavigationContainer
             theme={{...theme, assets: undefined}}
             screen={props => <Component {...params} {...props} />}
             onDismiss={() => {
               navigation.pop();
             }}
-            isBottomSheet={isBottomSheet}
+            screenOptions={{
+              headerRight: (props: any) => (
+                <HeaderRightAction>
+                  <NavigationButton
+                    icon="24_navigation_close"
+                    {...props}
+                    onPress={onDismiss}
+                  />
+                </HeaderRightAction>
+              ),
+              headerBackground: () => (
+                <View style={[Styles.flex, {backgroundColor: bgColor}]} />
+              ),
+            }}
+            hideBackFirst={true}
           />
         </View>
       </BottomSheet>
@@ -96,7 +124,6 @@ const ModalScreen: React.FC<any> = props => {
 };
 
 const BottomSheet: React.FC<ModalParams> = ({children, onDismiss}) => {
-  const {theme} = useContext(ApplicationContext);
   const snapPoints = useMemo(() => ['50%', '90%'], []);
   const {bottom} = useSafeAreaInsets();
   const bottomSheetRef = useRef<BottomSheetModalMethods>(null);
@@ -109,17 +136,6 @@ const BottomSheet: React.FC<ModalParams> = ({children, onDismiss}) => {
     };
   }, []);
 
-  const handleComponent = () => (
-    <View
-      style={[
-        styles.indicatorContainer,
-        {backgroundColor: theme.colors.background.surface},
-      ]}>
-      <View
-        style={[styles.indicator, {backgroundColor: theme.colors.text.disable}]}
-      />
-    </View>
-  );
   const backdropComponent = (backdropProps: any) => (
     <BottomSheetBackdrop
       disappearsOnIndex={-1}
@@ -133,27 +149,22 @@ const BottomSheet: React.FC<ModalParams> = ({children, onDismiss}) => {
       <BottomSheetModal
         ref={bottomSheetRef}
         snapPoints={snapPoints}
-        handleHeight={24}
         onDismiss={() => onDismiss?.(mountedRef.current)}
-        handleComponent={handleComponent}
+        handleComponent={null}
         backdropComponent={backdropComponent}>
-        <View
-          style={{
-            paddingBottom: bottom,
-            backgroundColor: theme.colors.background.default,
-          }}>
-          {children}
-        </View>
+        <View style={{paddingBottom: bottom}}>{children}</View>
       </BottomSheetModal>
     </SafeAreaView>
   );
 };
 
+ModalScreen.defaultProps = {
+  barrierDismissible: false,
+};
+
 const styles = StyleSheet.create({
   container: {flex: 1, flexDirection: 'row'},
   modalContent: {
-    borderRadius: Radius.M,
-    overflow: 'hidden',
     maxWidth: '100%',
     maxHeight: '80%',
   },
@@ -168,14 +179,18 @@ const styles = StyleSheet.create({
     flex: 1,
     minHeight: '10%',
   },
-  indicatorContainer: {
+  sheetContainer: {
+    height: '100%',
     width: '100%',
-    paddingTop: Spacing.S,
     borderTopLeftRadius: Radius.M,
     borderTopRightRadius: Radius.M,
     overflow: 'hidden',
-    justifyContent: 'center',
+  },
+  indicatorContainer: {
+    width: '100%',
+    paddingTop: Spacing.S,
     alignItems: 'center',
+    justifyContent: 'center',
   },
   indicator: {
     width: 64,

package/Navigation/Navigation.ts

@@ -1,6 +1,7 @@
 import {NavigationProp} from '@react-navigation/native';
 import {NavigationOptions} from './types';
 import {HeaderRightAction} from './index';
+import {getOptions} from './utils';
 
 class Navigation {
   instance: NavigationProp<any>;
@@ -16,6 +17,7 @@ class Navigation {
         console.warn(
           'headerRight not return element type of HeaderRightAction, Please migrate to use HeaderRightAction of kits.',
         );
+        return;
       }
     }
   };
@@ -27,6 +29,7 @@ class Navigation {
   setOptions = (params: NavigationOptions) => {
     this.verifyParams(params);
     params = this.filterParams(params);
+    params = getOptions(params);
     this.instance.setOptions(params);
   };
 }

package/Navigation/NavigationButton.tsx

@@ -4,8 +4,11 @@ import {NavigationButtonProps} from './types';
 import {ApplicationContext} from './index';
 import {Icon} from '../Icon';
 
-const NavigationButton: React.FC<NavigationButtonProps> = props => {
-  const {icon, tintColor, onPress} = props;
+const NavigationButton: React.FC<NavigationButtonProps> = ({
+  icon,
+  tintColor,
+  onPress,
+}) => {
   const {theme} = useContext(ApplicationContext);
   return (
     <TouchableOpacity style={styles.container} onPress={onPress}>