@momo-kits/foundation 0.74.2-react-native.1

package/Input/styles.ts

@@ -0,0 +1,160 @@
+import {StyleSheet} from 'react-native';
+import {Radius, Spacing} from '../Consts';
+import {scaleSize} from '../Text';
+
+export default StyleSheet.create({
+  //input style
+  input: {
+    flex: 1,
+    paddingLeft: Spacing.M,
+    fontSize: scaleSize(15),
+  },
+  wrapper: {
+    width: '100%',
+  },
+  container: {
+    borderWidth: 1,
+    borderRadius: Radius.S,
+    height: 56,
+  },
+  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: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  leadingIconContainer: {
+    marginLeft: Spacing.M,
+    borderRadius: Radius.XS,
+    overflow: 'hidden',
+  },
+  iconView: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginLeft: Spacing.XS,
+    marginRight: Spacing.M,
+  },
+  icon: {
+    marginLeft: Spacing.S
+  },
+  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,
+    paddingVertical: Spacing.XS,
+    fontSize: scaleSize(15),
+  },
+  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,
+    fontSize: scaleSize(15),
+    paddingVertical: Spacing.XS,
+  },
+  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: scaleSize(20),
+    paddingVertical: Spacing.S,
+    fontWeight: 'bold',
+  },
+
+  //OTP
+  otpWrapper: {
+    width: '100%',
+    marginTop: Spacing.M,
+  },
+  otpInput: {
+    height: scaleSize(56),
+    borderRadius: Radius.S,
+    borderWidth: 1,
+  },
+  otpFloatingView: {
+    position: 'absolute',
+    top: -Spacing.S,
+    alignSelf: 'center',
+    paddingHorizontal: Spacing.S,
+  },
+  otpInputsView: {
+    width: '100%',
+    height: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

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: string[] = [];
+  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] as string);
+    }
+    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,180 @@
+import React, {Fragment, useContext} from 'react';
+import {Dimensions, View, ViewProps} from 'react-native';
+import {useGridSystem, validateChildren} from './utils';
+import {GridContextProps} from './types';
+import {GridContext, GridSystem} from './index';
+import Item from './Item';
+import {Image} from '../Image';
+import {ApplicationContext} from '../Application';
+import styles from './styles';
+import {Colors, Radius, Shadow, Spacing} from '../Consts';
+import ItemList from './ItemList';
+
+export interface CardProps extends ViewProps {
+  /**
+   * Optional. Background image for the card.
+   */
+  backgroundImage?: string;
+
+  /**
+   * Optional. Use shadow for the card.
+   */
+  useShadow?: boolean;
+}
+
+const Card: React.FC<CardProps> = ({
+  children,
+  style,
+  backgroundImage,
+  useShadow = false,
+  ...props
+}) => {
+  const {showGrid, theme} = useContext(ApplicationContext);
+  const {numberOfColumns} = useGridSystem();
+
+  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,
+    sizePerSpan,
+    getSizeSpan: span => {
+      return span * sizePerSpan + (span - 1) * gutterSize;
+    },
+  };
+
+  /**
+   * render overlay only dev mode
+   */
+  const renderOverlay = () => {
+    return (
+      <>
+        <GridSystem
+          width={widthSection}
+          gutterSize={Spacing.S}
+          screenGrid={false}
+          gridColor={Colors.red_01}
+        />
+        <View pointerEvents={'none'} style={styles.boxGridCard} />
+      </>
+    );
+  };
+
+  /**
+   * 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[] = [];
+      const arrayChild = children.filter(item => !!item);
+      for (let i = 0; i < arrayChild.length; ++i) {
+        const item = arrayChild[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 == arrayChild.length - 1) {
+          cursor += 1;
+          element.push(addRowView(rows, cursor, true));
+        }
+      }
+    } else {
+      element.push(children);
+      if (children?.type == Fragment) {
+        return renderView(children?.props.children);
+      }
+    }
+    return element;
+  };
+
+  return (
+    <GridContext.Provider value={gridContext}>
+      <View
+        {...props}
+        style={[
+          {backgroundColor: theme.colors.background.surface},
+          style,
+          styles.protectedStyle,
+          styles.card,
+          {
+            width: widthSection,
+            marginHorizontal: margin,
+          },
+          !!backgroundImage && {backgroundColor: undefined},
+          useShadow && Shadow.Light,
+        ]}>
+        {!!backgroundImage && (
+          <Image
+            source={{uri: backgroundImage}}
+            style={[
+              styles.imageBackground,
+              {
+                width: widthSection,
+                borderRadius: Radius.M,
+              },
+            ]}
+          />
+        )}
+        {renderView(validateChildren(children, [Item, ItemList]))}
+        {showGrid && renderOverlay()}
+      </View>
+    </GridContext.Provider>
+  );
+};
+
+Card.displayName = 'Card';
+
+export default Card;

package/Layout/GridSystem.tsx

@@ -0,0 +1,136 @@
+import React, {useContext} from 'react';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {Dimensions, StyleSheet, View} from 'react-native';
+import {ApplicationContext} from '../Application';
+import {Colors, Spacing} from '../Consts';
+import {GridContextProps} from './types';
+import {useGridSystem} from './utils';
+
+const GridSystem: React.FC<any> = ({
+  width = Dimensions.get('window').width,
+  useMargin = true,
+  gutterSize = Spacing.M,
+  screenGrid = true,
+  gridColor = Colors.blue_07,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const {numberOfColumns} = useGridSystem();
+
+  const margin = useMargin ? Spacing.M : 0;
+  const widthSection = width - margin * 2;
+  const totalGutterSize = gutterSize * (numberOfColumns - 1);
+  const sizePerSpan = (widthSection - totalGutterSize) / numberOfColumns;
+
+  const grid: GridContextProps = {
+    numberOfColumns,
+    gutterSize,
+    sizePerSpan,
+    getSizeSpan: span => {
+      return span * sizePerSpan + (span - 1) * gutterSize;
+    },
+  };
+  const insets = useSafeAreaInsets();
+
+  const list: number[] = [];
+  for (let i = 1; i <= grid.numberOfColumns; i++) {
+    list.push(i);
+  }
+
+  return (
+    <>
+      <View
+        pointerEvents="none"
+        style={[
+          styles.gridContainer,
+          screenGrid && insets,
+          {
+            borderColor: theme.colors.error.primary,
+            marginHorizontal: margin,
+            top: Spacing.M,
+            bottom: Spacing.M,
+          },
+        ]}>
+        {list.map((_, index) => {
+          return (
+            <View style={{flexDirection: 'row'}} key={index.toString()}>
+              {index != -0 && <View style={{width: grid.gutterSize}} />}
+              <View
+                key={`Grid${index.toString()}`}
+                pointerEvents="none"
+                style={[
+                  styles.gridColumn,
+                  {
+                    width: grid.sizePerSpan,
+                    backgroundColor: gridColor,
+                  },
+                ]}
+              />
+            </View>
+          );
+        })}
+      </View>
+      {screenGrid && (
+        <>
+          <View pointerEvents="none" style={styles.dangerLeftContainer} />
+          <View pointerEvents="none" style={styles.dangerRightContainer} />
+          <View
+            pointerEvents="none"
+            style={[styles.dangerTopContainer, {height: Spacing.M}]}
+          />
+          <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,
+  },
+  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,56 @@
+import React, {useContext} from 'react';
+import {View, ViewProps} from 'react-native';
+
+import {GridContext} from './index';
+import {ApplicationContext} from '../Application';
+import styles from './styles';
+
+export type SpanNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+export interface ItemProps extends ViewProps {
+  /**
+   * Represents the width of the Card component in terms of span numbers (1-12).
+   */
+  widthSpan?: SpanNumber;
+
+  /**
+   * Optional. Represents the height of the Card component in terms of span numbers (1-12).
+   */
+  heightSpan?: SpanNumber;
+}
+
+const Item: React.FC<ItemProps> = ({
+  widthSpan,
+  heightSpan,
+  children,
+  style,
+}) => {
+  const {showGrid} = useContext(ApplicationContext);
+  const grid = useContext(GridContext);
+
+  /**
+   * render overlay view only dev mode
+   */
+  const renderOverlay = () => {
+    return <View pointerEvents={'none'} style={styles.boxGrid} />;
+  };
+
+  return (
+    <View
+      style={[
+        style,
+        styles.item,
+        {
+          width: grid.getSizeSpan(widthSpan ?? grid.numberOfColumns),
+          height: heightSpan ? grid.getSizeSpan(heightSpan) : undefined,
+        },
+      ]}>
+      {children}
+      {showGrid && renderOverlay()}
+    </View>
+  );
+};
+
+Item.displayName = 'Item';
+
+export default Item;

