@momo-kits/foundation 1.0.11 → 1.0.12

package/Assets/icon.json

@@ -3934,5 +3934,14 @@
   },
   "ic_error": {
     "uri": "https://img.mservice.com.vn/app/img/kits/error_mess_icon.png"
+  },
+  "media_fail": {
+    "uri": "https://static.momocdn.net/app/img/kits/media_fail.png"
+  },
+  "ic_checked": {
+    "uri": "https://img.mservice.com.vn/app/img/kits/checked_ic.png"
+  },
+  "ic_minus": {
+    "uri": "https://img.mservice.com.vn/app/img/kits/minus.png"
   }
 }

package/Button/index.tsx

@@ -11,6 +11,7 @@ import {Typography} from '../Text/types';
 import {Colors} from '../Consts';
 import styles from './styles';
 import {Image} from '../Image';
+import {Icon} from '../Icon';
 
 export interface ButtonProps extends TouchableOpacityProps {
   type?:
@@ -179,11 +180,7 @@ const Button: FC<ButtonProps> = ({
             styles.leading,
             {width: iconSize, height: iconSize, marginRight},
           ]}>
-          <Image
-            tintColor={color}
-            source={{uri: iconLeft}}
-            style={{width: iconSize, height: iconSize}}
-          />
+          <Icon color={color} source={iconLeft} size={iconSize} />
         </View>
       );
     }
@@ -203,11 +200,7 @@ const Button: FC<ButtonProps> = ({
             styles.trailing,
             {width: iconSize, height: iconSize, marginLeft},
           ]}>
-          <Image
-            tintColor={color}
-            source={{uri: iconRight}}
-            style={{width: iconSize, height: iconSize}}
-          />
+          <Icon color={color} source={iconRight} size={iconSize} />
         </View>
       );
     }

package/CheckBox/index.tsx

@@ -2,13 +2,10 @@ import React, {FC, useContext} from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import {CheckBoxProps} from './types';
 import styles from './styles';
-import Image from 'react-native-fast-image';
 import {ApplicationContext} from '../Navigation';
 import {Text} from '../Text';
+import {Icon} from '../Icon';
 
-const IC_INDETERMINATED = 'https://img.mservice.com.vn/app/img/kits/minus.png';
-const IC_CHECKED_DEFAULT =
-  'https://img.mservice.com.vn/app/img/kits/checked_ic.png';
 const CheckBox: FC<CheckBoxProps> = props => {
   const {theme} = useContext(ApplicationContext);
   const {value, disabled, onChange, style, label, indeterminated} = props;
@@ -21,11 +18,7 @@ const CheckBox: FC<CheckBoxProps> = props => {
     ? theme.colors.primary
     : theme.colors.background.surface;
 
-  let iconSource = value ? IC_CHECKED_DEFAULT : undefined;
-
-  if (indeterminated) {
-    iconSource = IC_INDETERMINATED;
-  }
+  let iconSource = indeterminated ? 'ic_minus' : 'ic_checked';
 
   if (disabled) {
     borderColor = haveValue
@@ -47,7 +40,13 @@ const CheckBox: FC<CheckBoxProps> = props => {
       disabled={disabled}
       style={[style, styles.container]}>
       <View style={[checkboxStyle, styles.checkbox]}>
-        <Image style={styles.icon} source={{uri: iconSource}} />
+        {haveValue && (
+          <Icon
+            color={theme.colors.background.surface}
+            size={20}
+            source={iconSource}
+          />
+        )}
       </View>
       <Text typography={'description_default'}>{label}</Text>
     </TouchableOpacity>

package/CheckBox/styles.ts

@@ -12,5 +12,4 @@ export default StyleSheet.create({
     alignItems: 'center',
   },
   container: {flexDirection: 'row'},
-  icon: {width: 20, height: 20},
 });

package/Image/index.tsx

@@ -29,7 +29,7 @@ const Image: React.FC<ImageProps> = ({style, source, ...rest}) => {
       if (fail) {
         content = (
           <View style={Styles.flexCenter}>
-            <Icon source="error-outline" />
+            <Icon source="media_fail" color={theme.colors.text.disable} />
           </View>
         );
       }

package/Input/Input.tsx

@@ -113,11 +113,7 @@ const Input: FC<InputProps> = ({
             </TouchableOpacity>
           )}
           {icon && (
-            <Image
-              tintColor={iconTintColor}
-              source={{uri: icon}}
-              style={styles.icon}
-            />
+            <Icon icon={iconTintColor} source={icon} style={styles.icon} />
           )}
         </View>
       </View>

package/Input/InputMoney.tsx

@@ -116,13 +116,7 @@ const InputMoney: FC<InputMoneyProps> = ({
               />
             </TouchableOpacity>
           )}
-          {icon && (
-            <Image
-              tintColor={iconTintColor}
-              source={{uri: icon}}
-              style={styles.icon}
-            />
-          )}
+          {icon && <Icon color={iconTintColor} source={icon} />}
         </View>
       </View>
     );

package/Input/InputSearch.tsx

@@ -112,11 +112,7 @@ const InputSearch: FC<InputSearchProps> = ({
                 },
               ]}
             />
-            <Image
-              tintColor={iconTintColor}
-              source={{uri: icon}}
-              style={styles.iconSearchInput}
-            />
+            <Icon color={iconTintColor} source={icon} />
           </View>
         )}
       </View>

