@momo-kits/foundation 1.0.0 → 1.0.1

package/Input/TextArea.tsx

@@ -0,0 +1,202 @@
+import React, {FC, useContext, useRef, useState} from 'react';
+import {
+  NativeSyntheticEvent,
+  TextInput,
+  TextInputFocusEventData,
+  TouchableOpacity,
+  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';
+
+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 {
+    errorMessage,
+    onChangeText,
+    floatingIconColor,
+    floatingIcon,
+    floatingValue,
+    onFocus,
+    onBlur,
+    disabled,
+    value,
+    defaultValue,
+    height,
+    placeholder,
+    maxLength,
+  } = props;
+
+  const [focused, setFocused] = useState(false);
+  const [inputValue, setInputValue] = useState(defaultValue ?? '');
+  const inputRef = useRef<any>(null);
+
+  const onClearText = () => {
+    inputRef?.current?.clear();
+  };
+
+  const _onChangeText = (text: string) => {
+    onChangeText?.(text);
+    setInputValue(text);
+  };
+
+  const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    setFocused(true);
+    onFocus?.(e);
+  };
+
+  const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    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 (
+      <View style={styles.countingView}>
+        <Text color={theme.colors.text.hint} typography={'description_xs'}>
+          {`${inputValue.length}/${maxLength}`}
+        </Text>
+      </View>
+    );
+  };
+  const renderInputView = () => {
+    const disabledColor = theme.colors.text.disable;
+    let textColor = theme.colors.text.default;
+    let placeholderColor = theme.colors.text.hint;
+
+    if (disabled) {
+      textColor = disabledColor;
+      placeholderColor = disabledColor;
+    }
+
+    return (
+      <View
+        style={[
+          getBorderColor(),
+          styles.textAreaWrapper,
+          {height: height || DEFAULT_HEIGHT},
+        ]}>
+        {renderFloatingView()}
+        <View style={styles.rowArea}>
+          <View style={styles.textAreaView}>
+            <TextInput
+              ref={inputRef}
+              editable={!disabled}
+              textAlignVertical="top"
+              style={[
+                styles.textArea,
+                {
+                  color: textColor,
+                },
+              ]}
+              maxLength={maxLength}
+              multiline={true}
+              value={value}
+              onChangeText={_onChangeText}
+              onFocus={_onFocus}
+              onBlur={_onBlur}
+              placeholder={placeholder}
+              selectionColor={theme.colors.primary}
+              placeholderTextColor={placeholderColor}
+            />
+          </View>
+          {focused && (
+            <TouchableOpacity style={styles.iconWrapper} onPress={onClearText}>
+              <Image
+                tintColor={theme.colors.text.hint}
+                source={{uri: ic_clear}}
+                style={styles.iconClose}
+              />
+            </TouchableOpacity>
+          )}
+        </View>
+        {renderCountingView()}
+      </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>
+  );
+};
+
+TextArea.defaultProps = {
+  maxLength: MAX_LENGTH,
+};
+
+export default TextArea;

package/Input/index.tsx

@@ -0,0 +1,200 @@
+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 TextArea from './TextArea';
+import {Text} from '../Text';
+import {Image} from '../Image';
+import {Colors} from '../Consts';
+
+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

@@ -0,0 +1,92 @@
+import {StyleSheet} from 'react-native';
+import {Radius, Spacing} from '../Consts';
+
+export default StyleSheet.create({
+  //input style
+  input: {width: '100%', paddingLeft: Spacing.M, height: '100%'},
+  wrapper: {
+    marginVertical: Spacing.M,
+    width: '100%',
+  },
+  container: {
+    borderWidth: 1,
+    borderRadius: Radius.S,
+    marginBottom: Spacing.XS,
+    height: 56,
+    paddingVertical: 8,
+  },
+  smallContainer: {
+    borderRadius: Radius.S,
+    borderWidth: 1,
+    marginBottom: Spacing.XS,
+    height: 48,
+  },
+  floatingView: {
+    position: 'absolute',
+    top: -10,
+    left: Spacing.S,
+    paddingHorizontal: Spacing.S,
+    flexDirection: 'row',
+  },
+  floatingIcon: {width: 16, height: 16, marginLeft: Spacing.XS},
+  errorIcon: {width: 16, height: 16, marginRight: Spacing.XS},
+  errorView: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  inputView: {
+    justifyContent: 'space-between',
+    flex: 1,
+  },
+  iconClose: {
+    width: 16,
+    height: 16,
+  },
+  iconView: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginLeft: Spacing.XS,
+    marginRight: Spacing.M,
+  },
+  icon: {
+    width: 24,
+    height: 24,
+  },
+  iconWrapper: {
+    width: 24,
+    height: 24,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  inputWrapper: {
+    flexDirection: 'row',
+  },
+
+  //text area style
+  textAreaView: {
+    flex: 1,
+  },
+  textArea: {
+    width: '100%',
+    flex: 1,
+    paddingRight: Spacing.XS,
+  },
+  textAreaWrapper: {
+    borderWidth: 1,
+    borderRadius: Radius.S,
+    paddingVertical: Spacing.S,
+    paddingLeft: Spacing.M,
+    paddingRight: Spacing.S,
+  },
+  countingView: {
+    width: '100%',
+    alignItems: 'flex-end',
+    paddingRight: Spacing.XS,
+  },
+  rowArea: {
+    flexDirection: 'row',
+    width: '100%',
+    flex: 1,
+    marginBottom: Spacing.XS,
+  },
+});

