Skip to content

Commit 9533453

Browse files
ArnonZArnonZ
authored
Feat/Chip (#823)
* Initial commit * Adding checkmark small to demo assets * Adding Chip component example screen * Updating Chip ts file * Chip component * Adding displayName * Updating ts file * Cosmetics * Update borderRadius * Props declaration * Update defaultProps * Cosmetics * Refactor * TS fixes * Prop descirption changes * Cosmetics * Updating api * Updating example screen * Support exporting component Props type * Updaing Chip generated types
1 parent c6a7173 commit 9533453

File tree

13 files changed

+578
-0
lines changed

13 files changed

+578
-0
lines changed

‎demo/src/assets/icons/check-small.png

164 Bytes
Loading

‎demo/src/assets/icons/[email protected]

184 Bytes
Loading

‎demo/src/assets/icons/[email protected]

182 Bytes
Loading

‎demo/src/assets/icons/[email protected]

245 Bytes
Loading

‎demo/src/assets/icons/[email protected]

274 Bytes
Loading

‎demo/src/screens/MenuStructure.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ export const navigationData = {
3030
{title: 'Badges', tags: 'badge', screen: 'unicorn.components.BadgesScreen'},
3131
{title: 'Cards', tags: 'cards feed', screen: 'unicorn.components.CardsScreen'},
3232
{title: 'Connection Status Bar', tags: 'connection status bar', screen: 'unicorn.components.ConnectionStatusBar'},
33+
{title: 'Chip', tags: 'chip', screen: 'unicorn.components.ChipScreen'},
3334
// {title: 'Overlays', tags: 'overlay image', screen: 'unicorn.components.OverlaysScreen'},
3435
{title: 'Page Control', tags: 'page', screen: 'unicorn.components.PageControlScreen'},
3536
{title: 'ProgressBar', tags: 'progress bar animated', screen: 'unicorn.animations.ProgressBarScreen'},

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

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
import React, {Component} from 'react';
2+
import {Alert} from 'react-native';
3+
import {Chip, Colors, Spacings, Text, Typography, View} from 'react-native-ui-lib';
4+
5+
const avatarImage = {
6+
uri: 'https://randomuser.me/api/portraits/women/24.jpg'
7+
};
8+
const checkmark = require('../../assets/icons/check-small.png');
9+
10+
export default class ChipScreen extends Component {
11+
renderExample = (text: string, chip: JSX.Element) => {
12+
return (
13+
<View row spread marginB-12>
14+
<Text text70>{text}</Text>
15+
{chip}
16+
</View>
17+
);
18+
};
19+
20+
render() {
21+
return (
22+
<View style={{padding: 20}}>
23+
<Text marginB-20 text40>
24+
Chip
25+
</Text>
26+
<Text marginB-10 text70BO>
27+
Default
28+
</Text>
29+
{this.renderExample(
30+
'label',
31+
<Chip label={'Chip'}/>
32+
)}
33+
{this.renderExample(
34+
'label with onPress',
35+
<Chip label={'Chip'} onPress={() => Alert.alert('onPress')}/>
36+
)}
37+
{this.renderExample(
38+
'label + onDismiss',
39+
<Chip
40+
label={'Chip'}
41+
iconColor={Colors.black}
42+
onDismiss={() => Alert.alert('onDismiss')}
43+
onPress={() => Alert.alert('onPress')}
44+
dismissIconStyle={{width: 10, height: 10}}
45+
/>
46+
)}
47+
{this.renderExample(
48+
'Icon',
49+
<Chip
50+
iconSource={checkmark}
51+
iconColor={Colors.black}
52+
iconStyle={{width: 24, height: 24}}
53+
/>
54+
)}
55+
{this.renderExample(
56+
'label + icon',
57+
<Chip
58+
label={'Chip'}
59+
iconSource={checkmark}
60+
iconStyle={{width: 24, height: 24}}
61+
iconColor={Colors.black}
62+
/>
63+
)}
64+
{this.renderExample(
65+
'label + Avatar',
66+
<Chip
67+
label={'Chip'}
68+
avatarProps={{source: avatarImage, size: 20}}
69+
/>
70+
)}
71+
{this.renderExample(
72+
'label + Badge',
73+
<Chip
74+
label={'Chip'}
75+
labelStyle={{
76+
marginRight: undefined
77+
}}
78+
badgeProps={{
79+
label: '4',
80+
backgroundColor: 'transparent',
81+
labelStyle: {
82+
...Typography.text80R,
83+
color: Colors.grey20
84+
}
85+
}}
86+
/>
87+
)}
88+
{this.renderExample(
89+
'label + Badge',
90+
<Chip
91+
label={'Chip'}
92+
badgeProps={{
93+
label: '4',
94+
backgroundColor: 'red'
95+
}}
96+
/>
97+
)}
98+
99+
<Text marginT-20 marginB-10 text70BO>
100+
Custom
101+
</Text>
102+
<View center row>
103+
<Chip
104+
iconSource={checkmark}
105+
label={'Chip'}
106+
labelStyle={{color: Colors.green20}}
107+
iconColor={Colors.green20}
108+
containerStyle={{borderColor: Colors.green20}}
109+
/>
110+
<Chip
111+
iconSource={checkmark}
112+
label={'Chip'}
113+
labelStyle={{color: Colors.white}}
114+
iconColor={Colors.white}
115+
containerStyle={{borderColor: Colors.green20, backgroundColor: Colors.green20, marginLeft: Spacings.s3}}
116+
/>
117+
<Chip
118+
resetSpacings
119+
borderRadius={22}
120+
label={'Chip'}
121+
labelStyle={{color: Colors.red20, marginHorizontal: Spacings.s3, ...Typography.text70BO}}
122+
iconStyle={{width: 16, height: 16}}
123+
iconColor={Colors.black}
124+
avatarProps={{source: avatarImage, size: 28}}
125+
onDismiss={() => Alert.alert('onDismiss')}
126+
dismissIconStyle={{width: 10, height: 10, marginRight: Spacings.s3}}
127+
dismissColor={Colors.red20}
128+
containerStyle={{
129+
borderColor: Colors.red20,
130+
borderBottomRightRadius: 0,
131+
marginLeft: Spacings.s3
132+
}}
133+
/>
134+
<Chip
135+
resetSpacings
136+
label={'Chip'}
137+
labelStyle={{marginRight: Spacings.s1}}
138+
badgeProps={{
139+
label: '44',
140+
backgroundColor: Colors.white,
141+
borderWidth: 2,
142+
borderColor: Colors.black,
143+
labelStyle: {color: Colors.black}
144+
}}
145+
containerStyle={{
146+
borderWidth: 0,
147+
marginLeft: Spacings.s3
148+
}}
149+
/>
150+
</View>
151+
</View>
152+
);
153+
}
154+
}

‎demo/src/screens/componentScreens/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export function registerScreens(registrar) {
1111
registrar('unicorn.animations.CardScannerScreen', () => require('../componentScreens/CardScannerScreen').default);
1212
registrar('unicorn.components.CarouselScreen', () => require('./CarouselScreen').default);
1313
registrar('unicorn.components.CheckboxScreen', () => require('./CheckboxScreen').default);
14+
registrar('unicorn.components.ChipScreen', () => require('./ChipScreen').default);
1415
registrar('unicorn.components.ConnectionStatusBar', () => require('./ConnectionStatusBarScreen').default);
1516
registrar('unicorn.components.DialogScreen', () => require('./DialogScreen').default);
1617
registrar('unicorn.components.DrawerScreen', () => require('./DrawerScreen').default);

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

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import React from 'react';
2+
import { StyleProp, ViewStyle, ViewProps, TouchableOpacityProps, ImageStyle, TextStyle, ImageSourcePropType } from 'react-native';
3+
import { AvatarProps, BadgeProps } from 'typings';
4+
export declare type ChipPropTypes = ViewProps & TouchableOpacityProps & {
5+
/**
6+
* Chip's size. Number or a width and height object.
7+
*/
8+
size?: number | {
9+
width: number;
10+
height: number;
11+
};
12+
/**
13+
* On Chip press callback
14+
*/
15+
onPress?: (props: any) => void;
16+
/**
17+
* Chip's background color
18+
*/
19+
backgroundColor?: string;
20+
/**
21+
* The Chip borderRadius
22+
*/
23+
borderRadius?: number;
24+
/**
25+
* Chip's container style
26+
*/
27+
containerStyle?: StyleProp<ViewStyle>;
28+
/**
29+
* Uses size as minWidth and minHeight - default is true
30+
*/
31+
useSizeAsMinimum?: boolean;
32+
/**
33+
* Disables all internal elements default spacings. Helps reach a custom design
34+
*/
35+
resetSpacings?: boolean;
36+
/**
37+
* Used as testing identifier
38+
*/
39+
testID?: string;
40+
/**
41+
* Main Chip text
42+
*/
43+
label?: string;
44+
/**
45+
* Color of the label.
46+
*/
47+
labelColor?: string;
48+
/**
49+
* Label's style
50+
*/
51+
labelStyle?: StyleProp<TextStyle>;
52+
/**
53+
* Badge props object
54+
*/
55+
badgeProps?: BadgeProps;
56+
/**
57+
* Avatar props object
58+
*/
59+
avatarProps?: AvatarProps;
60+
/**
61+
* Icon's source
62+
*/
63+
iconSource?: ImageSourcePropType;
64+
/**
65+
* Icon's color
66+
*/
67+
iconColor?: string;
68+
/**
69+
* Icon style
70+
*/
71+
iconStyle?: StyleProp<ImageStyle>;
72+
/**
73+
* Adds a dismiss button and serves as its callback
74+
*/
75+
onDismiss?: (props: any) => void;
76+
/**
77+
* Dismiss color
78+
*/
79+
dismissColor?: string;
80+
/**
81+
* Dismiss asset
82+
*/
83+
dismissIcon?: ImageSourcePropType;
84+
/**
85+
* Dismiss style
86+
*/
87+
dismissIconStyle?: StyleProp<ImageStyle>;
88+
/**
89+
* Dismiss container style
90+
*/
91+
dismissContainerStyle?: StyleProp<ImageStyle>;
92+
};
93+
declare const _default: React.ComponentClass<ChipPropTypes, any>;
94+
export default _default;

0 commit comments

Comments
 (0)