@momo-kits/foundation 0.75.1-beta.10

package/Input/styles.ts

@@ -0,0 +1,122 @@
+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: {
+    width: '100%',
+  },
+  container: {
+    borderWidth: 1,
+    borderRadius: Radius.S,
+    height: 56,
+    paddingVertical: 8,
+  },
+  smallContainer: {
+    borderRadius: Radius.S,
+    borderWidth: 1,
+    height: 48,
+  },
+  floatingView: {
+    position: 'absolute',
+    top: -10,
+    left: Spacing.S,
+    paddingHorizontal: Spacing.S,
+    flexDirection: 'row',
+  },
+  floatingIcon: {marginLeft: Spacing.XS},
+  errorIcon: {marginRight: Spacing.XS},
+  errorView: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: Spacing.XS,
+  },
+  inputView: {
+    justifyContent: 'space-between',
+    flex: 1,
+  },
+  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',
+    marginTop: Spacing.S,
+  },
+
+  //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,
+  },
+
+  //searchInput
+  searchInputWrapper: {
+    flexDirection: 'row',
+    borderRadius: Radius.XL,
+    borderWidth: 1,
+    paddingHorizontal: Spacing.S,
+    alignItems: 'center',
+    flex: 1,
+  },
+  searchInput: {
+    height: 36,
+    marginLeft: Spacing.S,
+    flex: 1,
+  },
+  searchInputView: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  iconSearchInput: {
+    marginLeft: Spacing.S,
+  },
+  searchInputContainer: {flexDirection: 'row', alignItems: 'center'},
+  textButton: {marginLeft: Spacing.L},
+  divider: {
+    width: 1,
+    marginLeft: Spacing.XS,
+  },
+  moneyInput: {
+    width: '100%',
+    paddingLeft: Spacing.M,
+    height: '100%',
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+});

package/Input/utils.ts

@@ -0,0 +1,69 @@
+const formatNumberToMoney = (number: number, currency = '') => {
+  if (!number || isNaN(number) || Number(number) === 0) {
+    return `0${currency}`;
+  }
+
+  const array = [];
+  let result = '';
+  let isNegative = false;
+
+  if (number < 0) {
+    isNegative = true;
+  }
+
+  const numberString = Math.abs(number).toString();
+  if (numberString.length < 3) {
+    return numberString + currency;
+  }
+
+  let count = 0;
+  for (let i = numberString.length - 1; i >= 0; i -= 1) {
+    count += 1;
+    if (numberString[i] === '.' || numberString[i] === ',') {
+      array.push(',');
+      count = 0;
+    } else {
+      array.push(numberString[i]);
+    }
+    if (count === 3 && i >= 1) {
+      array.push('.');
+      count = 0;
+    }
+  }
+
+  for (let i = array.length - 1; i >= 0; i -= 1) {
+    result += array[i];
+  }
+
+  if (isNegative) {
+    result = `-${result}`;
+  }
+
+  return result + currency;
+};
+
+const formatMoneyToNumber = (money: string, currencyUnit: string) => {
+  if (money && money.length > 0) {
+    const moneyString = money
+      .replace(currencyUnit, '')
+      .replace(/,/g, '')
+      .replace(/đ/g, '')
+      .replace(/\./g, '')
+      .replace(/ /g, '');
+    const number = Number(moneyString);
+    if (isNaN(number)) {
+      return 0;
+    }
+    return number;
+  }
+
+  return Number(money);
+};
+const checkTyping = (text: string, value: boolean, setValue: any) => {
+  let typing = text?.length > 0;
+  if (typing != value) {
+    setValue(typing);
+  }
+};
+
+export {formatMoneyToNumber, formatNumberToMoney, checkTyping};

