unicorn-demo-app 7.23.5 → 7.24.0

package/package.json

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

package/src/configurations.js

@@ -1,7 +1,32 @@
-import {Colors, Typography, Spacings, TextField} from 'react-native-ui-lib'; // eslint-disable-line
+import {Assets, Colors, Typography, Spacings, TextField} from 'react-native-ui-lib'; // eslint-disable-line
 
 export const loadDemoConfigurations = () => {
-  require('./assets/Assets');
+  Assets.loadAssetsGroup('icons.demo', {
+    chevronDown: require('./assets/icons/chevronDown.png'),
+    chevronRight: require('./assets/icons/chevronRight.png'),
+    add: require('./assets/icons/add.png'),
+    camera: require('./assets/icons/cameraSelected.png'),
+    close: require('./assets/icons/close.png'),
+    dashboard: require('./assets/icons/dashboard.png'),
+    drag: require('./assets/icons/drag.png'),
+    image: require('./assets/icons/image.png'),
+    plus: require('./assets/icons/plus.png'),
+    refresh: require('./assets/icons/refresh.png'),
+    search: require('./assets/icons/search.png'),
+    settings: require('./assets/icons/settings.png'),
+    share: require('./assets/icons/share.png'),
+    info: require('./assets/icons/info.png'),
+    exclamation: require('./assets/icons/exclamationFillSmall.png')
+  });
+
+  Assets.loadAssetsGroup('images.demo', {
+    brokenImage: require('./assets/images/placeholderMissingImage.png')
+  });
+
+  Assets.loadAssetsGroup('svgs.demo', {
+    logo: require('./assets/svgs/headerLogo.svg').default
+  });
+
   Typography.loadTypographies({
     h1: {...Typography.text40},
     h2: {...Typography.text50},

package/src/demoApp.js

@@ -14,17 +14,6 @@ import Storage, {DEFAULT_SCREEN} from './storage';
 //   gold: '#FFD700',
 // });
 
-// ThemeManager.setComponentTheme('Picker', (props) => {
-//   if (props.useNativePicker) {
-//     return {
-//       topBarProps: {
-//         doneLabel: Constants.isIOS ? 'Done2' : 'OK2',
-//         cancelLabel: Constants.isIOS ? 'Cancel2' : 'CANCEL2',
-//       },
-//     };
-//   }
-// });
-
 // const customAnimationsDefinitions = {
 //   customAnimation1: {
 //     from: {opacity: 0, translateY: 20},

package/src/screens/componentScreens/ChipsInputScreen.tsx

@@ -45,6 +45,10 @@ export default class ChipsInputScreen extends Component {
 
             this.setState({chips: newChips});
           }}
+          validate={'required'}
+          validateOnChange
+          validationMessage={'You must add at least one chip'}
+          marginB-10
         />
 
         <ChipsInput

package/src/screens/componentScreens/DrawerScreen.tsx

@@ -1,9 +1,8 @@
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView, LayoutAnimation} from 'react-native';
-import {Colors, Typography, View, Drawer, Text, Button, Avatar, Badge, DrawerProps} from 'react-native-ui-lib';
+import {Assets, Colors, Typography, View, Drawer, Text, Button, Avatar, Badge, DrawerProps} from 'react-native-ui-lib';
 import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
 import conversations from '../../data/conversations';
-import Assets from '../../assets/Assets';
 
 import {renderBooleanOption, renderSliderOption, renderColorOption} from '../ExampleScreenPresenter';
 

package/src/screens/componentScreens/HintsScreen.tsx

@@ -1,9 +1,8 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {Alert, ViewStyle} from 'react-native';
-import {Colors, View, Text, Hint, Button, Incubator} from 'react-native-ui-lib';
+import {Colors, View, Text, Hint, Button, Assets, Incubator} from 'react-native-ui-lib';
 import {renderMultipleSegmentOptions, renderBooleanOption} from '../ExampleScreenPresenter';
-import Assets from '../../assets/Assets';
 
 const settingsIcon = require('../../assets/icons/settings.png');
 const reactions = ['❤️', '😮', '😔', '😂', '😡'];

package/src/screens/componentScreens/ImageScreen.tsx

@@ -1,8 +1,7 @@
 import React, {Component} from 'react';
 import {ScrollView} from 'react-native';
-import {View, Text, Icon, Image, Colors, OverlayTypes} from 'react-native-ui-lib';
+import {View, Text, Icon, Image, Colors, Assets, OverlayTypes} from 'react-native-ui-lib';
 import {renderBooleanOption, renderRadioGroup, renderSliderOption} from '../ExampleScreenPresenter';
-import Assets from '../../assets/Assets';
 
 const IMAGE_URL =
   'https://images.pexels.com/photos/748837/pexels-photo-748837.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260';

package/src/screens/componentScreens/ModalScreen.tsx

@@ -1,8 +1,7 @@
 import React, {Component} from 'react';
 import {Alert, StyleSheet} from 'react-native';
 import {Navigation} from 'react-native-navigation';
-import {Colors, Carousel, PageControl, Modal, View, Text} from 'react-native-ui-lib'; // eslint-disable-line
-import Assets from '../../assets/Assets';
+import {Colors, Carousel, PageControl, Modal, View, Text, Assets} from 'react-native-ui-lib'; // eslint-disable-line
 
 const BUTTONS_HIT_SLOP = {right: 5, left: 5, top: 10, bottom: 10};
 interface ModalScreenProps {

package/src/screens/componentScreens/PickerScreen.tsx

@@ -91,7 +91,7 @@ export default class PickerScreen extends Component {
     language2: options[2].value,
     languages: [],
     option: undefined,
-    nativePickerValue: 'java',
+    wheelPickerValue: 'java',
     dialogPickerValue: 'java',
     customModalValues: [],
     filter: filters[0].value,
@@ -157,8 +157,8 @@ export default class PickerScreen extends Component {
             label="Wheel Picker"
             placeholder="Pick a Language"
             useWheelPicker
-            value={this.state.nativePickerValue}
-            onChange={nativePickerValue => this.setState({nativePickerValue})}
+            value={this.state.wheelPickerValue}
+            onChange={wheelPickerValue => this.setState({wheelPickerValue})}
             trailingAccessory={<Icon source={dropdown}/>}
             items={options}
           />

package/src/screens/componentScreens/SortableListScreen.tsx

@@ -8,10 +8,10 @@ import {
   TouchableOpacity,
   Text,
   Icon,
+  Assets,
   Colors,
   Button
 } from 'react-native-ui-lib';
-import Assets from '../../assets/Assets';
 import {renderHeader} from '../ExampleScreenPresenter';
 
 interface Item extends SortableListItemProps {

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

@@ -2,6 +2,7 @@ import _ from 'lodash';
 import React, {Component} from 'react';
 import {ActivityIndicator, StyleSheet} from 'react-native';
 import {
+  Assets,
   TabController,
   Colors,
   View,
@@ -11,7 +12,6 @@ import {
   TabControllerImperativeMethods
 } from 'react-native-ui-lib';
 import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
-import Assets from '../../../assets/Assets';
 
 import Tab1 from './tab1';
 import Tab2 from './tab2';

package/src/screens/componentScreens/TextFieldScreen.tsx

@@ -1,6 +1,7 @@
 import React, {Component} from 'react';
 import {ScrollView, ActivityIndicator} from 'react-native';
 import {
+  Assets,
   Colors,
   Spacings,
   View,
@@ -11,12 +12,11 @@ import {
   TextFieldRef,
   FieldContextType,
   TextFieldProps,
-  SegmentedControl
+  SegmentedControl,
+  Icon
 } from 'react-native-ui-lib';
-import Assets from '../../assets/Assets';
 const {KeyboardAwareInsetsView} = Keyboard;
 const priceFormatter = Intl.NumberFormat('en-US');
-const validationIcon = require('../../assets/icons/exclamationFillSmall.png');
 
 export default class TextFieldScreen extends Component {
   input = React.createRef<TextFieldRef>();
@@ -167,7 +167,7 @@ export default class TextFieldScreen extends Component {
   };
 
   renderValidationExample() {
-    const {errorPosition} = this.state;
+    const {errorPosition, preset} = this.state;
     
     return (
       <>
@@ -178,7 +178,7 @@ export default class TextFieldScreen extends Component {
             <SegmentedControl segments={[{label: 'Bottom'}, {label: 'Top'}]} onChangeIndex={this.onChangeIndexValidation}/>
           </View>
         </View>
-        
+
         <TextField
           value={this.state.value}
           onChangeText={value => this.setState({value})}
@@ -204,7 +204,9 @@ export default class TextFieldScreen extends Component {
             containerStyle={{flex: 1}}
             validationMessagePosition={errorPosition}
             helperText={'Enter first and last name'}
-            validationIcon={{source: validationIcon, style: {marginTop: 1}}}
+            validationIcon={{source: Assets.icons.demo.exclamation, style: {marginTop: 1}}}
+            topTrailingAccessory={<Icon source={Assets.icons.demo.info} size={16}/>}
+            preset={preset}
           />
           <Button
             outline
@@ -351,6 +353,26 @@ export default class TextFieldScreen extends Component {
     );
   }
 
+  renderClearButtonExample() {
+    return (
+      <>
+        <Text h3 marginB-s3>
+          Clear Button
+        </Text>
+        
+        <TextField
+          label="Description"
+          placeholder="Enter text..."
+          showClearButton
+          value={this.state.value}
+          onChangeText={value => this.setState({value})}
+          trailingAccessory={<Icon source={Assets.icons.demo.search}/>}
+          // multiline
+        />
+      </>
+    );
+  }
+
   renderHintExample() {
     return (
       <>
@@ -400,7 +422,16 @@ export default class TextFieldScreen extends Component {
         </Text>
 
         <Text marginB-s1 $textPrimary>Centered:</Text>
-        <TextField label="PIN" placeholder="XXXX" centered/>
+        <TextField
+          label="PIN"
+          placeholder="XXXX"
+          centered
+          topTrailingAccessory={<Icon source={Assets.icons.demo.info} size={16}/>}
+          validate={'required'}
+          validationMessage={'This field is required'}
+          validateOnBlur
+          validationMessagePosition={this.state.errorPosition}
+        />
         
         <Text marginB-s1 $textPrimary>Inline:</Text>
         <View row>
@@ -414,8 +445,8 @@ export default class TextFieldScreen extends Component {
 
   render() {
     return (
-      <ScrollView keyboardShouldPersistTaps="always" showsVerticalScrollIndicator={false}>
-        <View flex padding-page>
+      <ScrollView showsVerticalScrollIndicator={false} keyboardShouldPersistTaps="always">
+        <View padding-page>
           <Text h1 marginB-s4>TextField</Text>
 
           {this.renderDefaultExample()}
@@ -423,6 +454,7 @@ export default class TextFieldScreen extends Component {
           {this.renderPlaceholdersExample()}
           {this.renderValidationExample()}
           {this.renderHintExample()}
+          {this.renderClearButtonExample()}
           {this.renderCherCounterExample()}
           {this.renderAccessoriesExample()}
           {this.renderStateColorsExample()}

package/src/screens/componentScreens/TimelineScreen.tsx

@@ -1,7 +1,7 @@
 import React, {useCallback, useRef, useState} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
-import {Colors, Timeline, View, Card, Text, Button} from 'react-native-ui-lib';
-import Assets from '../../assets/Assets';
+import {Assets, Colors, Timeline, View, Card, Text, Button} from 'react-native-ui-lib';
+
 const contents = [
   'CURRENT (default) state with dashed line.\nAligned to title',
   'SUCCESS state with label.',

package/src/screens/incubatorScreens/IncubatorToastScreen.tsx

@@ -1,9 +1,9 @@
 import React, {Component} from 'react';
 import {ScrollView, StyleSheet} from 'react-native';
-import {Colors, View, Button, Text, Incubator} from 'react-native-ui-lib';
+import {Assets, Colors, View, Button, Text, Incubator} from 'react-native-ui-lib';
 import {renderMultipleSegmentOptions, renderBooleanOption, renderRadioGroup} from '../ExampleScreenPresenter';
 import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
-import Assets from '../../assets/Assets';
+
 const {Toast} = Incubator;
 
 const TOAST_ACTIONS = {

package/src/screens/incubatorScreens/PanViewScreen.tsx

@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
 import {GestureHandlerRootView, FlatList} from 'react-native-gesture-handler';
 import {
+  Assets,
   View,
   Text,
   Colors,
@@ -14,7 +15,7 @@ import {
   TouchableOpacity
 } from 'react-native-ui-lib';
 const {PanView} = Incubator;
-import Assets from '../../assets/Assets';
+
 interface Item {
   value: string;
   label: string;

package/src/screens/realExamples/Pinterest/index.tsx

@@ -1,8 +1,7 @@
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
-import {Colors, Spacings, View, Card, Text, Image, Button, Constants} from 'react-native-ui-lib';
+import {Assets, Colors, Spacings, View, Card, Text, Image, Button, Constants} from 'react-native-ui-lib';
 import _ from 'lodash';
-import Assets from '../../../assets/Assets';
 
 import './configurations';
 

package/src/screens/realExamples/ProductPage/index.tsx

@@ -1,8 +1,7 @@
 import React, {Component} from 'react';
 import {ScrollView} from 'react-native';
-import {View, Text, Icon, Colors, Image, Button, Carousel, Picker, PickerValue} from 'react-native-ui-lib';
+import {Assets, View, Text, Icon, Colors, Image, Button, Carousel, Picker, PickerValue} from 'react-native-ui-lib';
 import _ from 'lodash';
-import Assets from '../../../assets/Assets';
 
 const colorOptions = [
   {label: 'Red', value: 'red', color: Colors.red30},

package/src/assets/Assets.ts

@@ -1,25 +0,0 @@
-import {Assets} from 'react-native-ui-lib';
-Assets.loadAssetsGroup('icons.demo', {
-  chevronDown: require('./icons/chevronDown.png'),
-  chevronRight: require('./icons/chevronRight.png'),
-  add: require('./icons/add.png'),
-  camera: require('./icons/cameraSelected.png'),
-  close: require('./icons/close.png'),
-  dashboard: require('./icons/dashboard.png'),
-  drag: require('./icons/drag.png'),
-  image: require('./icons/image.png'),
-  plus: require('./icons/plus.png'),
-  refresh: require('./icons/refresh.png'),
-  search: require('./icons/search.png'),
-  settings: require('./icons/settings.png'),
-  share: require('./icons/share.png')
-});
-
-Assets.loadAssetsGroup('images.demo', {
-  brokenImage: require('./images/placeholderMissingImage.png')
-});
-
-Assets.loadAssetsGroup('svgs.demo', {
-  logo: require('./svgs/headerLogo.svg').default
-});
-export default Assets as typeof Assets;