@momo-kits/chip 0.72.7-beta.2 → 0.72.7

package/index.js

@@ -7,7 +7,7 @@ import {
   Spacing,
   Text,
   TouchableOpacity,
-} from '@momo-kits/core-v2';
+} from '@momo-kits/core';
 import PropTypes from 'prop-types';
 
 const textSize = {
@@ -36,66 +36,62 @@ const imageSize = {
   },
 };
 
-const chevronDown =
-  'https://img.mservice.com.vn/momo_app_v2/new_version/img/appx_icon/16_arrow_chevron_down.png';
-const remove = 'https://img.mservice.com.vn/app/img/kits/ic_close.png';
 const Chip = props => {
   const {
-    image,
+    icon,
     title,
     size,
     onPress,
     active,
     style,
-    onIconPress,
-    type,
-    whiteBackground,
     activeBackgroundColor,
     activeBorderColor,
     activeTextColor,
+    disabled,
+    iconTintColor,
   } = props;
 
   const mapTextSize = textSize[size] || textSize.default;
   const mapImageSize = imageSize[size] || imageSize.default;
-  const iconSource = type === 'removable' ? remove : chevronDown;
 
   const selectedStyle = {
     backgroundColor: activeBackgroundColor,
   };
 
+  const disabledStyle = {
+    backgroundColor: Colors.black_02,
+  };
+
+  let textColor = active ? activeTextColor : Colors.black_17;
+
+  if (disabled) {
+    textColor = Colors.black_09;
+  }
   return (
     <TouchableOpacity
       style={[{alignSelf: 'baseline'}, style]}
-      onPress={() => onPress?.(!active)}>
+      disabled={disabled}
+      onPress={() => {
+        onPress?.(!active);
+      }}>
       <View
         style={[
           styles.container,
-          whiteBackground && {backgroundColor: Colors.black_01},
           active && selectedStyle,
+          disabled && disabledStyle,
         ]}>
-        {image && <Image source={image} style={[mapImageSize]} />}
-        <Text.Label2
-          weight="medium"
-          style={[
-            mapTextSize,
-            {color: active ? activeTextColor : Colors.black_17},
-          ]}>
-          {title}
-        </Text.Label2>
-        {type !== 'default' && (
-          <TouchableOpacity
-            onPress={onIconPress}
-            disabled={!onIconPress}
-            style={styles.iconContainer}>
-            <Image
-              source={iconSource}
-              style={[
-                styles.icon,
-                type === 'removable' && {tintColor: Colors.black_12},
-              ]}
-            />
-          </TouchableOpacity>
+        {icon && (
+          <Image
+            source={icon}
+            tintColor={disabled ? Colors.black_09 : iconTintColor}
+            style={[mapImageSize]}
+          />
         )}
+        <Text.SubTitle
+          weight={active ? 'bold' : 'regular'}
+          style={[mapTextSize, {color: textColor}]}>
+          {title}
+        </Text.SubTitle>
       </View>
       {active && (
         <View
@@ -115,11 +111,11 @@ const styles = StyleSheet.create({
   container: {
     borderRadius: Radius.L,
     flexDirection: 'row',
-    paddingVertical: Spacing.XS,
-    paddingHorizontal: Spacing.S,
+    paddingVertical: Spacing.XS + Spacing.XXS,
+    paddingHorizontal: Spacing.M,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: Colors.black_04,
+    backgroundColor: Colors.black_03,
   },
   icon: {
     width: 16,
@@ -141,28 +137,27 @@ const styles = StyleSheet.create({
 });
 
 Chip.propTypes = {
-  image: PropTypes.string,
+  icon: PropTypes.string,
   title: PropTypes.string,
   size: PropTypes.oneOf(['small', 'default']),
   onPress: PropTypes.func,
   active: PropTypes.bool,
   style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
   onIconPress: PropTypes.func,
-  type: PropTypes.oneOf(['default', 'removable', 'action']),
   activeBackgroundColor: PropTypes.string,
   activeBorderColor: PropTypes.string,
   activeTextColor: PropTypes.string,
   whiteBackground: PropTypes.bool,
+  iconTintColor: PropTypes.string,
 };
 
 Chip.defaultProps = {
   size: 'default',
-  type: 'default',
   active: false,
-  activeBackgroundColor: Colors.pink_10,
-  activeBorderColor: Colors.pink_06,
-  activeTextColor: Colors.pink_03,
-  whiteBackground: false,
+  activeBackgroundColor: Colors.pink_11,
+  activeBorderColor: Colors.pink_07,
+  activeTextColor: Colors.pink_05_b,
+  iconTintColor: null,
 };
 
 export default Chip;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/chip",
-    "version": "0.72.7-beta.02",
+    "version": "0.72.7",
     "private": false,
     "main": "index.js",
     "dependencies": {
@@ -14,4 +14,4 @@
     },
     "devDependencies": {},
     "license": "MoMo"
-}
+}

package/publish.sh

@@ -26,4 +26,4 @@ cd ..
 rm -rf dist
 
 
-#curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/chip new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/chip"}'
+curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/chip new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/chip"}'