package/Layout/Card.tsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import {Dimensions, View} from 'react-native';
+import {validateChildren} from './utils';
+import {CardProps, GridContextProps} from './types';
+import {GridContext} from './index';
+import {GRIDVIEW} from '../Consts';
+import Item from './Item';
+
+const Card: React.FC<CardProps> = ({children, style}) => {
+  const numberOfColumns = 12;
+  const gutterSize = 8;
+  const margin = 12;
+
+  const widthSection = Dimensions.get('window').width - margin * 2;
+  const totalGutterSize = gutterSize * (numberOfColumns - 1);
+  const sizePerSpan = (widthSection - totalGutterSize - 24) / numberOfColumns;
+
+  const gridContext: GridContextProps = {
+    numberOfColumns,
+    gutterSize,
+    margin,
+    sizePerSpan,
+    getSizeSpan: span => {
+      return span * sizePerSpan + (span - 1) * gutterSize;
+    },
+  };
+  /**
+   * 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={`Item${cursor}`}
+        style={{
+          flexDirection: 'row',
+          marginBottom: endRow ? 0 : gridContext.gutterSize,
+        }}>
+        {rows.map((i: React.ReactElement, index: number) => {
+          return (
+            <View key={`Item${cursor}${index}`} style={{flexDirection: 'row'}}>
+              {index != 0 && (
+                <View style={{width: gridContext.gutterSize}}></View>
+              )}
+              {i}
+            </View>
+          );
+        })}
+      </View>
+    );
+  };
+
+  /**
+   * render children content for card
+   * @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 <= gridContext.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;
+  };
+
+  const styles: any = style ?? {};
+
+  return (
+    <GridContext.Provider value={gridContext}>
+      <View
+        accessibilityLabel={`Card`}
+        style={{
+          ...styles,
+          width: widthSection,
+          marginHorizontal: gridContext.margin,
+          padding: 12,
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+        }}>
+        {renderView(validateChildren(children, [Item]))}
+        {GRIDVIEW && renderOverlay()}
+      </View>
+    </GridContext.Provider>
+  );
+};
+
+Card.displayName = 'Card';
+
+export default Card;

package/Layout/GridSystem.tsx

@@ -0,0 +1,124 @@
+import React, {useContext} from 'react';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {Dimensions, StyleSheet, View} from 'react-native';
+import {ApplicationContext} from '../Navigation';
+import {Colors, Spacing} from '../Consts';
+import {GridContextProps} from './types';
+
+const GridSystem: React.FC = () => {
+  const {theme} = useContext(ApplicationContext);
+  const numberOfColumns = 12;
+  const gutterSize = 12;
+  const margin = 12;
+  const widthSection = Dimensions.get('window').width - margin * 2;
+  const totalGutterSize = gutterSize * (numberOfColumns - 1);
+  const sizePerSpan = (widthSection - totalGutterSize) / numberOfColumns;
+
+  const grid: GridContextProps = {
+    numberOfColumns,
+    gutterSize,
+    margin,
+    sizePerSpan,
+    getSizeSpan: span => {
+      return span * sizePerSpan + (span - 1) * gutterSize;
+    },
+  };
+  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.margin,
+          },
+        ]}>
+        {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/Item.tsx

@@ -0,0 +1,60 @@
+import React, {useContext} from 'react';
+import {View} from 'react-native';
+
+import {ItemProps} from './types';
+import {GridContext} from './index';
+import {GRIDVIEW} from '../Consts';
+
+const Item: React.FC<ItemProps> = ({
+  widthSpan = 12,
+  heightSpan,
+  children,
+  style,
+}) => {
+  const grid = useContext(GridContext);
+
+  /**
+   * render overlay view only dev mode
+   */
+  const renderOverlay = () => {
+    return (
+      <View
+        pointerEvents={'none'}
+        style={{
+          position: 'absolute',
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          borderColor: 'red',
+          borderWidth: 1,
+        }}
+      />
+    );
+  };
+
+  const styles: any = style ?? {};
+
+  return (
+    <View
+      accessibilityLabel={`Item`}
+      style={{
+        ...styles,
+        width: grid.getSizeSpan(widthSpan),
+        height: heightSpan ? grid.getSizeSpan(heightSpan) : undefined,
+        overflow: 'hidden',
+        margin: undefined,
+        marginTop: undefined,
+        marginBottom: undefined,
+        marginLeft: undefined,
+        marginRight: undefined,
+      }}>
+      {children}
+      {GRIDVIEW && renderOverlay()}
+    </View>
+  );
+};
+
+Item.displayName = 'Item';
+
+export default Item;

