Merge pull request #163 from citizennet/AS-1164/replace-thumbs-and-di…

…sable-slider AS-1164 Add ReplaceThumbs query and disabled prop to Slider
citizennet · Apr 6, 2021 · b517e2c · b517e2c
2 parents fea6ded + 47ecf21
commit b517e2c
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 4 deletions.
diff --git a/src/Slider.purs b/src/Slider.purs
@@ -76,7 +76,9 @@ data Action
   | MouseUpFromThumb Web.UIEvent.MouseEvent.MouseEvent
 
 data Query a
-  = SetThumbCount Int a
+  = ReplaceThumbs (Array { percent :: Number }) a
+  | SetDisabled Boolean a
+  | SetThumbCount Int a
 
 -- | * axis: a list of labels positioned under the track
 -- | * layout: see comments in Ocelot.Slider.Render
@@ -89,6 +91,7 @@ data Query a
 -- | * renderIntervals: customized render for intervals between thumbs
 type Input =
   { axis :: Maybe (Array { label :: String, percent :: Number })
+  , disabled :: Boolean
   , layout :: Ocelot.Slider.Render.Config
   , marks :: Maybe (Array { percent :: Number })
   , minDistance :: Maybe { percent :: Number }
@@ -161,6 +164,16 @@ handleQuery ::
   Query a ->
   ComponentM m (Maybe a)
 handleQuery = case _ of
+  ReplaceThumbs thumbs a -> do
+    state <- Halogen.get
+    case state.thumbs of
+      Idle _ -> pure unit
+      Editing { subscriptions } -> muteAllListeners subscriptions
+    Halogen.modify_ _ { thumbs = Idle thumbs }
+    pure (Just a)
+  SetDisabled disabled a -> do
+    Halogen.modify_ _ { input { disabled = disabled } }
+    pure (Just a)
   SetThumbCount n a
     | n < 1 -> pure Nothing
     | otherwise -> do
@@ -628,7 +641,10 @@ renderThumbs state =
 renderThumb :: forall m. State -> Int -> { percent :: Number } -> ComponentHTML m
 renderThumb state index percent =
   Ocelot.Slider.Render.thumb state.input.layout percent
-    [ Halogen.HTML.Events.onMouseDown  (Just <<< MouseDownOnThumb index)
+    [ Halogen.HTML.Events.onMouseDown
+        if state.input.disabled
+        then const Nothing
+        else (Just <<< MouseDownOnThumb index)
     ]
 
 renderTrack :: forall m. State -> ComponentHTML m

diff --git a/ui-guide/Components/FormControl.purs b/ui-guide/Components/FormControl.purs
@@ -40,9 +40,10 @@ type State =
 data Query a
 data Action
   = HandleFormHeaderClick MouseEvent
-  | ToggleFormPanel MouseEvent
   | HandleSlider Ocelot.Slider.Output
   | HandleThumbCount Int String
+  | Initialize
+  | ToggleFormPanel MouseEvent
 
 type Input = Unit
 
@@ -61,7 +62,12 @@ component =
   Halogen.mkComponent
     { initialState: const { formPanelIsOpen: false }
     , render
-    , eval: Halogen.mkEval $ Halogen.defaultEval { handleAction = handleAction }
+    , eval:
+      Halogen.mkEval
+        Halogen.defaultEval
+          { handleAction = handleAction
+          , initialize = Just Initialize
+          }
     }
 
 handleAction ::
@@ -81,6 +87,10 @@ handleAction = case _ of
     void $ Halogen.query _slider slotKey <<< Halogen.tell
       $ Ocelot.Slider.SetThumbCount n
 
+  Initialize -> do
+    void <<< Halogen.query _slider "disabled" <<< Halogen.tell
+      $ Ocelot.Slider.ReplaceThumbs [ { percent: 30.0 }, { percent: 70.0 } ]
+
   ToggleFormPanel _ -> do
     state <- Halogen.get
     Halogen.modify_ (_ { formPanelIsOpen = not state.formPanelIsOpen })
@@ -165,6 +175,7 @@ render state =
             , Halogen.HTML.slot _slider "discrete"
               Ocelot.Slider.component
               { axis: Just axisData
+              , disabled: false
               , layout: config
               , marks: Just marksData
               , minDistance: Just { percent: 9.9 }
@@ -220,6 +231,23 @@ render state =
             , Halogen.HTML.slot _slider "continuous"
               Ocelot.Slider.component
               { axis: Just axisData
+              , disabled: false
+              , layout: config
+              , marks: Nothing
+              , minDistance: Just { percent: 10.0 }
+              , renderIntervals: Data.Array.foldMap renderInterval
+              }
+              (Just <<< HandleSlider)
+            ]
+          , Card.card
+            [ css "flex-1" ]
+            [ Halogen.HTML.h3
+              [ Halogen.HTML.Propreties.classes Ocelot.Block.Format.captionClasses ]
+              [ Halogen.HTML.text "Disabled" ]
+            , Halogen.HTML.slot _slider "disabled"
+              Ocelot.Slider.component
+              { axis: Just axisData
+              , disabled: true
               , layout: config
               , marks: Nothing
               , minDistance: Just { percent: 10.0 }