TextField style array story

boilerplate/src/views/shared/text-field/text-field.props.ts

@@ -24,12 +24,12 @@ export interface TextFieldProps extends TextInputProperties {
   /**
    * Optional container style overrides useful for margins & padding.
    */
-  style?: ViewStyle
+  style?: ViewStyle | ViewStyle[]
 
   /**
    * Optional style overrides for the input.
    */
-  inputStyle?: TextStyle
+  inputStyle?: TextStyle | TextStyle[]
 
   /**
    * Various look & feels.

boilerplate/src/views/shared/text-field/text-field.story.tsx

@@ -4,6 +4,19 @@ import { StoryScreen, Story, UseCase } from "../../../../storybook/views"
 import { Text } from "../text"
 import { TextField } from "./"
 import { State } from "react-powerplug"
+import { TextStyle } from "react-native"
+
+const inputStyleArray: TextStyle[] = [
+  {
+    backgroundColor: "rebeccapurple",
+    color: "white",
+    padding: 40},
+  {
+    borderWidth: 10,
+    borderRadius: 4,
+    borderColor: "#7fff00",
+  },
+] 
 
 storiesOf("TextField", module)
   .addDecorator(fn => <StoryScreen>{fn()}</StoryScreen>)
@@ -87,5 +100,22 @@ storiesOf("TextField", module)
         </State>
         <Text text="* attention designers:  i am so sorry" preset="secondary" />
       </UseCase>
+
+      <UseCase
+        text="Style array"
+        usage="Useful for 1-off exceptions, but using style arrays."
+      >
+        <State initial={{ value: "fancy colour" }}>
+          {({ state, setState }) => (
+            <TextField
+              onChangeText={value => setState({ value })}
+              value={state.value}
+              label="Name"
+              inputStyle={inputStyleArray}
+            />
+          )}
+        </State>
+        <Text text="* attention designers:  i am so sorry" preset="secondary" />
+      </UseCase>
     </Story>
   ))

boilerplate/src/views/shared/text-field/text-field.tsx

@@ -4,6 +4,7 @@ import { color, spacing, typography } from "../../../theme"
 import { translate } from "../../../i18n"
 import { Text } from "../text"
 import { TextFieldProps } from "./text-field.props"
+import { reduce } from "ramda";
 
 // the base styling for the container
 const CONTAINER: ViewStyle = {
@@ -24,6 +25,20 @@ const PRESETS: { [name: string]: ViewStyle } = {
   default: {},
 }
 
+const enhance = (style, styleOverride) => {
+  if (Array.isArray(styleOverride)) {
+    return reduce((acc,term) => {
+      return { ...acc, ...term }
+    }, style, styleOverride)
+  } else {
+    return {
+      ...style,
+      ...styleOverride,
+    }
+  }
+}
+
+
 /**
  * A component which has a label and an input together.
  */
@@ -39,8 +54,11 @@ export class TextField extends React.Component<TextFieldProps, {}> {
       inputStyle: inputStyleOverride,
       ...rest,
     } = this.props
-    const containerStyle: ViewStyle = { ...CONTAINER, ...PRESETS[preset], ...styleOverride }
-    const inputStyle: TextStyle = { ...INPUT, ...inputStyleOverride }
+    let containerStyle: ViewStyle = { ...CONTAINER, ...PRESETS[preset] }
+    containerStyle = enhance(containerStyle, styleOverride)
+
+    let inputStyle: TextStyle = INPUT
+    inputStyle = enhance(inputStyle, inputStyleOverride)
     const actualPlaceholder = placeholderTx ? translate(placeholderTx) : placeholder
 
     return (