@momo-kits/foundation 1.0.10 → 1.0.11

package/Image/index.tsx

@@ -3,7 +3,7 @@ import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
 import FastImage from 'react-native-fast-image';
 import styles from './styles';
 import {ApplicationContext} from '../Navigation';
-import {ContentLoader} from '../ContentLoader';
+import {Skeleton} from '../Skeleton';
 import {Icon} from '../Icon';
 import {Styles} from '../Consts';
 import {FastImagePropsWithoutStyle} from './types';
@@ -24,7 +24,7 @@ const Image: React.FC<ImageProps> = ({style, source, ...rest}) => {
   const renderContent = () => {
     if (loading || fail) {
       let content = (
-        <ContentLoader style={[StyleSheet.absoluteFill, styles.image]} />
+        <Skeleton style={[StyleSheet.absoluteFill, styles.image]} />
       );
       if (fail) {
         content = (

package/Input/Input.tsx

@@ -9,7 +9,7 @@ import {
 import {ApplicationContext} from '../Navigation';
 import styles from './styles';
 import {Image} from '../Image';
-import {ErrorView, FloatingView, getBorderColor} from './common';
+import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputProps} from './index';
 import {Icon} from '../Icon';
 
@@ -36,17 +36,12 @@ const Input: FC<InputProps> = ({
 
   const onClearText = () => {
     inputRef?.current?.clear();
+    _onChangeText('');
   };
 
   const _onChangeText = (text: string) => {
     onChangeText?.(text);
   };
-  const getSizeStyle = () => {
-    if (size === 'small') {
-      return styles.smallContainer;
-    }
-    return styles.container;
-  };
 
   const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
     setFocused(true);
@@ -73,7 +68,7 @@ const Input: FC<InputProps> = ({
     return (
       <View
         style={[
-          getSizeStyle(),
+          getSizeStyle(size),
           getBorderColor(focused, errorMessage, disabled),
           styles.inputWrapper,
           {backgroundColor: theme.colors.background.surface},

package/Input/{MoneyInput.tsx → InputMoney.tsx}

@@ -9,15 +9,16 @@ import {
 import {ApplicationContext} from '../Navigation';
 import styles from './styles';
 import {Image} from '../Image';
-import {ErrorView, FloatingView, getBorderColor} from './common';
-import {MoneyInputProps} from './index';
+import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
+import {InputMoneyProps} from './index';
 import {Icon} from '../Icon';
+import {formatMoneyToNumber, formatNumberToMoney} from './utils';
 
-const MoneyInput: FC<MoneyInputProps> = ({
+const InputMoney: FC<InputMoneyProps> = ({
   onChangeText,
   floatingValue,
   floatingIcon,
-  size,
+  size = 'small',
   onBlur,
   onFocus,
   errorMessage,
@@ -30,29 +31,20 @@ const MoneyInput: FC<MoneyInputProps> = ({
 }) => {
   const {theme} = useContext(ApplicationContext);
   const [focused, setFocused] = useState(false);
-  const [value, setValue] = useState('');
   const inputRef = useRef<any>(null);
-
+  const [value, setValue] = useState('');
   const onClearText = () => {
     inputRef?.current?.clear();
-  };
-
-  const formatNumberWithDots = (num: string) => {
-    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+    setValue('');
+    onChangeText?.('');
   };
   const _onChangeText = (text: string) => {
-    let numericValue = text.replace(/[^0-9]/g, '');
-    if (numericValue === '') numericValue = '0';
-    const formattedNumber = formatNumberWithDots(numericValue);
-    const formattedValue = `${formattedNumber}đ`;
-    onChangeText?.(formattedValue);
-    setValue(formattedValue);
-  };
-  const getSizeStyle = () => {
-    if (size === 'small') {
-      return styles.smallContainer;
+    if (text.length < value.length && value.indexOf(text) === 0) {
+      text = value.slice(0, -2) + 'đ';
     }
-    return styles.container;
+    const valueFormat = formatMoneyToNumber(text, 'đ');
+    setValue(formatNumberToMoney(valueFormat, 'đ'));
+    onChangeText?.(formatMoneyToNumber(text, 'đ').toString());
   };
 
   const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
@@ -80,7 +72,7 @@ const MoneyInput: FC<MoneyInputProps> = ({
     return (
       <View
         style={[
-          getSizeStyle(),
+          getSizeStyle(size),
           getBorderColor(focused, errorMessage, disabled),
           styles.inputWrapper,
           {backgroundColor: theme.colors.background.surface},
@@ -144,8 +136,4 @@ const MoneyInput: FC<MoneyInputProps> = ({
   );
 };
 
-MoneyInput.defaultProps = {
-  size: 'small',
-};
-
-export default MoneyInput;
+export default InputMoney;

package/Input/{SearchInput.tsx → InputSearch.tsx}

@@ -6,7 +6,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {SearchInputProps} from './index';
+import {InputSearchProps} from './index';
 import {getBorderColor} from './common';
 import {ApplicationContext} from '../Navigation';
 import styles from './styles';
@@ -14,7 +14,7 @@ import {Icon} from '../Icon';
 import {Image} from '../Image';
 import {Text} from '../Text';
 
-const SearchInput: FC<SearchInputProps> = ({
+const InputSearch: FC<InputSearchProps> = ({
   errorMessage,
   disabled,
   placeholder,
@@ -47,6 +47,7 @@ const SearchInput: FC<SearchInputProps> = ({
 
   const onClearText = () => {
     inputRef?.current?.clear();
+    _onChangeText('');
   };
 
   const _onChangeText = (text: string) => {
@@ -148,4 +149,4 @@ const SearchInput: FC<SearchInputProps> = ({
   );
 };
 
-export default SearchInput;
+export default InputSearch;

package/Input/{TextArea.tsx → InputTextArea.tsx}

@@ -16,10 +16,10 @@ import {
   getBorderColor,
   MAX_LENGTH,
 } from './common';
-import {TextAreaProps} from './index';
+import {InputTextAreaProps} from './index';
 import {Icon} from '../Icon';
 
-const TextArea: FC<TextAreaProps> = props => {
+const InputTextArea: FC<InputTextAreaProps> = props => {
   const {theme} = useContext(ApplicationContext);
   const {
     errorMessage,
@@ -44,6 +44,7 @@ const TextArea: FC<TextAreaProps> = props => {
 
   const onClearText = () => {
     inputRef?.current?.clear();
+    _onChangeText('');
   };
 
   const _onChangeText = (text: string) => {
@@ -84,7 +85,7 @@ const TextArea: FC<TextAreaProps> = props => {
       <View
         style={[
           getBorderColor(focused, errorMessage, disabled),
-          styles.textAreaWradpper,
+          styles.textAreaWrapper,
           {
             height: height || DEFAULT_HEIGHT,
             backgroundColor: theme.colors.background.surface,
@@ -144,8 +145,8 @@ const TextArea: FC<TextAreaProps> = props => {
   );
 };
 
-TextArea.defaultProps = {
+InputTextArea.defaultProps = {
   maxLength: MAX_LENGTH,
 };
 
-export default TextArea;
+export default InputTextArea;

package/Input/common.tsx

@@ -41,6 +41,12 @@ export const getBorderColor = (
   return {borderColor};
 };
 
+export const getSizeStyle = (size?: 'small' | 'large') => {
+  if (size === 'small') {
+    return styles.smallContainer;
+  }
+  return styles.container;
+};
 export const ErrorView: FC<{errorMessage?: string}> = ({errorMessage}) => {
   const {theme} = useContext(ApplicationContext);
   const errorColor = theme.colors.error.primary;

package/Input/index.tsx

@@ -1,7 +1,7 @@
 import Input from './Input';
-import TextArea from './TextArea';
-import SearchInput from './SearchInput';
-import MoneyInput from './MoneyInput';
+import InputTextArea from './InputTextArea';
+import InputSearch from './InputSearch';
+import InputMoney from './InputMoney';
 import {TextInputProps} from 'react-native';
 
 export interface InputProps extends TextInputProps {
@@ -23,16 +23,16 @@ type InputPropsWithoutSizeAndIcon = Omit<
 type InputPropsWithoutRequiredAndSize = Omit<InputProps, 'required' | 'size'>;
 type InputPropsWithoutPlaceholder = Omit<InputProps, 'placeholder'>;
 
-export interface TextAreaProps extends InputPropsWithoutSizeAndIcon {
+export interface InputTextAreaProps extends InputPropsWithoutSizeAndIcon {
   height?: number;
 }
 
-export interface SearchInputProps extends InputPropsWithoutRequiredAndSize {
+export interface InputSearchProps extends InputPropsWithoutRequiredAndSize {
   buttonText?: string;
   showButtonText?: boolean;
   showIcon?: boolean;
 }
 
-export interface MoneyInputProps extends InputPropsWithoutPlaceholder {}
+export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}
 
-export {Input, TextArea, SearchInput, MoneyInput};
+export {Input, InputTextArea, InputSearch, InputMoney};

package/Input/utils.ts

@@ -0,0 +1,63 @@
+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);
+};
+
+export {formatMoneyToNumber, formatNumberToMoney};

package/Layout/ScreenContainer.tsx

@@ -11,6 +11,7 @@ const ScreenContainer: React.FC<ScreenContainerProps> = ({
   edges,
   enableKeyboardAvoidingView,
   scrollable,
+  scrollViewProps,
 }) => {
   let Component: any = View;
   const headerHeight = useHeaderHeight();
@@ -50,7 +51,9 @@ const ScreenContainer: React.FC<ScreenContainerProps> = ({
           ios: 'padding',
           android: undefined,
         })}>
-        <Component style={Styles.flex}>{renderContent()}</Component>
+        <Component {...scrollViewProps} style={Styles.flex}>
+          {renderContent()}
+        </Component>
       </KeyboardAvoidingView>
     </SafeAreaView>
   );

package/Navigation/BottomTab.tsx

@@ -0,0 +1,41 @@
+import React, {FC} from 'react';
+import {View} from 'react-native';
+import {BottomTabItemProps, BottomTabProps} from './types';
+import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import {Icon} from '@momo-kits/foundation';
+
+const Tab = createBottomTabNavigator();
+
+const BottomTab: FC<BottomTabProps> = ({tabs}) => {
+  return (
+    <Tab.Navigator>
+      {tabs.map((item, index) => {
+        return (
+          // @ts-ignore
+          <Tab.Screen
+            key={`${item.label}-${index}`}
+            name={item.label}
+            component={item.component}
+            options={{
+              tabBarLabel: item.label,
+              tabBarBadge: item?.badgeLabel,
+              tabBarBadgeStyle: {
+                borderColor: 'white',
+                borderWidth: 2,
+                fontSize: 10,
+                lineHeight: 14,
+                fontWeight: 'bold',
+                alignSelf: 'center',
+              },
+              tabBarIcon: ({color, size}) => (
+                <Icon source={item.icon} color={color} size={size} />
+              ),
+            }}
+          />
+        );
+      })}
+    </Tab.Navigator>
+  );
+};
+
+export default BottomTab;

package/Navigation/Components.tsx

@@ -88,19 +88,9 @@ const HeaderLeft: React.FC<any> = ({tintColor}) => {
     }
   };
 
-  let backgroundColor;
-  if (tintColor != Colors.black_01) {
-    backgroundColor = theme.colors.background.surface;
-  }
-
   return (
     <View style={styles.headerLeft}>
-      <NavigationButton
-        icon="ic_back"
-        tintColor={tintColor}
-        backgroundColor={backgroundColor}
-        onPress={goBack}
-      />
+      <NavigationButton icon="ic_back" tintColor={tintColor} onPress={goBack} />
     </View>
   );
 };
@@ -206,7 +196,6 @@ const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
       <NavigationButton
         icon="addFavorite"
         tintColor={tintColor}
-        backgroundColor={backgroundColor}
         onPress={() => {}}
       />
       <View

package/Navigation/ModalScreen.tsx

@@ -121,7 +121,11 @@ const BottomSheet: React.FC<BottomSheetParams> = ({navigation, route}) => {
       <BottomSheetModal
         ref={bottomSheetRef}
         snapPoints={snapPoints}
-        onDismiss={navigation.pop}
+        onDismiss={() => {
+          if (mountedRef.current) {
+            navigation.pop();
+          }
+        }}
         handleComponent={null}
         backdropComponent={backdropComponent}>
         <View style={{paddingBottom: bottom}}>

package/Navigation/NavigationButton.tsx

@@ -3,6 +3,7 @@ import React, {useContext} from 'react';
 import {NavigationButtonProps} from './types';
 import {ApplicationContext} from './index';
 import {Icon} from '../Icon';
+import {Colors} from '../Consts';
 
 const NavigationButton: React.FC<NavigationButtonProps> = ({
   icon,
@@ -12,6 +13,10 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   useBorder = true,
 }) => {
   const {theme} = useContext(ApplicationContext);
+  if (!backgroundColor && tintColor != Colors.black_01) {
+    backgroundColor = theme.colors.background.surface;
+  }
+
   return (
     <TouchableOpacity
       style={[

package/Navigation/index.ts

@@ -2,6 +2,7 @@ import {NavigationContainer, ApplicationContext} from './NavigationContainer';
 import ScreenContainer from '../Layout/ScreenContainer';
 import NavigationButton from './NavigationButton';
 import {HeaderRightAction} from './Components';
+import BottomTab from './BottomTab';
 
 export {
   NavigationContainer,
@@ -9,4 +10,5 @@ export {
   ScreenContainer,
   NavigationButton,
   HeaderRightAction,
+  BottomTab,
 };

package/Navigation/types.ts

@@ -1,5 +1,5 @@
-import {ViewProps} from 'react-native';
-import React from 'react';
+import {ScrollViewProps, ViewProps} from 'react-native';
+import React, {ComponentType, ReactElement} from 'react';
 import Navigator from './Navigator';
 
 export type Theme = {
@@ -72,6 +72,7 @@ export interface ScreenContainerProps extends ViewProps {
   edges?: any[];
   enableKeyboardAvoidingView?: boolean;
   scrollable: boolean;
+  scrollViewProps?: ScrollViewProps;
 }
 
 export type ScreenParams = {
@@ -121,3 +122,15 @@ export type TitleCustomProps = {
   tintColor?: string;
   content?: React.ReactNode;
 };
+
+export type BottomTabItemProps = {
+  label: string;
+  icon: string;
+  showDot?: boolean;
+  badgeLabel?: string;
+  component: ComponentType<any> | undefined;
+};
+
+export type BottomTabProps = {
+  tabs: BottomTabItemProps[];
+};

package/Popup/PopupPromotion.tsx

@@ -1,21 +1,40 @@
 import React, {useContext} from 'react';
-import {StyleSheet, View} from 'react-native';
+import {StyleSheet, TouchableOpacity, View} from 'react-native';
 import {PopupPromotionProps} from './types';
 import {ApplicationContext} from '../Navigation';
 import {Image} from '../Image';
-import {Button} from '../Button';
-import {Spacing} from '../Consts';
+import {Radius} from '../Consts';
+import {Icon} from '../Icon';
 
-const PopupPromotion: React.FC<PopupPromotionProps> = ({image, primary}) => {
+const PopupPromotion: React.FC<PopupPromotionProps> = ({image, onClose}) => {
   const {theme, navigator} = useContext(ApplicationContext);
 
   /**
-   * on action popup
-   * @param callback
+   * build close action
    */
-  const onAction = (callback?: () => void) => {
-    navigator?.pop();
-    callback?.();
+  const buildCloseIcon = () => {
+    return (
+      <View style={styles.iconCloseContainer}>
+        <TouchableOpacity
+          onPress={() => {
+            navigator?.pop();
+            onClose?.();
+          }}
+          style={[
+            styles.iconClose,
+            {
+              backgroundColor: theme.colors.text.default,
+              borderColor: theme.colors.background.surface,
+            },
+          ]}>
+          <Icon
+            source="navigation_close"
+            color={theme.colors.background.surface}
+            size={14}
+          />
+        </TouchableOpacity>
+      </View>
+    );
   };
 
   return (
@@ -26,37 +45,34 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({image, primary}) => {
           uri: image,
         }}
       />
-      <View style={styles.actionContainer}>
-        <Button
-          title={primary?.title}
-          onPress={() => {
-            onAction(primary?.onPress);
-          }}
-        />
-      </View>
+      {buildCloseIcon()}
     </>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    aspectRatio: 0.66,
+    aspectRatio: 0.72,
   },
-  actionContainer: {
+  iconCloseContainer: {
     position: 'absolute',
-    bottom: 0,
     width: '100%',
-    paddingVertical: Spacing.XL,
-    paddingHorizontal: Spacing.L,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    bottom: -36,
+  },
+  iconClose: {
+    width: 20,
+    height: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: Radius.M,
+    borderWidth: 2,
   },
 });
 
 PopupPromotion.defaultProps = {
   image: 'https://google.com',
-  primary: {
-    title: 'Primary',
-    onPress: () => {},
-  },
 };
 
 export default PopupPromotion;

package/Popup/types.ts

@@ -11,7 +11,7 @@ export type PopupNotifyProps = {
 
 export type PopupPromotionProps = {
   image: string;
-  primary: PopupAction;
+  onClose?: () => void;
 };
 
 type PopupAction = {

package/Radio/index.tsx

@@ -17,12 +17,24 @@ const Radio: FC<RadioProps> = ({
 }) => {
   const {theme} = useContext(ApplicationContext);
   const selected = value === groupValue;
-  const borderWidth = selected ? 6 : 2;
-  let borderColor = selected ? theme.colors.primary : theme.colors.text.default;
+  let disabledStyle = {};
+  let checkBoxStyle = {
+    borderWidth: 2,
+    borderColor: theme.colors.text.default,
+  };
+
+  if (selected) {
+    checkBoxStyle = {
+      borderWidth: 6,
+      borderColor: theme.colors.primary,
+    };
+  }
   if (disabled) {
-    borderColor = selected
-      ? theme.colors.background.tonal
-      : theme.colors.text.disable;
+    disabledStyle = {
+      borderColor: selected
+        ? theme.colors.background.tonal
+        : theme.colors.text.disable,
+    };
   }
 
   return (
@@ -39,7 +51,9 @@ const Radio: FC<RadioProps> = ({
       <View
         style={[
           styles.radio,
-          {borderWidth, borderColor, marginRight: !!label ? Spacing.XS : 0},
+          checkBoxStyle,
+          disabledStyle,
+          {marginRight: !!label ? Spacing.XS : 0},
         ]}
       />
       {!!label && <Text typography={'description_default'}>{label}</Text>}

package/{ContentLoader → Skeleton}/index.tsx

@@ -1,11 +1,11 @@
 import React, {useContext, useEffect, useMemo, useRef} from 'react';
 import {Animated, Platform, useWindowDimensions, View} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import {ContentLoaderTypes} from './types';
+import {SkeletonTypes} from './types';
 import {ApplicationContext} from '../Navigation';
 import {Styles} from '../Consts';
 import styles from './styles';
-const ContentLoader: React.FC<ContentLoaderTypes> = ({style}) => {
+const Skeleton: React.FC<SkeletonTypes> = ({style}) => {
   const {width} = useWindowDimensions();
   const {theme} = useContext(ApplicationContext);
   const beginShimmerPosition = useRef(new Animated.Value(-1)).current;
@@ -62,6 +62,4 @@ const ContentLoader: React.FC<ContentLoaderTypes> = ({style}) => {
   );
 };
 
-ContentLoader.defaultProps = {};
-
-export {ContentLoader};
+export {Skeleton};

package/Skeleton/types.ts

@@ -0,0 +1,3 @@
+export type SkeletonTypes = {
+  style?: object;
+};

package/index.ts

@@ -22,8 +22,8 @@ export * from './Icon/types';
 export * from './IconButton';
 export * from './Image';
 export * from './Image/types';
-export * from './ContentLoader';
-export * from './ContentLoader/types';
+export * from './Skeleton';
+export * from './Skeleton/types';
 export * from './CheckBox';
 export * from './CheckBox/types';
 export * from './Radio';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {

package/ContentLoader/types.ts

@@ -1,3 +0,0 @@
-export type ContentLoaderTypes = {
-  style?: object;
-};