Skip to content

Commit 94913a3

Browse files
lidord-wixlidord-wix
authored
Infra/lodash babel plugin (#1815)
* add lodash babel plugin * change _.chain to _.flow * formatting * typings * use _.flow instead of _() * update node version * use vanilla JS instead of flow + rename parameters
1 parent 1a8a07a commit 94913a3

File tree

17 files changed

+262
-280
lines changed

17 files changed

+262
-280
lines changed

‎demo/src/screens/SettingsScreen.js

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,10 @@ class SettingsScreen extends Component {
2020
screens: [
2121
none,
2222
playground,
23-
..._.chain(data)
24-
.values()
25-
.map('screens')
26-
.flatten()
27-
.map(screen => ({label: screen.title, value: screen.screen}))
28-
.value()
23+
..._.flow(_.values,
24+
screens => _.map(screens, 'screens'),
25+
_.flatten,
26+
screens => _.map(screens, screen => ({label: screen.title, value: screen.screen})))(data)
2927
]
3028
};
3129
}
@@ -51,7 +49,7 @@ class SettingsScreen extends Component {
5149
});
5250
};
5351

54-
setDefaultScreen = (screen) => {
52+
setDefaultScreen = screen => {
5553
this.setState({defaultScreen: screen});
5654
AsyncStorage.setItem('uilib.defaultScreen', screen.value);
5755
setTimeout(() => {
@@ -85,25 +83,28 @@ class SettingsScreen extends Component {
8583

8684
<View style={{borderWidth: 1, borderColor: Colors.grey70, marginTop: 40}}>
8785
<View style={[{padding: 5, borderBottomWidth: 1}, styles.block]}>
88-
<Text text80 grey20>Current layout direction</Text>
86+
<Text text80 grey20>
87+
Current layout direction
88+
</Text>
8989
</View>
9090
<View center margin-5 padding-10>
9191
<Text text70>{isRTL ? 'RIGHT to LEFT' : 'LEFT to RIGHT'}</Text>
9292
</View>
9393

9494
<View row spread centerV style={[{padding: 12, borderTopWidth: 1}, styles.block]}>
95-
<Switch
96-
value={isRTL}
97-
onValueChange={this.onDirectionChange}
98-
/>
99-
<Text text80 grey20>Force RTL</Text>
95+
<Switch value={isRTL} onValueChange={this.onDirectionChange}/>
96+
<Text text80 grey20>
97+
Force RTL
98+
</Text>
10099
</View>
101100
</View>
102101

103102
{extraSettingsUI?.()}
104103
</View>
105104

106-
<Text text30 grey10>Settings</Text>
105+
<Text text30 grey10>
106+
Settings
107+
</Text>
107108
<Toast visible={showRefreshMessage} position="bottom" message="Refresh the app!"/>
108109
</View>
109110
);

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

Lines changed: 110 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -7,124 +7,119 @@ import products from '../../data/products';
77

88
class GridViewScreen extends Component {
99
state = {
10-
contacts: _.chain(conversations)
11-
.take(15)
12-
.map(contact => ({
13-
imageProps: {source: {uri: contact.thumbnail}, borderRadius: 999, style: {backgroundColor: Colors.grey60}},
14-
title: _.split(contact.name, ' ')[0],
15-
onPress: () => Alert.alert('My name is ' + contact.name)
16-
}))
17-
.value(),
18-
products: _.chain(products)
19-
.take(8)
20-
.map((product, index) => ({
21-
imageProps: {
22-
source: {uri: product.mediaUrl},
23-
borderRadius: 4,
24-
style: {backgroundColor: Colors.grey60, borderWidth: 1, borderColor: Colors.grey50}
25-
},
26-
title: product.name,
27-
titleTypography: 'subtextBold',
28-
onPress: () => Alert.alert('My price is ' + product.formattedPrice),
29-
renderOverlay: () => {
30-
if (index < 7) {
31-
return <Text text={product.price} style={{alignSelf: 'center', marginTop: 3}}/>;
32-
}
33-
}
34-
}))
35-
.value(),
36-
pairs: _.chain(products)
37-
.take(2)
38-
.map(product => ({
39-
containerProps: {useNative: true, activeScale: 0.97, activeOpacity: 1},
40-
renderCustomItem: () => {
41-
return (
42-
<Card height={150} activeOpacity={1}>
43-
<Card.Image style={{flex: 1}} source={{uri: product.mediaUrl}}/>
44-
</Card>
45-
);
46-
},
47-
title: product.name,
48-
subtitle: (
49-
<Text>
50-
<Text style={{textDecorationLine: 'line-through', color: Colors.grey30}}>{product.formattedPrice}</Text>
51-
<Text style={{textDecorationLine: 'none'}}> $50</Text>
52-
</Text>
53-
),
54-
description: product.inventory.status,
55-
descriptionLines: 2,
56-
alignToStart: true,
57-
onPress: () => Alert.alert('My price was ' + product.formattedPrice + ', now it is $50')
58-
}))
59-
.value(),
60-
dynamicLayout: _.chain(products)
61-
.take(3)
62-
.map(product => ({
63-
imageProps: {
64-
source: {
65-
uri: product.mediaUrl
66-
}
67-
},
68-
itemSize: {height: 90},
69-
title: 'Title',
70-
subtitle: 'subtitle',
71-
description: product.name,
72-
descriptionLines: 2,
73-
alignToStart: true,
74-
onPress: () => Alert.alert('Click!')
75-
}))
76-
.value(),
77-
overlayText: _.chain(products)
78-
.take(2)
79-
.map((product, index) => ({
80-
imageProps: {
81-
source: {
82-
uri: product.mediaUrl
10+
contacts: _.flow(conversations => _.take(conversations, 15),
11+
(contacts: any[]) =>
12+
_.map(contacts, contact => ({
13+
imageProps: {source: {uri: contact.thumbnail}, borderRadius: 999, style: {backgroundColor: Colors.grey60}},
14+
title: _.split(contact.name, ' ')[0],
15+
onPress: () => Alert.alert('My name is ' + contact.name)
16+
})))(conversations),
17+
products: _.flow(products => _.take(products, 8),
18+
(products: any[]) =>
19+
_.map(products, (product, index) => ({
20+
imageProps: {
21+
source: {uri: product.mediaUrl},
22+
borderRadius: 4,
23+
style: {backgroundColor: Colors.grey60, borderWidth: 1, borderColor: Colors.grey50}
8324
},
84-
overlayType: Image.overlayTypes.VERTICAL,
85-
overlayColor: Colors.white
86-
},
87-
itemSize: {height: 240},
88-
overlayText: true,
89-
title: product.name,
90-
subtitle: (
91-
<Text>
92-
<Text style={{textDecorationLine: 'line-through', color: Colors.grey30}}>{product.formattedPrice}</Text>
93-
<Text style={{textDecorationLine: 'none'}}>{product.formattedPrice}</Text>
94-
</Text>
95-
),
96-
description: '4 items',
97-
descriptionLines: 2,
98-
alignToStart: true,
99-
onPress: () => Alert.alert('My price was ' + product.formattedPrice + ', now it is $50'),
100-
renderOverlay: () => {
101-
if (index === 0) {
25+
title: product.name,
26+
titleTypography: 'subtextBold',
27+
onPress: () => Alert.alert('My price is ' + product.formattedPrice),
28+
renderOverlay: () => {
29+
if (index < 7) {
30+
return <Text text={product.price} style={{alignSelf: 'center', marginTop: 3}}/>;
31+
}
32+
}
33+
})))(products),
34+
pairs: _.flow(products => _.take(products, 2),
35+
(products: any[]) =>
36+
_.map(products, product => ({
37+
containerProps: {useNative: true, activeScale: 0.97, activeOpacity: 1},
38+
renderCustomItem: () => {
10239
return (
103-
<Text margin-10 text80BO style={{alignSelf: 'flex-start', marginTop: 12, marginLeft: 12}}>
104-
{product.formattedPrice}
105-
</Text>
40+
<Card height={150} activeOpacity={1}>
41+
<Card.Image style={{flex: 1}} source={{uri: product.mediaUrl}}/>
42+
</Card>
10643
);
44+
},
45+
title: product.name,
46+
subtitle: (
47+
<Text>
48+
<Text style={{textDecorationLine: 'line-through', color: Colors.grey30}}>{product.formattedPrice}</Text>
49+
<Text style={{textDecorationLine: 'none'}}> $50</Text>
50+
</Text>
51+
),
52+
description: product.inventory.status,
53+
descriptionLines: 2,
54+
alignToStart: true,
55+
onPress: () => Alert.alert('My price was ' + product.formattedPrice + ', now it is $50')
56+
})))(products),
57+
dynamicLayout: _.flow(products => _.take(products, 3),
58+
(products: any[]) =>
59+
_.map(products, product => ({
60+
imageProps: {
61+
source: {
62+
uri: product.mediaUrl
63+
}
64+
},
65+
itemSize: {height: 90},
66+
title: 'Title',
67+
subtitle: 'subtitle',
68+
description: product.name,
69+
descriptionLines: 2,
70+
alignToStart: true,
71+
onPress: () => Alert.alert('Click!')
72+
})))(products),
73+
overlayText: _.flow(products => _.take(products, 2),
74+
(products: any[]) =>
75+
_.map(products, (product, index) => ({
76+
imageProps: {
77+
source: {
78+
uri: product.mediaUrl
79+
},
80+
overlayType: Image.overlayTypes.VERTICAL,
81+
overlayColor: Colors.white
82+
},
83+
itemSize: {height: 240},
84+
overlayText: true,
85+
title: product.name,
86+
subtitle: (
87+
<Text>
88+
<Text style={{textDecorationLine: 'line-through', color: Colors.grey30}}>{product.formattedPrice}</Text>
89+
<Text style={{textDecorationLine: 'none'}}>{product.formattedPrice}</Text>
90+
</Text>
91+
),
92+
description: '4 items',
93+
descriptionLines: 2,
94+
alignToStart: true,
95+
onPress: () => Alert.alert('My price was ' + product.formattedPrice + ', now it is $50'),
96+
renderOverlay: () => {
97+
if (index === 0) {
98+
return (
99+
<Text margin-10 text80BO style={{alignSelf: 'flex-start', marginTop: 12, marginLeft: 12}}>
100+
{product.formattedPrice}
101+
</Text>
102+
);
103+
}
107104
}
108-
}
109-
}))
110-
.value(),
111-
avatars: _.chain(conversations)
112-
.take(9)
113-
.map(item => ({
114-
renderCustomItem: () => {
115-
const imageElementElement = item.thumbnail;
116-
return (
117-
<View flex center marginB-10>
118-
<Avatar size={100} source={{uri: imageElementElement}}/>
119-
</View>
120-
);
121-
},
122-
onPress: () => Alert.alert('Your choose is ' + item.name),
123-
title: item.name,
124-
titleLines: 2,
125-
titleTypography: 'bodySmall'
126-
}))
127-
.value(),
105+
})))(products),
106+
107+
avatars: _.flow(products => _.take(products, 9),
108+
(products: any[]) =>
109+
_.map(products, item => ({
110+
renderCustomItem: () => {
111+
const imageElementElement = item.thumbnail;
112+
return (
113+
<View flex center marginB-10>
114+
<Avatar size={100} source={{uri: imageElementElement}}/>
115+
</View>
116+
);
117+
},
118+
onPress: () => Alert.alert('Your choose is ' + item.name),
119+
title: item.name,
120+
titleLines: 2,
121+
titleTypography: 'bodySmall'
122+
})))(products),
128123
squares: [Colors.red30, Colors.yellow30, Colors.blue30, Colors.violet30, Colors.green30].map(color => ({
129124
renderCustomItem: () => <View height={50} backgroundColor={color}/>
130125
})),
@@ -179,9 +174,7 @@ class GridViewScreen extends Component {
179174
<GridView items={pairs} numColumns={2}/>
180175
<Text marginV-s5 text60BO>
181176
Dynamic itemSize
182-
<Text text90>
183-
{' '} (Using maxItemWidth)
184-
</Text>
177+
<Text text90> (Using maxItemWidth)</Text>
185178
</Text>
186179
<GridView items={dynamicLayout} maxItemWidth={120}/>
187180
<Text marginV-s5 text60BO>

‎demo/src/screens/componentScreens/TabControllerScreen/index.tsx

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -37,17 +37,16 @@ class TabControllerScreen extends Component<{}, State> {
3737
}
3838

3939
generateTabItems = (fewItems = this.state.fewItems): TabControllerItemProps[] => {
40-
const items: TabControllerItemProps[] = _.chain(TABS)
41-
.take(fewItems ? 3 : TABS.length)
42-
.map<TabControllerItemProps>((tab, index) => ({
43-
label: tab,
44-
key: tab,
45-
icon: index === 2 ? Assets.icons.demo.dashboard : undefined,
46-
badge: index === 5 ? {label: '2'} : undefined,
47-
leadingAccessory: index === 3 ? <Text marginR-4>{Assets.emojis.movie_camera}</Text> : undefined,
48-
trailingAccessory: index === 4 ? <Text marginL-4>{Assets.emojis.camera}</Text> : undefined
49-
}))
50-
.value();
40+
const items: TabControllerItemProps[] = _.flow(tabs => _.take(tabs, fewItems ? 3 : TABS.length),
41+
(tabs: TabControllerItemProps[]) =>
42+
_.map<TabControllerItemProps>(tabs, (tab: TabControllerItemProps, index: number) => ({
43+
label: tab,
44+
key: tab,
45+
icon: index === 2 ? Assets.icons.demo.dashboard : undefined,
46+
badge: index === 5 ? {label: '2'} : undefined,
47+
leadingAccessory: index === 3 ? <Text marginR-4>{Assets.emojis.movie_camera}</Text> : undefined,
48+
trailingAccessory: index === 4 ? <Text marginL-4>{Assets.emojis.camera}</Text> : undefined
49+
})))(TABS);
5150

5251
const addItem: TabControllerItemProps = {
5352
icon: Assets.icons.demo.add,
@@ -134,15 +133,16 @@ class TabControllerScreen extends Component<{}, State> {
134133
<Tab3/>
135134
</TabController.TabPage>
136135

137-
{!fewItems && _.map(_.takeRight(TABS, TABS.length - 3), (title, index) => {
138-
return (
139-
<TabController.TabPage key={title} index={index + 3}>
140-
<View padding-s5>
141-
<Text text40>{title}</Text>
142-
</View>
143-
</TabController.TabPage>
144-
);
145-
})}
136+
{!fewItems &&
137+
_.map(_.takeRight(TABS, TABS.length - 3), (title, index) => {
138+
return (
139+
<TabController.TabPage key={title} index={index + 3}>
140+
<View padding-s5>
141+
<Text text40>{title}</Text>
142+
</View>
143+
</TabController.TabPage>
144+
);
145+
})}
146146
</Container>
147147
);
148148
}

‎demo/src/screens/incubatorScreens/IncubatorChipsInputScreen.tsx

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -31,18 +31,17 @@ export default class ChipsInputScreen extends Component {
3131
chips={this.state.chips}
3232
leadingAccessory={<Text>TO: </Text>}
3333
onChange={newChips => {
34-
_.chain(newChips)
35-
.groupBy('label')
36-
.forEach(group => {
37-
if (group.length === 1) {
38-
delete group[0].invalid;
39-
} else {
40-
group[group.length - 1].invalid = true;
41-
}
42-
})
43-
.values()
44-
.flatten()
45-
.value();
34+
_.flow(newChips => _.groupBy(newChips, 'label'),
35+
newChips =>
36+
_.forEach(newChips, group => {
37+
if (group.length === 1) {
38+
delete group[0].invalid;
39+
} else {
40+
group[group.length - 1].invalid = true;
41+
}
42+
}),
43+
_.values,
44+
_.flatten)(newChips);
4645

4746
this.setState({chips: newChips});
4847
}}

0 commit comments

Comments
 (0)