unicorn-demo-app 6.21.2 → 6.22.0

package/package.json

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

package/src/screens/MenuStructure.js

@@ -201,3 +201,7 @@ export const navigationData = {
     ]
   }
 };
+
+if (__DEV__) {
+  navigationData.Foundation.screens.unshift({title: 'Playground', screen: 'unicorn.PlaygroundScreen'});
+}

package/src/screens/SettingsScreen.js

@@ -2,29 +2,33 @@ import _ from 'lodash';
 import React, {Component} from 'react';
 import AsyncStorage from '@react-native-community/async-storage';
 import {StyleSheet, I18nManager} from 'react-native';
-import {Colors, View, Text, Picker, Toast, Switch} from 'react-native-ui-lib'; //eslint-disable-line
+import {Colors, View, Text, Picker, Incubator, Switch} from 'react-native-ui-lib'; //eslint-disable-line
 import {navigationData} from './MenuStructure';
 
 const none = {label: '[None]', value: ''};
-const playgroundScreen = {label: 'Playground', value: 'unicorn.PlaygroundScreen'};
 
 class SettingsScreen extends Component {
   constructor(props) {
     super(props);
 
     const data = props.navigationData || navigationData;
-    const playground = props.playground || playgroundScreen;
+    const playground = props.playground;
+
+    const screens = [
+      none,
+      ..._.flow(_.values,
+        screens => _.map(screens, 'screens'),
+        _.flatten,
+        screens => _.map(screens, screen => ({label: screen.title, value: screen.screen})))(data)
+    ];
+
+    if (playground) {
+      screens.splice(1, 0, playground);
+    }
 
     this.state = {
       showRefreshMessage: false,
-      screens: [
-        none,
-        playground,
-        ..._.flow(_.values,
-          screens => _.map(screens, 'screens'),
-          _.flatten,
-          screens => _.map(screens, screen => ({label: screen.title, value: screen.screen})))(data)
-      ]
+      screens
     };
   }
 
@@ -107,7 +111,10 @@ class SettingsScreen extends Component {
         <Text text30 grey10>
           Settings
         </Text>
-        <Toast visible={showRefreshMessage} position="bottom" message="Refresh the app!"/>
+        <Incubator.Toast
+          visible={showRefreshMessage}
+          message={`Default screen set to: ${defaultScreen?.label}. Please refresh the app.`}
+        />
       </View>
     );
   }

package/src/screens/componentScreens/ActionSheetScreen.tsx

