@momo-kits/chip 0.0.62-alpha.17

package/index.js

@@ -0,0 +1,100 @@
+import React, { useRef } from 'react';
+import { StyleSheet, View, Animated } from 'react-native';
+import {
+    Colors,
+    Image,
+    Radius,
+    Spacing,
+    Text,
+    TouchableOpacity,
+} from '@momo-kits/core-v2';
+import { Easing } from 'react-native-reanimated';
+
+const textSize = {
+    medium: {
+        fontSize: 14,
+        lineHeight: 20,
+    },
+    small: {
+        fontSize: 12,
+        lineHeight: 16,
+    },
+};
+
+const imageSize = {
+    medium: {
+        width: 20,
+        height: 20,
+        borderRadius: Radius.XS,
+        marginRight: Spacing.XS,
+    },
+    small: {
+        width: 16,
+        height: 16,
+        borderRadius: Radius.XS,
+        marginRight: Spacing.XS,
+    },
+};
+const Chip = (props) => {
+    const { image, icon, title, size, onPress, active, style, onIconPress } =
+        props;
+
+    const mapTextSize = textSize[size] || textSize.medium;
+    const mapImageSize = imageSize[size] || imageSize.medium;
+
+    const selectedStyle = {
+        backgroundColor: Colors.pink_10,
+    };
+
+    return (
+        <TouchableOpacity
+            style={[{ alignSelf: 'baseline' }, style]}
+            onPress={() => onPress?.(!active)}>
+            <View style={[styles.container, active && selectedStyle]}>
+                {image && <Image source={image} style={[mapImageSize]} />}
+                <Text.Label2 style={[mapTextSize]}>{title}</Text.Label2>
+                {icon && (
+                    <TouchableOpacity
+                        onPress={onIconPress}
+                        disabled={!onIconPress}
+                        style={styles.iconContainer}>
+                        <Image source={icon} style={styles.icon} />
+                    </TouchableOpacity>
+                )}
+            </View>
+            {active && <View style={styles.background} />}
+        </TouchableOpacity>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        borderRadius: Radius.L,
+        flexDirection: 'row',
+        paddingVertical: Spacing.XXS + 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,
+        borderColor: Colors.pink_03,
+    },
+    iconContainer: {
+        marginLeft: Spacing.XS,
+    },
+});
+
+export default Chip;

package/package.json

@@ -0,0 +1,17 @@
+{
+    "name": "@momo-kits/chip",
+    "version": "0.0.62-alpha.17",
+    "private": false,
+    "main": "index.js",
+    "dependencies": {
+        "prop-types": "^15.7.2",
+        "react": "16.9.0"
+    },
+    "peerDependencies": {
+        "react": "16.9.0",
+        "react-native": ">=0.55",
+        "@momo-kits/core-v2": ">=0.0.4-beta"
+    },
+    "devDependencies": {},
+    "license": "MoMo"
+}

package/publish.sh

@@ -0,0 +1,29 @@
+#!/bin/bash
+rm -rf dist
+mkdir dist
+
+cp . ./dist
+
+# GET VERSION from mck_package.json
+VERSIONSTRING=( v$(jq .version package.json) )
+VERSION=(${VERSIONSTRING//[\"]/})
+echo VERSION: $VERSION
+
+rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js'  --exclude 'props-type.js' --exclude 'prop-types.js' ./* dist
+
+# #babel component to dist
+#babel ./dist -d dist --copy-files
+
+#copy option
+#cp -r ./src/ dist
+
+
+#npm login
+#publish dist to npm
+cd dist
+npm publish --tag beta --access=public
+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"}'