unicorn-demo-app 6.8.1 → 6.9.0

package/package.json

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

package/src/screens/componentScreens/ExpandableSectionScreen.tsx

@@ -8,45 +8,45 @@ const cardImage = require('../../assets/images/card-example.jpg');
 const chevronDown = require('../../assets/icons/chevronDown.png');
 const chevronUp = require('../../assets/icons/chevronUp.png');
 
-const elements = [
-  <Card style={{marginBottom: 10}} onPress={() => {}}>
-    <Card.Section
-      content={[
-        {text: 'Card #1', text70: true, grey10: true},
-        {text: 'card description', text90: true, grey50: true}
-      ]}
-      style={{padding: 20}}
-    />
-    <Card.Section source={cardImage2} imageStyle={{height: 120}} />
-  </Card>,
-  <Card style={{marginBottom: 10}} onPress={() => {}}>
-    <Card.Section
-      content={[
-        {text: 'Card #2', text70: true, grey10: true},
-        {text: 'card description', text90: true, grey50: true}
-      ]}
-      style={{padding: 20}}
-    />
-    <Card.Section source={cardImage} imageStyle={{height: 120}} />
-  </Card>,
-  <Card style={{marginBottom: 10}} onPress={() => {}}>
-    <Card.Section
-      content={[
-        {text: 'Card #3', text70: true, grey10: true},
-        {text: 'card description', text90: true, grey50: true}
-      ]}
-      style={{padding: 20}}
-    />
-    <Card.Section source={cardImage2} imageStyle={{height: 120}} />
-  </Card>
-];
-
 class ExpandableSectionScreen extends PureComponent {
   state = {
     expanded: false,
     top: false
   };
 
+  elements = [
+    <Card key={0} style={{marginBottom: 10}} onPress={() => this.onExpand()}>
+      <Card.Section
+        content={[
+          {text: 'Card #1', text70: true, grey10: true},
+          {text: 'card description', text90: true, grey50: true}
+        ]}
+        style={{padding: 20}}
+      />
+      <Card.Section imageSource={cardImage2} imageStyle={{height: 120}}/>
+    </Card>,
+    <Card key={1} style={{marginBottom: 10}} onPress={() => this.onExpand()}>
+      <Card.Section
+        content={[
+          {text: 'Card #2', text70: true, grey10: true},
+          {text: 'card description', text90: true, grey50: true}
+        ]}
+        style={{padding: 20}}
+      />
+      <Card.Section imageSource={cardImage} imageStyle={{height: 120}}/>
+    </Card>,
+    <Card key={2} style={{marginBottom: 10}} onPress={() => this.onExpand()}>
+      <Card.Section
+        content={[
+          {text: 'Card #3', text70: true, grey10: true},
+          {text: 'card description', text90: true, grey50: true}
+        ]}
+        style={{padding: 20}}
+      />
+      <Card.Section imageSource={cardImage2} imageStyle={{height: 120}}/>
+    </Card>
+  ];
+
   onExpand() {
     this.setState({
       expanded: !this.state.expanded
@@ -74,7 +74,7 @@ class ExpandableSectionScreen extends PureComponent {
   getBodyElement() {
     return (
       <Carousel pageWidth={350} itemSpacings={Spacings.s2}>
-        {_.map(elements, (element, key) => {
+        {_.map(this.elements, (element, key) => {
           return (
             <View key={key} margin-12>
               {element}
@@ -99,7 +99,7 @@ class ExpandableSectionScreen extends PureComponent {
             onValueChange={() => {
               this.setState({top: !this.state.top});
             }}
-          ></Switch>
+          />
         </View>
         <ExpandableSection
           top={top}

package/src/screens/componentScreens/PickerScreen.js

@@ -1,7 +1,18 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {ScrollView} from 'react-native';
-import {View, Colors, Icon, Dialog, Text, Picker, Avatar, Assets, PanningProvider, Typography} from 'react-native-ui-lib'; //eslint-disable-line
+import {
+  View,
+  Colors,
+  Icon,
+  Dialog,
+  Text,
+  Picker,
+  Avatar,
+  Assets,
+  PanningProvider,
+  Typography
+} from 'react-native-ui-lib'; //eslint-disable-line
 import contactsData from '../../data/conversations';
 import tagIcon from '../../assets/icons/tags.png';
 import dropdown from '../../assets/icons/chevronDown.png';
@@ -239,7 +250,8 @@ export default class PickerScreen extends Component {
 
           <Picker
             migrate
-            title="Language"
+            migrateTextField
+            label="Language"
             placeholder="Favorite Language"
             value={this.state.language2}
             onChange={value => this.setState({language2: value})}

package/src/screens/incubatorScreens/WheelPickerScreen.tsx

@@ -1,8 +1,6 @@
+import _ from 'lodash';
 import React, {useCallback, useState} from 'react';
 import {View, Text, Incubator, Colors, Typography, Button, Dialog} from 'react-native-ui-lib';
-import _ from 'lodash';
-
-type WheelPickerValue = Incubator.WheelPickerProps['initialValue'];
 
 const monthItems = _.map([
   'January',
@@ -18,18 +16,25 @@ const monthItems = _.map([
   'November',
   'December'
 ],
-item => ({label: item, value: item}));
+item => ({label: item, value: item, align: Incubator.WheelPickerAlign.RIGHT}));
 
-const yearItems = _.times(2030, i => i)
+const yearItems = _.times(2050, i => i)
   .reverse()
   .map(item => ({label: `${item}`, value: item}));
 const dayItems = _.times(31, i => i + 1).map(day => ({label: `${day}`, value: day}));
 
-const useData = (initialMonth?: string, initialYear?: string, initialDays?: number) => {
-  const [selectedMonth, setMonth] = useState<WheelPickerValue>(initialMonth);
-  const [, setYear] = useState<WheelPickerValue>(initialYear);
-  const [selectedDays, setDays] = useState<WheelPickerValue>(initialDays);
+export default () => {
   const [showDialog, setShowDialog] = useState(false);
+  const [yearsValue, setYearsValue] = useState(2022);
+
+  const updateYearsInitialValue = useCallback((increaseYears: boolean) => {
+    increaseYears ? setYearsValue(Math.min(yearsValue + 1, 2049)) : setYearsValue(Math.max(yearsValue - 1, 0));
+  },
+  [yearsValue]);
+
+  const onChange = useCallback((value) => {
+    setYearsValue(value);
+  }, []);
 
   const onPickDaysPress = useCallback(() => {
     setShowDialog(true);
@@ -39,75 +44,52 @@ const useData = (initialMonth?: string, initialYear?: string, initialDays?: numb
     setShowDialog(false);
   }, []);
 
-  const onMonthChange = useCallback((item: WheelPickerValue, _: number) => {
-    setMonth(item);
-  }, []);
-
-  const onYearChange = useCallback((item: WheelPickerValue, _: number) => {
-    setYear(item);
-  }, []);
-
-  const onDaysChange = useCallback((item: WheelPickerValue, _: number) => {
-    setDays(item);
-  }, []);
-
-  return {
-    onMonthChange,
-    onYearChange,
-    onDaysChange,
-    selectedMonth,
-    selectedDays,
-    onPickDaysPress,
-    onDialogDismissed,
-    showDialog
-  };
-};
-
-export default () => {
-  const {
-    selectedMonth,
-    onMonthChange,
-    onYearChange,
-    selectedDays,
-    onDaysChange,
-    onPickDaysPress,
-    onDialogDismissed,
-    showDialog
-  } = useData('February', undefined, 5);
-
   return (
     <View flex padding-page>
       <Text h1>Wheel Picker</Text>
 
-      <View marginT-s5 centerH>
-        <Text h3>Months</Text>
-        <Incubator.WheelPicker
-          onChange={onMonthChange}
-          activeTextColor={Colors.primary}
-          inactiveTextColor={Colors.grey20}
-          items={monthItems}
-          textStyle={Typography.text60R}
-          selectedValue={selectedMonth}
-        />
+      <View row center marginT-30>
+        <View center>
+          <Text h3>Months</Text>
+          <Incubator.WheelPicker
+            initialValue={'February'}
+            activeTextColor={Colors.primary}
+            inactiveTextColor={Colors.grey20}
+            items={monthItems}
+            textStyle={Typography.text60R}
+            numberOfVisibleRows={3} 
+          />
+        </View>
 
-        <Text h3>Years</Text>
-        <Text bodySmall grey30>
-          (Uncontrolled, initialValue passed)
-        </Text>
-        <View width={'100%'} marginT-s3>
+        <View center>
+          <Text h3>Years</Text>
           <Incubator.WheelPicker
-            onChange={onYearChange}
-            numberOfVisibleRows={3}
-            initialValue={2021}
+            numberOfVisibleRows={3} 
+            initialValue={yearsValue} 
             items={yearItems}
+            onChange={onChange}
           />
         </View>
       </View>
 
-      <View marginB-s10>
-        <Button marginT-40 label={'Pick Days'} marginH-100 onPress={onPickDaysPress}/>
+      <View center marginT-30>
+        <Text body>
+          Move the wheel programmatically
+        </Text>
+        <Text bodySmall grey30>
+          (by updating the initialValue prop)
+        </Text>
+        <View marginT-10 row>
+          <Button size="medium" label={'Previous'} marginR-20 onPress={() => updateYearsInitialValue(false)}/>
+          <Button size="medium" label={'Next'} onPress={() => updateYearsInitialValue(true)}/>
+        </View>
+      </View>
+
+      <View center marginT-40>
+        <Text h3 marginB-20>Days</Text>
+        <Button size="small" label={'Pick Days'} onPress={onPickDaysPress}/>
         <Dialog width={'90%'} height={260} bottom visible={showDialog} onDismiss={onDialogDismissed}>
-          <Incubator.WheelPicker onChange={onDaysChange} selectedValue={selectedDays} label={'Days'} items={dayItems}/>
+          <Incubator.WheelPicker initialValue={5} label={'Days'} items={dayItems}/>
         </Dialog>
       </View>
     </View>