Skip to content

Commit e1fac91

Browse files
lidord-wixlidord-wix
authored
Feat/ Add custom elements (#1298)
1 parent fb9a81b commit e1fac91

File tree

3 files changed

+89
-57
lines changed

3 files changed

+89
-57
lines changed

‎demo/src/screens/componentScreens/ChipScreen.tsx

Lines changed: 49 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
11
import _ from 'lodash';
22
import React, {Component} from 'react';
33
import {Alert} from 'react-native';
4-
import {Chip, Colors, Spacings, Text, Typography, View, Dialog, WheelPickerDialog} from 'react-native-ui-lib';
4+
import {Chip, Colors, Spacings, Text, Typography, View, Dialog, WheelPickerDialog, Image} from 'react-native-ui-lib';
55

66
const avatarImage = {
77
uri: 'https://randomuser.me/api/portraits/women/24.jpg'
88
};
99
const checkmark = require('../../assets/icons/check-small.png');
1010
const chevron = require('../../assets/icons/chevronDown.png');
11-
11+
const bell = require('../../assets/icons/bell.png');
1212

1313
export default class ChipScreen extends Component {
14-
1514
colors = [
1615
{value: Colors.red10, label: 'Red'},
1716
{value: Colors.blue10, label: 'Blue'},
@@ -31,7 +30,7 @@ export default class ChipScreen extends Component {
3130

3231
openDialog = () => {
3332
this.toggleDialog(true);
34-
}
33+
};
3534

3635
closeDialog = () => {
3736
this.toggleDialog(false);
@@ -73,13 +72,7 @@ export default class ChipScreen extends Component {
7372
const {showDialog} = this.state;
7473

7574
return (
76-
<Dialog
77-
migrate
78-
visible={showDialog}
79-
useSafeArea
80-
bottom
81-
onDismiss={this.closeDialog}
82-
>
75+
<Dialog migrate visible={showDialog} useSafeArea bottom onDismiss={this.closeDialog}>
8376
{this.renderContent()}
8477
</Dialog>
8578
);
@@ -104,59 +97,34 @@ export default class ChipScreen extends Component {
10497
<Text marginB-10 text70BO>
10598
Default
10699
</Text>
107-
{this.renderExample(
108-
'Label',
109-
<Chip label={'Chip'}/>
110-
)}
111-
{this.renderExample(
112-
'Label + onPress',
113-
<Chip label={'Chip'} onPress={() => Alert.alert('onPress')}/>
114-
)}
115-
{this.renderExample(
116-
'Label + onDismiss',
100+
{this.renderExample('Label', <Chip label={'Chip'}/>)}
101+
{this.renderExample('Label + onPress', <Chip label={'Chip'} onPress={() => Alert.alert('onPress')}/>)}
102+
{this.renderExample('Label + onDismiss',
117103
<Chip
118104
label={'Chip'}
119105
iconColor={Colors.black}
120106
onDismiss={() => Alert.alert('onDismiss')}
121107
onPress={() => Alert.alert('onPress')}
122108
dismissIconStyle={{width: 10, height: 10}}
123-
/>
124-
)}
125-
{this.renderExample(
126-
'Icon',
127-
<Chip
128-
iconSource={checkmark}
129-
iconStyle={{width: 24, height: 24}}
130-
iconProps={{tintColor: Colors.black}}
131-
/>
132-
)}
133-
{this.renderExample(
134-
'Left icon',
109+
/>)}
110+
{this.renderExample('Icon',
111+
<Chip iconSource={checkmark} iconStyle={{width: 24, height: 24}} iconProps={{tintColor: Colors.black}}/>)}
112+
{this.renderExample('Left icon',
135113
<Chip
136114
label={'Chip'}
137115
iconSource={checkmark}
138116
iconStyle={{width: 24, height: 24}}
139117
iconProps={{tintColor: Colors.black}}
140-
/>
141-
)}
142-
{this.renderExample(
143-
'Right icon + onPress + dynamic label',
118+
/>)}
119+
{this.renderExample('Right icon + onPress + dynamic label',
144120
<Chip
145121
label={this.state.selectedValue}
146122
rightIconSource={chevron}
147123
iconStyle={{margin: 8}}
148124
onPress={this.openDialog}
149-
/>
150-
)}
151-
{this.renderExample(
152-
'Label + Avatar',
153-
<Chip
154-
label={'Chip'}
155-
avatarProps={{source: avatarImage, size: 20}}
156-
/>
157-
)}
158-
{this.renderExample(
159-
'Label + Counter',
125+
/>)}
126+
{this.renderExample('Label + Avatar', <Chip label={'Chip'} avatarProps={{source: avatarImage, size: 20}}/>)}
127+
{this.renderExample('Label + Counter',
160128
<Chip
161129
label={'Chip'}
162130
labelStyle={{
@@ -170,18 +138,15 @@ export default class ChipScreen extends Component {
170138
color: Colors.grey20
171139
}
172140
}}
173-
/>
174-
)}
175-
{this.renderExample(
176-
'Label + Badge',
141+
/>)}
142+
{this.renderExample('Label + Badge',
177143
<Chip
178144
label={'Chip'}
179145
badgeProps={{
180146
label: '4',
181147
backgroundColor: 'red'
182148
}}
183-
/>
184-
)}
149+
/>)}
185150

186151
<Text marginT-20 marginB-10 text70BO>
187152
Custom
@@ -234,6 +199,36 @@ export default class ChipScreen extends Component {
234199
}}
235200
/>
236201
</View>
202+
<View center row marginT-10>
203+
<Chip
204+
rightElement={<Image tintColor={Colors.yellow30} source={bell} width={24} height={24}/>}
205+
label={'Chip'}
206+
/>
207+
<Chip
208+
marginL-s3
209+
rightElement={<Image tintColor={Colors.green20} source={bell} width={20} height={20}/>}
210+
leftElement={<Image tintColor={Colors.green20} source={bell} width={20} height={20}/>}
211+
label={'Chip'}
212+
/>
213+
<Chip
214+
marginL-s3
215+
leftElement={
216+
<View center row marginL-s1>
217+
<Image tintColor={Colors.blue30} source={bell}/>
218+
<Image tintColor={Colors.blue30} source={bell} width={20} height={20}/>
219+
<Image tintColor={Colors.blue30} source={bell} width={24} height={24}/>
220+
</View>
221+
}
222+
label={'Chip'}
223+
/>
224+
<Chip
225+
marginL-s3
226+
paddingR-s2
227+
rightIconSource={chevron}
228+
rightElement={<Image tintColor={Colors.red30} source={bell} width={20} height={20}/>}
229+
label={'Chip'}
230+
/>
231+
</View>
237232
</View>
238233
);
239234
}

‎generatedTypes/components/chip/index.d.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,14 @@ export declare type ChipProps = ViewProps & TouchableOpacityProps & {
7676
* Right icon's source
7777
*/
7878
rightIconSource?: ImageSourcePropType;
79+
/**
80+
* Left custom element
81+
*/
82+
leftElement?: JSX.Element;
83+
/**
84+
* Right custom element
85+
*/
86+
rightElement?: JSX.Element;
7987
/**
8088
* Adds a dismiss button and serves as its callback
8189
*/
@@ -170,6 +178,14 @@ declare const _default: React.ComponentClass<ViewProps & TouchableOpacityProps &
170178
* Right icon's source
171179
*/
172180
rightIconSource?: number | import("react-native").ImageURISource | import("react-native").ImageURISource[] | undefined;
181+
/**
182+
* Left custom element
183+
*/
184+
leftElement?: JSX.Element | undefined;
185+
/**
186+
* Right custom element
187+
*/
188+
rightElement?: JSX.Element | undefined;
173189
/**
174190
* Adds a dismiss button and serves as its callback
175191
*/

‎src/components/chip/index.tsx

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React, {useCallback} from 'react';
33
import {StyleSheet, StyleProp, ViewStyle, ViewProps, ImageStyle, TextStyle, ImageSourcePropType} from 'react-native';
44
import Assets from '../../assets';
55
import {asBaseComponent} from '../../commons/new';
6-
import {BorderRadiuses, Spacings} from '../../style';
6+
import {BorderRadiuses, Spacings} from 'style';
77
import Avatar, {AvatarProps} from '../avatar';
88
import Badge, {BadgeProps, BADGE_SIZES} from '../badge';
99
import Image, {ImageProps} from '../image';
@@ -94,6 +94,18 @@ export type ChipProps = ViewProps & TouchableOpacityProps & {
9494
*/
9595
rightIconSource?: ImageSourcePropType;
9696

97+
//LEFT ELEMENT
98+
/**
99+
* Left custom element
100+
*/
101+
leftElement?: JSX.Element;
102+
103+
//RIGHT ELEMENT
104+
/**
105+
* Right custom element
106+
*/
107+
rightElement?: JSX.Element;
108+
97109
//DISMISS ('x' button)
98110
/**
99111
* Adds a dismiss button and serves as its callback
@@ -142,6 +154,8 @@ const Chip = ({
142154
iconSource,
143155
iconStyle,
144156
rightIconSource,
157+
leftElement,
158+
rightElement,
145159
label,
146160
labelStyle,
147161
onPress,
@@ -241,13 +255,18 @@ const Chip = ({
241255
marginRight: Spacings.s1
242256
};
243257
}
244-
if (iconSource) {
258+
if (rightElement && leftElement) {
259+
return {
260+
marginHorizontally: 2
261+
};
262+
}
263+
if (iconSource || leftElement) {
245264
return {
246265
marginLeft: 2,
247266
marginRight: Spacings.s3
248267
};
249268
}
250-
if (rightIconSource) {
269+
if (rightIconSource || rightElement) {
251270
return {
252271
marginLeft: Spacings.s3,
253272
marginRight: 2
@@ -304,7 +323,9 @@ const Chip = ({
304323
>
305324
{avatarProps && renderAvatar()}
306325
{iconSource && renderIcon('left')}
326+
{leftElement}
307327
{label && renderLabel()}
328+
{rightElement}
308329
{rightIconSource && renderIcon('right')}
309330
{badgeProps && renderBadge()}
310331
{onDismiss && renderOnDismiss()}

0 commit comments

Comments
 (0)