@momo-kits/chip 0.0.62-alpha.37 → 0.0.65-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/index.js +126 -126
  2. package/package.json +16 -16
package/index.js CHANGED
@@ -1,153 +1,153 @@
1
- import React, { useRef } from 'react';
2
- import { StyleSheet, View, Animated } from 'react-native';
1
+ import React from 'react';
2
+ import {StyleSheet, View} from 'react-native';
3
3
  import {
4
- Colors,
5
- Image,
6
- Radius,
7
- Spacing,
8
- Text,
9
- TouchableOpacity,
4
+ Colors,
5
+ Image,
6
+ Radius,
7
+ Spacing,
8
+ Text,
9
+ TouchableOpacity,
10
10
  } from '@momo-kits/core-v2';
11
11
  import PropTypes from 'prop-types';
12
12
 
13
13
  const textSize = {
14
- default: {
15
- fontSize: 14,
16
- lineHeight: 20,
17
- },
18
- small: {
19
- fontSize: 12,
20
- lineHeight: 16,
21
- },
14
+ default: {
15
+ fontSize: 14,
16
+ lineHeight: 20,
17
+ },
18
+ small: {
19
+ fontSize: 12,
20
+ lineHeight: 16,
21
+ },
22
22
  };
23
23
 
24
24
  const imageSize = {
25
- default: {
26
- width: 20,
27
- height: 20,
28
- borderRadius: Radius.XS,
29
- marginRight: Spacing.XS,
30
- },
31
- small: {
32
- width: 16,
33
- height: 16,
34
- borderRadius: Radius.XS,
35
- marginRight: Spacing.XS,
36
- },
25
+ default: {
26
+ width: 20,
27
+ height: 20,
28
+ borderRadius: Radius.XS,
29
+ marginRight: Spacing.XS,
30
+ },
31
+ small: {
32
+ width: 16,
33
+ height: 16,
34
+ borderRadius: Radius.XS,
35
+ marginRight: Spacing.XS,
36
+ },
37
37
  };
38
38
 
39
39
  const chevronDown =
40
- 'https://img.mservice.com.vn/momo_app_v2/new_version/img/appx_icon/16_arrow_chevron_down.png';
40
+ 'https://img.mservice.com.vn/momo_app_v2/new_version/img/appx_icon/16_arrow_chevron_down.png';
41
41
  const remove = 'https://img.mservice.com.vn/app/img/kits/ic_close.png';
