unicorn-demo-app 7.5.2 → 7.6.0

package/package.json

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

package/src/screens/ExampleScreenPresenter.tsx

@@ -53,7 +53,6 @@ export function renderBooleanOption(title: string,
         {title}
       </Text>
       <Switch
-        useCustomTheme
         key={key}
         testID={key}
         value={value}
@@ -84,7 +83,6 @@ export function renderBooleanGroup(title: string, options: string[]) {
             <View spread centerH row key={key}>
               <Checkbox
                 marginR-s2
-                useCustomTheme
                 key={key}
                 testID={key}
                 value={value}
@@ -125,7 +123,6 @@ export function renderRadioGroup(title: string,
         {_.map(options, (value, key) => {
           return (
             <RadioButton
-              useCustomTheme
               testID={key}
               key={key}
               marginB-s2

package/src/screens/__tests__/__snapshots__/AvatarScreen.spec.js.snap

@@ -36,7 +36,7 @@ exports[`AvatarScreen renders screen 1`] = `
             {
               "backgroundColor": "transparent",
               "color": "#20303C",
-              "textAlign": "left",
+              "writingDirection": "ltr",
             },
             undefined,
             {
@@ -159,7 +159,7 @@ exports[`AvatarScreen renders screen 1`] = `
             {
               "backgroundColor": "transparent",
               "color": "#20303C",
-              "textAlign": "left",
+              "writingDirection": "ltr",
             },
             undefined,
             {
@@ -289,7 +289,7 @@ exports[`AvatarScreen renders screen 1`] = `
                 {
                   "backgroundColor": "transparent",
                   "color": "#20303C",
-                  "textAlign": "left",
+                  "writingDirection": "ltr",
                 },
                 {
                   "fontFamily": "System",
@@ -342,7 +342,7 @@ exports[`AvatarScreen renders screen 1`] = `
             {
               "backgroundColor": "transparent",
               "color": "#20303C",
-              "textAlign": "left",
+              "writingDirection": "ltr",
             },
             undefined,
             {
@@ -444,7 +444,7 @@ exports[`AvatarScreen renders screen 1`] = `
                 {
                   "backgroundColor": "transparent",
                   "color": "#20303C",
-                  "textAlign": "left",
+                  "writingDirection": "ltr",
                 },
                 undefined,
                 undefined,
@@ -514,7 +514,7 @@ exports[`AvatarScreen renders screen 1`] = `
                 {
                   "backgroundColor": "transparent",
                   "color": "#20303C",
-                  "textAlign": "left",
+                  "writingDirection": "ltr",
                 },
                 {
                   "fontFamily": "System",
@@ -567,7 +567,7 @@ exports[`AvatarScreen renders screen 1`] = `
             {
               "backgroundColor": "transparent",
               "color": "#20303C",
-              "textAlign": "left",
+              "writingDirection": "ltr",
             },
             undefined,
             {
@@ -669,7 +669,7 @@ exports[`AvatarScreen renders screen 1`] = `
                 {
                   "backgroundColor": "transparent",
                   "color": "#20303C",
-                  "textAlign": "left",
+                  "writingDirection": "ltr",
                 },
                 undefined,
                 undefined,
@@ -797,7 +797,7 @@ exports[`AvatarScreen renders screen 1`] = `
             {
               "backgroundColor": "transparent",
               "color": "#20303C",
-              "textAlign": "left",
+              "writingDirection": "ltr",
             },
             undefined,
             {
@@ -1048,7 +1048,7 @@ exports[`AvatarScreen renders screen 1`] = `
             {
               "backgroundColor": "transparent",
               "color": "#20303C",
-              "textAlign": "left",
+              "writingDirection": "ltr",
             },
             undefined,
             {
@@ -1299,7 +1299,7 @@ exports[`AvatarScreen renders screen 1`] = `
             {
               "backgroundColor": "transparent",
               "color": "#20303C",
-              "textAlign": "left",
+              "writingDirection": "ltr",
             },
             undefined,
             {
@@ -1501,7 +1501,7 @@ exports[`AvatarScreen renders screen 1`] = `
             {
               "backgroundColor": "transparent",
               "color": "#20303C",
-              "textAlign": "left",
+              "writingDirection": "ltr",
             },
             undefined,
             {
@@ -1752,7 +1752,7 @@ exports[`AvatarScreen renders screen 1`] = `
             {
               "backgroundColor": "transparent",
               "color": "#20303C",
-              "textAlign": "left",
+              "writingDirection": "ltr",
             },
             undefined,
             {
@@ -2047,7 +2047,7 @@ exports[`AvatarScreen renders screen 1`] = `
             {
               "backgroundColor": "transparent",
               "color": "#20303C",
-              "textAlign": "left",
+              "writingDirection": "ltr",
             },
             undefined,
             {
@@ -2231,7 +2231,7 @@ exports[`AvatarScreen renders screen 1`] = `
             {
               "backgroundColor": "transparent",
               "color": "#20303C",
-              "textAlign": "left",
+              "writingDirection": "ltr",
             },
             undefined,
             {
@@ -2338,7 +2338,7 @@ exports[`AvatarScreen renders screen 1`] = `
                 {
                   "backgroundColor": "transparent",
                   "color": "#20303C",
-                  "textAlign": "left",
+                  "writingDirection": "ltr",
                 },
                 undefined,
                 undefined,
@@ -2457,7 +2457,7 @@ exports[`AvatarScreen renders screen 1`] = `
             {
               "backgroundColor": "transparent",
               "color": "#20303C",
-              "textAlign": "left",
+              "writingDirection": "ltr",
             },
             undefined,
             {
@@ -2564,7 +2564,7 @@ exports[`AvatarScreen renders screen 1`] = `
                 {
                   "backgroundColor": "transparent",
                   "color": "#20303C",
-                  "textAlign": "left",
+                  "writingDirection": "ltr",
                 },
                 undefined,
                 undefined,
@@ -2683,7 +2683,7 @@ exports[`AvatarScreen renders screen 1`] = `
             {
               "backgroundColor": "transparent",
               "color": "#20303C",
-              "textAlign": "left",
+              "writingDirection": "ltr",
             },
             undefined,
             {
@@ -2867,7 +2867,7 @@ exports[`AvatarScreen renders screen 1`] = `
             {
               "backgroundColor": "transparent",
               "color": "#20303C",
-              "textAlign": "left",
+              "writingDirection": "ltr",
             },
             undefined,
             {
@@ -2969,7 +2969,7 @@ exports[`AvatarScreen renders screen 1`] = `
                 {
                   "backgroundColor": "transparent",
                   "color": "#20303C",
-                  "textAlign": "left",
+                  "writingDirection": "ltr",
                 },
                 undefined,
                 undefined,
@@ -3079,7 +3079,7 @@ exports[`AvatarScreen renders screen 1`] = `
                   {
                     "backgroundColor": "transparent",
                     "color": "#20303C",
-                    "textAlign": "left",
+                    "writingDirection": "ltr",
                   },
                   undefined,
                   undefined,

package/src/screens/componentScreens/ColorPickerScreen.tsx

@@ -1,10 +1,9 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
-import {Colors, View, Text, ColorPicker, ColorPalette, ColorName} from 'react-native-ui-lib';
+import {Colors, View, Text, ColorPicker, ColorPalette, ColorName, ColorInfo} from 'react-native-ui-lib';
 import {renderMultipleSegmentOptions} from '../ExampleScreenPresenter';
 
-interface Props {}
 interface State {
   color: string;
   textColor?: string;
@@ -14,6 +13,7 @@ interface State {
 }
 
 const INITIAL_COLOR = Colors.$backgroundPrimaryHeavy;
+// prettier-ignore
 const colors = [
   '#20303C', '#43515C', '#66737C', '#858F96', '#A3ABB0', '#C2C7CB', '#E0E3E5', '#F2F4F5',
   '#3182C8', '#4196E0', '#459FED', '#57a8ef', '#8fc5f4', '#b5d9f8', '#daecfb', '#ecf5fd',
@@ -25,7 +25,7 @@ const colors = [
   '#8B1079', '#A0138E', '#B13DAC', '#C164BD', '#D08BCD', '#E0B1DE', '#EFD8EE', '#F7EBF7'
 ];
 
-export default class ColorPickerScreen extends Component<Props, State> {
+export default class ColorPickerScreen extends Component<{}, State> {
   state: State = {
     color: INITIAL_COLOR,
     textColor: Colors.$textDefaultLight,
@@ -44,12 +44,12 @@ export default class ColorPickerScreen extends Component<Props, State> {
     this.setState({color, textColor, customColors: _.clone(customColors), paletteChange: false});
   };
 
-  onValueChange = (value: string, options: object) => {
-    this.setState({color: value, textColor: options ? _.get(options, 'tintColor') : undefined, paletteChange: false});
+  onValueChange = (value: string, colorInfo: ColorInfo) => {
+    this.setState({color: value, textColor: colorInfo?.tintColor, paletteChange: false});
   };
 
-  onPaletteValueChange = (value: string, options: object) => {
-    this.setState({color: value, textColor: options ? _.get(options, 'tintColor') : undefined, paletteChange: true});
+  onPaletteValueChange = (value: string, colorInfo: ColorInfo) => {
+    this.setState({color: value, textColor: colorInfo?.tintColor, paletteChange: true});
   };
 
   render() {

package/src/screens/componentScreens/NumberInputScreen.tsx

@@ -41,9 +41,6 @@ const NumberInputScreen = () => {
         case 'valid':
           newText = currentData.current.formattedNumber;
           break;
-        case 'empty':
-          newText = 'Empty';
-          break;
         case 'error':
           newText = `Error: value '${currentData.current.userInput}' is invalid`;
           break;
@@ -73,18 +70,6 @@ const NumberInputScreen = () => {
     }
   }, [showLabel, exampleType]);
 
-  const placeholder = useMemo(() => {
-    switch (exampleType) {
-      case 'price':
-      default:
-        return 'Price';
-      case 'percentage':
-        return 'Discount';
-      case 'number':
-        return 'Any number';
-    }
-  }, [exampleType]);
-
   const fractionDigits = useMemo(() => {
     switch (exampleType) {
       case 'price':
@@ -158,9 +143,26 @@ const NumberInputScreen = () => {
     }
   }, [exampleType]);
 
+  const textStyle = useMemo(() => {
+    return [styles.mainText, !leadingText && {marginLeft: Spacings.s4}, !trailingText && {marginRight: Spacings.s4}];
+  }, [leadingText, trailingText]);
+
+  const textFieldProps = useMemo(() => {
+    return {
+      label,
+      labelStyle: styles.label,
+      style: textStyle,
+      validate,
+      validationMessage,
+      validationMessageStyle: Typography.text80M,
+      validateOnChange: true,
+      centered: true
+    };
+  }, [label, textStyle, validate, validationMessage]);
+
   return (
-    <TouchableWithoutFeedback onPress={RNKeyboard.dismiss}>
-      <View flex centerH>
+    <TouchableWithoutFeedback style={{flex: 1}} onPress={RNKeyboard.dismiss}>
+      <View centerH flex>
         <Text text40 margin-s10>
           Number Input
         </Text>
@@ -174,30 +176,19 @@ const NumberInputScreen = () => {
           ],
           {state: exampleType, setState: setExampleType})}
 
-        <View flex center>
+        <View marginT-50 centerH>
           <NumberInput
             key={exampleType}
-            // initialNumber={100}
-            label={label}
-            labelStyle={styles.label}
-            placeholder={placeholder}
+            // initialNumber={12.1}
+            // contextMenuHidden={false}
+            textFieldProps={textFieldProps}
             fractionDigits={fractionDigits}
             onChangeNumber={onChangeNumber}
             leadingText={leadingText}
             leadingTextStyle={leadingText && [styles.infoText, {marginLeft: Spacings.s4}]}
             trailingText={trailingText}
             trailingTextStyle={trailingText && [styles.infoText, {marginRight: Spacings.s4}]}
-            style={[
-              styles.mainText,
-              !leadingText && {marginLeft: Spacings.s4},
-              !trailingText && {marginRight: Spacings.s4}
-            ]}
             containerStyle={styles.containerStyle}
-            validate={validate}
-            validationMessage={validationMessage}
-            validationMessageStyle={Typography.text80M}
-            validateOnChange
-            centered
           />
           <Text marginT-s5>{text}</Text>
         </View>

package/src/screens/componentScreens/TextScreen.tsx

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {Animated, ScrollView} from 'react-native';
+import {Alert, Animated, ScrollView} from 'react-native';
 import {View, Text, Colors} from 'react-native-ui-lib';
 
 class TextScreen extends Component {
@@ -85,6 +85,39 @@ class TextScreen extends Component {
             <Text text60R highlightString={['dancing', 'da']} highlightStyle={{color: Colors.green30}}>
               Dancing in The Dark
             </Text>
+            <Text
+              text60R
+              highlightString={{
+                string: 'Dancing',
+                onPress: () => Alert.alert('Dancing is pressed!'),
+                style: {color: Colors.blue10, backgroundColor: Colors.green50}
+              }}
+              highlightStyle={{color: Colors.green30}}
+            >
+              Dancing in The Dark
+            </Text>
+            <Text
+              text60R
+              highlightString={[
+                {
+                  string: 'Dancing',
+                  onPress: () => Alert.alert('Dancing is pressed!'),
+                  style: {color: Colors.blue10, backgroundColor: Colors.green50}
+                },
+                {
+                  string: 'laugh',
+                  onPress: () => Alert.alert('laugh is pressed!'),
+                  style: {color: Colors.red50, textDecorationLine: 'underline', textDecorationColor: Colors.blue30}
+                },
+                {
+                  string: 'more',
+                  onPress: () => Alert.alert('more is pressed!')
+                }
+              ]}
+              highlightStyle={{color: Colors.green30}}
+            >
+              Dancing in The Dark, laughing drinking and more
+            </Text>
           </View>
           {this.renderDivider()}
           <View padding-20 centerH>

package/src/screens/incubatorScreens/IncubatorSliderScreen.tsx

@@ -6,7 +6,7 @@ import {renderBooleanOption} from '../ExampleScreenPresenter';
 const VALUE = 20;
 const NEGATIVE_VALUE = -30;
 const MIN = 0;
-const MAX = Constants.screenWidth - 40; // horizontal margins 20
+const MAX = 350;
 const INITIAL_MIN = 30;
 const INITIAL_MAX = 270;
 const COLOR = Colors.blue30;