Revert "Infra/lodash babel plugin (#1815)"

demo/src/screens/SettingsScreen.js

@@ -20,10 +20,12 @@ class SettingsScreen extends Component {
       screens: [
         none,
         playground,
-        ..._.flow(_.values,
-          screens => _.map(screens, 'screens'),
-          _.flatten,
-          screens => _.map(screens, screen => ({label: screen.title, value: screen.screen})))(data)
+        ..._.chain(data)
+          .values()
+          .map('screens')
+          .flatten()
+          .map(screen => ({label: screen.title, value: screen.screen}))
+          .value()
       ]
     };
   }
@@ -49,7 +51,7 @@ class SettingsScreen extends Component {
     });
   };
 
-  setDefaultScreen = screen => {
+  setDefaultScreen = (screen) => {
     this.setState({defaultScreen: screen});
     AsyncStorage.setItem('uilib.defaultScreen', screen.value);
     setTimeout(() => {
@@ -83,28 +85,25 @@ class SettingsScreen extends Component {
 
           <View style={{borderWidth: 1, borderColor: Colors.grey70, marginTop: 40}}>
             <View style={[{padding: 5, borderBottomWidth: 1}, styles.block]}>
-              <Text text80 grey20>
-                Current layout direction
-              </Text>
+              <Text text80 grey20>Current layout direction</Text>
             </View>
             <View center margin-5 padding-10>
               <Text text70>{isRTL ? 'RIGHT to LEFT' : 'LEFT to RIGHT'}</Text>
             </View>
 
             <View row spread centerV style={[{padding: 12, borderTopWidth: 1}, styles.block]}>
-              <Switch value={isRTL} onValueChange={this.onDirectionChange}/>
-              <Text text80 grey20>
-                Force RTL
-              </Text>
+              <Switch
+                value={isRTL}
+                onValueChange={this.onDirectionChange}
+              />
+              <Text text80 grey20>Force RTL</Text>
             </View>
           </View>
 
           {extraSettingsUI?.()}
         </View>
 
-        <Text text30 grey10>
-          Settings
-        </Text>
+        <Text text30 grey10>Settings</Text>
         <Toast visible={showRefreshMessage} position="bottom" message="Refresh the app!"/>
       </View>
     );

demo/src/screens/componentScreens/GridViewScreen.tsx

@@ -7,119 +7,124 @@ import products from '../../data/products';
 
 class GridViewScreen extends Component {
   state = {
-    contacts: _.flow(conversations => _.take(conversations, 15),
-      (contacts: any[]) =>
-        _.map(contacts, contact => ({
-          imageProps: {source: {uri: contact.thumbnail}, borderRadius: 999, style: {backgroundColor: Colors.grey60}},
-          title: _.split(contact.name, ' ')[0],
-          onPress: () => Alert.alert('My name is ' + contact.name)
-        })))(conversations),
-    products: _.flow(products => _.take(products, 8),
-      (products: any[]) =>
-        _.map(products, (product, index) => ({
-          imageProps: {
-            source: {uri: product.mediaUrl},
-            borderRadius: 4,
-            style: {backgroundColor: Colors.grey60, borderWidth: 1, borderColor: Colors.grey50}
-          },
-          title: product.name,
-          titleTypography: 'subtextBold',
-          onPress: () => Alert.alert('My price is ' + product.formattedPrice),
-          renderOverlay: () => {
-            if (index < 7) {
-              return <Text text={product.price} style={{alignSelf: 'center', marginTop: 3}}/>;
-            }
+    contacts: _.chain(conversations)
+      .take(15)
+      .map(contact => ({
+        imageProps: {source: {uri: contact.thumbnail}, borderRadius: 999, style: {backgroundColor: Colors.grey60}},
+        title: _.split(contact.name, ' ')[0],
+        onPress: () => Alert.alert('My name is ' + contact.name)
+      }))
+      .value(),
+    products: _.chain(products)
+      .take(8)
+      .map((product, index) => ({
+        imageProps: {
+          source: {uri: product.mediaUrl},
+          borderRadius: 4,
+          style: {backgroundColor: Colors.grey60, borderWidth: 1, borderColor: Colors.grey50}
+        },
+        title: product.name,
+        titleTypography: 'subtextBold',
+        onPress: () => Alert.alert('My price is ' + product.formattedPrice),
+        renderOverlay: () => {
+          if (index < 7) {
+            return <Text text={product.price} style={{alignSelf: 'center', marginTop: 3}}/>;
           }
-        })))(products),
-    pairs: _.flow(products => _.take(products, 2),
-      (products: any[]) =>
-        _.map(products, product => ({
-          containerProps: {useNative: true, activeScale: 0.97, activeOpacity: 1},
-          renderCustomItem: () => {
-            return (
-              <Card height={150} activeOpacity={1}>
-                <Card.Image style={{flex: 1}} source={{uri: product.mediaUrl}}/>
-              </Card>
-            );
-          },
-          title: product.name,
-          subtitle: (
-            <Text>
-              <Text style={{textDecorationLine: 'line-through', color: Colors.grey30}}>{product.formattedPrice}</Text>
-              <Text style={{textDecorationLine: 'none'}}> $50</Text>
-            </Text>
-          ),
-          description: product.inventory.status,
-          descriptionLines: 2,
-          alignToStart: true,
-          onPress: () => Alert.alert('My price was ' + product.formattedPrice + ', now it is $50')
-        })))(products),
-    dynamicLayout: _.flow(products => _.take(products, 3),
-      (products: any[]) =>
-        _.map(products, product => ({
-          imageProps: {
-            source: {
-              uri: product.mediaUrl
-            }
-          },
-          itemSize: {height: 90},
-          title: 'Title',
-          subtitle: 'subtitle',
-          description: product.name,
-          descriptionLines: 2,
-          alignToStart: true,
-          onPress: () => Alert.alert('Click!')
-        })))(products),
-    overlayText: _.flow(products => _.take(products, 2),
-      (products: any[]) =>
-        _.map(products, (product, index) => ({
-          imageProps: {
-            source: {
-              uri: product.mediaUrl
-            },
-            overlayType: Image.overlayTypes.VERTICAL,
-            overlayColor: Colors.white
-          },
-          itemSize: {height: 240},
-          overlayText: true,
-          title: product.name,
-          subtitle: (
-            <Text>
-              <Text style={{textDecorationLine: 'line-through', color: Colors.grey30}}>{product.formattedPrice}</Text>
-              <Text style={{textDecorationLine: 'none'}}>{product.formattedPrice}</Text>
-            </Text>
-          ),
-          description: '4 items',
-          descriptionLines: 2,
-          alignToStart: true,
-          onPress: () => Alert.alert('My price was ' + product.formattedPrice + ', now it is $50'),
-          renderOverlay: () => {
-            if (index === 0) {
-              return (
-                <Text margin-10 text80BO style={{alignSelf: 'flex-start', marginTop: 12, marginLeft: 12}}>
-                  {product.formattedPrice}
-                </Text>
-              );
-            }
+        }
+      }))
+      .value(),
+    pairs: _.chain(products)
+      .take(2)
+      .map(product => ({
+        containerProps: {useNative: true, activeScale: 0.97, activeOpacity: 1},
+        renderCustomItem: () => {
+          return (
+            <Card height={150} activeOpacity={1}>
+              <Card.Image style={{flex: 1}} source={{uri: product.mediaUrl}}/>
+            </Card>
+          );
+        },
+        title: product.name,
+        subtitle: (
+          <Text>
+            <Text style={{textDecorationLine: 'line-through', color: Colors.grey30}}>{product.formattedPrice}</Text>
+            <Text style={{textDecorationLine: 'none'}}> $50</Text>
+          </Text>
+        ),
+        description: product.inventory.status,
+        descriptionLines: 2,
+        alignToStart: true,
+        onPress: () => Alert.alert('My price was ' + product.formattedPrice + ', now it is $50')
+      }))
+      .value(),
+    dynamicLayout: _.chain(products)
+      .take(3)
+      .map(product => ({
+        imageProps: {
+          source: {
+            uri: product.mediaUrl
           }
-        })))(products),
-
-    avatars: _.flow(products => _.take(products, 9),
-      (products: any[]) =>
-        _.map(products, item => ({
-          renderCustomItem: () => {
-            const imageElementElement = item.thumbnail;
+        },
+        itemSize: {height: 90},
+        title: 'Title',
+        subtitle: 'subtitle',
+        description: product.name,
+        descriptionLines: 2,
+        alignToStart: true,
+        onPress: () => Alert.alert('Click!')
+      }))
+      .value(),
+    overlayText: _.chain(products)
+      .take(2)
+      .map((product, index) => ({
+        imageProps: {
+          source: {
+            uri: product.mediaUrl
+          },
+          overlayType: Image.overlayTypes.VERTICAL,
+          overlayColor: Colors.white
+        },
+        itemSize: {height: 240},
+        overlayText: true,
+        title: product.name,
+        subtitle: (
+          <Text>
+            <Text style={{textDecorationLine: 'line-through', color: Colors.grey30}}>{product.formattedPrice}</Text>
+            <Text style={{textDecorationLine: 'none'}}>{product.formattedPrice}</Text>
+          </Text>
+        ),
+        description: '4 items',
+        descriptionLines: 2,
+        alignToStart: true,
+        onPress: () => Alert.alert('My price was ' + product.formattedPrice + ', now it is $50'),
+        renderOverlay: () => {
+          if (index === 0) {
             return (
-              <View flex center marginB-10>
-                <Avatar size={100} source={{uri: imageElementElement}}/>
-              </View>
+              <Text margin-10 text80BO style={{alignSelf: 'flex-start', marginTop: 12, marginLeft: 12}}>
+                {product.formattedPrice}
+              </Text>
             );
-          },
-          onPress: () => Alert.alert('Your choose is  ' + item.name),
-          title: item.name,
-          titleLines: 2,
-          titleTypography: 'bodySmall'
-        })))(products),
+          }
+        }
+      }))
+      .value(),
+    avatars: _.chain(conversations)
+      .take(9)
+      .map(item => ({
+        renderCustomItem: () => {
+          const imageElementElement = item.thumbnail;
+          return (
+            <View flex center marginB-10>
+              <Avatar size={100} source={{uri: imageElementElement}}/>
+            </View>
+          );
+        },
+        onPress: () => Alert.alert('Your choose is  ' + item.name),
+        title: item.name,
+        titleLines: 2,
+        titleTypography: 'bodySmall'
+      }))
+      .value(),
     squares: [Colors.red30, Colors.yellow30, Colors.blue30, Colors.violet30, Colors.green30].map(color => ({
       renderCustomItem: () => <View height={50} backgroundColor={color}/>
     })),
@@ -174,7 +179,9 @@ class GridViewScreen extends Component {
           <GridView items={pairs} numColumns={2}/>
           <Text marginV-s5 text60BO>
             Dynamic itemSize
-            <Text text90>  (Using maxItemWidth)</Text>
+            <Text text90>
+              {' '} (Using maxItemWidth)
+            </Text>
           </Text>
           <GridView items={dynamicLayout} maxItemWidth={120}/>
           <Text marginV-s5 text60BO>

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

@@ -37,16 +37,17 @@ class TabControllerScreen extends Component<{}, State> {
   }
 
   generateTabItems = (fewItems = this.state.fewItems): TabControllerItemProps[] => {
-    const items: TabControllerItemProps[] = _.flow(tabs => _.take(tabs, fewItems ? 3 : TABS.length),
-      (tabs: TabControllerItemProps[]) =>
-        _.map<TabControllerItemProps>(tabs, (tab: TabControllerItemProps, index: number) => ({
-          label: tab,
-          key: tab,
-          icon: index === 2 ? Assets.icons.demo.dashboard : undefined,
-          badge: index === 5 ? {label: '2'} : undefined,
-          leadingAccessory: index === 3 ? <Text marginR-4>{Assets.emojis.movie_camera}</Text> : undefined,
-          trailingAccessory: index === 4 ? <Text marginL-4>{Assets.emojis.camera}</Text> : undefined
-        })))(TABS);
+    const items: TabControllerItemProps[] = _.chain(TABS)
+      .take(fewItems ? 3 : TABS.length)
+      .map<TabControllerItemProps>((tab, index) => ({
+        label: tab,
+        key: tab,
+        icon: index === 2 ? Assets.icons.demo.dashboard : undefined,
+        badge: index === 5 ? {label: '2'} : undefined,
+        leadingAccessory: index === 3 ? <Text marginR-4>{Assets.emojis.movie_camera}</Text> : undefined,
+        trailingAccessory: index === 4 ? <Text marginL-4>{Assets.emojis.camera}</Text> : undefined
+      }))
+      .value();
 
     const addItem: TabControllerItemProps = {
       icon: Assets.icons.demo.add,
@@ -133,16 +134,15 @@ class TabControllerScreen extends Component<{}, State> {
           <Tab3/>
         </TabController.TabPage>
 
-        {!fewItems &&
-          _.map(_.takeRight(TABS, TABS.length - 3), (title, index) => {
-            return (
-              <TabController.TabPage key={title} index={index + 3}>
-                <View padding-s5>
-                  <Text text40>{title}</Text>
-                </View>
-              </TabController.TabPage>
-            );
-          })}
+        {!fewItems && _.map(_.takeRight(TABS, TABS.length - 3), (title, index) => {
+          return (
+            <TabController.TabPage key={title} index={index + 3}>
+              <View padding-s5>
+                <Text text40>{title}</Text>
+              </View>
+            </TabController.TabPage>
+          );
+        })}
       </Container>
     );
   }

demo/src/screens/incubatorScreens/IncubatorChipsInputScreen.tsx

@@ -31,17 +31,18 @@ export default class ChipsInputScreen extends Component {
           chips={this.state.chips}
           leadingAccessory={<Text>TO: </Text>}
           onChange={newChips => {
-            _.flow(newChips => _.groupBy(newChips, 'label'),
-              newChips =>
-                _.forEach(newChips, group => {
-                  if (group.length === 1) {
-                    delete group[0].invalid;
-                  } else {
-                    group[group.length - 1].invalid = true;
-                  }
-                }),
-              _.values,
-              _.flatten)(newChips);
+            _.chain(newChips)
+              .groupBy('label')
+              .forEach(group => {
+                if (group.length === 1) {
+                  delete group[0].invalid;
+                } else {
+                  group[group.length - 1].invalid = true;
+                }
+              })
+              .values()
+              .flatten()
+              .value();
 
             this.setState({chips: newChips});
           }}