package/Layout/ItemList.tsx

@@ -0,0 +1,55 @@
+import React, {forwardRef, useContext} from 'react';
+import {FlatList, FlatListProps, View} from 'react-native';
+import Item, {SpanNumber} from './Item';
+import {GridContext} from './index';
+import styles from './styles';
+
+export interface ItemListProps extends FlatListProps<any> {
+  /**
+   * Represents the width of the Card component in terms of span numbers (1-12).
+   */
+  widthSpan?: SpanNumber;
+}
+
+const ItemList = forwardRef(
+  (
+    {
+      renderItem,
+      widthSpan,
+      style,
+      contentContainerStyle,
+      ...props
+    }: ItemListProps,
+    ref,
+  ) => {
+    const {gutterSize, numberOfColumns} = useContext(GridContext);
+    const widthItem = (widthSpan ?? numberOfColumns) as SpanNumber;
+    const numColumns = Math.floor(numberOfColumns / widthItem);
+    const indexBegin = props?.data?.map((_i, index) => index * numColumns);
+    const _renderItem = (item: any) => {
+      if (indexBegin?.includes(item?.index)) {
+        return <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>;
+      }
+      return (
+        <View style={{paddingLeft: gutterSize}}>
+          <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>
+        </View>
+      );
+    };
+
+    return (
+      <FlatList
+        ref={ref as React.RefObject<FlatList>}
+        {...props}
+        numColumns={numColumns}
+        renderItem={_renderItem}
+        horizontal={false}
+        ItemSeparatorComponent={() => <View style={{height: gutterSize}} />}
+        style={[style, styles.protectedStyle]}
+        contentContainerStyle={[contentContainerStyle, styles.protectedStyle]}
+      />
+    );
+  },
+);
+
+export default ItemList;

