@momo-kits/foundation 0.77.8-beta.2 → 0.77.8-beta.3

package/Application/Components.tsx

@@ -249,7 +249,7 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
           <View style={[styles.dotAvatar, {backgroundColor: dotColor}]} />
         )}
       </View>
-      <View style={[Styles.flex, Styles.paddingHorizontal8]}>
+      <View style={[Styles.flex, {paddingHorizontal: 8}]}>
         <Text typography="title_xs" color={tintColor}>
           {title}
         </Text>

package/Application/ModalScreen.tsx

@@ -96,7 +96,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
 
   const snapPoints = useMemo(() => ['50%', '90%'], []);
   const {bottom} = useSafeAreaInsets();
-  const bottomSheetRef = useRef(null);
+  const bottomSheetRef = useRef<any>(null);
   const mountedRef = useRef(true);
 
   useEffect(() => {

package/Application/Navigation.ts

@@ -30,7 +30,6 @@ class Navigation {
   };
 
   setOptions = (params: NavigationOptions) => {
-    console.log(params);
     if (__DEV__) {
       params = this.filterParams(params);
     }

package/Application/index.ts

@@ -1,6 +1,11 @@
 import {NavigationContainer} from './NavigationContainer';
 import Screen from '../Layout/Screen';
-import {HeaderRightAction, NavigationButton} from './Components';
+import {
+  HeaderRightAction,
+  NavigationButton,
+  HeaderToolkitAction,
+  HeaderTitle,
+} from './Components';
 import BottomTab from './BottomTab';
 import {createContext} from 'react';
 import {defaultContext} from '../Consts';
@@ -13,5 +18,7 @@ export {
   Screen,
   NavigationButton,
   HeaderRightAction,
+  HeaderToolkitAction,
+  HeaderTitle,
   BottomTab,
 };

package/Button/index.tsx

@@ -65,7 +65,7 @@ const Button: FC<ButtonProps> = ({
   type = 'primary',
   size = 'large',
   useTintColor = true,
-  full = false,
+  full = true,
   iconRight,
   iconLeft,
   title = 'Button',

package/CheckBox/index.tsx

@@ -6,41 +6,46 @@ import {ApplicationContext} from '../Application';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
 
-const CheckBox: FC<CheckBoxProps> = props => {
+const CheckBox: FC<CheckBoxProps> = ({
+  value,
+  disabled,
+  onChange,
+  style,
+  label,
+  indeterminate,
+}) => {
   const {theme} = useContext(ApplicationContext);
-  const {value, disabled, onChange, style, label, indeterminated} = props;
+  const haveValue = value || indeterminate;
+  const iconSource = indeterminate ? 'ic_minus' : 'ic_checked';
+  let borderColor = theme.colors.text.default;
+  let backgroundColor = theme.colors.background.surface;
 
-  const haveValue = value || indeterminated;
-  let borderColor = haveValue
-    ? theme.colors.primary
-    : theme.colors.text.default;
-  let backgroundColor = haveValue
-    ? theme.colors.primary
-    : theme.colors.background.surface;
-
-  let iconSource = indeterminated ? 'ic_minus' : 'ic_checked';
+  if (haveValue) {
+    borderColor = theme.colors.primary;
+    backgroundColor = theme.colors.primary;
+  }
 
   if (disabled) {
-    borderColor = haveValue
-      ? theme.colors.background.tonal
-      : theme.colors.border.disable;
-    backgroundColor = haveValue
-      ? theme.colors.background.tonal
-      : theme.colors.background.surface;
+    borderColor = theme.colors.border.disable;
+    backgroundColor = theme.colors.background.surface;
+    if (haveValue) {
+      borderColor = theme.colors.background.tonal;
+      backgroundColor = theme.colors.background.tonal;
+    }
   }
-  const checkboxStyle = {borderColor, backgroundColor, borderWidth: 1};
 
-  const onChangeValue = () => {
-    onChange?.(!value);
-  };
   return (
     <TouchableOpacity
       accessibilityLabel={`CheckBox/${label}`}
       activeOpacity={0.8}
-      onPress={onChangeValue}
+      onPress={() => onChange?.(!value)}
       disabled={disabled}
       style={[style, styles.container]}>
-      <View style={[checkboxStyle, styles.checkbox]}>
+      <View
+        style={[
+          {borderColor, backgroundColor, borderWidth: 1},
+          styles.checkbox,
+        ]}>
         {haveValue && (
           <Icon
             color={theme.colors.background.surface}

package/CheckBox/types.ts

@@ -28,7 +28,7 @@ export type CheckBoxProps = {
    * which is typically used to represent a "mixed" or "partial" selection state.
    * Defaults to `false` if not provided.
    */
-  indeterminated?: boolean;
+  indeterminate?: boolean;
 
   /**
    * Optional. Used to apply custom styling to the CheckBox component.

package/Consts/styles.ts

@@ -47,32 +47,6 @@ const Styles = StyleSheet.create({
     alignItems: 'flex-end',
     justifyContent: 'center',
   },
-  //paddingHorizontal
-  paddingHorizontal4: {
-    paddingHorizontal: 4,
-  },
-  paddingHorizontal8: {
-    paddingHorizontal: 8,
-  },
-  paddingHorizontal16: {
-    paddingHorizontal: 16,
-  },
-  paddingHorizontal24: {
-    paddingHorizontal: 24,
-  },
-  //paddingVertical
-  paddingVertical4: {
-    paddingVertical: 4,
-  },
-  paddingVertical8: {
-    paddingVertical: 8,
-  },
-  paddingVertical16: {
-    paddingVertical: 16,
-  },
-  paddingVertical24: {
-    paddingVertical: 24,
-  },
 });
 
 export {Styles};

package/Input/common.tsx

@@ -59,7 +59,7 @@ export const ErrorView: FC<{errorMessage?: string}> = ({errorMessage}) => {
         <Text
           style={Styles.flex}
           color={errorColor}
-          numberOfLines={1}
+          numberOfLines={2}
           typography={'description_s'}>
           {errorMessage}
         </Text>

package/Pagination/PaginationNumber.tsx

@@ -1,9 +1,8 @@
-import React, {FC, useContext} from 'react';
+import React, {FC} from 'react';
 import {View} from 'react-native';
 import {ChildPaginationProps} from './types';
 import styles from './styles';
 import {Text} from '../Text';
-import {ApplicationContext} from '../Application';
 import {Colors} from '../Consts';
 
 const PaginationNumber: FC<ChildPaginationProps> = ({

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.77.8-beta.02",
+    "version": "0.77.8-beta.03",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {
@@ -19,6 +19,7 @@
         "@react-navigation/core": "5.16.1",
         "@react-navigation/native": "5.9.8",
         "@react-navigation/routers": "5.7.4",
+        "lottie-react-native": "3.3.2",
         "@react-navigation/stack": "git+https://gitlab.com/dung.huynh1/react-navigation-stack.git#main"
     },
     "peerDependencies": {