@momo-kits/chip 0.0.62-alpha.36 → 0.0.65-alpha.10

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 -101
  2. package/package.json +16 -16
package/index.js CHANGED
@@ -1,128 +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 {image, title, size, onPress, active, style, onIconPress, type, activeBackgroundColor, activeBorderColor} =
44
- 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;
45
56
 
46
- const mapTextSize = textSize[size] || textSize.default;
47
- const mapImageSize = imageSize[size] || imageSize.default;
48
- 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;
49
60
 
50
- const selectedStyle = {
51
- backgroundColor: activeBackgroundColor,
52
- };
61
+ const selectedStyle = {
62
+ backgroundColor: activeBackgroundColor,
63
+ };
53
64
 
54
- return (
55
- <TouchableOpacity
56
- style={[{alignSelf: 'baseline'}, style]}
57
- onPress={() => onPress?.(!active)}>
58
- <View style={[styles.container, active && selectedStyle]}>
59
- {image && <Image source={image} style={[mapImageSize]}/>}
60
- <Text.Label2 style={[mapTextSize]}>{title}</Text.Label2>
61
- {type !== 'default' && (
62
- <TouchableOpacity
63
- onPress={onIconPress}
64
- disabled={!onIconPress}
65
- style={styles.iconContainer}>
66
- <Image source={iconSource} style={styles.icon}/>
67
- </TouchableOpacity>
68
- )}
69
- </View>
70
- {active && <View style={[styles.background, {
71
- borderColor: activeBorderColor,
72
-
73
- }]}/>}
74
- </TouchableOpacity>
75
- );
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
+ );
76
99
  };
77
100
 
78
101
  const styles = StyleSheet.create({
79
- container: {
80
- borderRadius: Radius.L,
81
- flexDirection: 'row',
82
- paddingVertical: Spacing.XXS + Spacing.XS,
83
- paddingHorizontal: Spacing.S,
84
- justifyContent: 'center',
85
- alignItems: 'center',
86
- backgroundColor: Colors.black_04,
87
- },
88
- icon: {
89
- width: 16,
90
- height: 16,
91
- tintColor: Colors.black_17,
92
- },
93
- background: {
94
- position: 'absolute',
95
- top: 0,
96
- right: 0,
97
- bottom: 0,
98
- left: 0,
99
- borderRadius: Radius.L,
100
- borderWidth: 2,
101
- },
102
- iconContainer: {
103
- marginLeft: Spacing.XS,
104
- },
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
+ },
105
128
  });
106
129
 
107
130
  Chip.propTypes = {
108
- image: PropTypes.string,
109
- title: PropTypes.string,
110
- size: PropTypes.oneOf(['small', 'default']),
111
- onPress: PropTypes.func,
112
- active: PropTypes.bool,
113
- style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
114
- onIconPress: PropTypes.func,
115
- type: PropTypes.oneOf(['default', 'removable', 'action']),
116
- activeBackgroundColor: PropTypes.string,
117
- activeBorderColor: 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,
118
142
  };
119
143
 
120
144
  Chip.defaultProps = {
121
- size: 'default',
122
- type: 'default',
123
- active: false,
124
- activeBackgroundColor: Colors.pink_10,
125
- activeBorderColor: Colors.pink_06
145
+ size: 'default',
146
+ type: 'default',
147
+ active: false,
148
+ activeBackgroundColor: Colors.pink_10,
149
+ activeBorderColor: Colors.pink_06,
150
+ activeTextColor: Colors.pink_03,
126
151
  };
127
152
 
128
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.36",
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-alpha.10",
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
+ }