@xetwa/design-system 1.0.21 → 1.0.22
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/package.json
CHANGED
|
@@ -25,6 +25,8 @@ export interface WordChipProps {
|
|
|
25
25
|
fullWidth?: boolean;
|
|
26
26
|
/** Tamanho do chip. */
|
|
27
27
|
size?: 'sm' | 'md' | 'lg';
|
|
28
|
+
/** Largura personalizada. Ignora max-width e align-self flex-start. */
|
|
29
|
+
width?: number | string;
|
|
28
30
|
}
|
|
29
31
|
|
|
30
32
|
export const WordChip = ({
|
|
@@ -35,6 +37,7 @@ export const WordChip = ({
|
|
|
35
37
|
disabled = false,
|
|
36
38
|
fullWidth = false,
|
|
37
39
|
size = 'md',
|
|
40
|
+
width,
|
|
38
41
|
}: WordChipProps) => {
|
|
39
42
|
const { scale, scaleText } = useResponsive();
|
|
40
43
|
const [isPressed, setIsPressed] = useState(false);
|
|
@@ -103,13 +106,13 @@ export const WordChip = ({
|
|
|
103
106
|
const showPressed = isPressed && !isDisabled;
|
|
104
107
|
|
|
105
108
|
return (
|
|
106
|
-
<Animated.View style={[{ transform: [{ scale: scaleAnim }] }, style]}>
|
|
109
|
+
<Animated.View style={[{ transform: [{ scale: scaleAnim }] }, width ? { width } : null, style]}>
|
|
107
110
|
<Pressable
|
|
108
111
|
onPressIn={() => setIsPressed(true)}
|
|
109
112
|
onPressOut={() => setIsPressed(false)}
|
|
110
113
|
onPress={onPress}
|
|
111
114
|
disabled={isDisabled}
|
|
112
|
-
style={{ alignSelf: fullWidth ? 'stretch' : 'flex-start' }}
|
|
115
|
+
style={{ alignSelf: width ? 'stretch' : (fullWidth ? 'stretch' : 'flex-start') }}
|
|
113
116
|
>
|
|
114
117
|
<View style={[
|
|
115
118
|
styles.shadowContainer,
|
|
@@ -118,7 +121,8 @@ export const WordChip = ({
|
|
|
118
121
|
borderRadius: scale(12),
|
|
119
122
|
paddingBottom: showPressed ? 0 : scale(3),
|
|
120
123
|
marginTop: showPressed ? scale(3) : 0,
|
|
121
|
-
}
|
|
124
|
+
},
|
|
125
|
+
(fullWidth || width) ? { alignSelf: 'stretch', width: '100%' } : null
|
|
122
126
|
]}>
|
|
123
127
|
<View style={[
|
|
124
128
|
styles.innerContainer,
|
|
@@ -130,7 +134,7 @@ export const WordChip = ({
|
|
|
130
134
|
paddingHorizontal: scale(size === 'lg' ? 20 : size === 'sm' ? 10 : 14),
|
|
131
135
|
minHeight: scale(size === 'lg' ? 56 : size === 'sm' ? 36 : 44),
|
|
132
136
|
},
|
|
133
|
-
fullWidth
|
|
137
|
+
(fullWidth || width) ? { width: '100%' } : null
|
|
134
138
|
]}>
|
|
135
139
|
<Typography style={[
|
|
136
140
|
styles.text,
|