unicorn-demo-app 6.4.3 → 6.5.0

package/package.json

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

package/src/screens/{ExampleScreenPresenter.js → ExampleScreenPresenter.tsx}

@@ -10,11 +10,19 @@ import {
   RadioGroup,
   Slider,
   SegmentedControl,
+  SegmentedControlItemProps,
   Text,
+  TextProps,
   View
 } from 'react-native-ui-lib';
 
-export function renderHeader(title, others) {
+interface RadioGroupOptions {
+  isRow?: boolean;
+  afterValueChanged?: () => void;
+  useValueAsLabel?: boolean;
+}
+
+export function renderHeader(title: string, others: TextProps) {
   return (
     <Text text30 grey10 {...others}>
       {title}
@@ -22,25 +30,25 @@ export function renderHeader(title, others) {
   );
 }
 
-export function renderBooleanOption(title, key) {
+export function renderBooleanOption(title: string, key: string) {
+  // @ts-ignore
   const value = this.state[key];
   return (
     <View row centerV spread marginB-s4 key={key}>
-      <Text flex>
-        {title}
-      </Text>
+      <Text flex>{title}</Text>
       <Switch
         useCustomTheme
         key={key}
-        textID={key}
+        testID={key}
         value={value}
+        // @ts-ignore
         onValueChange={value => this.setState({[key]: value})}
       />
     </View>
   );
 }
 
-export function renderBooleanGroup(title, options) {
+export function renderBooleanGroup(title: string, options: string[]) {
   return (
     <View marginB-s2>
       <Text text70M marginB-s2>
@@ -48,6 +56,7 @@ export function renderBooleanGroup(title, options) {
       </Text>
       <View row style={styles.rowWrap}>
         {_.map(options, key => {
+          // @ts-ignore
           const value = this.state[key];
           return (
             <View spread centerH row key={key}>
@@ -57,6 +66,7 @@ export function renderBooleanGroup(title, options) {
                 key={key}
                 testID={key}
                 value={value}
+                // @ts-ignore
                 onValueChange={value => this.setState({[key]: value})}
               />
               <Text text70 marginR-s3 marginB-s2>
@@ -70,7 +80,11 @@ export function renderBooleanGroup(title, options) {
   );
 }
 
-export function renderRadioGroup(title, key, options, {isRow, afterValueChanged, useValueAsLabel} = {}) {
+export function renderRadioGroup(title: string,
+  key: string,
+  options: object,
+  {isRow, afterValueChanged, useValueAsLabel}: RadioGroupOptions = {}) {
+  // @ts-ignore
   const value = this.state[key];
   return (
     <View marginB-s2>
@@ -83,6 +97,7 @@ export function renderRadioGroup(title, key, options, {isRow, afterValueChanged,
         row={isRow}
         style={isRow && styles.rowWrap}
         initialValue={value}
+        // @ts-ignore
         onValueChange={value => this.setState({[key]: value}, afterValueChanged)}
       >
         {_.map(options, (value, key) => {
@@ -103,9 +118,10 @@ export function renderRadioGroup(title, key, options, {isRow, afterValueChanged,
   );
 }
 
-export function renderColorOption(title,
-  key,
+export function renderColorOption(title: string,
+  key: string,
   colors = ['transparent', Colors.blue30, Colors.grey10, Colors.yellow30, Colors.green30, Colors.purple30]) {
+  // @ts-ignore
   const value = this.state[key];
   return (
     <View marginV-s2>
@@ -113,13 +129,17 @@ export function renderColorOption(title,
       <ColorPalette
         value={value}
         colors={colors}
+        // @ts-ignore
         onValueChange={value => this.setState({[key]: value === 'transparent' ? undefined : value})}
       />
     </View>
   );
 }
 
-export function renderSliderOption(title, key, {min = 0, max = 10, step = 1, initial = 0, sliderText = ''}) {
+export function renderSliderOption(title: string,
+  key: string,
+  {min = 0, max = 10, step = 1, initial = 0, sliderText = ''}) {
+  // @ts-ignore
   const value = this.state[key] || initial;
   return (
     <View marginV-s2>
@@ -134,6 +154,7 @@ export function renderSliderOption(title, key, {min = 0, max = 10, step = 1, ini
           minimumValue={min}
           maximumValue={max}
           step={step}
+          // @ts-ignore
           onValueChange={value => this.setState({[key]: value})}
         />
         <Text marginL-s4 text70 style={styles.text}>
@@ -145,16 +166,18 @@ export function renderSliderOption(title, key, {min = 0, max = 10, step = 1, ini
   );
 }
 
-export function renderMultipleSegmentOptions(title, key, options) {
+export function renderMultipleSegmentOptions(title: string, key: string, options: (SegmentedControlItemProps & {value: any})[]) {
+  // @ts-ignore
   const value = this.state[key];
   const index = _.findIndex(options, {value});
 
   return (
     <View row centerV spread marginB-s4 key={key}>
-      <Text marginR-s2>{title}</Text>
+      {!!title && <Text marginR-s2>{title}</Text>}
       <SegmentedControl
         initialIndex={index}
         segments={options}
+        // @ts-ignore
         onChangeIndex={index => this.setState({[key]: options[index].value})}
       />
     </View>

package/src/screens/MenuStructure.js

@@ -153,6 +153,7 @@ export const navigationData = {
   Incubator: {
     title: 'Incubator (Experimental)',
     screens: [
+      {title: '(New) ChipsInput', tags: 'chips input', screen: 'unicorn.components.IncubatorChipsInputScreen'},
       {title: 'Native TouchableOpacity', tags: 'touchable native', screen: 'unicorn.incubator.TouchableOpacityScreen'},
       {title: '(New) Dialog', tags: 'dialog modal popup alert', screen: 'unicorn.incubator.IncubatorDialogScreen'},
       {title: '(New) TextField', tags: 'text field input', screen: 'unicorn.components.IncubatorTextFieldScreen'},

package/src/screens/componentScreens/GridViewScreen.tsx

@@ -179,8 +179,11 @@ class GridViewScreen extends Component {
           <GridView items={pairs} numColumns={2}/>
           <Text marginV-s5 text60BO>
             Dynamic itemSize
+            <Text text90>
+              {' '} (Using maxItemWidth)
+            </Text>
           </Text>
-          <GridView items={dynamicLayout} numColumns={3}/>
+          <GridView items={dynamicLayout} maxItemWidth={120}/>
           <Text marginV-s5 text60BO>
             OverlayText
           </Text>

package/src/screens/componentScreens/HintsScreen.tsx

@@ -2,7 +2,6 @@ import _ from 'lodash';
 import React, {Component} from 'react';
 import {Alert} from 'react-native';
 import {Colors, View, Text, Hint, Button, Assets, Incubator} from 'react-native-ui-lib';
-// @ts-expect-error
 import {renderMultipleSegmentOptions, renderBooleanOption} from '../ExampleScreenPresenter';
 
 const settingsIcon = require('../../assets/icons/settings.png');

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

@@ -119,7 +119,7 @@ class TabControllerScreen extends Component<{}, State> {
   }
 
   renderTabPages() {
-    const {asCarousel} = this.state;
+    const {asCarousel, fewItems} = this.state;
     const Container = asCarousel ? TabController.PageCarousel : View;
     const containerProps = asCarousel ? {} : {flex: true};
     return (
@@ -134,7 +134,7 @@ class TabControllerScreen extends Component<{}, State> {
           <Tab3/>
         </TabController.TabPage>
 
-        {_.map(_.takeRight(TABS, TABS.length - 3), (title, index) => {
+        {!fewItems && _.map(_.takeRight(TABS, TABS.length - 3), (title, index) => {
           return (
             <TabController.TabPage key={title} index={index + 3}>
               <View padding-s5>

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

@@ -5,6 +5,7 @@ import {Card, Avatar, View, Text} from 'react-native-ui-lib';
 
 class Tab2 extends Component {
   state = {
+    counter: 0,
     loading: true
   };
 
@@ -13,7 +14,17 @@ class Tab2 extends Component {
       this.setState({loading: false});
     }, 1200);
 
-    // this.slow();
+    /* Uncomment to test TabPage freeze functionality when the page lose focus */
+    // setInterval(() => {
+    //   this.setState({counter: this.state.counter + 1});
+    // }, 1000);
+  }
+
+  componentDidUpdate() {
+    /* Uncomment to test TabPage freeze functionality when the page lose focus */
+    // if (this.state.counter % 3 === 0) {
+    //   console.warn('freeze counter', this.state.counter);
+    // }
   }
 
   slow(iterations = 10) {

package/src/screens/componentScreens/index.js

@@ -13,16 +13,20 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.CarouselVerticalScreen', () => require('./CarouselVerticalScreen').default);
   registrar('unicorn.components.CheckboxScreen', () => require('./CheckboxScreen').default);
   registrar('unicorn.components.ChipScreen', () => require('./ChipScreen').default);
+  registrar('unicorn.components.ChipsInputScreen', () => require('./ChipsInputScreen').default);
+  registrar('unicorn.components.ColorPickerScreen', () => require('./ColorPickerScreen').default);
+  registrar('unicorn.components.ColorSwatchScreen', () => require('./ColorSwatchScreen').default);
   registrar('unicorn.components.ConnectionStatusBar', () => require('./ConnectionStatusBarScreen').default);
+  registrar('unicorn.components.DateTimePickerScreen', () => require('./DateTimePickerScreen').default);
   registrar('unicorn.components.DialogScreen', () => require('./DialogScreen').default);
   registrar('unicorn.components.DrawerScreen', () => require('./DrawerScreen').default);
   registrar('unicorn.components.ExpandableSectionScreen', () => require('./ExpandableSectionScreen').default);
-  registrar('unicorn.components.ChipsInputScreen', () => require('./ChipsInputScreen').default);
+  registrar('unicorn.components.FloatingButtonScreen', () => require('./FloatingButtonScreen').default);
   registrar('unicorn.components.HapticScreen', () => require('./HapticScreen').default);
   registrar('unicorn.components.HintsScreen', () => require('./HintsScreen').default);
   registrar('unicorn.components.IconScreen', () => require('./IconScreen').default);
   registrar('unicorn.components.ImageScreen', () => require('./ImageScreen').default);
-  registrar('unicorn.components.ProgressiveImageScreen', () => require('./ProgressiveImageScreen').default);
+  registrar('unicorn.components.GridViewScreen', () => require('./GridViewScreen').default);
   registrar('unicorn.components.KeyboardAwareScrollViewScreen', () => require('./KeyboardAwareScrollViewScreen').default);
   registrar('unicorn.components.MaskedInputScreen', () => require('./MaskedInputScreen').default);
   registrar('unicorn.components.OverlaysScreen', () => require('./OverlaysScreen').default);
@@ -32,41 +36,37 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.PanResponderScreen', () => require('./PanResponderScreen').default);
   registrar('unicorn.components.PickerScreen', () => require('./PickerScreen').default);
   registrar('unicorn.animations.ProgressBarScreen', () => require('../componentScreens/ProgressBarScreen').default);
+  registrar('unicorn.components.ProgressiveImageScreen', () => require('./ProgressiveImageScreen').default);
   registrar('unicorn.components.RadioButtonScreen', () => require('./RadioButtonScreen').default);
   registrar('unicorn.components.ScrollBarScreen', () => require('./ScrollBarScreen').default);
   registrar('unicorn.components.SectionsWheelPickerScreen', () => require('./SectionsWheelPickerScreen').default);
   registrar('unicorn.components.SegmentedControlScreen', () => require('./SegmentedControlScreen').default);
   registrar('unicorn.components.SharedTransitionScreen', () => require('./SharedTransitionScreen').default);
   registrar('unicorn.components.SkeletonViewScreen', () => require('./SkeletonViewScreen').default);
+  registrar('unicorn.components.SliderScreen', () => require('./SliderScreen').default);
+  registrar('unicorn.components.StackAggregatorScreen', () => require('./StackAggregatorScreen').default);
   registrar('unicorn.components.StepperScreen', () => require('./StepperScreen').default);
   registrar('unicorn.components.SwitchScreen', () => require('./SwitchScreen').default);
-  registrar('unicorn.components.ToastsScreen', () => require('./ToastsScreen').default);
   registrar('unicorn.components.TabControllerScreen', () => require('./TabControllerScreen').default);
-  registrar('unicorn.components.TextScreen', () => require('./TextScreen').default);
   registrar('unicorn.components.TextFieldScreen', () => require('./TextFieldScreen').default);
+  registrar('unicorn.components.TextScreen', () => require('./TextScreen').default);
+  registrar('unicorn.components.ToastsScreen', () => require('./ToastsScreen').default);
   registrar('unicorn.wrappers.TouchableOpacityScreen', () => require('./TouchableOpacityScreen').default);
   registrar('unicorn.components.TourScreen', () => require('./TourScreen').default);
-  registrar('unicorn.components.FeatureHighlightScreen', () => require('./FeatureHighlightScreen').default);
-  registrar('unicorn.components.WheelPickerDialogScreen', () => require('./WheelPickerDialogScreen').default);
-  registrar('unicorn.components.SliderScreen', () => require('./SliderScreen').default);
-  registrar('unicorn.components.FloatingButtonScreen', () => require('./FloatingButtonScreen').default);
-  registrar('unicorn.components.ColorPickerScreen', () => require('./ColorPickerScreen').default);
-  registrar('unicorn.components.ColorSwatchScreen', () => require('./ColorSwatchScreen').default);
-  registrar('unicorn.components.StackAggregatorScreen', () => require('./StackAggregatorScreen').default);
-  registrar('unicorn.components.DateTimePickerScreen', () => require('./DateTimePickerScreen').default);
   registrar('unicorn.components.ViewScreen', () => require('./ViewScreen').default);
+  registrar('unicorn.components.WheelPickerDialogScreen', () => require('./WheelPickerDialogScreen').default);
   registrar('unicorn.components.WizardScreen', () => require('./WizardScreen').default);
-  registrar('unicorn.components.GridViewScreen', () => require('./GridViewScreen').default);
   // List Components
   registrar('unicorn.lists.BasicListScreen', () => require('./BasicListScreen').default);
   registrar('unicorn.lists.ContactsListScreen', () => require('./ContactsListScreen').default);
   registrar('unicorn.lists.ConversationListScreen', () => require('./ConversationListScreen').default);
   // Full Screen components
   registrar('unicorn.screens.EmptyStateScreen', () => require('./EmptyStateScreen').default);
+  registrar('unicorn.components.FaderScreen', () => require('./FaderScreen').default);
+  registrar('unicorn.components.FeatureHighlightScreen', () => require('./FeatureHighlightScreen').default);
   registrar('unicorn.screens.LoadingScreen', () => require('./LoadingScreen').default);
   registrar('unicorn.screens.ModalScreen', () => require('./ModalScreen').default);
   registrar('unicorn.components.WithScrollEnablerScreen', () => require('./WithScrollEnablerScreen').default);
   registrar('unicorn.components.WithScrollReachedScreen', () => require('./WithScrollReachedScreen').default);
-  registrar('unicorn.components.FaderScreen', () => require('./FaderScreen').default);
 }
 

package/src/screens/incubatorScreens/IncubatorChipsInputScreen.tsx

@@ -0,0 +1,41 @@
+import React, {Component} from 'react';
+import {View, Text, Card, TextField, Button, Colors, Incubator} from 'react-native-ui-lib'; //eslint-disable-line
+
+export default class ChipsInputScreen extends Component {
+  state = {
+    chips: [{label: 'one'}, {label: 'two'}],
+    chips2: []
+  };
+
+  render() {
+    return (
+      <View flex padding-20>
+        <Text h1 marginB-s4>
+          ChipsInput
+        </Text>
+        <Incubator.ChipsInput
+          placeholder="Enter chips"
+          defaultChipProps={{
+            backgroundColor: Colors.primary,
+            labelStyle: {color: Colors.white},
+            containerStyle: {borderWidth: 0},
+            dismissColor: Colors.white
+          }}
+          chips={this.state.chips}
+          leadingAccessory={<Text>TO: </Text>}
+          onChange={newChips => {
+            this.setState({chips: newChips});
+          }}
+        />
+
+        <Incubator.ChipsInput
+          label="Max 3 chips"
+          placeholder="Enter chips..."
+          chips={this.state.chips2}
+          onChange={newChips => this.setState({chips2: newChips})}
+          maxChips={3}
+        />
+      </View>
+    );
+  }
+}

package/src/screens/incubatorScreens/IncubatorTextFieldScreen.tsx

@@ -98,9 +98,10 @@ export default class TextFieldScreen extends Component {
           <TextField
             ref={this.input2}
             placeholder="Enter URL"
+            floatingPlaceholder
             text70
             leadingAccessory={
-              <Text text70 blue30>
+              <Text text70 blue30 marginR-2>
                 Https://
               </Text>
             }
@@ -214,7 +215,7 @@ export default class TextFieldScreen extends Component {
             label="Label"
             placeholder="Enter text..."
             preset={preset}
-            fieldStyle={(_state, {preset}) => (preset === 'withUnderline' ? styles.withUnderline : styles.withFrame)}
+            dynamicFieldStyle={(_state, {preset}) => (preset === 'withUnderline' ? styles.withUnderline : styles.withFrame)}
             editable={!shouldDisable}
           />
 

package/src/screens/incubatorScreens/index.js

@@ -1,6 +1,7 @@
 import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
 
 export function registerScreens(registrar) {
+  registrar('unicorn.components.IncubatorChipsInputScreen', () => require('./IncubatorChipsInputScreen').default);
   registrar('unicorn.incubator.TouchableOpacityScreen', () =>
     gestureHandlerRootHOC(require('./TouchableOpacityScreen').default));
   registrar('unicorn.incubator.IncubatorDialogScreen', () => require('./IncubatorDialogScreen').default);