@@ -11,122 +11,123 @@ import TouchableOpacity, {TouchableOpacityProps} from '../touchableOpacity';
1111import View from '../view' ;
1212import Icon , { IconProps } from '../icon' ;
1313
14- export type ChipProps = ViewProps & TouchableOpacityProps & {
15- //GENERAL
16- /**
17- * Chip's size. Number or a width and height object.
18- */
19- size ?: number | { width : number , height : number } ;
20- /**
21- * On Chip press callback
22- */
23- onPress ?: ( props : any ) => void ;
24- /**
25- * Chip's background color
26- */
27- backgroundColor ?: string ;
28- /**
29- * The Chip borderRadius
30- */
31- borderRadius ?: number ;
32- /**
33- * Chip's container style
34- */
35- containerStyle ?: StyleProp < ViewStyle > ;
36- /**
37- * Uses size as minWidth and minHeight - default is true
38- */
39- useSizeAsMinimum ?: boolean ;
40- /**
41- * Disables all internal elements default spacings. Helps reach a custom design
42- */
43- resetSpacings ?: boolean ;
14+ export type ChipProps = ViewProps &
15+ TouchableOpacityProps & {
16+ //GENERAL
4417 /**
45- * Used as testing identifier
46- */
47- testID ?: string ;
18+ * Chip's size. Number or a width and height object.
19+ */
20+ size ?: number | { width : number ; height : number } ;
21+ /**
22+ * On Chip press callback
23+ */
24+ onPress ?: ( props : any ) => void ;
25+ /**
26+ * Chip's background color
27+ */
28+ backgroundColor ?: string ;
29+ /**
30+ * The Chip borderRadius
31+ */
32+ borderRadius ?: number ;
33+ /**
34+ * Chip's container style
35+ */
36+ containerStyle ?: StyleProp < ViewStyle > ;
37+ /**
38+ * Uses size as minWidth and minHeight - default is true
39+ */
40+ useSizeAsMinimum ?: boolean ;
41+ /**
42+ * Disables all internal elements default spacings. Helps reach a custom design
43+ */
44+ resetSpacings ?: boolean ;
45+ /**
46+ * Used as testing identifier
47+ */
48+ testID ?: string ;
4849
49- //LABEL
50- /**
51- * Main Chip text
52- */
53- label ?: string ;
54- /**
55- * Label's style
56- */
57- labelStyle ?: StyleProp < TextStyle > ;
50+ //LABEL
51+ /**
52+ * Main Chip text
53+ */
54+ label ?: string ;
55+ /**
56+ * Label's style
57+ */
58+ labelStyle ?: StyleProp < TextStyle > ;
5859
59- //BADGE
60- /**
61- * Badge props object
62- */
63- badgeProps ?: BadgeProps ;
64- /**
65- * Display badge as counter (no background)
66- */
67- useCounter ?: boolean ;
68- //AVATAR
69- /**
70- * Avatar props object
71- */
72- avatarProps ?: AvatarProps ;
60+ //BADGE
61+ /**
62+ * Badge props object
63+ */
64+ badgeProps ?: BadgeProps ;
65+ /**
66+ * Display badge as counter (no background)
67+ */
68+ useCounter ?: boolean ;
69+ //AVATAR
70+ /**
71+ * Avatar props object
72+ */
73+ avatarProps ?: AvatarProps ;
7374
74- //ICON GENERAL
75- /**
76- * Additional icon props
77- */
78- iconProps ?: Omit < IconProps , 'source' > ;
79- /**
80- * Icon style
81- */
82- iconStyle ?: StyleProp < ImageStyle > ;
75+ //ICON GENERAL
76+ /**
77+ * Additional icon props
78+ */
79+ iconProps ?: Omit < IconProps , 'source' > ;
80+ /**
81+ * Icon style
82+ */
83+ iconStyle ?: StyleProp < ImageStyle > ;
8384
84- //LEFT ICON
85- /**
86- * Left icon's source
87- */
88- iconSource ?: ImageSourcePropType ;
85+ //LEFT ICON
86+ /**
87+ * Left icon's source
88+ */
89+ iconSource ?: ImageSourcePropType ;
8990
90- //RIGHT ICON
91- /**
92- * Right icon's source
93- */
94- rightIconSource ?: ImageSourcePropType ;
91+ //RIGHT ICON
92+ /**
93+ * Right icon's source
94+ */
95+ rightIconSource ?: ImageSourcePropType ;
9596
96- //LEFT ELEMENT
97- /**
98- * Left custom element
99- */
100- leftElement ?: JSX . Element ;
97+ //LEFT ELEMENT
98+ /**
99+ * Left custom element
100+ */
101+ leftElement ?: JSX . Element ;
101102
102- //RIGHT ELEMENT
103- /**
104- * Right custom element
105- */
106- rightElement ?: JSX . Element ;
107-
108- //DISMISS ('x' button)
109- /**
110- * Adds a dismiss button and serves as its callback
111- */
112- onDismiss ?: ( props : any ) => void ;
113- /**
114- * Dismiss color
115- */
116- dismissColor ?: string ;
117- /**
118- * Dismiss asset
119- */
120- dismissIcon ?: ImageSourcePropType ;
121- /**
122- * Dismiss style
123- */
124- dismissIconStyle ?: StyleProp < ImageStyle > ;
125- /**
126- * Dismiss container style
127- */
128- dismissContainerStyle ?: StyleProp < ImageStyle > ;
129- }
103+ //RIGHT ELEMENT
104+ /**
105+ * Right custom element
106+ */
107+ rightElement ?: JSX . Element ;
108+
109+ //DISMISS ('x' button)
110+ /**
111+ * Adds a dismiss button and serves as its callback
112+ */
113+ onDismiss ?: ( props : any ) => void ;
114+ /**
115+ * Dismiss color
116+ */
117+ dismissColor ?: string ;
118+ /**
119+ * Dismiss asset
120+ */
121+ dismissIcon ?: ImageSourcePropType ;
122+ /**
123+ * Dismiss style
124+ */
125+ dismissIconStyle ?: StyleProp < ImageStyle > ;
126+ /**
127+ * Dismiss container style
128+ */
129+ dismissContainerStyle ?: StyleProp < ImageStyle > ;
130+ } ;
130131
131132const DEFAULT_SIZE = 26 ;
132133
@@ -164,7 +165,6 @@ const Chip = ({
164165 testID,
165166 ...others
166167} : ChipProps ) => {
167-
168168 const renderIcon = useCallback ( ( iconPosition : 'left' | 'right' ) => {
169169 const isLeftIcon = iconPosition === 'left' ;
170170
@@ -177,8 +177,8 @@ const Chip = ({
177177 style = { [ getMargins ( 'iconSource' ) , iconStyle ] }
178178 />
179179 ) ;
180- } , [ iconSource , rightIconSource , iconStyle , iconProps ] ) ;
181-
180+ } ,
181+ [ iconSource , rightIconSource , iconStyle , iconProps ] ) ;
182182
183183 const renderBadge = useCallback ( ( ) => {
184184 return (
@@ -255,22 +255,27 @@ const Chip = ({
255255 marginRight : Spacings . s1
256256 } ;
257257 }
258- if ( rightElement && leftElement ) {
259- return {
260- marginHorizontal : 2
261- } ;
262- }
263- if ( iconSource || leftElement ) {
264- return {
265- marginLeft : 2 ,
266- marginRight : Spacings . s3
267- } ;
268- }
269- if ( rightIconSource || rightElement ) {
270- return {
271- marginLeft : Spacings . s3 ,
272- marginRight : 2
273- } ;
258+ if ( iconSource || leftElement || rightIconSource || rightElement ) {
259+ const addMarginLeft = ! ! ( iconSource || leftElement ) ;
260+ const addMarginRight = ! ! ( rightIconSource || rightElement ) ;
261+ const marginFromElement = Spacings . s1 ;
262+ if ( addMarginLeft && addMarginRight ) {
263+ return {
264+ marginHorizontal : marginFromElement
265+ } ;
266+ }
267+ if ( addMarginLeft ) {
268+ return {
269+ marginLeft : marginFromElement ,
270+ marginRight : Spacings . s3
271+ } ;
272+ }
273+ if ( addMarginRight ) {
274+ return {
275+ marginLeft : Spacings . s3 ,
276+ marginRight : marginFromElement
277+ } ;
278+ }
274279 }
275280 if ( onDismiss ) {
276281 return {
@@ -294,7 +299,8 @@ const Chip = ({
294299 } ;
295300 }
296301 }
297- } , [ avatarProps , badgeProps , iconSource , rightIconSource , onDismiss ] ) ;
302+ } ,
303+ [ avatarProps , badgeProps , iconSource , rightIconSource , onDismiss ] ) ;
298304
299305 const getContainerSize = useCallback ( ( ) => {
300306 const width = useSizeAsMinimum ? 'minWidth' : 'width' ;
@@ -311,13 +317,7 @@ const Chip = ({
311317 < Container
312318 activeOpacity = { 1 }
313319 onPress = { onPress }
314- style = { [
315- styles . container ,
316- { backgroundColor} ,
317- { borderRadius} ,
318- containerStyle ,
319- getContainerSize ( )
320- ] }
320+ style = { [ styles . container , { backgroundColor} , { borderRadius} , containerStyle , getContainerSize ( ) ] }
321321 testID = { testID }
322322 { ...others }
323323 >
0 commit comments