@momo-kits/chip 0.73.3-beta.4 → 0.74.2-react-native.1

package/index.tsx

@@ -0,0 +1,89 @@
+import React, {FC, useContext} from 'react';
+import {
+  ApplicationContext,
+  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_medium';
+  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_medium';
+  }
+
+  const renderOverlay = () => {
+    return (
+      <View
+        style={[
+          styles.chipOverlay,
+          {
+            borderColor: theme.colors.secondary,
+          },
+        ]}
+      />
+    );
+  };
+
+  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 {Chip};
+export type {ChipProps};

package/package.json

@@ -1,17 +1,17 @@
 {
     "name": "@momo-kits/chip",
-    "version": "0.73.3-beta.4",
+    "version": "0.74.2-react-native.1",
     "private": false,
-    "main": "index.js",
-    "dependencies": {
-        "prop-types": "^15.7.2",
-        "react": "16.9.0"
-    },
+    "main": "index.tsx",
     "peerDependencies": {
-        "react": "16.9.0",
-        "react-native": ">=0.55",
-        "@momo-kits/core-v2": ">=0.0.4-beta"
+        "@momo-kits/foundation": "latest",
+        "react": "*",
+        "react-native": "*",
+        "prop-types": "15.7.2"
+    },
+    "devDependencies": {
+        "@momo-platform/versions": "4.1.11"
     },
-    "devDependencies": {},
-    "license": "MoMo"
+    "license": "MoMo",
+    "dependencies": {}
 }

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,55 @@
+import {ViewStyle} from 'react-native';
+
+/**
+ * Props for the Chip component. A Chip is a compact element that represents an input, attribute, or action.
+ */
+export type ChipProps = {
+  /**
+   * The text to be displayed on the chip. This is typically a brief piece of information like a tag.
+   */
+  label: string;
+
+  /**
+   * Optional. The name of the icon to be displayed on the left side of the chip's label.
+   * If not provided, no icon is rendered on the left.
+   */
+  iconLeft?: string;
+
+  /**
+   * Optional. The name of the icon to be displayed on the right side of the chip's label.
+   * If not provided, no icon is rendered on the right.
+   */
+  iconRight?: string;
+
+  /**
+   * Optional. Indicates whether the chip is selected. A selected chip may have a different style or icon.
+   * Defaults to `false` if not provided.
+   */
+  selected?: boolean;
+
+  /**
+   * Optional. Custom styles to apply to the Chip component. Can be a single style or an array of styles.
+   */
+  style?: ViewStyle | ViewStyle[];
+
+  /**
+   * Optional. A callback function triggered when the chip is pressed. This makes the chip act as a touchable element.
+   */
+  onPress?: () => void;
+
+  /**
+   * Optional. Specifies the size of the chip, influencing its padding and font size. Can be 'small' or 'large'.
+   * If not provided, a standard size is used.
+   */
+  size?: 'small' | 'large';
+
+  /**
+   * Optional. Specifies the color of the left icon. If not provided, a default icon color may be used.
+   */
+  iconLeftColor?: string;
+
+  /**
+   * Optional. Specifies the color of the right icon. If not provided, a default icon color may be used.
+   */
+  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;