@@ -64,6 +64,7 @@ export default class ActionSheetScreen extends Component {
           cancelButtonIndex={3}
           destructiveButtonIndex={0}
           useNativeIOS={false}
+          migrateDialog
           options={[
             {label: 'option 1', onPress: () => this.pickOption('option 1')},
             {label: 'option 2', onPress: () => this.pickOption('option 2')},
@@ -79,6 +80,7 @@ export default class ActionSheetScreen extends Component {
           message={'Message of action sheet'}
           cancelButtonIndex={3}
           destructiveButtonIndex={0}
+          migrateDialog
           options={[
             {label: 'option 1', onPress: () => this.pickOption('option 1'), iconSource: collectionsIcon},
             {label: 'option 2', onPress: () => this.pickOption('option 2'), iconSource: shareIcon},

package/src/screens/componentScreens/ChipScreen.tsx

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {Alert} from 'react-native';
-import {Chip, Colors, Spacings, Text, Typography, View, Dialog, WheelPickerDialog, Image} from 'react-native-ui-lib';
+import {Chip, Colors, Spacings, Text, Typography, View, Incubator, WheelPickerDialog, Image} from 'react-native-ui-lib';
 
 const avatarImage = {
   uri: 'https://randomuser.me/api/portraits/women/24.jpg'
@@ -72,9 +72,9 @@ export default class ChipScreen extends Component {
     const {showDialog} = this.state;
 
     return (
-      <Dialog visible={showDialog} useSafeArea bottom onDismiss={this.closeDialog}>
+      <Incubator.Dialog visible={showDialog} useSafeArea bottom onDismiss={this.closeDialog}>
         {this.renderContent()}
-      </Dialog>
+      </Incubator.Dialog>
     );
   };
 
@@ -90,7 +90,7 @@ export default class ChipScreen extends Component {
   render() {
     return (
       <View style={{padding: 20}}>
-        {this.state.showDialog && this.renderPickerDialog()}
+        {this.renderPickerDialog()}
         <Text marginB-20 text40 $textDefault>
           Chip
         </Text>

package/src/screens/componentScreens/FloatingButtonScreen.tsx

@@ -1,17 +1,19 @@
 import React, {Component} from 'react';
 import {View, StyleSheet, Alert, ScrollView} from 'react-native';
-import {Colors, Text, FloatingButton} from 'react-native-ui-lib';
+import {Colors, Text, FloatingButton, FloatingButtonLayouts} from 'react-native-ui-lib';
 import {renderBooleanOption} from '../ExampleScreenPresenter';
 
 interface State {
   showButton: boolean;
   showSecondary: boolean;
+  showVertical: boolean;
 }
 
 export default class FloatingButtonScreen extends Component<{}, State> {
   state = {
     showButton: true,
-    showSecondary: true
+    showSecondary: true,
+    showVertical: true
   };
 
   notNow = () => {
@@ -25,7 +27,7 @@ export default class FloatingButtonScreen extends Component<{}, State> {
   };
 
   render() {
-    const {showSecondary} = this.state;
+    const {showSecondary, showVertical} = this.state;
     return (
       <View style={styles.container}>
         <Text text60 center $textDefault marginB-s4>
@@ -33,6 +35,7 @@ export default class FloatingButtonScreen extends Component<{}, State> {
         </Text>
         {renderBooleanOption.call(this, 'Show Floating Button', 'showButton')}
         {renderBooleanOption.call(this, 'Show Secondary Button', 'showSecondary')}
+        {renderBooleanOption.call(this, 'Button Layout Vertical', 'showVertical')}
 
         <ScrollView showsVerticalScrollIndicator={false}>
           <View paddingT-20>
@@ -69,11 +72,11 @@ export default class FloatingButtonScreen extends Component<{}, State> {
             showSecondary
               ? {
                 label: 'Not now',
-                onPress: this.notNow,
-                color: Colors.$textDangerLight
+                onPress: this.notNow
               }
               : undefined
           }
+          buttonLayout={showVertical ? FloatingButtonLayouts.VERTICAL : FloatingButtonLayouts.HORIZONTAL}
           // bottomMargin={80}
           // hideBackgroundOverlay
           // withoutAnimation

package/src/screens/componentScreens/PickerScreen.tsx

@@ -1,11 +1,11 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
-import {ScrollView} from 'react-native';
+import {ScrollView} from 'react-native-gesture-handler';
 import {
   View,
   Colors,
   Icon,
-  Dialog,
+  Incubator,
   Text,
   Picker,
   Avatar,
@@ -14,7 +14,6 @@ import {
   Typography,
   PickerProps,
   PickerMethods,
-  DialogProps,
   Button
 } from 'react-native-ui-lib'; //eslint-disable-line
 import contactsData from '../../data/conversations';
@@ -61,20 +60,11 @@ export default class PickerScreen extends Component {
     contact: 0
   };
 
-  dialogHeader: DialogProps['renderPannableHeader'] = props => {
-    const {title} = props;
-    return (
-      <Text margin-15 text60 $textDefault>
-        {title}
-      </Text>
-    );
-  };
-
   renderDialog: PickerProps['renderCustomModal'] = modalProps => {
     const {visible, children, toggleModal, onDone} = modalProps;
 
     return (
-      <Dialog
+      <Incubator.Dialog
         visible={visible}
         onDismiss={() => {
           onDone();
@@ -85,12 +75,11 @@ export default class PickerScreen extends Component {
         bottom
         useSafeArea
         containerStyle={{backgroundColor: Colors.$backgroundDefault}}
-        renderPannableHeader={this.dialogHeader}
-        panDirection={PanningProvider.Directions.DOWN}
-        pannableHeaderProps={{title: 'Custom modal'}}
+        direction={PanningProvider.Directions.DOWN}
+        headerProps={{title: 'Custom modal'}}
       >
         <ScrollView>{children}</ScrollView>
-      </Dialog>
+      </Incubator.Dialog>
     );
   };
 

package/src/screens/componentScreens/SliderScreen.tsx

@@ -1,6 +1,6 @@
-import React, {Component} from 'react';
+import React, {Component, Fragment} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
-import {Colors, View, Text, Icon, Slider, GradientSlider, ColorSliderGroup, Constants} from 'react-native-ui-lib';
+import {Constants, Colors, View, Text, Button, Icon, Slider, GradientSlider, ColorSliderGroup} from 'react-native-ui-lib';
 import {renderBooleanOption} from '../ExampleScreenPresenter';
 
 interface SliderScreenProps {
@@ -13,10 +13,15 @@ interface SliderScreenState {
   sliderValue: number;
   sliderMinValue: number;
   sliderMaxValue: number;
+  sliderMinValue2: number;
+  sliderMaxValue2: number;
   forceLTR: boolean;
 }
 
-const INITIAL_VALUE = 0;
+const INITIAL_VALUE = 20;
+const RANGE_INITIAL_MIN = 0;
+const RANGE_INITIAL_MAX = 100;
+
 const COLOR = Colors.blue30;
 
 export default class SliderScreen extends Component<SliderScreenProps, SliderScreenState> {
@@ -24,20 +29,45 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
     alpha: 1,
     color: COLOR,
     sliderValue: INITIAL_VALUE,
-    sliderMinValue: 0,
-    sliderMaxValue: 100,
+    sliderMinValue: RANGE_INITIAL_MIN,
+    sliderMaxValue: RANGE_INITIAL_MAX,
+    sliderMinValue2: 25,
+    sliderMaxValue2: 80,
     forceLTR: false
   };
 
+  slider = React.createRef();
+  rangeSlider = React.createRef();
+  gradientSlider = React.createRef();
+
+  resetSlider = () => {
+    this.slider.current?.reset();
+    this.rangeSlider.current?.reset();
+    this.gradientSlider.current?.reset();
+  }
+
   onSliderRangeChange = (values: {min: number, max: number}) => {
     const {min, max} = values;
     this.setState({sliderMinValue: min, sliderMaxValue: max});
   };
 
+  onSliderRangeChange2 = (values: {min: number, max: number}) => {
+    const {min, max} = values;
+    this.setState({sliderMinValue2: min, sliderMaxValue2: max});
+  };
+
   onSliderValueChange = (value: number) => {
     this.setState({sliderValue: value});
   };
 
+  onSliderReset = () => {
+    this.setState({sliderValue: INITIAL_VALUE});
+  }
+
+  onRangeSliderReset = () => {
+    this.setState({sliderMinValue: RANGE_INITIAL_MIN, sliderMaxValue: RANGE_INITIAL_MAX});
+  }
+
   onGradientValueChange = (value: string, alpha: number) => {
     this.setState({color: value, alpha});
   };
@@ -50,141 +80,231 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
     return Constants.isRTL && this.state.forceLTR && styles.ltr;
   }
 
-  render() {
-    const {color, alpha, sliderValue, sliderMinValue, sliderMaxValue, forceLTR} = this.state;
+  renderDefaultSliderExample() {
+    const {sliderValue, forceLTR} = this.state;
 
     return (
-      <ScrollView showsVerticalScrollIndicator={false}>
-        <View flex padding-20>
-          <Text text40 $textDefault marginB-20>
-            Sliders
+      <Fragment>
+        <Text $textDefault text70BO>
+          Default slider
+        </Text>
+        
+        <View row centerV style={this.getReverseStyle()}>
+          <Icon assetName={'search'} style={styles.image}/>
+          <Slider
+            onValueChange={this.onSliderValueChange}
+            value={INITIAL_VALUE}
+            minimumValue={0}
+            maximumValue={100}
+            step={1}
+            containerStyle={styles.sliderContainer}
+            disableRTL={forceLTR}
+            ref={this.slider}
+            onReset={this.onSliderReset}
+          />
+          <Text bodySmall $textNeutral style={styles.text} numberOfLines={1}>
+            ${sliderValue}
           </Text>
+        </View>
+      </Fragment>
+    );
+  }
 
-          {Constants.isRTL && renderBooleanOption.call(this, 'Force LTR', 'forceLTR')}
+  renderNegativeSliderExample() {
+    return (
+      <Fragment>
+        <Text $textDefault text70BO marginT-30>
+          Negatives
+        </Text>
+        <Slider
+          minimumValue={-100}
+          maximumValue={100}
+          value={-30}
+          minimumTrackTintColor={Colors.red30}
+          thumbTintColor={Colors.red50}
+          containerStyle={styles.slider}
+        />
+        <Slider
+          minimumValue={-300}
+          maximumValue={-100}
+          value={-130}
+          minimumTrackTintColor={Colors.red30}
+          thumbTintColor={Colors.red50}
+          containerStyle={styles.slider}
+        />
+      </Fragment>
+    );
+  }
 
-          <Text $textDefault text70BO marginB-10>
-            Default slider
-          </Text>
-          <View row centerV style={this.getReverseStyle()}>
-            <Icon assetName={'search'} style={styles.image}/>
-            <Slider
-              onValueChange={this.onSliderValueChange}
-              value={INITIAL_VALUE}
-              minimumValue={0}
-              maximumValue={100}
-              step={1}
-              containerStyle={styles.sliderContainer}
-              disableRTL={forceLTR}
-            />
-            <Text bodySmall $textNeutral style={styles.text} numberOfLines={1}>
-              ${sliderValue}
-            </Text>
-          </View>
+  renderDisabledSliderExample() {
+    return (
+      <Fragment>
+        <Text $textDefault text70BO marginT-20>
+          Disabled
+        </Text>
+        <Slider minimumValue={100} maximumValue={200} value={120} containerStyle={styles.slider} disabled/>
 
-          <Text $textDefault text70BO marginT-30>
-            Negatives
-          </Text>
-          <Slider
-            minimumValue={-100}
-            maximumValue={100}
-            value={-30}
-            minimumTrackTintColor={Colors.red30}
-            thumbTintColor={Colors.red50}
-            containerStyle={styles.slider}
-          />
-          <Slider
-            minimumValue={-300}
-            maximumValue={-100}
-            value={-130}
-            minimumTrackTintColor={Colors.red30}
-            thumbTintColor={Colors.red50}
-            containerStyle={styles.slider}
-          />
+        <Text $textDefault text70BO marginT-15>
+          Custom with Steps
+        </Text>
+        <Slider
+          value={50}
+          minimumValue={0}
+          maximumValue={100}
+          step={25}
+          containerStyle={styles.slider}
+          trackStyle={styles.track}
+          thumbStyle={styles.thumb}
+          activeThumbStyle={styles.activeThumb}
+          thumbTintColor={Colors.violet70}
+          minimumTrackTintColor={Colors.violet40}
+          maximumTrackTintColor={Colors.violet70}
+        />
+      </Fragment>
+    );
+  }
+
+  renderRangeSliderExample() {
+    const {sliderMinValue, sliderMaxValue, forceLTR} = this.state;
 
-          <Text $textDefault text70BO marginT-20>
-            Disabled
+    return (
+      <Fragment>
+        <Text $textDefault text70BO marginV-15>
+          Range Slider
+        </Text>
+        <View row spread style={this.getReverseStyle()}>
+          <Text bodySmall $textNeutral>
+            min. {sliderMinValue}%
           </Text>
-          <Slider minimumValue={100} maximumValue={200} value={120} containerStyle={styles.slider} disabled/>
+          <Text bodySmall $textNeutral>
+            max. {sliderMaxValue}%
+          </Text>
+        </View>
+        <Slider
+          useRange
+          onRangeChange={this.onSliderRangeChange}
+          value={INITIAL_VALUE}
+          minimumValue={0}
+          maximumValue={100}
+          step={1}
+          disableRTL={forceLTR}
+          ref={this.rangeSlider}
+          onReset={this.onRangeSliderReset}
+        />
+      </Fragment>
+    );
+  }
+
+  renderRangeSliderWithValuesExample() {
+    const {sliderMinValue2, sliderMaxValue2, forceLTR} = this.state;
 
-          <Text $textDefault text70BO marginT-15>
-            Custom with Steps
+    return (
+      <Fragment>
+        <Text $textDefault text70BO marginV-15>
+          Range w/ initial values and no default gap
+        </Text>
+        <View row spread style={this.getReverseStyle()}>
+          <Text bodySmall $textNeutral>
+            min. {sliderMinValue2}%
           </Text>
-          <Slider
-            value={50}
-            minimumValue={0}
-            maximumValue={100}
-            step={25}
-            containerStyle={styles.slider}
-            trackStyle={styles.track}
-            thumbStyle={styles.thumb}
-            activeThumbStyle={styles.activeThumb}
-            thumbTintColor={Colors.violet70}
-            minimumTrackTintColor={Colors.violet40}
-            maximumTrackTintColor={Colors.violet70}
-          />
+          <Text bodySmall $textNeutral>
+            max. {sliderMaxValue2}%
+          </Text>
+        </View>
+        <Slider
+          useRange
+          useGap={false}
+          onRangeChange={this.onSliderRangeChange2}
+          value={INITIAL_VALUE}
+          minimumValue={0}
+          maximumValue={100}
+          step={1}
+          disableRTL={forceLTR}
+          initialMinimumValue={25}
+          initialMaximumValue={80}
+        />
+      </Fragment>
+    );
+  }
+
+  renderGradientSlidersExample() {
+    const {color, alpha} = this.state;
 
-          <Text $textDefault text70BO marginV-15>
-            Range slider
+    return (
+      <Fragment>
+        <Text $textDefault text70BO marginT-15>
+          Gradient Sliders
+        </Text>
+        <View row centerV>
+          <Text text90 $textNeutral>
+            DEFAULT
           </Text>
-          <View row spread style={this.getReverseStyle()}>
-            <Text bodySmall $textNeutral>
-              min. {sliderMinValue}%
-            </Text>
-            <Text bodySmall $textNeutral>
-              max. {sliderMaxValue}%
-            </Text>
-          </View>
-          <Slider
-            useRange
-            onRangeChange={this.onSliderRangeChange}
-            value={INITIAL_VALUE}
-            minimumValue={0}
-            maximumValue={100}
-            step={1}
-            disableRTL={forceLTR}
+          <GradientSlider
+            color={color}
+            containerStyle={styles.gradientSliderContainer}
+            onValueChange={this.onGradientValueChange}
+            ref={this.gradientSlider}
           />
-
-          <Text $textDefault text70BO marginT-15>
-            Gradient Sliders
+          <View style={styles.box}>
+            <View style={{flex: 1, backgroundColor: color, opacity: alpha}}/>
+          </View>
+        </View>
+        <View row centerV>
+          <Text text90 $textNeutral>
+            HUE
           </Text>
-          <View row centerV>
-            <Text text90 $textNeutral>
-              DEFAULT
-            </Text>
-            <GradientSlider
-              color={color}
-              containerStyle={styles.gradientSliderContainer}
-              onValueChange={this.onGradientValueChange}
-            />
-            <View style={styles.box}>
-              <View style={{flex: 1, backgroundColor: color, opacity: alpha}}/>
-            </View>
+          <GradientSlider
+            type={GradientSlider.types.HUE}
+            color={COLOR}
+            containerStyle={styles.gradientSliderContainer}
+            onValueChange={this.onGradientValueChange}
+          />
+          <View style={styles.box}>
+            <View style={{flex: 1, backgroundColor: color}}/>
           </View>
-          <View row centerV>
-            <Text text90 $textNeutral>
-              HUE
+        </View>
+      </Fragment>
+    );
+  }
+
+  renderColorSliderGroupExample() {
+    const {color} = this.state;
+
+    return (
+      <Fragment>
+        <Text $textDefault text70BO marginV-15>
+          Color Slider Group
+        </Text>
+        <ColorSliderGroup
+          initialColor={color}
+          sliderContainerStyle={styles.slider}
+          containerStyle={styles.group}
+          showLabels
+          // onValueChange={this.onGroupValueChange}
+        />
+      </Fragment>
+    );
+  }
+
+  render() {
+    return (
+      <ScrollView showsVerticalScrollIndicator={false}>
+        <View flex padding-20>
+          <View row spread centerV marginB-10>
+            <Text text40 $textDefault marginB-20>
+              Sliders
             </Text>
-            <GradientSlider
-              type={GradientSlider.types.HUE}
-              color={COLOR}
-              containerStyle={styles.gradientSliderContainer}
-              onValueChange={this.onGradientValueChange}
-            />
-            <View style={styles.box}>
-              <View style={{flex: 1, backgroundColor: color}}/>
-            </View>
+            <Button link label="Reset" onPress={this.resetSlider}/>
           </View>
+          {Constants.isRTL && renderBooleanOption.call(this, 'Force LTR', 'forceLTR')}
 
-          <Text $textDefault text70BO marginV-15>
-            Color Slider Group
-          </Text>
-          <ColorSliderGroup
-            initialColor={color}
-            sliderContainerStyle={styles.slider}
-            containerStyle={styles.group}
-            showLabels
-            // onValueChange={this.onGroupValueChange}
-          />
+          {this.renderDefaultSliderExample()}
+          {this.renderNegativeSliderExample()}
+          {this.renderDisabledSliderExample()}
+          {this.renderRangeSliderExample()}
+          {this.renderRangeSliderWithValuesExample()}
+          {this.renderGradientSlidersExample()}
+          {this.renderColorSliderGroupExample()}
         </View>
       </ScrollView>
     );

package/src/screens/foundationScreens/DarkModeScreen.tsx

@@ -19,8 +19,8 @@ class DarkModeScreen extends Component {
   };
 
   changeSchemeType = (index: number) => {
-    this.setState({selectedSchemeType: SCHEME_TYPES[index].value});
     Colors.setScheme(SCHEME_TYPES[index].value);
+    this.setState({selectedSchemeType: SCHEME_TYPES[index].value});
   };
 
   render() {

package/src/screens/incubatorScreens/IncubatorExpandableOverlayScreen.tsx

@@ -40,7 +40,7 @@ export default class TextFieldScreen extends Component {
     const {textFieldValueDraft} = this.state;
     return (
       <>
-        <View bg-white br20 padding-s4>
+        <View br20 padding-s4>
           <Incubator.TextField
             autoFocus
             preset={null}
@@ -68,7 +68,7 @@ export default class TextFieldScreen extends Component {
 
   renderPickerContent = () => {
     return (
-      <View bg-white br20 padding-s3 paddingB-60>
+      <View bg-$backgroundDefault br20 padding-s3 paddingB-60>
         {_.map(COLOR_OPTIONS, (_color, key) => {
           return (
             <TouchableOpacity key={key} customValue={key} onPress={this.onPickItem}>

package/src/screens/incubatorScreens/WheelPickerScreen.tsx

@@ -1,6 +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 {View, Text, Incubator, Colors, Typography, Button} from 'react-native-ui-lib';
 
 const monthItems = _.map([
   'January',
@@ -88,9 +88,15 @@ export default () => {
       <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.Dialog
+          width={'90%'}
+          bottom
+          visible={showDialog}
+          onDismiss={onDialogDismissed}
+          headerProps={{showKnob: false, showDivider: false}}
+        >
           <Incubator.WheelPicker initialValue={5} label={'Days'} items={dayItems}/>
-        </Dialog>
+        </Incubator.Dialog>
       </View>
     </View>
   );