@momo-kits/foundation 1.0.1 → 1.0.4

package/Input/TextArea.tsx

@@ -7,18 +7,15 @@ import {
   View,
 } from 'react-native';
 import styles from './styles';
-import {Image} from '../Image';
 import {Text} from '../Text';
-import {TextAreaProps} from './types';
 import {ApplicationContext} from '../Navigation';
-import {Colors} from '../Consts';
+import {getBorderColor, renderFloatingView} from './common';
+import {TextAreaProps} from './index';
+import {Icon} from '../Icon';
 
-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 DEFAULT_HEIGHT = 112;
 const MAX_LENGTH = 300;
+
 const TextArea: FC<TextAreaProps> = props => {
   const {theme} = useContext(ApplicationContext);
   const {
@@ -59,56 +56,6 @@ const TextArea: FC<TextAreaProps> = props => {
     setFocused(false);
     onBlur?.(e);
   };
-  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 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 renderCountingView = () => {
     return (
@@ -132,11 +79,19 @@ const TextArea: FC<TextAreaProps> = props => {
     return (
       <View
         style={[
-          getBorderColor(),
+          getBorderColor(focused, errorMessage, disabled),
           styles.textAreaWrapper,
-          {height: height || DEFAULT_HEIGHT},
+          {
+            height: height || DEFAULT_HEIGHT,
+            backgroundColor: theme.colors.background.surface,
+          },
         ]}>
-        {renderFloatingView()}
+        {renderFloatingView(
+          floatingValue,
+          floatingIconColor,
+          disabled,
+          floatingIcon,
+        )}
         <View style={styles.rowArea}>
           <View style={styles.textAreaView}>
             <TextInput
@@ -162,10 +117,10 @@ const TextArea: FC<TextAreaProps> = props => {
           </View>
           {focused && (
             <TouchableOpacity style={styles.iconWrapper} onPress={onClearText}>
-              <Image
-                tintColor={theme.colors.text.hint}
-                source={{uri: ic_clear}}
-                style={styles.iconClose}
+              <Icon
+                source="24_navigation_close_circle_full"
+                size={16}
+                color={theme.colors.text.hint}
               />
             </TouchableOpacity>
           )}
@@ -179,7 +134,13 @@ const TextArea: FC<TextAreaProps> = props => {
     if (errorMessage) {
       return (
         <View style={styles.errorView}>
-          <Image style={styles.errorIcon} source={{uri: errorMessageIcon}} />
+          <View style={styles.errorIcon}>
+            <Icon
+              source="ic_error"
+              size={16}
+              color={theme.colors.error.primary}
+            />
+          </View>
           <Text color={theme.colors.error.primary} typography={'description_s'}>
             {errorMessage}
           </Text>

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/Input/styles.ts

@@ -29,7 +29,7 @@ export default StyleSheet.create({
     flexDirection: 'row',
   },
   floatingIcon: {width: 16, height: 16, marginLeft: Spacing.XS},
-  errorIcon: {width: 16, height: 16, marginRight: Spacing.XS},
+  errorIcon: {marginRight: Spacing.XS},
   errorView: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -38,10 +38,6 @@ export default StyleSheet.create({
     justifyContent: 'space-between',
     flex: 1,
   },
-  iconClose: {
-    width: 16,
-    height: 16,
-  },
   iconView: {
     flexDirection: 'row',
     alignItems: 'center',

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

@@ -1,33 +1,26 @@
 import {KeyboardAvoidingView, Platform, ScrollView, View} from 'react-native';
 import {useHeaderHeight} from '@react-navigation/stack';
 import {SafeAreaView} from 'react-native-safe-area-context';
-import React, {useContext, useLayoutEffect} from 'react';
+import React from 'react';
 import {ScreenContainerProps} from '../Navigation/types';
-import {ApplicationContext} from '../Navigation';
 import {Spacing, Styles} from '../Consts';
 import {ScreenSection, validateChildren} from './index';
 
 const ScreenContainer: React.FC<ScreenContainerProps> = ({
   children,
-  navigation,
-  options,
   edges,
   enableKeyboardAvoidingView,
   scrollable,
 }) => {
   let Component: any = View;
-  const {theme} = useContext(ApplicationContext);
   const headerHeight = useHeaderHeight();
   if (scrollable) {
     Component = ScrollView;
   }
 
-  useLayoutEffect(() => {
-    if (options) {
-      navigation.setOptions(options);
-    }
-  }, [navigation, options]);
-
+  /**
+   * build content for screen
+   */
   const renderContent = () => {
     const results = validateChildren(children, ScreenSection);
     if (Array.isArray(results)) {
@@ -48,14 +41,7 @@ const ScreenContainer: React.FC<ScreenContainerProps> = ({
   };
 
   return (
-    <SafeAreaView
-      style={[
-        Styles.flex,
-        {
-          backgroundColor: theme.colors.background.default,
-        },
-      ]}
-      edges={edges}>
+    <SafeAreaView style={Styles.flex} edges={edges}>
       <KeyboardAvoidingView
         style={Styles.flex}
         keyboardVerticalOffset={headerHeight}

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

@@ -1,8 +1,11 @@
 import React, {useContext} from 'react';
 import {StatusBar, StyleSheet, View} from 'react-native';
 import {ApplicationContext, NavigationButton} from './index';
-import {Styles} from '../Consts';
+import {Colors, Styles} from '../Consts';
 import {Image} from '../Image';
+import {HeaderBackgroundProps, TitleCustomProps} from './types';
+import {useGridSystem} from '../Layout';
+import {Text} from '../Text';
 
 const styles = StyleSheet.create({
   headerBackground: {
@@ -11,9 +14,24 @@ const styles = StyleSheet.create({
     position: 'absolute',
     aspectRatio: 375 / 154,
   },
+  headerTitleContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  avatar: {width: 36, height: 36, borderRadius: 18},
+  dotAvatar: {
+    position: 'absolute',
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    bottom: 0,
+    right: 0,
+    borderWidth: 1,
+    borderColor: Colors.black_01,
+  },
 });
 
-const HeaderBackground = () => {
+const HeaderBackground: React.FC<HeaderBackgroundProps> = ({image}) => {
   const {theme} = useContext(ApplicationContext);
   return (
     <View
@@ -21,15 +39,45 @@ const HeaderBackground = () => {
         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={image || theme.dark ? 'light-content' : 'dark-content'}
+      />
+      {image && <Image style={styles.headerBackground} source={{uri: image}} />}
+    </View>
+  );
+};
+
+const HeaderCustom: React.FC<TitleCustomProps> = ({
+  title,
+  subTitle,
+  image,
+  content,
+  tintColor,
+  dotColor,
+}) => {
+  const {getSizeSpan} = useGridSystem();
+
+  const header = (
+    <View style={Styles.row}>
+      <View>
+        <Image source={{uri: image}} style={styles.avatar} />
+        {dotColor && (
+          <View style={[styles.dotAvatar, {backgroundColor: dotColor}]} />
+        )}
+      </View>
+      <View style={[Styles.flex, Styles.paddingHorizontal8]}>
+        <Text typography="title_xs" color={tintColor}>
+          {title}
+        </Text>
+        <Text typography="description_s" color={tintColor}>
+          {subTitle}
+        </Text>
+      </View>
+    </View>
+  );
+  return (
+    <View style={[styles.headerTitleContainer, {width: getSizeSpan(10)}]}>
+      {content ?? header}
     </View>
   );
 };
@@ -60,4 +108,4 @@ const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
   return <View style={Styles.headerRightButton}>{renderAction()}</View>;
 };
 
-export {HeaderBackground, HeaderRightAction};
+export {HeaderBackground, HeaderRightAction, HeaderCustom};