@momo-kits/foundation 1.0.0 → 1.0.3

package/Input/TextArea.tsx

@@ -0,0 +1,162 @@
+import React, {FC, useContext, useRef, useState} from 'react';
+import {
+  NativeSyntheticEvent,
+  TextInput,
+  TextInputFocusEventData,
+  TextInputProps,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import styles from './styles';
+import {Image} from '../Image';
+import {Text} from '../Text';
+import {ApplicationContext} from '../Navigation';
+import {getBorderColor, renderFloatingView} from './common';
+import {TextAreaProps} from './index';
+
+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 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(focused, errorMessage, disabled),
+          styles.textAreaWrapper,
+          {
+            height: height || DEFAULT_HEIGHT,
+            backgroundColor: theme.colors.background.surface,
+          },
+        ]}>
+        {renderFloatingView(
+          floatingValue,
+          floatingIconColor,
+          disabled,
+          floatingIcon,
+        )}
+        <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/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

@@ -0,0 +1,26 @@
+import Input from './Input';
+import TextArea from './TextArea';
+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;
+}
+
+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/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 = () => {
+  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,84 @@
+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;
+  }
+
+  /**
+   * 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)) {
+      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;

package/Layout/ScreenSection.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import {View} from 'react-native';
+import {useGridSystem, validateChildren} from './utils';
+import SectionItem from './SectionItem';
+import {ScreenSectionProps} from './types';
+
+const ScreenSection: React.FC<ScreenSectionProps> = ({children}) => {
+  const grid = useGridSystem();
+
+  /**
+   * render overlay only dev mode
+   */
+  const renderOverlay = () => {
+    return (
+      <View
+        pointerEvents={'none'}
+        style={{
+          position: 'absolute',
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          borderColor: 'red',
+          borderWidth: 1,
+        }}
+      />
+    );
+  };
+
+  /**
+   * build a row view in side session
+   * @param rows
+   * @param cursor
+   * @param endRow
+   */
+  const addRowView = (
+    rows: any[],
+    cursor: number = 0,
+    endRow: boolean = false,
+  ) => {
+    return (
+      <View
+        key={`SectionItem${cursor}`}
+        style={{
+          flexDirection: 'row',
+          marginBottom: endRow ? 0 : grid.gutterSize,
+        }}>
+        {rows.map((i: React.ReactElement, index: number) => {
+          return (
+            <View
+              key={`SectionItem${cursor}${index}`}
+              style={{flexDirection: 'row'}}>
+              {index != 0 && <View style={{width: grid.gutterSize}}></View>}
+              {i}
+            </View>
+          );
+        })}
+      </View>
+    );
+  };
+
+  /**
+   * render children content for session
+   * @param children
+   */
+  const renderView = (
+    children: any,
+  ): React.ReactElement | React.ReactElement[] => {
+    const element: React.ReactElement | React.ReactElement[] = [];
+    if (Array.isArray(children)) {
+      let cursor = 0;
+      let rows: any[] = [];
+      for (let i = 0; i < children.length; ++i) {
+        const item = children[i];
+        const totalSpan = rows
+          .concat([item])
+          .map(i => i.props?.widthSpan)
+          .reduce((previousValue, currentValue) => {
+            return previousValue + currentValue;
+          });
+
+        if (totalSpan <= grid.numberOfColumns) {
+          rows.push(item);
+        } else {
+          cursor += 1;
+          element.push(addRowView(rows, cursor));
+          rows = [item];
+        }
+
+        if (i == children.length - 1) {
+          cursor += 1;
+          element.push(addRowView(rows, cursor, true));
+        }
+      }
+    } else {
+      element.push(children);
+    }
+    return element;
+  };
+
+  return (
+    <View
+      style={{
+        width: grid.getSizeSpan(),
+        marginHorizontal: grid.screenPadding,
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+      }}>
+      {renderView(validateChildren(children, SectionItem))}
+      {grid.isDevMode && renderOverlay()}
+    </View>
+  );
+};
+
+ScreenSection.displayName = 'ScreenSection';
+
+export default ScreenSection;