unicorn-demo-app 6.31.0 → 7.0.0

package/package.json

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

package/src/index.js

@@ -130,18 +130,15 @@ module.exports = {
         return require('./screens/componentScreens/TextScreen').default;
       },
       // TODO: fix Expo issues (navigation) before un-commenting
-      // get TextFieldScreen() {
-      //   return require('./screens/componentScreens/TextFieldScreen').default;
-      // },
+      get TextFieldScreen() {
+        return require('./screens/componentScreens/TextFieldScreen').default;
+      },
       get TourScreen() {
         return require('./screens/componentScreens/TourScreen').default;
       },
       get FeatureHighlightScreen() {
         return require('./screens/componentScreens/FeatureHighlightScreen').default;
       },
-      get WheelPickerDialogScreen() {
-        return require('./screens/componentScreens/WheelPickerDialogScreen').default;
-      },
       get SliderScreen() {
         return require('./screens/componentScreens/SliderScreen').default;
       },
@@ -173,9 +170,6 @@ module.exports = {
       get SafeAreaSpacerViewScreen() {
         return require('./screens/nativeComponentScreens/SafeAreaSpacerViewScreen').default;
       },
-      get WheelPickerViewScreen() {
-        return require('./screens/nativeComponentScreens/WheelPickerViewScreen').default;
-      },
       // Full Screen components
       get EmptyStateScreen() {
         return require('./screens/componentScreens/EmptyStateScreen').default;
@@ -221,9 +215,6 @@ module.exports = {
         return require('./screens/componentScreens/ProgressBarScreen').default;
       },
       // Incubator
-      get IncubatorTextFieldScreen() {
-        return require('./screens/incubatorScreens/IncubatorTextFieldScreen').default;
-      },
       get PanViewScreen() {
         return require('./screens/incubatorScreens/PanViewScreen').default;
       },

package/src/screens/MenuStructure.js

@@ -43,7 +43,6 @@ export const navigationData = {
         screen: 'unicorn.components.SharedTransitionScreen'
       },
       {title: 'Stack Aggregator', tags: 'stack aggregator', screen: 'unicorn.components.StackAggregatorScreen'},
-      {title: 'Wheel Picker Dialog', tags: 'wheel picker dialog', screen: 'unicorn.components.WheelPickerDialogScreen'},
       {title: 'Marquee', tags: 'sliding text', screen: 'unicorn.components.MarqueeScreen'}
     ]
   },
