parameterize by initialColor

slamdata · Sep 1, 2017 · 32116b7 · 32116b7
1 parent 2331f31
commit 32116b7
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 18 deletions.
diff --git a/example/index.html b/example/index.html
@@ -4,6 +4,9 @@
     <title>Halogen Datepicker Example</title>
     <link rel="stylesheet" href="https://necolas.github.io/normalize.css/7.0.0/normalize.css">
     <link rel="stylesheet" href="styles.css">
+    <style>
+      .root { max-width: 700px }
+    </style>
   </head>
   <body>
     <script src="example.js"></script>

diff --git a/example/src/Main.purs b/example/src/Main.purs
@@ -3,6 +3,7 @@ module Main where
 import Prelude
 
 import Color (Color, rgb)
+import Color.Scheme.X11 (blue, orange, red)
 import ColorPicker.Halogen.Component as CPicker
 import ColorPicker.Halogen.Layout as L
 import Control.Monad.Aff.Class (class MonadAff)
@@ -50,15 +51,16 @@ example = H.parentComponent
     }
 
 render ∷ ∀ m r. MonadAff (CPicker.PickerEffects r) m => State → HTML m
-render state = HH.div_
-  $ renderPicker 0 config0
-  <> renderPicker 1 config1
-  <> renderPicker 2 config2
+render state = HH.div [HP.class_ $ H.ClassName "root"]
+  $ renderPicker orange 0 config0
+  <> renderPicker blue 1 config1
+  <> renderPicker red 2 config2
+  <> renderPicker red 3 config3
 
   where
-  renderPicker idx conf =
+  renderPicker color idx conf =
     [ HH.h1_ [ HH.text $ "Picker " <> show idx ]
-    , HH.slot' cpColor idx CPicker.picker conf (HE.input $ HandleMsg idx)
+    , HH.slot' cpColor idx (CPicker.picker color) conf (HE.input $ HandleMsg idx)
     , HH.p_ [ HH.text case lookup idx state of
         Just ({current, next}) →
           "uncommited (current: " <> show current <>", next:" <> show next <> ")"
@@ -82,7 +84,7 @@ config0 ∷ CPicker.Props
 config0 = mkConf $ L.Root c $ reverse l
   where
   L.Root c l = mkLayout
-    (H.ClassName "ColorPicker--small")
+    [H.ClassName "ColorPicker--small", H.ClassName "ColorPicker--inline"]
     [ [ L.componentHue
       , L.componentSaturationHSL
       , L.componentLightness
@@ -91,7 +93,7 @@ config0 = mkConf $ L.Root c $ reverse l
 
 config1 ∷ CPicker.Props
 config1 = mkConf $ mkLayout
-  (H.ClassName "ColorPicker--large")
+  [H.ClassName "ColorPicker--large", H.ClassName "ColorPicker--inline"]
   [ [ L.componentHue
     , L.componentSaturationHSV
     , L.componentValue
@@ -107,7 +109,12 @@ config1 = mkConf $ mkLayout
 
 config2 ∷ CPicker.Props
 config2 = mkConf $ mkLayout
-  (H.ClassName "ColorPicker--small")
+  [H.ClassName "ColorPicker--small", H.ClassName "ColorPicker--inline"]
+  [ [ const componentRedORNoRed ]]
+
+config3 ∷ CPicker.Props
+config3 = mkConf $ mkLayout
+  [H.ClassName "ColorPicker--small", H.ClassName "ColorPicker--block"]
   [ [ const componentRedORNoRed ]]
 
 componentRedORNoRed ∷ L.PickerComponent
@@ -139,11 +146,11 @@ mkConf ∷ L.Layout → CPicker.Props
 mkConf = { layout: _ }
 
 mkLayout
-  ∷ H.ClassName
+  ∷ Array H.ClassName
   → Array (Array (L.InputProps → L.PickerComponent))
   → L.Layout
 mkLayout root editGroups =
-  [ H.ClassName "ColorPicker", root ] `L.Root`
+  ([ H.ClassName "ColorPicker"] <> root) `L.Root`
     [ [ H.ClassName "ColorPicker-dragger" ] `L.Group`
         [ L.Component $ L.componentDragSV
             { root: [ H.ClassName "ColorPicker-field" ]

diff --git a/example/styles.css b/example/styles.css
@@ -1,8 +1,13 @@
 .ColorPicker {
   padding: 0.3em;
-  display: flex;
   background: hsl(0, 0%, 80%);
 }
+.ColorPicker--block {
+  display: flex;
+}
+.ColorPicker--inline {
+  display: inline-flex;
+}
 
 .IsLight { color: black; }
 .IsDark { color: white; }

diff --git a/src/ColorPicker/Halogen/Component.purs b/src/ColorPicker/Halogen/Component.purs
@@ -10,7 +10,6 @@ module ColorPicker.Halogen.Component
 import Prelude
 
 import Color (Color)
-import Color as Color
 import ColorPicker.Halogen.Layout (ChildLayout(..), InputTextValue, Layout(..), PickerComponent(..), PositionUpdate, ValueHistory)
 import ColorPicker.Halogen.Utils.Drag as Drag
 import Control.Monad.Aff.Class (class MonadAff)
@@ -76,11 +75,8 @@ type DSL m = H.ParentDSL State Query ChildQuery Slot Message m
 type PickerEffects r = Drag.DragEffects r
 
 
-initialColor ∷ Color
-initialColor = Color.hsl 0.0 0.0 0.0
-
-picker ∷ ∀ m r. MonadAff (PickerEffects r) m ⇒ H.Component HH.HTML Query Props Message m
-picker = H.lifecycleParentComponent
+picker ∷ ∀ m r. MonadAff (PickerEffects r) m ⇒ Color → H.Component HH.HTML Query Props Message m
+picker initialColor = H.lifecycleParentComponent
   { initialState:
       { color: { current: initialColor, old: [] }
       , inputValues: mempty