42
- const Chip = (props) => {
43
- const {
44
- image,
45
- title,
46
- size,
47
- onPress,
48
- active,
49
- style,
50
- onIconPress,
51
- type,
52
- activeBackgroundColor,
53
- activeBorderColor,
54
- activeTextColor,
55
- } = props;
42
+ const Chip = props => {
43
+ const {
44
+ image,
45
+ title,
46
+ size,
47
+ onPress,
48
+ active,
49
+ style,
50
+ onIconPress,
51
+ type,
52
+ activeBackgroundColor,
53
+ activeBorderColor,
54
+ activeTextColor,
55
+ } = props;
56
56
 
57
- const mapTextSize = textSize[size] || textSize.default;
58
- const mapImageSize = imageSize[size] || imageSize.default;
59
- const iconSource = type === 'removable' ? remove : chevronDown;
57
+ const mapTextSize = textSize[size] || textSize.default;
58
+ const mapImageSize = imageSize[size] || imageSize.default;
59
+ const iconSource = type === 'removable' ? remove : chevronDown;
60
60
 
61
- const selectedStyle = {
62
- backgroundColor: activeBackgroundColor,
63
- };
61
+ const selectedStyle = {
62
+ backgroundColor: activeBackgroundColor,
63
+ };
64
64
 
65
- return (
66
- <TouchableOpacity
67
- style={[{ alignSelf: 'baseline' }, style]}
68
- onPress={() => onPress?.(!active)}>
69
- <View style={[styles.container, active && selectedStyle]}>
70
- {image && <Image source={image} style={[mapImageSize]} />}
71
- <Text.Label2
72
- style={[
73
- mapTextSize,
74
- { color: active ? activeTextColor : Colors.black_17 },
75
- ]}>
76
- {title}
77
- </Text.Label2>
78
- {type !== 'default' && (
79
- <TouchableOpacity
80
- onPress={onIconPress}
81
- disabled={!onIconPress}
82
- style={styles.iconContainer}>
83
- <Image source={iconSource} style={styles.icon} />
84
- </TouchableOpacity>
85
- )}
86
- </View>
87
- {active && (
88
- <View
89
- style={[
90
- styles.background,
91
- {
92
- borderColor: activeBorderColor,
93
- },
94
- ]}
95
- />
96
- )}
97
- </TouchableOpacity>
98
- );
65
+ return (
66
+ <TouchableOpacity
67
+ style={[{alignSelf: 'baseline'}, style]}
68
+ onPress={() => onPress?.(!active)}>
69
+ <View style={[styles.container, active && selectedStyle]}>
70
+ {image && <Image source={image} style={[mapImageSize]} />}
71
+ <Text.Label2
72
+ style={[
73
+ mapTextSize,
74
+ {color: active ? activeTextColor : Colors.black_17},
75
+ ]}>
76
+ {title}
77
+ </Text.Label2>
78
+ {type !== 'default' && (
79
+ <TouchableOpacity
80
+ onPress={onIconPress}
81
+ disabled={!onIconPress}
82
+ style={styles.iconContainer}>
83
+ <Image source={iconSource} style={styles.icon} />
84
+ </TouchableOpacity>
85
+ )}
86
+ </View>
87
+ {active && (
88
+ <View
89
+ style={[
90
+ styles.background,
91
+ {
92
+ borderColor: activeBorderColor,
93
+ },
94
+ ]}
95
+ />
96
+ )}
97
+ </TouchableOpacity>
98
+ );
99
99
  };
100
100
 
101
101
  const styles = StyleSheet.create({
102
- container: {
103
- borderRadius: Radius.L,
104
- flexDirection: 'row',
105
- paddingVertical: Spacing.XXS + Spacing.XS,
106
- paddingHorizontal: Spacing.S,
107
- justifyContent: 'center',
108
- alignItems: 'center',
109
- backgroundColor: Colors.black_04,
110
- },
111
- icon: {
112
- width: 16,
113
- height: 16,
114
- tintColor: Colors.black_17,
115
- },
116
- background: {
117
- position: 'absolute',
118
- top: 0,
119
- right: 0,
120
- bottom: 0,
121
- left: 0,
122
- borderRadius: Radius.L,
123
- borderWidth: 2,
124
- },
125
- iconContainer: {
126
- marginLeft: Spacing.XS,
127
- },
102
+ container: {
103
+ borderRadius: Radius.L,
104
+ flexDirection: 'row',
105
+ paddingVertical: Spacing.XXS + Spacing.XS,
106
+ paddingHorizontal: Spacing.S,
107
+ justifyContent: 'center',
108
+ alignItems: 'center',
109
+ backgroundColor: Colors.black_04,
110
+ },
111
+ icon: {
112
+ width: 16,
113
+ height: 16,
114
+ tintColor: Colors.black_17,
115
+ },
116
+ background: {
117
+ position: 'absolute',
118
+ top: 0,
119
+ right: 0,
120
+ bottom: 0,
121
+ left: 0,
122
+ borderRadius: Radius.L,
123
+ borderWidth: 2,
124
+ },
125
+ iconContainer: {
126
+ marginLeft: Spacing.XS,
127
+ },
128
128
  });
129
129
 
130
130
  Chip.propTypes = {
131
- image: PropTypes.string,
132
- title: PropTypes.string,
133
- size: PropTypes.oneOf(['small', 'default']),
134
- onPress: PropTypes.func,
135
- active: PropTypes.bool,
136
- style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
137
- onIconPress: PropTypes.func,
138
- type: PropTypes.oneOf(['default', 'removable', 'action']),
139
- activeBackgroundColor: PropTypes.string,
140
- activeBorderColor: PropTypes.string,
141
- activeTextColor: PropTypes.string,
131
+ image: PropTypes.string,
132
+ title: PropTypes.string,
133
+ size: PropTypes.oneOf(['small', 'default']),
134
+ onPress: PropTypes.func,
135
+ active: PropTypes.bool,
136
+ style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
137
+ onIconPress: PropTypes.func,
138
+ type: PropTypes.oneOf(['default', 'removable', 'action']),
139
+ activeBackgroundColor: PropTypes.string,
140
+ activeBorderColor: PropTypes.string,
141
+ activeTextColor: PropTypes.string,
142
142
  };
143
143
 
144
144
  Chip.defaultProps = {
145
- size: 'default',
146
- type: 'default',
147
- active: false,
148
- activeBackgroundColor: Colors.pink_10,
149
- activeBorderColor: Colors.pink_06,
150
- activeTextColor: Colors.pink_03,
145
+ size: 'default',
146
+ type: 'default',
147
+ active: false,
148
+ activeBackgroundColor: Colors.pink_10,
149
+ activeBorderColor: Colors.pink_06,
150
+ activeTextColor: Colors.pink_03,
151
151
  };
152
152
 
153
153
  export default Chip;
package/package.json CHANGED
@@ -1,17 +1,17 @@
1
1
  {
2
- "name": "@momo-kits/chip",
3
- "version": "0.0.62-alpha.37",
4
- "private": false,
5
- "main": "index.js",
6
- "dependencies": {
7
- "prop-types": "^15.7.2",
8
- "react": "16.9.0"
9
- },
10
- "peerDependencies": {
11
- "react": "16.9.0",
12
- "react-native": ">=0.55",
13
- "@momo-kits/core-v2": ">=0.0.4-beta"
14
- },
15
- "devDependencies": {},
16
- "license": "MoMo"
17
- }
2
+ "name": "@momo-kits/chip",
3
+ "version": "0.0.65-beta.2",
4
+ "private": false,
5
+ "main": "index.js",
6
+ "dependencies": {
7
+ "prop-types": "^15.7.2",
8
+ "react": "16.9.0"
9
+ },
10
+ "peerDependencies": {
11
+ "react": "16.9.0",
12
+ "react-native": ">=0.55",
13
+ "@momo-kits/core-v2": ">=0.0.4-beta"
14
+ },
15
+ "devDependencies": {},
16
+ "license": "MoMo"
17
+ }