Extract 'getFillColor' function to utils

Author: pel-daniel

src/components/Pipe.js

@@ -2,12 +2,14 @@ import React, { PropTypes, Component } from 'react'
 import { Group, Path, Shape } from 'react-art'
 
 import Constants from './constants'
+import { getFillColor } from '../utils'
 import { PositionPropTypes } from '../propTypes'
 
 class Pipe extends Component {
   render() {
     const {
       inputPosition,
+      fillColor: maybeFillColor,
       strokeColor: maybeStrokeColor,
       outputPosition,
       type
@@ -22,7 +24,7 @@ class Pipe extends Component {
       x: outputPosition.x - inputPosition.x,
       y: outputPosition.y - (inputPosition.y + SlotConstants.height)
     }
-    const fillColor = PipeConstants.fillColor[type]
+    const fillColor = maybeFillColor || getFillColor(type)
     const strokeColor = maybeStrokeColor || PipeConstants.strokeColor
 
     const path = Path()
@@ -44,6 +46,7 @@ class Pipe extends Component {
 }
 
 Pipe.propTypes = {
+  fillColor: PropTypes.string,
   inputPosition: PositionPropTypes.isRequired,
   outputPosition: PositionPropTypes.isRequired,
   strokeColor: PropTypes.string,

src/components/Primitive.js

@@ -3,7 +3,7 @@ import { Group, Text } from 'react-art'
 
 import Constants from './constants'
 import Ellipse from './Ellipse'
-import { innerInputSlotPosition } from '../utils'
+import { getFillColor, innerInputSlotPosition } from '../utils'
 import { PositionPropTypes } from '../propTypes'
 import Slot from './Slot'
 
@@ -33,7 +33,7 @@ class Primitive extends Component {
     } = this.props
     const { Primitive: PrimitiveConstants } = Primitive._constants
 
-    const fillColor = PrimitiveConstants.fillColor[type]
+    const fillColor = getFillColor(type, value)
     const slotPosition = innerInputSlotPosition(size)
 
     return (

src/components/TestInput.js

@@ -3,6 +3,7 @@ import { Group, Text } from 'react-art'
 
 import Constants from './constants'
 import Ellipse from './Ellipse'
+import { getFillColor } from '../utils'
 import Pipe from './Pipe'
 import { PositionPropTypes } from '../propTypes'
 
@@ -21,7 +22,8 @@ class TestInput extends Component {
       Slot: SlotConstants,
       TestInput: TestInputConstants
     } = TestInput._constants
-    const fillColor = TestInputConstants.fillColor[type]
+
+    const fillColor = getFillColor(type, value)
     const position = {
       x: slotPosition.x - ((size.width - SlotConstants.width) / 2),
       y: slotPosition.y - TestInputConstants.yOffset
@@ -53,10 +55,11 @@ class TestInput extends Component {
           { value === null ? "<NONE>" : value }
         </Text>
         <Pipe
+          fillColor={ fillColor }
           inputPosition={ inputPipePosition }
-          type={ type }
           outputPosition={ outputPipePosition }
           strokeColor={ fillColor }
+          type={ type }
         />
       </Group>
     )

src/components/constants.js

@@ -1,10 +1,11 @@
-const colorsForTypes = {
+const colors = {
   boolean: "#A359E9",
+  False: "#E44B37",
   list: "#E9E759",
   null: "#BFBFBF",
   number: "#E96859",
-  string: "#E9A559"
-  // "#59E974"
+  string: "#E9A559",
+  True: "#358DE2"
 }
 const font = '15px monospace'
 const slotWidth = 15
@@ -43,7 +44,6 @@ const MainBrick = {
 MainBrick.slotAndOffset = slotWidth + MainBrick.slotOffset
 
 const Pipe = {
-  fillColor: colorsForTypes,
   font: font,
   strokeColor: 'black',
   textColor: 'black'
@@ -58,7 +58,6 @@ const Primitive = {
     height: 30,
     width: 60
   },
-  fillColor: colorsForTypes,
   font: font,
   fontAlignment: 'middle',
   textColor: 'black'
@@ -80,7 +79,6 @@ const TestInput = {
     height: 30,
     width: 60
   },
-  fillColor: colorsForTypes,
   font,
   textColor: 'black',
   yOffset: 60
@@ -90,6 +88,7 @@ const LEFT = 0
 
 export default {
   Brick,
+  colors,
   MainBrick,
   LEFT,
   Pipe,

src/utils/colors.js

@@ -0,0 +1,13 @@
+import { colors } from '../components/constants'
+
+export const getFillColor = (type, value) => {
+  const typeColor = colors[type]
+
+  switch (type) {
+    case "boolean":
+      const valueColor = colors[value]
+      return value && valueColor ? valueColor : typeColor
+    default:
+      return typeColor
+  }
+}

src/utils/index.js

@@ -1,8 +1,9 @@
 import { selectElement } from '../actions'
 import { LEFT } from '../components/constants'
 
-export * from './slotSelection'
+export * from './colors'
 export * from './slotPosition'
+export * from './slotSelection'
 
 export const isNotEmpty = (object) => {
   return Object.keys(object).length > 0