git.iko.soy/rowtype-yoga/purescript-next-website
on main help sign in
rowtype-yoga/purescript-next-website/src/Components/Select.purs
65 lines 1.8 kB history raw
1module Components.Select
2 ( Option(..)
3 , mkSelect
4 ) where
6import Prelude
8import Data.Array as Array
9import Data.Eq.Generic (genericEq)
10import Data.Generic.Rep (class Generic)
11import Data.Maybe (maybe)
12import Effect (Effect)
13import Effect.Uncurried (mkEffectFn1)
14import NextUI.NextUI as NextUI
15import React.Basic.DOM.Simplified.ToJSX (el)
16import React.Basic.Hooks as React
18type Props =
19 { selected :: Option
20 , onSelect :: Option -> Effect Unit
21 }
23data Option = All | Code | Package
25derive instance Generic Option _
26instance Eq Option where
27 eq = genericEq
29renderOption ∷ Option → String
30renderOption All = "All"
31renderOption Code = "Code"
32renderOption Package = "Package"
34foreign import data Set :: Type -> Type
35foreign import toArray :: Set String -> Array String
37foreign import new_ :: forall item. item -> Set item
39fromKey :: String -> Option
40fromKey "Code" = Code
41fromKey "Package" = Package
42fromKey _ = All
44mkSelect :: React.Component Props
45mkSelect =
46 React.component "Select" \{ selected, onSelect } -> React.do
47 pure
48 $ el NextUI.container { justify: "flex-start" }
49 $ el NextUI.dropdown { solid: true }
50 [ el NextUI.dropdownButton { color: "secondary" } $ renderOption selected
51 , el NextUI.dropdownMenu
52 { disallowEmptySelection: true
53 , color: "secondary"
54 , variant: "solid"
55 , selectionMode: "single"
56 , selectedKeys: new_ $ renderOption selected
57 , onSelectionChange: mkEffectFn1 $ toArray >>> Array.head >>> maybe All fromKey >>> onSelect
58 } $ [ All, Code, Package ] <#> option
59 ]
61 where
62 option opt =
63 el NextUI.dropdownItem { key: renderOption opt }
64 $ el NextUI.text {}
65 $ renderOption opt