@momo-kits/chip 0.0.62-alpha.36 → 0.0.62-alpha.37
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.
- package/index.js +39 -14
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React, {useRef} from 'react';
|
|
2
|
-
import {StyleSheet, View, Animated} from 'react-native';
|
|
1
|
+
import React, { useRef } from 'react';
|
|
2
|
+
import { StyleSheet, View, Animated } from 'react-native';
|
|
3
3
|
import {
|
|
4
4
|
Colors,
|
|
5
5
|
Image,
|
|
@@ -40,8 +40,19 @@ const chevronDown =
|
|
|
40
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
42
|
const Chip = (props) => {
|
|
43
|
-
const {
|
|
44
|
-
|
|
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
57
|
const mapTextSize = textSize[size] || textSize.default;
|
|
47
58
|
const mapImageSize = imageSize[size] || imageSize.default;
|
|
@@ -53,24 +64,36 @@ const Chip = (props) => {
|
|
|
53
64
|
|
|
54
65
|
return (
|
|
55
66
|
<TouchableOpacity
|
|
56
|
-
style={[{alignSelf: 'baseline'}, style]}
|
|
67
|
+
style={[{ alignSelf: 'baseline' }, style]}
|
|
57
68
|
onPress={() => onPress?.(!active)}>
|
|
58
69
|
<View style={[styles.container, active && selectedStyle]}>
|
|
59
|
-
{image && <Image source={image} style={[mapImageSize]}/>}
|
|
60
|
-
<Text.Label2
|
|
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>
|
|
61
78
|
{type !== 'default' && (
|
|
62
79
|
<TouchableOpacity
|
|
63
80
|
onPress={onIconPress}
|
|
64
81
|
disabled={!onIconPress}
|
|
65
82
|
style={styles.iconContainer}>
|
|
66
|
-
<Image source={iconSource} style={styles.icon}/>
|
|
83
|
+
<Image source={iconSource} style={styles.icon} />
|
|
67
84
|
</TouchableOpacity>
|
|
68
85
|
)}
|
|
69
86
|
</View>
|
|
70
|
-
{active &&
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
87
|
+
{active && (
|
|
88
|
+
<View
|
|
89
|
+
style={[
|
|
90
|
+
styles.background,
|
|
91
|
+
{
|
|
92
|
+
borderColor: activeBorderColor,
|
|
93
|
+
},
|
|
94
|
+
]}
|
|
95
|
+
/>
|
|
96
|
+
)}
|
|
74
97
|
</TouchableOpacity>
|
|
75
98
|
);
|
|
76
99
|
};
|
|
@@ -114,7 +137,8 @@ Chip.propTypes = {
|
|
|
114
137
|
onIconPress: PropTypes.func,
|
|
115
138
|
type: PropTypes.oneOf(['default', 'removable', 'action']),
|
|
116
139
|
activeBackgroundColor: PropTypes.string,
|
|
117
|
-
activeBorderColor: PropTypes.string
|
|
140
|
+
activeBorderColor: PropTypes.string,
|
|
141
|
+
activeTextColor: PropTypes.string,
|
|
118
142
|
};
|
|
119
143
|
|
|
120
144
|
Chip.defaultProps = {
|
|
@@ -122,7 +146,8 @@ Chip.defaultProps = {
|
|
|
122
146
|
type: 'default',
|
|
123
147
|
active: false,
|
|
124
148
|
activeBackgroundColor: Colors.pink_10,
|
|
125
|
-
activeBorderColor: Colors.pink_06
|
|
149
|
+
activeBorderColor: Colors.pink_06,
|
|
150
|
+
activeTextColor: Colors.pink_03,
|
|
126
151
|
};
|
|
127
152
|
|
|
128
153
|
export default Chip;
|