@momo-kits/chip 0.75.1-beta.3 → 0.75.1-beta.8

package/index.tsx

@@ -0,0 +1,90 @@
+import React, {FC, useContext} from 'react';
+import {
+  ApplicationContext,
+  Colors,
+  Icon,
+  Image,
+  Text,
+  Typography,
+} from '@momo-kits/foundation';
+import {TouchableOpacity, View} from 'react-native';
+import styles from './styles';
+import {ChipProps} from './types';
+
+const Chip: FC<ChipProps> = ({
+  label = 'Label',
+  iconLeft,
+  iconRight,
+  selected = false,
+  style,
+  onPress,
+  size = 'large',
+  iconLeftColor,
+  iconRightColor,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const textColor = selected ? theme.colors.primary : theme.colors.text.default;
+  const backgroundColor = selected
+    ? theme.colors.background.tonal
+    : theme.colors.border.default;
+
+  let typo: Typography = 'label_default';
+  let chipStyle = styles.chip;
+  let imageStyle = styles.image;
+  let iconSize = 20;
+  if (size === 'small') {
+    chipStyle = styles.smallChip;
+    imageStyle = styles.imageSmall;
+    iconSize = 16;
+    typo = 'label_s';
+  }
+
+  const renderOverlay = () => {
+    return (
+      <View
+        style={[
+          styles.chipOverlay,
+          {
+            borderColor: Colors.pink_06,
+          },
+        ]}
+      />
+    );
+  };
+
+  return (
+    <View style={[style, styles.wrapper]}>
+      <TouchableOpacity
+        onPress={onPress}
+        style={[
+          chipStyle,
+          {
+            backgroundColor,
+          },
+        ]}>
+        {!!iconLeft && (
+          <Image
+            source={{uri: iconLeft}}
+            tintColor={iconLeftColor}
+            style={imageStyle}
+          />
+        )}
+        <Text typography={typo} color={textColor}>
+          {label}
+        </Text>
+        {!!iconRight && (
+          <Icon
+            source={iconRight}
+            color={iconRightColor}
+            size={iconSize}
+            style={styles.icon}
+          />
+        )}
+        {selected && renderOverlay()}
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default Chip;
+export type {ChipProps};

package/package.json

@@ -1,16 +1,14 @@
 {
     "name": "@momo-kits/chip",
-    "version": "0.75.1-beta.3",
+    "version": "0.75.1-beta.8",
     "private": false,
-    "main": "index.js",
-    "dependencies": {
-        "prop-types": "^15.7.2",
-        "react": "16.9.0"
-    },
+    "main": "index.tsx",
+    "dependencies": {},
     "peerDependencies": {
+        "@momo-kits/core-v2": ">=0.0.5-beta",
+        "prop-types": "^15.7.2",
         "react": "16.9.0",
-        "react-native": ">=0.55",
-        "@momo-kits/core-v2": ">=0.0.4-beta"
+        "react-native": ">=0.55"
     },
     "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/stepper new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/stepper"}'

package/styles.ts

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

package/types.ts

@@ -0,0 +1,13 @@
+import {ViewStyle} from 'react-native';
+
+export type ChipProps = {
+  label: string;
+  iconLeft?: string;
+  iconRight?: string;
+  selected?: boolean;
+  style?: ViewStyle | ViewStyle[];
+  onPress?: () => void;
+  size?: 'small' | 'large';
+  iconLeftColor?: string;
+  iconRightColor?: string;
+};

package/index.js

@@ -1,168 +0,0 @@
-import React from 'react';
-import {StyleSheet, View} from 'react-native';
-import {
-  Colors,
-  Image,
-  Radius,
-  Spacing,
-  Text,
-  TouchableOpacity,
-} from '@momo-kits/core-v2';
-import PropTypes from 'prop-types';
-
-const textSize = {
-  default: {
-    fontSize: 14,
-    lineHeight: 20,
-  },
-  small: {
-    fontSize: 12,
-    lineHeight: 16,
-  },
-};
-
-const imageSize = {
-  default: {
-    width: 20,
-    height: 20,
-    borderRadius: Radius.XS,
-    marginRight: Spacing.XS,
-  },
-  small: {
-    width: 16,
-    height: 16,
-    borderRadius: Radius.XS,
-    marginRight: Spacing.XS,
-  },
-};
-
-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,
-    title,
-    size,
-    onPress,
-    active,
-    style,
-    onIconPress,
-    type,
-    whiteBackground,
-    activeBackgroundColor,
-    activeBorderColor,
-    activeTextColor,
-  } = props;
-
-  const mapTextSize = textSize[size] || textSize.default;
-  const mapImageSize = imageSize[size] || imageSize.default;
-  const iconSource = type === 'removable' ? remove : chevronDown;
-
-  const selectedStyle = {
-    backgroundColor: activeBackgroundColor,
-  };
-
-  return (
-    <TouchableOpacity
-      style={[{alignSelf: 'baseline'}, style]}
-      onPress={() => onPress?.(!active)}>
-      <View
-        style={[
-          styles.container,
-          whiteBackground && {backgroundColor: Colors.black_01},
-          active && selectedStyle,
-        ]}>
-        {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>
-        )}
-      </View>
-      {active && (
-        <View
-          style={[
-            styles.background,
-            {
-              borderColor: activeBorderColor,
-            },
-          ]}
-        />
-      )}
-    </TouchableOpacity>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: Radius.L,
-    flexDirection: 'row',
-    paddingVertical: Spacing.XS,
-    paddingHorizontal: Spacing.S,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: Colors.black_04,
-  },
-  icon: {
-    width: 16,
-    height: 16,
-    tintColor: Colors.black_17,
-  },
-  background: {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    borderRadius: Radius.L,
-    borderWidth: 2,
-  },
-  iconContainer: {
-    marginLeft: Spacing.XS,
-  },
-});
-
-Chip.propTypes = {
-  image: 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,
-};
-
-Chip.defaultProps = {
-  size: 'default',
-  type: 'default',
-  active: false,
-  activeBackgroundColor: Colors.pink_10,
-  activeBorderColor: Colors.pink_06,
-  activeTextColor: Colors.pink_03,
-  whiteBackground: false,
-};
-
-export default Chip;