unicorn-demo-app 6.9.2 → 6.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unicorn-demo-app",
-  "version": "6.9.2",
+  "version": "6.10.0",
   "main": "src/index.js",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
   "license": "MIT",

package/src/screens/MainScreen.js

@@ -103,7 +103,7 @@ class MainScreen extends Component {
   };
 
   closeSearchBox = () => {
-    this.input.blur();
+    this.input?.blur();
   };
 
   setDefaultScreen = item => {

package/src/screens/SettingsScreen.js

@@ -20,12 +20,10 @@ class SettingsScreen extends Component {
       screens: [
         none,
         playground,
-        ..._.chain(data)
-          .values()
-          .map('screens')
-          .flatten()
-          .map(screen => ({label: screen.title, value: screen.screen}))
-          .value()
+        ..._.flow(_.values,
+          screens => _.map(screens, 'screens'),
+          _.flatten,
+          screens => _.map(screens, screen => ({label: screen.title, value: screen.screen})))(data)
       ]
     };
   }
@@ -51,7 +49,7 @@ class SettingsScreen extends Component {
     });
   };
 
-  setDefaultScreen = (screen) => {
+  setDefaultScreen = screen => {
     this.setState({defaultScreen: screen});
     AsyncStorage.setItem('uilib.defaultScreen', screen.value);
     setTimeout(() => {
@@ -85,25 +83,28 @@ 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>
     );

package/src/screens/componentScreens/CardScannerScreen.js

@@ -56,7 +56,8 @@ export default class CardScannerScreen extends Component {
           <View paddingL-40 marginB-20>
             <AnimatedScanner
               backgroundColor={Colors.purple30}
-              progress={98} duration={1600}
+              progress={98}
+              duration={1600}
               containerStyle={{backgroundColor: Colors.violet50, height: 6}}
             />
           </View>

package/src/screens/componentScreens/GridViewScreen.tsx

@@ -7,124 +7,119 @@ import products from '../../data/products';
 
 class GridViewScreen extends Component {
   state = {
-    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}}/>;
-          }
-        }
-      }))
-      .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
-          }
-        },
-        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
+    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}
           },
-          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) {
+          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 (
-              <Text margin-10 text80BO style={{alignSelf: 'flex-start', marginTop: 12, marginLeft: 12}}>
-                {product.formattedPrice}
-              </Text>
+              <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(),
-    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(),
+        })))(products),
+
+    avatars: _.flow(products => _.take(products, 9),
+      (products: any[]) =>
+        _.map(products, 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'
+        })))(products),
     squares: [Colors.red30, Colors.yellow30, Colors.blue30, Colors.violet30, Colors.green30].map(color => ({
       renderCustomItem: () => <View height={50} backgroundColor={color}/>
     })),
@@ -179,9 +174,7 @@ 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>

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

@@ -37,17 +37,16 @@ class TabControllerScreen extends Component<{}, State> {
   }
 
   generateTabItems = (fewItems = this.state.fewItems): TabControllerItemProps[] => {
-    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 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 addItem: TabControllerItemProps = {
       icon: Assets.icons.demo.add,
@@ -134,15 +133,16 @@ 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>
     );
   }

package/src/screens/incubatorScreens/IncubatorChipsInputScreen.tsx

@@ -31,18 +31,17 @@ export default class ChipsInputScreen extends Component {
           chips={this.state.chips}
           leadingAccessory={<Text>TO: </Text>}
           onChange={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();
+            _.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);
 
             this.setState({chips: newChips});
           }}