Switch style array fix & story

infinitered · Sep 26, 2018 · 0a24c67 · 0a24c67
1 parent fda27fb
commit 0a24c67
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 41 deletions.
diff --git a/boilerplate/src/views/shared/switch/switch.story.tsx b/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>
   ))
diff --git a/boilerplate/src/views/shared/switch/switch.tsx b/boilerplate/src/views/shared/switch/switch.tsx
@@ -2,7 +2,7 @@ import * as React from "react"
 import { ViewStyle, Animated, Easing, TouchableWithoutFeedback } from "react-native"
 import { color } from "../../../theme"
 import { SwitchProps } from "./switch.props"
-import { reduce } from "ramda"
+import { reduce } from "ramda";
 
 // dimensions
 const THUMB_SIZE = 30
@@ -46,6 +46,20 @@ const THUMB: ViewStyle = {
   elevation: 2,
 }
 
+const enhance = (style, newStyles) => {
+  if (Array.isArray(newStyles)) {
+    return reduce((acc,term) => {
+      return { ...acc, ...term }
+    }, style, newStyles)
+  } else {
+    return {
+      ...style,
+      ...newStyles,
+    }
+  }
+}
+
+
 interface SwitchState {
   timer: Animated.Value
 }
@@ -77,22 +91,6 @@ export class Switch extends React.PureComponent<SwitchProps, SwitchState> {
    */
   handlePress = () => this.props.onToggle && this.props.onToggle(!this.props.value)
 
-  enhanceStyle(baseStyle, onOption, offOption) {
-    if (this.props.value)  {
-      if (Array.isArray(onOption)) {
-        return reduce((acc,term) => {
-          return { ...acc, ...term, }
-        }, baseStyle, onOption)
-      }
-    } else {
-      if (Array.isArray(offOption)) {
-        return reduce((acc,term) => {
-          return { ...acc, ...term, }
-        }, baseStyle, offOption)
-      }
-    }
-  }
-
   /**
    * Render the component.
    */
@@ -102,29 +100,24 @@ export class Switch extends React.PureComponent<SwitchProps, SwitchState> {
       outputRange: [OFF_POSITION, ON_POSITION],
     })
 
-    let style
-    if (Array.isArray(this.props.style)) {
-      style = reduce((acc,term) => {
-        return { ...acc, ...term, }
-      }, {}, this.props.style)
-    } else {
-      style = this.props.style
-    }
+    const style = enhance({}, this.props.style)
+
+    let trackStyle = TRACK
+    trackStyle = enhance(trackStyle, {
+      backgroundColor: this.props.value ? ON_COLOR : OFF_COLOR,
+      borderColor: this.props.value ? BORDER_ON_COLOR : BORDER_OFF_COLOR,
+      })
+    trackStyle = enhance(trackStyle,
+      this.props.value ? this.props.trackOnStyle : this.props.trackOffStyle,
+      )
 
-    let trackStyle
-    trackStyle = this.enhanceStyle({
-      ...TRACK,
-      ...{
-        backgroundColor: this.props.value ? ON_COLOR : OFF_COLOR,
-        borderColor: this.props.value ? BORDER_ON_COLOR : BORDER_OFF_COLOR,
-      },
-    }, this.props.trackOnStyle, this.props.trackOffStyle)
-
-    let thumbStyle
-    thumbStyle = this.enhanceStyle({
-      ...THUMB,
-      ...{ transform: [{ translateX }] },
-    }, this.props.thumbOnStyle, this.props.thumbOffStyle)
+    let thumbStyle = THUMB
+    thumbStyle = enhance(thumbStyle, {
+      transform: [{ translateX }],
+    })
+    thumbStyle = enhance(thumbStyle,
+      this.props.value ? this.props.thumbOnStyle : this.props.thumbOffStyle,
+    )
 
     return (
       <TouchableWithoutFeedback onPress={this.handlePress} style={style}>
@@ -134,4 +127,4 @@ export class Switch extends React.PureComponent<SwitchProps, SwitchState> {
       </TouchableWithoutFeedback>
     )
   }
-}
+}