package/Layout/ScreenContainer.tsx

@@ -0,0 +1,121 @@
+import {Animated, KeyboardAvoidingView, Platform, View} from 'react-native';
+import {useHeaderHeight} from '@react-navigation/stack';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import React, {useContext} from 'react';
+import {ScreenContainerProps} from '../Navigation/types';
+import {Spacing, Styles} from '../Consts';
+import {Section, Card, validateChildren} from './index';
+import {ApplicationContext} from '../Navigation';
+
+const ScreenContainer: React.FC<ScreenContainerProps> = ({
+  children,
+  enableKeyboardAvoidingView,
+  scrollable,
+  scrollY,
+  headerBackground,
+  scrollViewProps,
+  footerComponent: Footer,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const insets = useSafeAreaInsets();
+  let marginHeader = 0;
+  let handleScroll;
+  let imageAnimatedStyle = {};
+  let Component: any = View;
+  if (scrollable) {
+    Component = Animated.ScrollView;
+  }
+  if (scrollY) {
+    marginHeader = useHeaderHeight();
+    imageAnimatedStyle = {
+      transform: [
+        {
+          scale: scrollY.interpolate?.({
+            inputRange: [-300, 0, 1],
+            outputRange: [1.75, 1, 1],
+            extrapolate: 'clamp',
+          }),
+        },
+      ],
+    };
+    handleScroll = Animated.event(
+      [{nativeEvent: {contentOffset: {y: scrollY}}}],
+      {useNativeDriver: true},
+    );
+  }
+
+  /**
+   * build content for screen
+   */
+  const renderContent = () => {
+    const results = validateChildren(children, [Section, Card]);
+    if (Array.isArray(results)) {
+      return results.map((item, index) => {
+        return (
+          <View
+            key={`ScreenItem${index}`}
+            style={{
+              marginTop: Spacing.M,
+              flex: item.props?.expanded ? 1 : undefined,
+            }}>
+            {item}
+          </View>
+        );
+      });
+    }
+    return results;
+  };
+
+  return (
+    <View style={Styles.flex} accessibilityLabel={`ScreenContainer`}>
+      <View
+        style={{
+          position: 'absolute',
+          height: 300,
+          width: '100%',
+        }}>
+        {!!headerBackground && (
+          <Animated.Image
+            source={{
+              uri: headerBackground,
+            }}
+            style={{
+              aspectRatio: 1.3,
+              ...imageAnimatedStyle,
+            }}
+          />
+        )}
+      </View>
+      <KeyboardAvoidingView
+        style={Styles.flex}
+        enabled={enableKeyboardAvoidingView}
+        behavior={Platform.select({
+          ios: 'padding',
+          android: undefined,
+        })}>
+        <Component
+          {...scrollViewProps}
+          onScroll={handleScroll}
+          style={[Styles.flex, {marginTop: marginHeader}]}>
+          {renderContent()}
+        </Component>
+        {Footer && (
+          <View
+            style={{
+              paddingTop: Spacing.S,
+              paddingBottom: insets.bottom,
+              backgroundColor: theme.colors.background.surface,
+            }}>
+            <Section>{Footer}</Section>
+          </View>
+        )}
+      </KeyboardAvoidingView>
+    </View>
+  );
+};
+
+ScreenContainer.defaultProps = {
+  enableKeyboardAvoidingView: false,
+  scrollable: false,
+};
+export default ScreenContainer;