package/Input/common.tsx

@@ -100,9 +100,10 @@ export const FloatingView: FC<FloatingViewProps> = ({
           )}
         </Text>
         {floatingIcon && (
-          <Image
-            tintColor={floatingIconTintColor}
-            source={{uri: floatingIcon}}
+          <Icon
+            color={floatingIconTintColor}
+            source={floatingIcon}
+            size={16}
             style={styles.floatingIcon}
           />
         )}

package/Input/styles.ts

@@ -25,7 +25,7 @@ export default StyleSheet.create({
     paddingHorizontal: Spacing.S,
     flexDirection: 'row',
   },
-  floatingIcon: {width: 16, height: 16, marginLeft: Spacing.XS},
+  floatingIcon: {marginLeft: Spacing.XS},
   errorIcon: {marginRight: Spacing.XS},
   errorView: {
     flexDirection: 'row',

package/Navigation/BottomTab.tsx

@@ -1,8 +1,7 @@
 import React, {FC} from 'react';
-import {View} from 'react-native';
-import {BottomTabItemProps, BottomTabProps} from './types';
+import {BottomTabProps} from './types';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
-import {Icon} from '@momo-kits/foundation';
+import {Icon} from '../Icon';
 
 const Tab = createBottomTabNavigator();
 

package/Skeleton/index.tsx

@@ -1,31 +1,29 @@
-import React, {useContext, useEffect, useMemo, useRef} from 'react';
-import {Animated, Platform, useWindowDimensions, View} from 'react-native';
+import React, {useEffect, useMemo, useRef, useState} from 'react';
+import {Animated, Easing, Platform, StyleSheet, View} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import {SkeletonTypes} from './types';
-import {ApplicationContext} from '../Navigation';
 import {Styles} from '../Consts';
 import styles from './styles';
+import {Colors} from '@momo-kits/foundation';
+
 const Skeleton: React.FC<SkeletonTypes> = ({style}) => {
-  const {width} = useWindowDimensions();
-  const {theme} = useContext(ApplicationContext);
-  const beginShimmerPosition = useRef(new Animated.Value(-1)).current;
+  const [width, setWidth] = useState(0);
+  const PRIMARY_COLOR = Colors.black_05;
+  const HIGHLIGHT_COLOR1 = Colors.black_05;
+  const HIGHLIGHT_COLOR2 = Colors.black_03;
+  const beginShimmerPosition = useRef(new Animated.Value(0)).current;
 
-  const shimmerColors = [
-    theme.colors.text.disable + '40',
-    theme.colors.text.disable + '80',
-    theme.colors.text.disable,
-  ];
-  const location = [0.3, 0.5, 0.7];
+  const shimmerColors = [HIGHLIGHT_COLOR1, HIGHLIGHT_COLOR2, HIGHLIGHT_COLOR1];
   const linearTranslate = beginShimmerPosition.interpolate({
-    inputRange: [-1, 1],
-    outputRange: [0, width],
+    inputRange: [0, 1],
+    outputRange: [-width, width],
   });
   const animatedValue = useMemo(() => {
     return Animated.loop(
       Animated.timing(beginShimmerPosition, {
         toValue: 1,
-        delay: 0,
         duration: 1000,
+        easing: Easing.linear,
         useNativeDriver: Platform.OS !== 'web',
       }),
     );
@@ -38,23 +36,33 @@ const Skeleton: React.FC<SkeletonTypes> = ({style}) => {
     };
   }, [animatedValue]);
 
+  const onLayout = (newWidth: number) => {
+    if (newWidth !== width) {
+      setWidth(newWidth);
+    }
+  };
   return (
     <View style={[styles.container, style]}>
-      <View style={[Styles.flex, {backgroundColor: shimmerColors[0]}]}>
+      <View
+        onLayout={e => onLayout(e.nativeEvent.layout.width)}
+        style={[Styles.flex, {backgroundColor: PRIMARY_COLOR}]}>
         <Animated.View
-          style={[Styles.flex, {transform: [{translateX: linearTranslate}]}]}>
+          style={{
+            transform: [{translateX: linearTranslate}],
+            width: '60%',
+            height: '100%',
+          }}>
           <LinearGradient
+            style={[StyleSheet.absoluteFill]}
             colors={shimmerColors}
-            style={[Styles.flex, {width: width}]}
             start={{
-              x: -1,
-              y: 0.5,
+              x: 0,
+              y: 0,
             }}
             end={{
-              x: 2,
-              y: 0.5,
+              x: 1,
+              y: 0,
             }}
-            locations={location}
           />
         </Animated.View>
       </View>

package/package.json

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