package/Input/types.ts

@@ -0,0 +1,23 @@
+import {TextInputProps} from 'react-native';
+
+export type InputSize = 'small' | 'large';
+export interface InputProps extends TextInputProps {
+  size: InputSize;
+  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;
+}

package/Layout/GridSystem.tsx

@@ -0,0 +1,109 @@
+import React, {useContext} from 'react';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {StyleSheet, View} from 'react-native';
+import {ApplicationContext} from '../Navigation';
+import {useGridSystem} from './index';
+import {Colors, Spacing} from '../Consts';
+
+const GridSystem: React.FC<any> = () => {
+  const {theme} = useContext(ApplicationContext);
+  const grid = useGridSystem();
+  const insets = useSafeAreaInsets();
+
+  const list = [];
+  for (let i = 1; i <= grid.numberOfColumns; i++) {
+    list.push(i);
+  }
+
+  return (
+    <>
+      <View
+        pointerEvents="none"
+        style={[
+          styles.gridContainer,
+          insets,
+          {
+            borderColor: theme.colors.error.primary,
+            marginHorizontal: grid.screenPadding,
+          },
+        ]}>
+        {list.map((i, index) => {
+          return (
+            <View style={{flexDirection: 'row'}} key={index.toString()}>
+              {index != -0 && <View style={{width: grid.gutterSize}} />}
+              <View
+                key={index.toString()}
+                pointerEvents="none"
+                style={[
+                  styles.gridColumn,
+                  {
+                    width: grid.sizePerSpan,
+                  },
+                ]}
+              />
+            </View>
+          );
+        })}
+      </View>
+      <View pointerEvents="none" style={styles.dangerLeftContainer} />
+      <View pointerEvents="none" style={styles.dangerRightContainer} />
+      <View
+        pointerEvents="none"
+        style={[styles.dangerTopContainer, {height: insets.top}]}
+      />
+      <View
+        pointerEvents="none"
+        style={[styles.dangerBottomContainer, {height: insets.bottom}]}
+      />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  gridContainer: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    borderWidth: 1,
+  },
+  gridColumn: {
+    height: '100%',
+    opacity: 0.2,
+    backgroundColor: Colors.blue_07,
+  },
+  dangerTopContainer: {
+    opacity: 0.2,
+    backgroundColor: Colors.red_03,
+    width: '100%',
+    top: 0,
+    position: 'absolute',
+  },
+  dangerBottomContainer: {
+    opacity: 0.2,
+    backgroundColor: Colors.red_03,
+    width: '100%',
+    bottom: 0,
+    position: 'absolute',
+  },
+  dangerLeftContainer: {
+    opacity: 0.2,
+    backgroundColor: Colors.red_03,
+    width: Spacing.M,
+    height: '100%',
+    left: 0,
+    position: 'absolute',
+  },
+  dangerRightContainer: {
+    opacity: 0.2,
+    backgroundColor: Colors.red_03,
+    width: Spacing.M,
+    height: '100%',
+    right: 0,
+    position: 'absolute',
+  },
+});
+
+export default GridSystem;

package/Layout/ScreenContainer.tsx

@@ -0,0 +1,78 @@
+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 {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]);
+
+  const renderContent = () => {
+    const results = validateChildren(children, ScreenSection);
+    if (Array.isArray(results)) {
+      return results.map((item, index) => {
+        return (
+          <View
+            key={`ScreenSection${index}`}
+            style={{
+              paddingTop: index != 0 ? 12 : Spacing.S,
+              flex: item.props?.expanded ? 1 : undefined,
+            }}>
+            {item}
+          </View>
+        );
+      });
+    }
+    return results;
+  };
+
+  return (
+    <SafeAreaView
+      style={[
+        Styles.flex,
+        {
+          backgroundColor: theme.colors.background.default,
+        },
+      ]}
+      edges={edges}>
+      <KeyboardAvoidingView
+        style={Styles.flex}
+        keyboardVerticalOffset={headerHeight}
+        enabled={enableKeyboardAvoidingView}
+        behavior={Platform.select({
+          ios: 'padding',
+          android: undefined,
+        })}>
+        <Component style={Styles.flex}>{renderContent()}</Component>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+};
+
+ScreenContainer.defaultProps = {
+  edges: ['bottom', 'left', 'right'],
+  enableKeyboardAvoidingView: false,
+  scrollable: false,
+};
+export default ScreenContainer;