Create new example screen for View (modifiers)

Author: ethanshar

demo/src/screens/ExampleScreenPresenter.js

@@ -30,8 +30,8 @@ export function renderRadioGroup(title, key, options, {isRow} = {}) {
               key={key}
               marginB-s2
               marginR-s2={isRow}
-              label={value}
-              value={options[key]}
+              label={key}
+              value={value}
             />
           );
         })}

demo/src/screens/MenuStructure.js

@@ -44,6 +44,7 @@ export const navigationData = {
       {title: 'TabBar', tags: 'tab bar', screen: 'unicorn.components.TabBarScreen'},
       {title: 'Text', tags: 'text', screen: 'unicorn.components.TextScreen'},
       {title: 'Toast', tags: 'toast top bottom snackbar', screen: 'unicorn.components.ToastsScreen'},
+      {title: 'View', tags: 'view modifiers', screen: 'unicorn.components.ViewScreen'},
       {title: 'Wheel Picker Dialog', tags: 'wheel picker dialog', screen: 'unicorn.components.WheelPickerDialogScreen'},
       {title: 'Wizard', tags: 'wizard', screen: 'unicorn.components.WizardScreen'}
     ]

demo/src/screens/componentScreens/ViewScreen.js

@@ -0,0 +1,83 @@
+import React, {Component} from 'react';
+import {ScrollView} from 'react-native';
+import {View, Text} from 'react-native-ui-lib';
+import _ from 'lodash';
+import {renderBooleanOption, renderRadioGroup, renderSliderOption, renderColorOption} from '../ExampleScreenPresenter';
+
+const ALIGNMENTS = {
+  top: 'top',
+  bottom: 'bottom',
+  left: 'left',
+  right: 'right',
+  center: 'center',
+  centerv: 'centerV',
+  centerh: 'centerH',
+  spread: 'spread',
+  none: null
+};
+
+const POSITIONS = {
+  absolute: 'abs',
+  'absolute Fill': 'absF',
+  'absolute Left': 'absL',
+  'absolute Right': 'absR',
+  'absolute Vertical': 'absV',
+  'absolute Horizontal': 'absH',
+  none: null
+};
+
+class ViewScreen extends Component {
+  state = {
+    useRow: false,
+    shouldFlex: false,
+    borderRadius: 20,
+    padding: 0,
+    margin: 0,
+    alignment: null,
+    position: null
+  };
+
+  render() {
+    const {useRow, shouldFlex, borderRadius, padding, margin, alignment, position} = this.state;
+    const childOptions = {
+      flex: shouldFlex,
+      width: shouldFlex || _.includes(['absF', 'absH'], position) ? undefined : 50,
+      height: shouldFlex || _.includes(['absF', 'absV'], position) ? undefined : 50,
+      [position]: true
+    };
+    const parentOptions = {
+      row: useRow,
+      [`br${borderRadius}`]: true,
+      [`padding-${padding}`]: true,
+      [`margin-${margin}`]: true,
+      [alignment]: true
+    };
+
+    return (
+      <View flex>
+        <View padding-s5>
+          <Text text40>View</Text>
+
+          <View key={JSON.stringify(parentOptions)} bg-purple40 height={200} {...parentOptions}>
+            <View bg-blue40 {...childOptions}/>
+            <View width={40} height={40} bg-yellow20/>
+          </View>
+        </View>
+        <ScrollView>
+          <View padding-s5>
+            <View height={2} bg-grey60 marginB-20/>
+            {renderBooleanOption.call(this, 'Row (parent)', 'useRow')}
+            {renderBooleanOption.call(this, 'Flex (child)', 'shouldFlex')}
+            {renderSliderOption.call(this, 'BorderRadius(brXX)', 'borderRadius', {step: 10, min: 0, max: 60})}
+            {renderSliderOption.call(this, 'Padding(padding-XX)', 'padding', {step: 4, min: 0, max: 40})}
+            {renderSliderOption.call(this, 'Margin(margin-XX)', 'margin', {step: 4, min: 0, max: 40})}
+            {renderRadioGroup.call(this, 'Alignment (parent)', 'alignment', ALIGNMENTS)}
+            {renderRadioGroup.call(this, 'Position (child)', 'position', POSITIONS)}
+          </View>
+        </ScrollView>
+      </View>
+    );
+  }
+}
+
+export default ViewScreen;

demo/src/screens/componentScreens/index.js

@@ -39,4 +39,5 @@ Navigation.registerComponent('unicorn.components.ColorPickerScreen', () => requi
 Navigation.registerComponent('unicorn.components.ColorSwatchScreen', () => require('./ColorSwatchScreen').default);
 Navigation.registerComponent('unicorn.components.StackAggregatorScreen', () => require('./StackAggregatorScreen').default);
 Navigation.registerComponent('unicorn.components.DateTimePickerScreen', () => require('./DateTimePickerScreen').default);
+Navigation.registerComponent('unicorn.components.ViewScreen', () => require('./ViewScreen').default);
 Navigation.registerComponent('unicorn.components.WizardScreen', () => require('./WizardScreen').default);