@@ -71,8 +70,12 @@ export const navigationData = {
       {title: 'Stepper', tags: 'stepper form', screen: 'unicorn.components.StepperScreen'},
       {title: 'Slider', tags: 'slider', screen: 'unicorn.components.SliderScreen'},
       {title: 'Switch', tags: 'switch toggle', screen: 'unicorn.components.SwitchScreen'},
-      {title: 'ChipsInput', tags: 'chips tags input form', screen: 'unicorn.components.ChipsInputScreen'},
-      {title: 'Masked Inputs', tags: 'text input form mask', screen: 'unicorn.components.MaskedInputScreen'}
+      {title: 'Masked Inputs', tags: 'text input form mask', screen: 'unicorn.components.MaskedInputScreen'},
+      {
+        title: 'WheelPicker',
+        tags: 'wheel picker spinner',
+        screen: 'unicorn.components.WheelPickerScreen'
+      }
     ]
   },
   Overlays: {
@@ -141,7 +144,6 @@ export const navigationData = {
         tags: 'native overlay',
         screen: 'unicorn.nativeComponents.HighlightOverlayViewScreen'
       },
-      {title: 'Wheel Picker', tags: 'wheel picker', screen: 'unicorn.nativeComponents.WheelPickerViewScreen'},
       {title: 'SafeArea Spacer', tags: 'native safe area', screen: 'unicorn.nativeComponents.SafeAreaSpacerViewScreen'},
       {
         title: 'KeyboardTracking (iOS)',
@@ -175,21 +177,15 @@ export const navigationData = {
     title: 'Incubator (Experimental)',
     screens: [
       {title: 'Calendar', tags: 'calendar', screen: 'unicorn.components.IncubatorCalendarScreen'},
-      {title: 'ChipsInput (New)', tags: 'chips input', screen: 'unicorn.components.IncubatorChipsInputScreen'},
+      {title: 'ChipsInput', tags: 'chips input', screen: 'unicorn.components.ChipsInputScreen'},
       {title: 'Native TouchableOpacity', tags: 'touchable native', screen: 'unicorn.incubator.TouchableOpacityScreen'},
       {title: 'Dialog (New)', tags: 'dialog modal popup alert', screen: 'unicorn.incubator.IncubatorDialogScreen'},
-      {title: 'TextField (New)', tags: 'text field input', screen: 'unicorn.components.IncubatorTextFieldScreen'},
       {title: 'Toast (New)', tags: 'toast', screen: 'unicorn.components.IncubatorToastScreen'},
       {
         title: 'ExpandableOverlay',
         tags: 'text field expandable input picker',
         screen: 'unicorn.components.IncubatorExpandableOverlayScreen'
       },
-      {
-        title: 'WheelPicker (Incubator)',
-        tags: 'wheel picker spinner experimental',
-        screen: 'unicorn.incubator.WheelPickerScreen'
-      },
       {title: 'Pan View', tags: 'pan swipe drag', screen: 'unicorn.incubator.PanViewScreen'}
     ]
   },

package/src/screens/componentScreens/ChipScreen.tsx

@@ -1,7 +1,6 @@
-import _ from 'lodash';
 import React, {Component} from 'react';
 import {Alert} from 'react-native';
-import {Chip, Colors, Spacings, Text, Typography, View, Incubator, WheelPickerDialog, Image} from 'react-native-ui-lib';
+import {Chip, Colors, Spacings, Text, Typography, View, Image} from 'react-native-ui-lib';
 
 const avatarImage = {
   uri: 'https://randomuser.me/api/portraits/women/24.jpg'
@@ -20,64 +19,9 @@ export default class ChipScreen extends Component {
   ];
 
   state = {
-    showDialog: false,
     selectedValue: this.colors[2].label
   };
 
-  toggleDialog = (showDialog: boolean) => {
-    this.setState({showDialog});
-  };
-
-  openDialog = () => {
-    this.toggleDialog(true);
-  };
-
-  closeDialog = () => {
-    this.toggleDialog(false);
-  };
-
-  onSelect = (itemValue: string) => {
-    const values = _.filter(this.colors, {value: itemValue});
-    if (values.length > 0) {
-      this.setState({selectedValue: values[0].label});
-    }
-    this.closeDialog();
-  };
-
-  renderItem = ({item: color}) => {
-    return (
-      <Text text50 margin-20 color={color.value}>
-        {color.label}
-      </Text>
-    );
-  };
-
-  renderContent = () => {
-    const {selectedValue} = this.state;
-
-    return (
-      <WheelPickerDialog
-        items={this.colors}
-        selectedValue={selectedValue}
-        onSelect={this.onSelect}
-        onCancel={this.closeDialog}
-        wheelPickerProps={{
-          style: {width: 200}
-        }}
-      />
-    );
-  };
-
-  renderPickerDialog = () => {
-    const {showDialog} = this.state;
-
-    return (
-      <Incubator.Dialog visible={showDialog} useSafeArea bottom onDismiss={this.closeDialog}>
-        {this.renderContent()}
-      </Incubator.Dialog>
-    );
-  };
-
   renderExample = (text: string, chip: JSX.Element) => {
     return (
       <View row spread marginB-12>
@@ -90,7 +34,6 @@ export default class ChipScreen extends Component {
   render() {
     return (
       <View style={{padding: 20}}>
-        {this.renderPickerDialog()}
         <Text marginB-20 text40 $textDefault>
           Chip
         </Text>
@@ -120,12 +63,11 @@ export default class ChipScreen extends Component {
             iconStyle={{width: 24, height: 24}}
             iconProps={{tintColor: Colors.$iconDefault}}
           />)}
-        {this.renderExample('Right icon + onPress + dynamic label',
+        {this.renderExample('Right icon',
           <Chip
             label={this.state.selectedValue}
             rightIconSource={chevron}
             iconStyle={{margin: 8}}
-            onPress={this.openDialog}
           />)}
         {this.renderExample('Label + Avatar', <Chip label={'Chip'} avatarProps={{source: avatarImage, size: 20}}/>)}
         {this.renderExample('Label + Counter',

package/src/screens/componentScreens/ChipsInputScreen.tsx

@@ -1,176 +1,60 @@
 import React, {Component} from 'react';
-import {StyleSheet, ScrollView} from 'react-native';
-import {View, Colors, Text, Typography, ChipsInput, ChipsInputChipProps} from 'react-native-ui-lib'; // eslint-disable-line
+import {View, Text, Card, TextField, Button, Colors, ChipsInput} from 'react-native-ui-lib'; //eslint-disable-line
+import _ from 'lodash';
 
-interface State {
-  chips: Array<ChipsInputChipProps>;
-  namesChips: Array<ChipsInputChipProps>;
-  nonRemovalChips: Array<ChipsInputChipProps>;
-  customChips: Array<string>;
-  tags: Array<string | any>;
-  tags2: Array<string>;
-  tags3: Array<string>;
-}
-
-export default class ChipsInputScreen extends Component<{}, State> {
-  // @ts-ignore
-  customChipsInput = React.createRef<ChipsInput>();
-
-  constructor(props: any) {
-    super(props);
-
-    this.state = {
-      chips: [{label: 'Falcon 9'}, {label: 'Enterprise'}, {label: 'Challenger', borderRadius: 0}, {label: 'Coca Cola', invalid: true}],
-      namesChips: [{label: 'Amit'}, {label: 'Ethan', invalid: true}],
-      nonRemovalChips: [{label: 'Non'}, {label: 'Removable'}, {label: 'Tags'}],
-      customChips: ['Chips', 'Input'],
-      tags: [{label: 'Amit'}, {label: 'Ethan', invalid: true}],
-      tags2: ['Non', 'Removable', 'Tags'],
-      tags3: ['Change', 'Typography']
-    };
-  }
-
-  onTagPress = (tagIndex: number, markedTagIndex: number) => {
-    this.customChipsInput.current?.markTagIndex(tagIndex === markedTagIndex ? undefined : tagIndex);
+export default class ChipsInputScreen extends Component {
+  state = {
+    chips: [{label: 'one'}, {label: 'two'}],
+    chips2: []
   };
 
-  renderCustomTag(tag: any, _: number, shouldMarkToRemove: boolean) {
-    return (
-      <View style={[styles.customTag, shouldMarkToRemove && {backgroundColor: Colors.purple70}]}>
-        <Text white>{tag.label}</Text>
-      </View>
-    );
-  }
-
-  renderLeftElement = () => {
+  render() {
     return (
-      <View center height={40} marginR-s2 style={{alignItems: 'flex-start'}}>
-        <Text grey30 text70M>
-          To:
+      <View flex padding-20>
+        <Text h1 marginB-s4>
+          ChipsInput
         </Text>
-      </View>
-    );
-  };
-
-  renderSearchTypeInput = () => {
-    return (
-      <>
-        <Text marginB-10 text60>Search Type</Text>
-        <View bg-grey60>
-          <ChipsInput
-            placeholder={'Enter Tags'}
-            chips={this.state.chips}
-            leftElement={this.renderLeftElement()}
-            hideUnderline
-            maxHeight={100}
-          />
-        </View>
-      </>
-    );
-  };
-
-  renderFormTypeInput = () => {
-    return (
-      <View marginT-40>
-        <Text marginB-10 text60>Form Type</Text>
         <ChipsInput
-          placeholder={'Enter Tags'}
-          title={'Mendy'}
+          placeholder="Enter chips"
+          defaultChipProps={{
+            backgroundColor: Colors.$backgroundPrimaryHeavy,
+            labelStyle: {color: Colors.$textDefaultLight},
+            containerStyle: {borderWidth: 0},
+            dismissColor: Colors.$iconDefaultLight
+          }}
+          invalidChipProps={{
+            dismissColor: Colors.$iconDanger,
+            labelStyle: {color: Colors.$textDanger},
+            backgroundColor: Colors.$backgroundDefault,
+            containerStyle: {borderColor: Colors.$outlineDanger}
+          }}
           chips={this.state.chips}
-          maxLength={4}
+          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);
+
+            this.setState({chips: newChips});
+          }}
         />
-      </View>
-    );
-  };
-
-  onCreateTag = (value: string) => {
-    return {label: value};
-  }
-
-  render() {
-    return (
-      <ScrollView keyboardShouldPersistTaps="never">
-        <View style={styles.container}>
-          <Text text40 marginB-20>
-            ChipsInput
-          </Text>
-
 
-          {this.renderSearchTypeInput()}
-
-          {this.renderFormTypeInput()}
-
-          <ChipsInput
-            containerStyle={styles.bottomMargin}
-            placeholder="Enter Tags"
-            chips={this.state.namesChips}
-            validationErrorMessage="error validation message"
-          />
-
-          <ChipsInput
-            containerStyle={styles.bottomMargin}
-            placeholder="Editing disabled"
-            chips={this.state.nonRemovalChips}
-            disableTagRemoval
-            disableTagAdding
-          />
-
-          <Text text50 marginV-20>Old Usage</Text>
-          <ChipsInput
-            containerStyle={styles.bottomMargin}
-            placeholder="Enter Tags"
-            tags={this.state.tags}
-            validationErrorMessage="error validation message"
-          />
-          
-          <ChipsInput
-            containerStyle={styles.bottomMargin}
-            placeholder="Editing disabled"
-            tags={this.state.tags2}
-            disableTagRemoval
-            disableTagAdding
-          />
-          <ChipsInput
-            ref={this.customChipsInput}
-            containerStyle={styles.bottomMargin}
-            placeholder="With custom tags"
-            tags={this.state.tags}
-            renderTag={this.renderCustomTag}
-            onCreateTag={this.onCreateTag}
-            onTagPress={this.onTagPress}
-            inputStyle={styles.customInput}
-          />
-          <ChipsInput 
-            text60
-            containerStyle={styles.bottomMargin}
-            placeholder="Enter Tags"
-            tags={this.state.tags3}
-          />
-
-        </View>
-      </ScrollView>
+        <ChipsInput
+          label="Max 3 chips"
+          placeholder="Enter chips..."
+          chips={this.state.chips2}
+          onChange={newChips => this.setState({chips2: newChips})}
+          maxChips={3}
+        />
+      </View>
     );
   }
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 15
-  },
-  customInput: {
-    ...Typography.text60,
-    color: Colors.blue30
-  },
-  bottomMargin: {
-    marginBottom: 25
-  },
-  customTag: {
-    backgroundColor: Colors.purple30,
-    paddingVertical: 2,
-    paddingHorizontal: 8,
-    borderRadius: 3,
-    marginRight: 10,
-    marginBottom: 10
-  }
-});

package/src/screens/componentScreens/PickerScreen.tsx

@@ -51,11 +51,11 @@ export default class PickerScreen extends Component {
     itemsCount: 1,
     // language: {value: 'java', label: 'Java'},
     language: undefined,
-    language2: options[2].value, // for migrated picker example
+    language2: options[2].value,
     languages: [],
     nativePickerValue: 'java',
     customModalValues: [],
-    filter: filters[0],
+    filter: filters[0].value,
     scheme: schemes[0].value,
     contact: 0
   };
@@ -102,10 +102,9 @@ export default class PickerScreen extends Component {
             searchPlaceholder={'Search a language'}
             searchStyle={{color: Colors.blue30, placeholderTextColor: Colors.grey50}}
             // onSearchChange={value => console.warn('value', value)}
-            migrateTextField
           >
             {_.map(longOptions, option => (
-              <Picker.Item key={option.value} value={option} label={''} disabled={option.disabled}/>
+              <Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled}/>
             ))}
           </Picker>
 
@@ -116,21 +115,20 @@ export default class PickerScreen extends Component {
             mode={Picker.modes.MULTI}
             selectionLimit={3}
             trailingAccessory={dropdownIcon}
-            migrateTextField
           >
             {_.map(options, option => (
-              <Picker.Item key={option.value} value={option} label={''} disabled={option.disabled}/>
+              <Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled}/>
             ))}
           </Picker>
 
           <Picker
-            title="Wheel Picker"
+            label="Wheel Picker"
             placeholder="Pick a Language"
-            useNativePicker
+            useWheelPicker
             // useWheelPicker
             value={this.state.nativePickerValue}
             onChange={nativePickerValue => this.setState({nativePickerValue})}
-            rightIconSource={dropdown}
+            trailingAccessory={<Icon source={dropdown}/>}
             // containerStyle={{marginTop: 20}}
             // renderPicker={() => {
             //   return (
@@ -139,13 +137,6 @@ export default class PickerScreen extends Component {
             //     </View>
             //   );
             // }}
-            // renderNativePicker={props => {
-            //   return (
-            //     <View flex bg-red50>
-            //       <Text>CUSTOM NATIVE PICKER</Text>
-            //     </View>
-            //   );
-            // }}
             // topBarProps={{doneLabel: 'YES', cancelLabel: 'NO'}}
           >
             {_.map(options, option => (
@@ -160,13 +151,12 @@ export default class PickerScreen extends Component {
             onChange={items => this.setState({customModalValues: items})}
             mode={Picker.modes.MULTI}
             trailingAccessory={dropdownIcon}
-            migrateTextField
             renderCustomModal={this.renderDialog}
           >
             {_.map(options, option => (
               <Picker.Item
                 key={option.value}
-                value={option}
+                value={option.value}
                 label={option.label}
                 labelStyle={Typography.text65}
                 disabled={option.disabled}
@@ -196,19 +186,15 @@ export default class PickerScreen extends Component {
             }}
           >
             {_.map(filters, filter => (
-              <Picker.Item key={filter.value} value={filter} label={''}/>
+              <Picker.Item key={filter.value} value={filter.value} label={filter.label}/>
             ))}
           </Picker>
 
-          <Text text60 marginT-s5 $textDefault>
-            Migrated Pickers
-          </Text>
-
           <Text marginT-20 marginB-10 text70 $textDefault>
             Custom Picker Items:
           </Text>
           <Picker
-            migrate
+            ref={this.picker}
             value={this.state.contact}
             onChange={contact => {
               this.setState({contact});
@@ -268,27 +254,6 @@ export default class PickerScreen extends Component {
             ))}
           </Picker>
 
-          <Picker
-            migrate
-            ref={this.picker}
-            migrateTextField
-            label="Language"
-            placeholder="Favorite Language"
-            value={this.state.language2}
-            onChange={value => this.setState({language2: value})}
-            topBarProps={{title: 'Languages'}}
-            showSearch
-            searchPlaceholder={'Search a language'}
-            searchStyle={{color: Colors.blue30, placeholderTextColor: Colors.grey50}}
-            marginT-s4
-            enableErrors={false}
-            // mode={Picker.modes.MULTI}
-            // useNativePicker
-          >
-            {_.map(options, option => (
-              <Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled}/>
-            ))}
-          </Picker>
           <Button
             label="Open Picker Manually"
             link
@@ -299,11 +264,11 @@ export default class PickerScreen extends Component {
           <Text text60 marginT-s5>
             Different Field Types
           </Text>
-          <Text text80 marginB-s5>(Form/Filter/Settings)</Text>
+          <Text text80 marginB-s5>
+            (Form/Filter/Settings)
+          </Text>
 
           <Picker
-            migrate
-            migrateTextField
             value={this.state.filter}
             onChange={value => this.setState({filter: value})}
             placeholder="Filter posts"
@@ -316,8 +281,6 @@ export default class PickerScreen extends Component {
           </Picker>
 
           <Picker
-            migrate
-            migrateTextField
             value={this.state.scheme}
             onChange={value => this.setState({scheme: value})}
             label="Color Scheme"

package/src/screens/componentScreens/SectionsWheelPickerScreen.tsx

@@ -7,14 +7,13 @@ import {
   SectionsWheelPicker,
   SegmentedControl,
   Button,
-  Incubator,
+  WheelPicker,
+  WheelPickerProps,
   Constants,
   Switch,
   Colors
 } from 'react-native-ui-lib';
 
-const {WheelPicker} = Incubator;
-
 const DAYS = _.times(10, i => i);
 const HOURS = _.times(24, i => i);
 const MINUTES = _.times(60, i => i);
@@ -75,7 +74,7 @@ const SectionsWheelPickerScreen = () => {
     setSelectedMinutes(0);
   }, []);
 
-  const sections: Incubator.WheelPickerProps[] = useMemo(() => {
+  const sections: WheelPickerProps[] = useMemo(() => {
     return [
       {
         items: getItems(DAYS),

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

@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import React, {Component} from 'react';
 import {ActivityIndicator, StyleSheet} from 'react-native';
 import {
@@ -11,7 +12,6 @@ import {
   TabControllerImperativeMethods
 } from 'react-native-ui-lib';
 import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
-import _ from 'lodash';
 
 import Tab1 from './tab1';
 import Tab2 from './tab2';
@@ -162,14 +162,13 @@ class TabControllerScreen extends Component<{}, State> {
   }
 
   render() {
-    const {key, initialIndex, /* selectedIndex, */ asCarousel, centerSelected, fewItems, items} = this.state;
+    const {key, initialIndex, asCarousel, centerSelected, fewItems, items} = this.state;
     return (
       <View flex bg-$backgroundDefault>
         <TabController
           key={key}
           ref={this.tabController}
           asCarousel={asCarousel}
-          // selectedIndex={selectedIndex}
           initialIndex={initialIndex}
           onChangeIndex={this.onChangeIndex}
           items={items}

package/src/screens/{incubatorScreens/IncubatorTextFieldScreen.tsx → componentScreens/TextFieldScreen.tsx}

@@ -1,8 +1,7 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {TextInput, StyleSheet, ScrollView, ActivityIndicator} from 'react-native';
-import {Assets, Colors, Spacings, Typography, View, Text, Button, Keyboard, Incubator} from 'react-native-ui-lib'; //eslint-disable-line
-const {TextField} = Incubator;
+import {Assets, Colors, Spacings, Typography, View, Text, Button, Keyboard, TextField, TextFieldMethods} from 'react-native-ui-lib'; //eslint-disable-line
 const {KeyboardAwareInsetsView} = Keyboard;
 
 const priceFormatter = Intl.NumberFormat('en-US');
@@ -10,14 +9,15 @@ const priceFormatter = Intl.NumberFormat('en-US');
 export default class TextFieldScreen extends Component {
   input = React.createRef<TextInput>();
   input2 = React.createRef<TextInput>();
-  inputWithValidation = React.createRef<TextInput>();
+  inputWithValidation = React.createRef<TextFieldMethods>();
   state = {
     errorPosition: TextField.validationMessagePositions.TOP,
     shouldDisable: false,
     isReadonly: false,
     value: 'Initial Value',
     searching: false,
-    preset: 'withUnderline'
+    preset: 'withUnderline',
+    price: ''
   };
 
   componentDidMount() {
@@ -162,6 +162,7 @@ export default class TextFieldScreen extends Component {
 
           <View row top marginT-s4>
             <TextField
+              // @ts-expect-error
               ref={this.inputWithValidation}
               placeholder="Enter full name"
               validate="required"