Skip to content

Commit 54c3238

Browse files
ethansharethanshar
committed
Fix ButtonScreen TS errors
1 parent e35cf04 commit 54c3238

File tree

1 file changed

+190
-44
lines changed

1 file changed

+190
-44
lines changed

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

Lines changed: 190 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
import React, {Component} from 'react';
22
import {ScrollView, StyleSheet, Alert, Image} from 'react-native';
3-
import {Text, View, Assets, Constants, Button, Colors, Typography} from 'react-native-ui-lib'; //eslint-disable-line
3+
import {
4+
Text,
5+
View,
6+
Assets,
7+
Constants,
8+
Button,
9+
Colors,
10+
Typography
11+
} from 'react-native-ui-lib'; //eslint-disable-line
412

513
const ButtonSpace = 20;
614
const plusIcon = require('../../assets/icons/plus.png');
@@ -35,7 +43,9 @@ export default class ButtonsScreen extends Component {
3543

3644
return (
3745
<View useSafeArea>
38-
{!!snippet && <SnippetBlock snippet={snippet} onClose={() => this.hideSnippet()}/>}
46+
{!!snippet && (
47+
<SnippetBlock snippet={snippet} onClose={() => this.hideSnippet()} />
48+
)}
3949
<ScrollView showsVerticalScrollIndicator={false}>
4050
<View centerH>
4151
<Text style={styles.title}>Buttons</Text>
@@ -60,7 +70,7 @@ export default class ButtonsScreen extends Component {
6070
outlineColor={Colors.black}
6171
label="SHOP HOLIDAY"
6272
borderRadius={0}
63-
size="medium"
73+
size={Button.sizes.medium}
6474
text60
6575
labelStyle={{fontWeight: '700', letterSpacing: 4}}
6676
style={{borderWidth: 3, marginBottom: ButtonSpace}}
@@ -69,7 +79,7 @@ export default class ButtonsScreen extends Component {
6979
<Button
7080
backgroundColor="#439F4F"
7181
label="MOVE TO BAG"
72-
size="small"
82+
size={Button.sizes.small}
7383
borderRadius={0}
7484
text90
7585
labelStyle={{fontWeight: '500', letterSpacing: -0.5}}
@@ -78,33 +88,83 @@ export default class ButtonsScreen extends Component {
7888
<Button
7989
backgroundColor="#3C9BF0"
8090
label="Follow"
81-
size="small"
91+
size={Button.sizes.small}
8292
borderRadius={3}
8393
text90
8494
labelStyle={{fontWeight: '500'}}
8595
style={{marginBottom: ButtonSpace}}
8696
/>
8797

8898
<Text style={styles.header}>Do you have it in small?</Text>
89-
<Button label={'Default'} style={{marginBottom: ButtonSpace}}/>
90-
<Button label={'Medium'} size={Button.sizes.medium} style={{marginBottom: ButtonSpace}}/>
91-
<Button label={'Small'} size={Button.sizes.small} style={{marginBottom: ButtonSpace}}/>
92-
<Button label={'xSmall'} size={Button.sizes.xSmall} style={{marginBottom: ButtonSpace}}/>
93-
<Button label={'This is a button with long text'} style={{marginBottom: ButtonSpace}}/>
99+
<Button label={'Default'} style={{marginBottom: ButtonSpace}} />
100+
<Button
101+
label={'Medium'}
102+
size={Button.sizes.medium}
103+
style={{marginBottom: ButtonSpace}}
104+
/>
105+
<Button
106+
label={'Small'}
107+
size={Button.sizes.small}
108+
style={{marginBottom: ButtonSpace}}
109+
/>
110+
<Button
111+
label={'xSmall'}
112+
size={Button.sizes.xSmall}
113+
style={{marginBottom: ButtonSpace}}
114+
/>
115+
<Button
116+
label={'This is a button with long text'}
117+
style={{marginBottom: ButtonSpace}}
118+
/>
94119

95-
<Button label={'Disabled'} disabled style={{marginBottom: ButtonSpace}}/>
120+
<Button
121+
label={'Disabled'}
122+
disabled
123+
style={{marginBottom: ButtonSpace}}
124+
/>
96125

97126
<Text style={styles.header}>Do you have it in red?</Text>
98-
<Button label={'Bold!'} labelStyle={{fontWeight: '800'}} style={{marginBottom: ButtonSpace}}/>
99-
<Button label={'Red Button'} backgroundColor={Colors.red30} style={{marginBottom: ButtonSpace}}/>
100-
<Button label={'Dark Label'} red10 backgroundColor={Colors.red50} style={{marginBottom: ButtonSpace}}/>
101-
<Button label={'With Shadow'} enableShadow style={{marginBottom: ButtonSpace}}/>
127+
<Button
128+
label={'Bold!'}
129+
labelStyle={{fontWeight: '800'}}
130+
style={{marginBottom: ButtonSpace}}
131+
/>
132+
<Button
133+
label={'Red Button'}
134+
backgroundColor={Colors.red30}
135+
style={{marginBottom: ButtonSpace}}
136+
/>
137+
<Button
138+
label={'Dark Label'}
139+
red10
140+
backgroundColor={Colors.red50}
141+
style={{marginBottom: ButtonSpace}}
142+
/>
143+
<Button
144+
label={'With Shadow'}
145+
enableShadow
146+
style={{marginBottom: ButtonSpace}}
147+
/>
102148

103149
<Text style={styles.header}>Inside Out</Text>
104-
<Button label="Outline" outline style={{marginBottom: ButtonSpace}}/>
105-
<Button label="Outline M" size={Button.sizes.medium} outline style={{marginBottom: ButtonSpace}}/>
150+
<Button
151+
label="Outline"
152+
outline
153+
style={{marginBottom: ButtonSpace}}
154+
/>
155+
<Button
156+
label="Outline M"
157+
size={Button.sizes.medium}
158+
outline
159+
style={{marginBottom: ButtonSpace}}
160+
/>
106161

107-
<Button label="Outline S" size={Button.sizes.small} outline style={{marginBottom: ButtonSpace}}/>
162+
<Button
163+
label="Outline S"
164+
size={Button.sizes.small}
165+
outline
166+
style={{marginBottom: ButtonSpace}}
167+
/>
108168
<Button
109169
label="Red Outline"
110170
outline
@@ -120,7 +180,12 @@ export default class ButtonsScreen extends Component {
120180
style={{marginBottom: ButtonSpace}}
121181
/>
122182

123-
<Button label="Disabled Outline" outline disabled style={{marginBottom: ButtonSpace}}/>
183+
<Button
184+
label="Disabled Outline"
185+
outline
186+
disabled
187+
style={{marginBottom: ButtonSpace}}
188+
/>
124189

125190
<Button
126191
label="disabled outline + icon"
@@ -138,23 +203,23 @@ export default class ButtonsScreen extends Component {
138203
style={{margin: ButtonSpace}}
139204
iconSource={settingsIcon}
140205
iconStyle={{tintColor: Colors.white}}
141-
size={'xSmall'}
206+
size={Button.sizes.xSmall}
142207
/>
143208
<Button
144209
round
145210
backgroundColor="#ff4fa7"
146211
style={{margin: ButtonSpace}}
147212
iconSource={settingsIcon}
148213
iconStyle={{tintColor: Colors.white}}
149-
size={'small'}
214+
size={Button.sizes.small}
150215
/>
151216
<Button
152217
round
153218
backgroundColor="#ff369b"
154219
style={{margin: ButtonSpace}}
155220
iconSource={settingsIcon}
156221
iconStyle={{tintColor: Colors.white}}
157-
size={'medium'}
222+
size={Button.sizes.medium}
158223
/>
159224
<Button
160225
round
@@ -198,40 +263,85 @@ export default class ButtonsScreen extends Component {
198263

199264
<Text style={styles.header}>Let your curves show</Text>
200265
{Constants.isIOS ? (
201-
<Button label={'Squarish'} borderRadius={2} style={{marginBottom: ButtonSpace}}/>
266+
<Button
267+
label={'Squarish'}
268+
borderRadius={2}
269+
style={{marginBottom: ButtonSpace}}
270+
/>
202271
) : (
203-
<Button label={'Roundish'} borderRadius={15} style={{marginBottom: ButtonSpace}}/>
272+
<Button
273+
label={'Roundish'}
274+
borderRadius={15}
275+
style={{marginBottom: ButtonSpace}}
276+
/>
204277
)}
205-
<Button label={'Custom'} borderRadius={22} style={{marginBottom: ButtonSpace}}/>
206-
<Button label={'No Radius'} borderRadius={0} style={{marginBottom: ButtonSpace}}/>
278+
<Button
279+
label={'Custom'}
280+
borderRadius={22}
281+
style={{marginBottom: ButtonSpace}}
282+
/>
283+
<Button
284+
label={'No Radius'}
285+
borderRadius={0}
286+
style={{marginBottom: ButtonSpace}}
287+
/>
207288
<Text style={styles.header}>Special Cases</Text>
208289

209290
<View marginB-20 row>
210-
<Button iconSource={plusIcon} style={{width: 44, height: 44}} color={Colors.white}/>
291+
<Button
292+
iconSource={plusIcon}
293+
style={{width: 44, height: 44}}
294+
color={Colors.white}
295+
/>
211296

212-
<Button iconSource={plusIcon} style={{width: 44, height: 44}} link/>
297+
<Button
298+
iconSource={plusIcon}
299+
style={{width: 44, height: 44}}
300+
link
301+
/>
213302

214-
<Button iconSource={plusIcon} outline style={{width: 44, height: 44}} outlineColor={Colors.red50}/>
303+
<Button
304+
iconSource={plusIcon}
305+
outline
306+
style={{width: 44, height: 44}}
307+
outlineColor={Colors.red50}
308+
/>
215309
</View>
216310

217311
<Button
218312
style={{marginBottom: ButtonSpace}}
219-
size="small"
313+
size={Button.sizes.small}
220314
iconSource={plusIcon}
221315
iconStyle={{tintColor: 'white'}}
222316
label="Icon"
223317
/>
224318

225-
<Button style={{marginBottom: ButtonSpace}} blue30 outline iconSource={plusIcon} label="Icon"/>
319+
<Button
320+
style={{marginBottom: ButtonSpace}}
321+
blue30
322+
outline
323+
iconSource={plusIcon}
324+
label="Icon"
325+
/>
226326

227-
<Button onPress={() => Alert.alert('Button #3')} style={{marginBottom: ButtonSpace}}>
327+
<Button
328+
onPress={() => Alert.alert('Button #3')}
329+
style={{marginBottom: ButtonSpace}}
330+
>
228331
<Text>
229-
{Assets.emojis.cloud} {Assets.emojis.airplane} {Assets.emojis.sunny}
332+
{Assets.emojis.cloud} {Assets.emojis.airplane}{' '}
333+
{Assets.emojis.sunny}
230334
</Text>
231335
</Button>
232-
<Button outline onPress={() => Alert.alert('Button #3')} style={{marginBottom: ButtonSpace}}>
233-
<Image source={plusIcon}/>
234-
<Text style={{marginLeft: 10, color: Colors.blue30}}>Custom Icon</Text>
336+
<Button
337+
outline
338+
onPress={() => Alert.alert('Button #3')}
339+
style={{marginBottom: ButtonSpace}}
340+
>
341+
<Image source={plusIcon} />
342+
<Text style={{marginLeft: 10, color: Colors.blue30}}>
343+
Custom Icon
344+
</Text>
235345
</Button>
236346
<Button
237347
label={'Custom Icon Renderer'}
@@ -250,7 +360,13 @@ export default class ButtonsScreen extends Component {
250360
/>
251361
)}
252362
/>
253-
<Button text90 link style={{marginBottom: ButtonSpace}} iconSource={plusIcon} label="link icon"/>
363+
<Button
364+
text90
365+
link
366+
style={{marginBottom: ButtonSpace}}
367+
iconSource={plusIcon}
368+
label="link icon"
369+
/>
254370

255371
<Button
256372
text90
@@ -261,9 +377,13 @@ export default class ButtonsScreen extends Component {
261377
label="disabled link"
262378
/>
263379

264-
<Button label="link button" link style={{marginBottom: ButtonSpace}}/>
380+
<Button
381+
label="link button"
382+
link
383+
style={{marginBottom: ButtonSpace}}
384+
/>
265385

266-
<Button label="Icon on right" iconSource={plusIcon} iconOnRight/>
386+
<Button label="Icon on right" iconSource={plusIcon} iconOnRight />
267387
</View>
268388

269389
<View marginT-20>
@@ -272,10 +392,23 @@ export default class ButtonsScreen extends Component {
272392
Full Width Buttons
273393
</Text>
274394
</View>
275-
<Button fullWidth label="Full Width" marginB-10/>
395+
<Button fullWidth label="Full Width" marginB-10 />
276396

277-
<Button fullWidth size="medium" bg-red70 dark10 label="Medium Size Full Width" marginB-10/>
278-
<Button fullWidth size="small" bg-green70 green10 label="Small Size Full Width"/>
397+
<Button
398+
fullWidth
399+
size="medium"
400+
bg-red70
401+
dark10
402+
label="Medium Size Full Width"
403+
marginB-10
404+
/>
405+
<Button
406+
fullWidth
407+
size="small"
408+
bg-green70
409+
green10
410+
label="Small Size Full Width"
411+
/>
279412
</View>
280413
</ScrollView>
281414
</View>
@@ -285,7 +418,13 @@ export default class ButtonsScreen extends Component {
285418

286419
const SnippetBlock = ({snippet, onClose}) => {
287420
return (
288-
<View flex spread bg-dark10 padding-15 style={{...StyleSheet.absoluteFillObject, zIndex: 1}}>
421+
<View
422+
flex
423+
spread
424+
bg-dark10
425+
padding-15
426+
style={{...StyleSheet.absoluteFillObject, zIndex: 1}}
427+
>
289428
<View>
290429
<Text white text40 marginB-20>
291430
Snippet Code
@@ -296,7 +435,14 @@ const SnippetBlock = ({snippet, onClose}) => {
296435
</View>
297436
<View row centerH>
298437
{/* <Button marginR-10 white outline outlineColor={Colors.white} size='small' label='copy'/> */}
299-
<Button white outline outlineColor={Colors.white} size="small" label="close" onPress={onClose}/>
438+
<Button
439+
white
440+
outline
441+
outlineColor={Colors.white}
442+
size={Button.sizes.small}
443+
label="close"
444+
onPress={onClose}
445+
/>
300446
</View>
301447
</View>
302448
);

0 commit comments

Comments
 (0)