Merge pull request #86 from infinitered/style-arrays

Allow style arrays in HOCs (WIP)

.gitignore

@@ -13,3 +13,4 @@ node_modules
 testgrounds
 IntegrationTest
 integration_test
+ios/Pods

boilerplate/src/views/shared/button/button.props.ts

@@ -15,12 +15,12 @@ export interface ButtonProps extends TouchableOpacityProperties {
   /**
    * An optional style override useful for padding & margin.
    */
-  style?: ViewStyle
+  style?: ViewStyle | ViewStyle[]
 
   /**
    * An optional style override useful for the button text.
    */
-  textStyle?: TextStyle
+  textStyle?: TextStyle | TextStyle[]
 
   /**
    * One of the different types of text presets.

boilerplate/src/views/shared/button/button.story.tsx

@@ -1,8 +1,19 @@
 import * as React from "react"
+import { ViewStyle } from "react-native"
 import { storiesOf } from "@storybook/react-native"
 import { StoryScreen, Story, UseCase } from "../../../../storybook/views"
 import { Button } from "./"
 
+const buttonStyleArray: ViewStyle[] = [
+  {paddingVertical: 100},
+  {borderRadius: 0},
+]
+
+const buttonTextStyleArray: TextStyle[] = [
+  {fontSize: 20},
+  {color: "#a511dc"},
+]
+
 storiesOf("Button", module)
   .addDecorator(fn => <StoryScreen>{fn()}</StoryScreen>)
   .add("Style Presets", () => (
@@ -13,5 +24,14 @@ storiesOf("Button", module)
       <UseCase text="Disabled" usage="The disabled behaviour of the primary button.">
         <Button text="Click It" preset="primary" onPress={() => window.alert("pressed")} disabled />
       </UseCase>
+      <UseCase text="Array Style" usage="Button with array style" >
+        <Button
+          text="Click It"
+          preset="primary"
+          onPress={() => window.alert("pressed")}
+          style={buttonStyleArray}
+          textStyle={buttonTextStyleArray}
+        />
+      </UseCase>
     </Story>
   ))

boilerplate/src/views/shared/button/button.tsx

@@ -3,6 +3,7 @@ import { TouchableOpacity } from "react-native"
 import { Text } from "../text"
 import { viewPresets, textPresets } from "./button.presets"
 import { ButtonProps } from "./button.props"
+import { reduce } from "ramda"
 
 /**
  * For your text displaying needs.
@@ -17,8 +18,23 @@ export function Button(props: ButtonProps) {
   const viewPresetToUse = viewPresets[preset] || viewPresets.primary
   const textPresetToUse = textPresets[preset] || textPresets.primary
 
-  const viewStyle = { ...viewPresetToUse, ...styleOverride }
-  const textStyle = { ...textPresetToUse, ...textStyleOverride }
+  let viewStyle
+  if (Array.isArray(styleOverride)) {
+    viewStyle = reduce((acc,term) => {
+      return { ...acc, ...term }
+    }, viewPresetToUse, styleOverride)
+  } else {
+    viewStyle = { ...viewPresetToUse, ...styleOverride }
+  }
+
+  let textStyle
+  if (Array.isArray(textStyleOverride)) {
+    textStyle = reduce((acc,term) => {
+      return { ...acc, ...term }
+    }, textPresetToUse, textStyleOverride)
+  } else {
+    textStyle = { ...textPresetToUse, ...textStyleOverride }
+  }
 
   const content = children || <Text tx={tx} text={text} style={textStyle} />
 

boilerplate/src/views/shared/checkbox/checkbox.props.ts

@@ -4,17 +4,17 @@ export interface CheckboxProps {
   /**
    * Additional container style. Useful for margins.
    */
-  style?: ViewStyle
+  style?: ViewStyle | ViewStyle[]
 
   /**
    * Additional outline style.
    */
-  outlineStyle?: ViewStyle
+  outlineStyle?: ViewStyle | ViewStyle[]
 
   /**
    * Additional fill style. Only visible when checked.
    */
-  fillStyle?: ViewStyle
+  fillStyle?: ViewStyle | ViewStyle[]
 
   /**
    * Is the checkbox checked?

boilerplate/src/views/shared/checkbox/checkbox.story.tsx

@@ -1,10 +1,23 @@
 import * as React from "react"
-import { View } from "react-native"
+import { View, ViewStyle } from "react-native"
 import { storiesOf } from "@storybook/react-native"
 import { StoryScreen, Story, UseCase } from "../../../../storybook/views"
 import { Checkbox } from "./"
 import { Toggle } from "react-powerplug"
 
+const arrayStyle: ViewStyle[] = [
+  {paddingVertical: 40},
+  {alignSelf: "flex-end"},
+]
+const arrayOutlineStyle: ViewStyle[] =
+  [
+    {borderColor: "#b443c9"},
+    {borderWidth: 25},
+  ]
+const arrayFillStyle: ViewStyle[] = [
+  {backgroundColor: "#55e0ff"},
+]
+
 storiesOf("Checkbox", module)
   .addDecorator(fn => <StoryScreen>{fn()}</StoryScreen>)
   .add("Behaviour", () => (
@@ -91,5 +104,22 @@ storiesOf("Checkbox", module)
           )}
         </Toggle>
       </UseCase>
+
+      <UseCase text="Array style" usage="Use array styles">
+        <Toggle initial={false}>
+          {({ on, toggle }) => (
+            <View>
+              <Checkbox
+                text="Check it twice"
+                value={on}
+                onToggle={toggle}
+                style={arrayStyle}
+                outlineStyle={arrayOutlineStyle}
+                fillStyle={arrayFillStyle}
+              />
+            </View>
+          )}
+        </Toggle>
+      </UseCase>
     </Story>
   ))

boilerplate/src/views/shared/checkbox/checkbox.tsx

@@ -3,6 +3,7 @@ import { TouchableOpacity, TextStyle, ViewStyle, View } from "react-native"
 import { Text } from "../text"
 import { color, spacing } from "../../../theme"
 import { CheckboxProps } from "./checkbox.props"
+import { reduce } from "ramda"
 
 const ROOT: ViewStyle = {
   flexDirection: "row",
@@ -32,9 +33,33 @@ const LABEL: TextStyle = { paddingLeft: spacing[2] }
 
 export function Checkbox(props: CheckboxProps) {
   const numberOfLines = props.multiline ? 0 : 1
-  const rootStyle = { ...ROOT, ...props.style } as ViewStyle
-  const outlineStyle = { ...OUTLINE, ...props.outlineStyle } as ViewStyle
-  const fillStyle = { ...FILL, ...props.fillStyle } as ViewStyle
+
+  let rootStyle
+  if (Array.isArray(props.style)) {
+    rootStyle = reduce((acc,term) => {
+      return { ...acc, ...term }
+    }, ROOT, props.style)
+  } else {
+    rootStyle = { ...ROOT, ...props.style } as ViewStyle
+  }
+
+  let outlineStyle
+  if (Array.isArray(props.outlineStyle)) {
+    outlineStyle = reduce((acc,term) => {
+      return { ...acc, ...term }
+    }, OUTLINE, props.outlineStyle)
+  } else {
+    outlineStyle = { ...OUTLINE, ...props.outlineStyle } as ViewStyle
+  }
+
+  let fillStyle
+  if (Array.isArray(props.fillStyle)) {
+    fillStyle = reduce((acc,term) => {
+      return { ...acc, ...term }
+    }, FILL, props.fillStyle)
+  } else {
+    fillStyle = { ...FILL, ...props.fillStyle } as ViewStyle
+  }
   const onPress = props.onToggle ? () => props.onToggle && props.onToggle(!props.value) : null
 
   return (

boilerplate/src/views/shared/form-row/form-row.props.tsx

@@ -14,7 +14,7 @@ export interface FormRowProps {
   /**
    * Override the container style... useful for margins and padding.
    */
-  style?: ViewStyle
+  style?: ViewStyle | ViewStyle[]
 
   /**
    * The type of border.

boilerplate/src/views/shared/form-row/form-row.story.tsx

@@ -4,10 +4,15 @@ import { StoryScreen, Story, UseCase } from "../../../../storybook/views"
 import { FormRow } from "./form-row"
 import { Text } from "../text"
 import { color } from "../../../theme/color"
+import { ViewStyle } from "react-native"
 
 const TEXT_STYLE_OVERRIDE = {
   color: color.storybookTextColor,
 }
+const arrayStyle: ViewStyle[] = [
+  {borderWidth: 5},
+  {borderColor: "#32cd32"},
+]
 
 storiesOf("FormRow", module)
   .addDecorator(fn => <StoryScreen>{fn()}</StoryScreen>)
@@ -86,3 +91,12 @@ storiesOf("FormRow", module)
       </UseCase>
     </Story>
   ))
+  .add("Styling", () => (
+    <Story>
+      <UseCase text="Style array" usage="Form row with an array of styles">
+        <FormRow preset="soloStraight" style={arrayStyle}>
+          <Text style={TEXT_STYLE_OVERRIDE}>Array style.</Text>
+        </FormRow>
+      </UseCase>
+    </Story>
+  ))

boilerplate/src/views/shared/form-row/form-row.tsx

@@ -2,17 +2,26 @@ import * as React from "react"
 import { View } from "react-native"
 import { PRESETS } from "./form-row.presets"
 import { FormRowProps } from "./form-row.props"
+import { reduce } from "ramda"
 
 /**
  * A horizontal container component used to hold a row of a form.
  */
 export function FormRow(props: FormRowProps) {
+  let viewStyle
+  if (Array.isArray(props.style)) {
+    viewStyle = reduce((acc,term) => {
+      return { ...acc, ...term }
+    }, PRESETS[props.preset], props.style)
+  } else {
+    viewStyle = {
+      ...PRESETS[props.preset],
+      ...props.style,
+    }
+  }
   return (
     <View
-      style={{
-        ...PRESETS[props.preset],
-        ...props.style,
-      }}
+      style={viewStyle}
     >
       {props.children}
     </View>

boilerplate/src/views/shared/switch/switch.props.ts

@@ -15,25 +15,25 @@ export interface SwitchProps {
   /**
    * A style override to apply to the container.  Useful for margins and paddings.
    */
-  style?: ViewStyle
+  style?: ViewStyle | ViewStyle[]
 
   /**
    * Additional track styling when on.
    */
-  trackOnStyle?: ViewStyle
+  trackOnStyle?: ViewStyle | ViewStyle[]
 
   /**
    * Additional track styling when off.
    */
-  trackOffStyle?: ViewStyle
+  trackOffStyle?: ViewStyle | ViewStyle[]
 
   /**
    * Additional thumb styling when on.
    */
-  thumbOnStyle?: ViewStyle
+  thumbOnStyle?: ViewStyle | ViewStyle[]
 
   /**
    * Additional thumb styling when off.
    */
-  thumbOffStyle?: ViewStyle
+  thumbOffStyle?: ViewStyle | ViewStyle[]
 }

boilerplate/src/views/shared/switch/switch.story.tsx

@@ -1,10 +1,51 @@
 import * as React from "react"
-import { View } from "react-native"
+import { View, ViewStyle } from "react-native"
 import { storiesOf } from "@storybook/react-native"
 import { StoryScreen, Story, UseCase } from "../../../../storybook/views"
 import { Toggle } from "react-powerplug"
 import { Switch } from "."
 
+const styleArray: ViewStyle[] = [
+  {borderColor: "#686868"},
+]
+
+const trackOffStyle: ViewStyle[] = [
+  {backgroundColor: "#686868"},
+  {
+    height: 80,
+    borderRadius: 0,
+  },
+]
+const trackOnStyle: ViewStyle[] = [
+  {
+    backgroundColor: "#b1008e",
+    borderColor: "#686868",
+  },
+  {
+    height: 80,
+    borderRadius: 0,
+  },
+
+]
+const thumbOffStyle: ViewStyle[] = [
+  {
+    backgroundColor: "#b1008e",
+    borderColor: "#686868",
+  },
+  {
+    height: 80,
+    borderRadius: 0,
+  },
+]
+const thumbOnStyle: ViewStyle[] = [
+  {backgroundColor: "#f0c"},
+  {
+    height: 80,
+    borderRadius: 0,
+    borderColor: "#686868",
+  },
+]
+
 storiesOf("Switch", module)
   .addDecorator(fn => <StoryScreen>{fn()}</StoryScreen>)
   .add("Behaviour", () => (
@@ -40,5 +81,30 @@ storiesOf("Switch", module)
           )}
         </Toggle>
       </UseCase>
+
+      <UseCase text="Style array" usage="This either.">
+        <Toggle initial={false}>
+          {({ on, toggle }) => (
+            <View>
+              <Switch
+                style={styleArray}
+
+                trackOffStyle={trackOffStyle}
+                trackOnStyle={trackOnStyle}
+                thumbOffStyle={thumbOffStyle}
+                thumbOnStyle={thumbOnStyle}
+
+                // trackOnStyle={{ backgroundColor: "green", borderColor: "black" }}
+                // trackOffStyle={{ backgroundColor: "red", borderColor: "maroon" }}
+                // thumbOnStyle={{ backgroundColor: "cyan" }}
+                // thumbOffStyle={{ backgroundColor: "pink" }}
+
+                value={on}
+                onToggle={toggle}
+              />
+            </View>
+          )}
+        </Toggle>
+      </UseCase>
     </Story>
   ))