package/Layout/ItemSectionList.tsx

@@ -0,0 +1,39 @@
+import React, {FC, useContext} from 'react';
+import {SectionList, SectionListProps, View} from 'react-native';
+import Item, {SpanNumber} from './Item';
+import {GridContext} from './index';
+import styles from './styles';
+
+export interface ItemSectionListProps extends SectionListProps<any> {
+  /**
+   * Represents the width of the Card component in terms of span numbers (1-12).
+   */
+  widthSpan?: SpanNumber;
+}
+
+const ItemSectionList: FC<ItemSectionListProps> = ({
+  renderItem,
+  widthSpan,
+  style,
+  contentContainerStyle,
+  ...props
+}) => {
+  const {gutterSize, numberOfColumns} = useContext(GridContext);
+  const widthItem = (widthSpan ?? numberOfColumns) as SpanNumber;
+  const _renderItem = (item: any) => {
+    return <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>;
+  };
+
+  return (
+    <SectionList
+      {...props}
+      renderItem={_renderItem}
+      horizontal={false}
+      ItemSeparatorComponent={() => <View style={{height: gutterSize}} />}
+      style={[style, styles.protectedStyle]}
+      contentContainerStyle={[contentContainerStyle, styles.protectedStyle]}
+    />
+  );
+};
+
+export default ItemSectionList;