@momo-kits/chip 0.153.2 → 0.154.1-beta.0

package/index.tsx

@@ -1,17 +1,19 @@
-import React, {FC, useContext, useMemo} from 'react';
+import React, { FC, useContext, useMemo } from 'react';
 import {
   ApplicationContext,
   Colors,
   Icon,
   MiniAppContext,
+  Radius,
   ScreenContext,
   Spacing,
   Text,
   Typography,
+  useScaleSize,
 } from '@momo-kits/foundation';
-import {TouchableOpacity, View} from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import styles from './styles';
-import {ChipProps} from './types';
+import { ChipProps } from './types';
 
 const Chip: FC<ChipProps> = ({
   label = 'Label',
@@ -28,7 +30,13 @@ const Chip: FC<ChipProps> = ({
   accessibilityLabel,
   accessibilityState,
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const { theme } = useContext(ApplicationContext);
+  const scaledRadiusL = useScaleSize(Radius.L);
+  const scaledPaddingH = useScaleSize(Spacing.S);
+  const scaledHeight32 = useScaleSize(32);
+  const scaledHeight24 = useScaleSize(24);
+  const scaledSize16 = useScaleSize(16);
+  const scaledMargin = useScaleSize(Spacing.XS);
 
   const app = useContext<any>(MiniAppContext);
   const screen = useContext<any>(ScreenContext);
@@ -55,10 +63,24 @@ const Chip: FC<ChipProps> = ({
   }
 
   let typo: Typography = 'label_default_medium';
-  let chipStyle = styles.chip;
+  let chipStyle = [
+    styles.chip,
+    {
+      borderRadius: scaledRadiusL,
+      paddingHorizontal: scaledPaddingH,
+      height: scaledHeight32,
+    },
+  ];
   let iconSize = 20;
   if (size === 'small') {
-    chipStyle = styles.smallChip;
+    chipStyle = [
+      styles.chip,
+      {
+        borderRadius: scaledRadiusL,
+        paddingHorizontal: scaledPaddingH,
+        height: scaledHeight24,
+      },
+    ];
     iconSize = 16;
     typo = 'label_s_medium';
   }
@@ -68,6 +90,7 @@ const Chip: FC<ChipProps> = ({
       <View
         style={[
           styles.chipOverlay,
+          { borderRadius: scaledRadiusL },
           {
             borderColor: theme.colors.secondary,
           },
@@ -86,17 +109,22 @@ const Chip: FC<ChipProps> = ({
           {
             backgroundColor: bgColor,
             maxWidth: '100%',
-            flexShrink: 1
+            flexShrink: 1,
           },
         ]}
         accessibilityLabel={componentId + '|touch'}
-        accessibilityState={{checked: selected, ...accessibilityState}}>
+        accessibilityState={{ checked: selected, ...accessibilityState }}
+      >
         {!!iconLeft && (
           <Icon
             source={iconLeft}
             color={iconLeftColorSelected}
             size={iconSize}
-            style={{...styles.imageSmall, marginRight: label ? Spacing.XS : 0}}
+            style={{
+              width: scaledSize16,
+              height: scaledSize16,
+              marginRight: label ? Spacing.XS : scaledMargin,
+            }}
           />
         )}
         {label && (
@@ -107,7 +135,8 @@ const Chip: FC<ChipProps> = ({
             style={{
               flexShrink: 1,
             }}
-            accessibilityLabel={componentId + '|text'}>
+            accessibilityLabel={componentId + '|text'}
+          >
             {label}
           </Text>
         )}
@@ -116,7 +145,12 @@ const Chip: FC<ChipProps> = ({
             source={iconRight}
             color={iconRightColorSelected}
             size={iconSize}
-            style={styles.icon}
+            style={[
+              styles.icon,
+              {
+                marginLeft: scaledMargin,
+              },
+            ]}
             accessibilityLabel={componentId + '|icon'}
           />
         )}
@@ -126,5 +160,5 @@ const Chip: FC<ChipProps> = ({
   );
 };
 
-export {Chip};
-export type {ChipProps};
+export { Chip };
+export type { ChipProps };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/chip",
-    "version": "0.153.2",
+    "version": "0.154.1-beta.0",
     "private": false,
     "main": "index.tsx",
     "peerDependencies": {

package/styles.ts

@@ -1,24 +1,12 @@
-import {StyleSheet} from 'react-native';
-import {Radius, scaleSize, Spacing} from '@momo-kits/foundation';
+import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
+  wrapper: { flexDirection: 'row' },
   chip: {
-    borderRadius: scaleSize(Radius.L),
-    paddingHorizontal: scaleSize(Spacing.S),
-    height: scaleSize(32),
     justifyContent: 'center',
     alignItems: 'center',
     flexDirection: 'row',
   },
-  smallChip: {
-    borderRadius: scaleSize(Radius.L),
-    paddingHorizontal: scaleSize(Spacing.S),
-    height: scaleSize(24),
-    justifyContent: 'center',
-    alignItems: 'center',
-    flexDirection: 'row',
-  },
-
   chipOverlay: {
     position: 'absolute',
     top: 0,
@@ -27,15 +15,6 @@ export default StyleSheet.create({
     right: 0,
     zIndex: -1,
     borderWidth: 2,
-    borderRadius: scaleSize(Radius.L),
-  },
-  imageSmall: {
-    width: scaleSize(16),
-    height: scaleSize(16),
-    marginRight: scaleSize(Spacing.XS),
-  },
-  icon: {
-    marginLeft: scaleSize(Spacing.XS),
   },
-  wrapper: {flexDirection: 'row'},
+  icon: {},
 });