Skip to content

Commit 1d717e3

Browse files
ethansharethanshar
committed
Enable TS check on demo files and fix all errors (#2585)
* Enable TS check on demo files and fix all errors * Code review fixes * Add space - test commit * Remove space
1 parent 267aeec commit 1d717e3

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+204
-172
lines changed

‎demo/src/screens/PlaygroundScreen.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, {Component} from 'react';
2-
import {StyleSheet} from 'react-native';
3-
import {View, Text, Card, TextField, Button} from 'react-native-ui-lib'; //eslint-disable-line
2+
import {View, Text, Card, TextField, Button} from 'react-native-ui-lib';
43

54
export default class PlaygroundScreen extends Component {
65
render() {

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

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,9 @@ import collections from '../../assets/icons/collections.png';
99
import richText from '../../assets/icons/richText.png';
1010

1111
export default class ActionBarScreen extends Component {
12-
constructor(props) {
13-
super(props);
14-
15-
this.state = {
16-
currentPage: 0
17-
};
18-
}
12+
state = {
13+
currentPage: 0
14+
};
1915

2016
render() {
2117
return (

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import _ from 'lodash';
22
import React, {Component} from 'react';
33
import {ScrollView, StyleSheet, Alert} from 'react-native';
4-
import {Avatar, AvatarHelper, View, Text, Colors, Typography} from 'react-native-ui-lib'; //eslint-disable-line
4+
import {Avatar, AvatarHelper, View, Text, Colors, Typography, AvatarProps} from 'react-native-ui-lib';
55

66

77
const star = require('../../assets/icons/star.png');
@@ -25,7 +25,7 @@ const examples = [
2525
'https://lh3.googleusercontent.com/-cw77lUnOvmI/AAAAAAAAAAI/AAAAAAAAAAA/WMNck32dKbc/s181-c/104220521160525129167.jpg'
2626
},
2727
badgeProps: {size: 10, backgroundColor: Colors.$backgroundWarningHeavy},
28-
badgePosition: 'BOTTOM_RIGHT'
28+
badgePosition: 'BOTTOM_RIGHT' as AvatarProps['badgePosition']
2929
},
3030

3131
{
@@ -36,7 +36,7 @@ const examples = [
3636
'https://lh3.googleusercontent.com/-CMM0GmT5tiI/AAAAAAAAAAI/AAAAAAAAAAA/-o9gKbC6FVo/s181-c/111308920004613908895.jpg'
3737
},
3838
badgeProps: {size: 10, backgroundColor: Colors.$backgroundDisabled},
39-
badgePosition: 'BOTTOM_LEFT'
39+
badgePosition: 'BOTTOM_LEFT' as AvatarProps['badgePosition']
4040
},
4141
{
4242
title: 'Image with fade in animation',
@@ -53,7 +53,7 @@ const examples = [
5353
uri: 'https://randomuser.me/api/portraits/women/24.jpg'
5454
},
5555
badgeProps: {size: 14, borderWidth: 0, backgroundColor: onlineColor},
56-
badgePosition: 'TOP_LEFT'
56+
badgePosition: 'TOP_LEFT' as AvatarProps['badgePosition']
5757
},
5858
{
5959
title: 'Icon badge',
@@ -102,7 +102,7 @@ const examples = [
102102
title: 'With custom badge label',
103103
label: 'LD',
104104
backgroundColor: Colors.$backgroundDangerLight,
105-
badgePosition: 'BOTTOM_RIGHT',
105+
badgePosition: 'BOTTOM_RIGHT' as AvatarProps['badgePosition'],
106106
badgeProps: {
107107
label: '+2',
108108
size: 24,
@@ -123,7 +123,7 @@ export default class AvatarsScreen extends Component {
123123
patchedGravatar ? `Patched-uri: ${patchedGravatar}` : ''
124124
}`;
125125
Alert.alert(title, message);
126-
}
126+
};
127127

128128
render() {
129129
return (

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ export default class BasicListScreen extends Component {
1414
return (
1515
<View>
1616
<ListItem
17-
// @ts-expect-error
1817
activeBackgroundColor={Colors.grey60}
1918
activeOpacity={0.3}
2019
height={77.5}

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

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
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 {Text, View, Assets, Constants, Button, Colors, Typography, ButtonProps} from 'react-native-ui-lib';
44

55
const ButtonSpace = 20;
66
const plusIcon = Assets.getAssetByPath('icons.demo.plus');
@@ -9,16 +9,12 @@ const labelButton = {label: 'Animated'};
99
const iconButton = {round: true};
1010

1111
export default class ButtonsScreen extends Component {
12-
constructor(props) {
13-
super(props);
14-
15-
this.state = {
16-
backgroundColor: Colors.yellow30,
17-
label: 'Button',
18-
// outline: true,
19-
buttonProps: labelButton
20-
};
21-
}
12+
state = {
13+
backgroundColor: Colors.yellow30,
14+
label: 'Button',
15+
// outline: true,
16+
buttonProps: labelButton as ButtonProps
17+
};
2218

2319
changeProps = () => {
2420
if (this.state.buttonProps === labelButton) {
@@ -241,9 +237,11 @@ export default class ButtonsScreen extends Component {
241237
style={{
242238
width: 20,
243239
height: 20,
244-
backgroundColor: iconStyle[0].tintColor,
240+
// @ts-expect-error
241+
backgroundColor: iconStyle[0]?.tintColor,
245242
borderRadius: 10,
246-
marginRight: iconStyle[0].marginRight
243+
// @ts-expect-error
244+
marginRight: iconStyle[0]?.marginRight
247245
}}
248246
/>
249247
)}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ class CarouselScreen extends Component<Props, State> {
117117
pageControlProps={{onPagePress: this.onPagePress, limitShownPages}}
118118
allowAccessibleLayout
119119
>
120-
{_.map([...Array(numberOfPagesShown)], (item, index) => (
120+
{_.map([...Array(numberOfPagesShown)], (_item, index) => (
121121
<Page style={{backgroundColor: BACKGROUND_COLORS[index]}} key={index}>
122122
<Text margin-15>CARD {index}</Text>
123123
</Page>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, {Component} from 'react';
2-
import {View, Text, Card, TextField, Button, Colors, ChipsInput} from 'react-native-ui-lib'; //eslint-disable-line
2+
import {View, Text, Colors, ChipsInput} from 'react-native-ui-lib';
33
import _ from 'lodash';
44

55
export default class ChipsInputScreen extends Component {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {renderMultipleSegmentOptions} from '../ExampleScreenPresenter';
77
interface Props {}
88
interface State {
99
color: string;
10-
textColor: string;
10+
textColor?: string;
1111
customColors: string[];
1212
paletteChange: boolean;
1313
backgroundColor: string;

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

Lines changed: 39 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,48 @@
11
import React, {Component} from 'react';
22
import {StyleSheet, ScrollView, LayoutAnimation} from 'react-native';
3-
import {
4-
Assets,
5-
Colors,
6-
Typography,
7-
View,
8-
Drawer,
9-
Text,
10-
Button,
11-
Avatar,
12-
Badge
13-
} from 'react-native-ui-lib'; //eslint-disable-line
3+
import {Assets, Colors, Typography, View, Drawer, Text, Button, Avatar, Badge, DrawerProps} from 'react-native-ui-lib';
144
import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
155
import conversations from '../../data/conversations';
166

17-
import {
18-
renderBooleanOption,
19-
renderSliderOption,
20-
renderColorOption
21-
} from '../ExampleScreenPresenter';
7+
import {renderBooleanOption, renderSliderOption, renderColorOption} from '../ExampleScreenPresenter';
228

239
const ITEMS = {
2410
read: {
2511
icon: require('../../assets/icons/mail.png'),
2612
text: 'Read',
2713
background: Colors.green30,
28-
testID: "left_item_read"
14+
testID: 'left_item_read'
2915
},
3016
archive: {
3117
icon: require('../../assets/icons/archive.png'),
3218
text: 'Archive',
3319
background: Colors.blue30,
34-
testID: "right_item_archive"
20+
testID: 'right_item_archive'
3521
},
3622
delete: {
3723
icon: require('../../assets/icons/delete.png'),
3824
text: 'Delete',
3925
background: Colors.red30,
40-
testID: "right_item_delete"
26+
testID: 'right_item_delete'
4127
}
4228
};
4329

4430
class DrawerScreen extends Component {
45-
constructor(props) {
46-
super(props);
31+
state = {
32+
hideItem: false,
33+
showRightItems: true,
34+
fullSwipeRight: true,
35+
showLeftItem: true,
36+
fullSwipeLeft: true,
37+
unread: true,
38+
itemsTintColor: undefined,
39+
bounciness: undefined,
40+
itemsIconSize: undefined
41+
};
4742

48-
this.state = {
49-
hideItem: false,
50-
showRightItems: true,
51-
fullSwipeRight: true,
52-
showLeftItem: true,
53-
fullSwipeLeft: true,
54-
unread: true
55-
};
56-
}
43+
ref: React.Ref<typeof Drawer> = null;
5744

58-
componentDidUpdate(prevProps, prevState) {
45+
componentDidUpdate(_prevProps: any, prevState: typeof this.state) {
5946
if (this.state.hideItem && prevState.hideItem) {
6047
this.showItem();
6148
}
@@ -82,39 +69,45 @@ class DrawerScreen extends Component {
8269

8370
toggleReadState = () => {
8471
this.setState({unread: !this.state.unread});
85-
}
72+
};
8673

8774
showItem = () => {
8875
this.setState({hideItem: false});
8976
};
9077

9178
openLeftDrawer = () => {
9279
if (this.ref) {
80+
// @ts-expect-error
9381
this.ref.openLeft();
9482
}
9583
};
9684
openLeftDrawerFull = () => {
9785
if (this.ref) {
86+
// @ts-expect-error
9887
this.ref.openLeftFull();
9988
}
10089
};
10190
toggleLeftDrawer = () => {
10291
if (this.ref) {
92+
// @ts-expect-error
10393
this.ref.toggleLeft();
10494
}
10595
};
10696
openRightDrawer = () => {
10797
if (this.ref) {
98+
// @ts-expect-error
10899
this.ref.openRight();
109100
}
110101
};
111102
openRightDrawerFull = () => {
112103
if (this.ref) {
104+
// @ts-expect-error
113105
this.ref.openRightFull();
114106
}
115107
};
116108
closeDrawer = () => {
117109
if (this.ref) {
110+
// @ts-expect-error
118111
this.ref.closeDrawer();
119112
}
120113
};
@@ -149,13 +142,7 @@ class DrawerScreen extends Component {
149142
</View>
150143

151144
<View marginH-20>
152-
<Button
153-
onPress={this.closeDrawer}
154-
label="Close"
155-
style={{margin: 3}}
156-
size={'xSmall'}
157-
testID="close_btn"
158-
/>
145+
<Button onPress={this.closeDrawer} label="Close" style={{margin: 3}} size={'xSmall'} testID="close_btn"/>
159146
</View>
160147

161148
<View>
@@ -192,10 +179,14 @@ class DrawerScreen extends Component {
192179
style={{borderBottomWidth: 1, borderColor: Colors.grey60}}
193180
testID="drawer_item"
194181
>
195-
{this.state.unread && <Badge testID="drawer_item_badge" size={6} backgroundColor={Colors.red30} containerStyle={{marginRight: 8}}/>}
182+
{this.state.unread && (
183+
<Badge testID="drawer_item_badge" size={6} backgroundColor={Colors.red30} containerStyle={{marginRight: 8}}/>
184+
)}
196185
<Avatar source={{uri: data.thumbnail}}/>
197186
<View marginL-20>
198-
<Text text70R={!this.state.unread} text70BO={this.state.unread}>{data.name}</Text>
187+
<Text text70R={!this.state.unread} text70BO={this.state.unread}>
188+
{data.name}
189+
</Text>
199190
<Text text80 marginT-2>
200191
{data.text}
201192
</Text>
@@ -216,11 +207,12 @@ class DrawerScreen extends Component {
216207
hideItem
217208
} = this.state;
218209

219-
const drawerProps = {
210+
const drawerProps: DrawerProps = {
220211
itemsTintColor,
221212
itemsIconSize,
222213
bounciness,
223-
ref: (component) => (this.ref = component),
214+
// @ts-expect-error
215+
ref: component => (this.ref = component),
224216
fullSwipeRight,
225217
onFullSwipeRight: this.deleteItem,
226218
fullSwipeLeft,
@@ -236,7 +228,7 @@ class DrawerScreen extends Component {
236228
drawerProps.leftItem = {
237229
...ITEMS.read,
238230
icon: this.state.unread ? require('../../assets/icons/mail.png') : require('../../assets/icons/refresh.png'),
239-
text: !this.state.unread ? 'Unread' : 'Read',
231+
text: !this.state.unread ? 'Unread' : 'Read',
240232
background: this.state.unread ? Colors.green30 : Colors.orange30,
241233
onPress: this.toggleReadState
242234
};
@@ -265,22 +257,13 @@ class DrawerScreen extends Component {
265257
</>
266258
)}
267259

268-
<ScrollView
269-
style={styles.container}
270-
contentContainerStyle={styles.contentContainer}
271-
>
260+
<ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
272261
<View padding-20>
273262
{this.renderActions()}
274263
{renderBooleanOption.call(this, 'rightItems', 'showRightItems')}
275-
{showRightItems &&
276-
renderBooleanOption.call(
277-
this,
278-
'fullSwipeRight',
279-
'fullSwipeRight'
280-
)}
264+
{showRightItems && renderBooleanOption.call(this, 'fullSwipeRight', 'fullSwipeRight')}
281265
{renderBooleanOption.call(this, 'leftItem', 'showLeftItem')}
282-
{showLeftItem &&
283-
renderBooleanOption.call(this, 'fullSwipeLeft', 'fullSwipeLeft')}
266+
{showLeftItem && renderBooleanOption.call(this, 'fullSwipeLeft', 'fullSwipeLeft')}
284267
{renderColorOption.call(this, 'icon+text color', 'itemsTintColor')}
285268
{renderSliderOption.call(this, 'bounciness', 'bounciness', {
286269
min: 5,

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import _ from 'lodash';
2-
import {View, Text, Image, Colors, Constants, Avatar, GridView, Card} from 'react-native-ui-lib';
2+
import {View, Text, Image, Colors, Constants, Avatar, GridView, Card, GridViewProps} from 'react-native-ui-lib';
33
import React, {Component} from 'react';
44
import {Alert, ScrollView} from 'react-native';
55
import conversations from '../../data/conversations';
@@ -30,7 +30,7 @@ class GridViewScreen extends Component {
3030
return <Text text={product.price} style={{alignSelf: 'center', marginTop: 3}}/>;
3131
}
3232
}
33-
})))(products),
33+
})))(products) as GridViewProps['items'],
3434
pairs: _.flow(products => _.take(products, 2),
3535
(products: any[]) =>
3636
_.map(products, product => ({
@@ -102,7 +102,7 @@ class GridViewScreen extends Component {
102102
);
103103
}
104104
}
105-
})))(products),
105+
})))(products) as GridViewProps['items'],
106106

107107
avatars: _.flow(products => _.take(products, 9),
108108
(products: any[]) =>

0 commit comments

Comments
 (0)