git.iko.soy/rowtype-yoga/ry-blocks
on main help sign in
Bring Select back
commitfe82dc55ece5715b05b927c5218b7f4f793dd06e authorMark Eibes <mark.eibes@gmail.com> dateMon 21 Nov 2022, 10:49 (4 years ago) parenta7d8861
4 files changed+135
compare with main
unifiedsplit
src/Yoga/Block/Atom/Select.purs+6 src/Yoga/Block/Atom/Select/Style.purs+51 src/Yoga/Block/Atom/Select/View.purs+34 stories/Story/Yoga/Block/Atom/Select.purs+44
src/Yoga/Block/Atom/Select.pursnew file+6
@@ -0,0 +1,6 @@
1+module Yoga.Block.Atom.Select
2+ ( module Yoga.Block.Atom.Select.View
3+ ) where
4+
5+import Yoga.Block.Atom.Select.View
6+
src/Yoga/Block/Atom/Select/Style.pursnew file+51
@@ -0,0 +1,51 @@
1+module Yoga.Block.Atom.Select.Style where
2+
3+import Yoga.Prelude.Style
4+
5+import React.Basic.DOM.SVG as SVG
6+
7+container ∷ Style
8+container =
9+ width' auto
10+ <> flexRow
11+ <> itemsCenter
12+ <> positionRelative
13+ <> borderSolid
14+ <> roundedMd
15+ <> textSm
16+ <> css { borderWidth: str "1.5px" }
17+ <> borderCol' (col.inputBorder)
18+ <> background' (col.inputBackground)
19+ <> textCol' col.text
20+ <> focusWithin (borderCol' col.highlight)
21+
22+select ∷ Style
23+select =
24+ css { appearance: none }
25+ <> pR 8
26+ <> borderNone
27+ <> widthFull
28+ <> rounded (7 # px)
29+ <> outlineNone
30+ <> pY' sizeStyle.xxs
31+ <> pL' sizeStyle.s
32+ <> textDefault
33+ <> svgBackgroundImage
34+ ( SVG.svg
35+ { viewBox: "0 0 24 24"
36+ , xmlns: "http://www.w3.org/2000/svg"
37+ , stroke: cssStringRGBA gray._400
38+ , fill: "none"
39+ , children:
40+ [ SVG.path
41+ { strokeLinecap: "round"
42+ , strokeLinejoin: "round"
43+ , strokeWidth: "4"
44+ , d: "M19 9l-7 7-7-7"
45+ }
46+ ]
47+ }
48+ )
49+ <> backgroundPosition ("right " <> size.s <> " center")
50+ <> backgroundNoRepeat
51+ <> backgroundSize "10px"
src/Yoga/Block/Atom/Select/View.pursnew file+34
@@ -0,0 +1,34 @@
1+module Yoga.Block.Atom.Select.View where
2+
3+import Yoga.Prelude.View
4+
5+import Effect.Unsafe (unsafePerformEffect)
6+import Yoga.Block.Atom.Select.Style as Style
7+import React.Basic.DOM as R
8+import React.Basic.Hooks as React
9+
10+component ∷
11+ ∀ a.
12+ ReactComponent
13+ ( { choice ∷ a
14+ , choices ∷ Array a
15+ , onChange ∷ Array a → Effect Unit
16+ , toString ∷ a → String
17+ , toValue ∷ a → String
18+ }
19+ )
20+component = unsafePerformEffect do
21+ React.reactComponent "Select" \{ toString, toValue, choices } → React.do
22+ pure $
23+ div "input-container" Style.container
24+ [ R.select'
25+ </*
26+ { className: "select"
27+ , role: "listbox"
28+ , css: Style.select
29+ }
30+ />
31+ ( choices <#> \c → R.option' </ { value: toValue c } />
32+ [ R.text $ toString c ]
33+ )
34+ ]
stories/Story/Yoga/Block/Atom/Select.pursnew file+44
@@ -0,0 +1,44 @@
1+module Story.Yoga.Block.Atom.Select where
2+
3+import Prelude
4+
5+import Effect (Effect)
6+import Effect.Unsafe (unsafePerformEffect)
7+import React.Basic (JSX, element, fragment)
8+import React.Basic.DOM (css)
9+import React.Basic.DOM as R
10+import React.Basic.Emotion as E
11+import Storybook.Addon.Actions (action)
12+import Yoga.Block.Atom.Select as Select
13+import Yoga.Block.Container.Style as Styles
14+
15+default ∷
16+ { decorators ∷ Array (Effect JSX → JSX)
17+ , title ∷ String
18+ }
19+default =
20+ { title: "Atom/Select"
21+ , decorators:
22+ [ \storyFn →
23+ R.div_
24+ [ element E.global { styles: Styles.global }
25+ , unsafePerformEffect storyFn
26+ ]
27+ ]
28+ }
29+
30+select ∷ Effect JSX
31+select =
32+ pure
33+ $ fragment
34+ [ R.div_
35+ [ R.h2_ [ R.text "Select" ]
36+ , element Select.component
37+ { choice: 1
38+ , choices: [ 1, 2, 3 ]
39+ , onChange: action "changed"
40+ , toString: show
41+ , toValue: show
42+ }
43+ ]
44+ ]