unicorn-demo-app 6.24.0 → 6.25.0

package/package.json

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

package/src/screens/componentScreens/ColorPickerScreen.tsx

@@ -2,14 +2,15 @@ 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 {renderMultipleSegmentOptions} from '../ExampleScreenPresenter';
 
 interface Props {}
 interface State {
-  color: string,
-  textColor: string,
-  customColors: string[],
-  paletteChange: boolean
+  color: string;
+  textColor: string;
+  customColors: string[];
+  paletteChange: boolean;
+  backgroundColor: string;
 }
 
 const INITIAL_COLOR = Colors.$backgroundPrimaryHeavy;
@@ -24,37 +25,37 @@ const colors = [
   '#8B1079', '#A0138E', '#B13DAC', '#C164BD', '#D08BCD', '#E0B1DE', '#EFD8EE', '#F7EBF7'
 ];
 
-
 export default class ColorPickerScreen extends Component<Props, State> {
   state: State = {
     color: INITIAL_COLOR,
     textColor: Colors.$textDefaultLight,
     customColors: [],
-    paletteChange: false
+    paletteChange: false,
+    backgroundColor: Colors.$backgroundDefault
   };
 
   onDismiss = () => {
     console.log(`screen onDismiss`);
-  }
+  };
 
   onSubmit = (color: string, textColor: string) => {
     const {customColors} = this.state;
     customColors.push(color);
     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});
-  }
+  };
 
   onPaletteValueChange = (value: string, options: object) => {
     this.setState({color: value, textColor: options ? _.get(options, 'tintColor') : undefined, paletteChange: true});
-  }
+  };
 
   render() {
-    const {color, textColor, customColors, paletteChange} = this.state;
-    const paletteValue = paletteChange ? (color || INITIAL_COLOR) : undefined;
-    const pickerValue = !paletteChange ? (color || INITIAL_COLOR) : undefined;
+    const {color, textColor, customColors, paletteChange, backgroundColor} = this.state;
+    const paletteValue = paletteChange ? color || INITIAL_COLOR : undefined;
+    const pickerValue = !paletteChange ? color || INITIAL_COLOR : undefined;
 
     const mappedColor = ColorName.name(color);
     const nearestColor = mappedColor[0];
@@ -67,18 +68,30 @@ export default class ColorPickerScreen extends Component<Props, State> {
           <Text text60 margin-10 style={{color}}>
             Selected Color: {color}
           </Text>
-          <View center marginB-10 style={{height: 50, width: 200, backgroundColor: color}} >
+          <View center marginB-10 style={{height: 50, width: 200, backgroundColor: color}}>
             <Text text60 style={{color: textColor}}>
               {color}
             </Text>
           </View>
         </View>
         <View bg-$backgroundDefault>
+          <View marginH-20>
+            {renderMultipleSegmentOptions.call(this, 'backgroundColor:', 'backgroundColor', [
+              {label: 'Default', value: Colors.$backgroundDefault},
+              {label: 'Primary', value: Colors.$backgroundPrimaryHeavy},
+              {label: 'Success', value: Colors.$backgroundSuccessHeavy}
+            ])}
+          </View>
           <Text text60 marginL-20 marginB-4 marginT-24>
             Theme Color
           </Text>
           <Text marginL-20>Choose a color for your place’s theme.</Text>
-          <ColorPalette value={paletteValue} onValueChange={this.onPaletteValueChange} colors={colors}/>
+          <ColorPalette
+            value={paletteValue}
+            onValueChange={this.onPaletteValueChange}
+            colors={colors}
+            backgroundColor={backgroundColor}
+          />
           <Text marginL-20 marginT-16>
             Custom Colors
           </Text>
@@ -90,6 +103,7 @@ export default class ColorPickerScreen extends Component<Props, State> {
             onValueChange={this.onValueChange}
             value={pickerValue}
             // animatedIndex={0}
+            backgroundColor={backgroundColor}
           />
         </View>
 

package/src/screens/componentScreens/GridViewScreen.tsx

@@ -153,7 +153,7 @@ class GridViewScreen extends Component {
             items={contacts}
             // viewWidth={300}
             numColumns={6}
-            lastItemOverlayColor={Colors.rgba(Colors.primary, 0.6)}
+            lastItemOverlayColor={Colors.rgba(Colors.$backgroundPrimaryHeavy, 0.6)}
             lastItemLabel={7}
           />
 
@@ -163,7 +163,7 @@ class GridViewScreen extends Component {
           <GridView
             items={products}
             numColumns={4}
-            lastItemOverlayColor={Colors.rgba(Colors.primary, 0.6)}
+            lastItemOverlayColor={Colors.rgba(Colors.$backgroundPrimaryHeavy, 0.6)}
             lastItemLabel={42}
             keepItemSize
           />

package/src/screens/componentScreens/MarqueeScreen.tsx

@@ -1,6 +1,5 @@
-import _ from 'lodash';
 import React, {Component} from 'react';
-import {StyleSheet} from 'react-native';
+import {StyleSheet, ScrollView} from 'react-native';
 import {Marquee, MarqueeDirections, Text, View, Spacings} from 'react-native-ui-lib';
 import {renderBooleanOption, renderMultipleSegmentOptions} from '../ExampleScreenPresenter';
 
@@ -61,7 +60,7 @@ export default class MarqueeScreen extends Component<{}> {
 
   render() {
     return (
-      <View flex padding-page>
+      <ScrollView style={styles.container}>
         <Text h1 center margin-20 $textDefault>
           Marquee
         </Text>
@@ -84,12 +83,16 @@ export default class MarqueeScreen extends Component<{}> {
         </View>
         {this.renderHorizontalSection()}
         {this.renderVerticalSection()}
-      </View>
+      </ScrollView>
     );
   }
 }
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20
+  },
   containerHorizontal: {
     borderWidth: 1,
     borderColor: 'black',