From c252050aa9e633a8a803751eac87417fa912d965 Mon Sep 17 00:00:00 2001 From: Vance Palacio Date: Thu, 7 Nov 2019 08:23:00 -0800 Subject: [PATCH] Vjp/tree checkable (#104) * Give user the ability to hide the checkbox * Bump next minor version. This is because the new feature adds an input on the tree view, which is a breaking change --- package.json | 2 +- src/Components/Tree/Component.purs | 22 +++++++++++++++------- 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index b34cae2f..66c8864b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "purescript-ocelot", - "version": "0.17.0", + "version": "0.18.0", "private": true, "scripts": { "build-all": "yarn run build-ui && yarn run build-css", diff --git a/src/Components/Tree/Component.purs b/src/Components/Tree/Component.purs index ec279154..fe7ba1ee 100644 --- a/src/Components/Tree/Component.purs +++ b/src/Components/Tree/Component.purs @@ -15,8 +15,9 @@ import Effect.Aff.Class (class MonadAff) import Halogen as H import Halogen.HTML as HH import Halogen.HTML.Events as HE -import Halogen.HTML.Properties (checked) as HP +import Halogen.HTML.Properties as HP import Ocelot.Block.Checkbox as Checkbox +import Ocelot.Block.Conditional as Conditional import Ocelot.Block.Icon as Icon import Ocelot.Data.Tree (ItemPath, Node(..), IndexPath, _expanded, _selected, _children) import Ocelot.HTML.Properties (css) @@ -25,6 +26,7 @@ type State item = { items :: Array (Node item) , initial :: Array (Node item) , renderItem :: item -> HH.PlainHTML + , checkable :: item -> Boolean } data Query item a @@ -34,7 +36,9 @@ data Query item a | SetSelections (Array (ItemPath item)) a type Input item = - { renderItem :: item -> HH.PlainHTML } + { renderItem :: item -> HH.PlainHTML + , checkable :: item -> Boolean + } data Message item = ItemAdded item (ItemPath item) @@ -53,10 +57,11 @@ component = , receiver: const Nothing } where - initialState { renderItem } = + initialState { renderItem, checkable } = { items: [] , initial: [] , renderItem + , checkable } eval :: Query item ~> H.ComponentDSL (State item) (Query item) (Message item) m @@ -89,7 +94,7 @@ component = pure a render :: State item -> H.ComponentHTML (Query item) - render { items, renderItem } = + render { items, renderItem, checkable } = HH.div_ $ A.concat $ A.mapWithIndex (renderRow 0 [] []) items where renderRow depth indexPath itemPath ix (Node { selected, expanded, children, value }) = @@ -98,9 +103,12 @@ component = [ renderCarat children expanded (A.cons ix indexPath) , HH.div [ css "inline-flex" ] - [ Checkbox.checkbox_ - [ HE.onChecked $ HE.input $ ToggleItem value itemPath (A.cons ix indexPath) - , HP.checked selected + [ Conditional.alt_ (checkable value) + [ Checkbox.checkbox_ + [ HE.onChecked $ HE.input $ ToggleItem value itemPath (A.cons ix indexPath) + , HP.checked selected + ] + [ HH.fromPlainHTML $ renderItem value ] ] [ HH.fromPlainHTML $ renderItem value ] ]