mirror of
https://github.com/rowtype-yoga/ry-blocks.git
synced 2024-09-11 21:38:06 +03:00
Bring Select back
This commit is contained in:
parent
a7d8861c76
commit
fe82dc55ec
6
src/Yoga/Block/Atom/Select.purs
Normal file
6
src/Yoga/Block/Atom/Select.purs
Normal file
@ -0,0 +1,6 @@
|
||||
module Yoga.Block.Atom.Select
|
||||
( module Yoga.Block.Atom.Select.View
|
||||
) where
|
||||
|
||||
import Yoga.Block.Atom.Select.View
|
||||
|
51
src/Yoga/Block/Atom/Select/Style.purs
Normal file
51
src/Yoga/Block/Atom/Select/Style.purs
Normal file
@ -0,0 +1,51 @@
|
||||
module Yoga.Block.Atom.Select.Style where
|
||||
|
||||
import Yoga.Prelude.Style
|
||||
|
||||
import React.Basic.DOM.SVG as SVG
|
||||
|
||||
container ∷ Style
|
||||
container =
|
||||
width' auto
|
||||
<> flexRow
|
||||
<> itemsCenter
|
||||
<> positionRelative
|
||||
<> borderSolid
|
||||
<> roundedMd
|
||||
<> textSm
|
||||
<> css { borderWidth: str "1.5px" }
|
||||
<> borderCol' (col.inputBorder)
|
||||
<> background' (col.inputBackground)
|
||||
<> textCol' col.text
|
||||
<> focusWithin (borderCol' col.highlight)
|
||||
|
||||
select ∷ Style
|
||||
select =
|
||||
css { appearance: none }
|
||||
<> pR 8
|
||||
<> borderNone
|
||||
<> widthFull
|
||||
<> rounded (7 # px)
|
||||
<> outlineNone
|
||||
<> pY' sizeStyle.xxs
|
||||
<> pL' sizeStyle.s
|
||||
<> textDefault
|
||||
<> svgBackgroundImage
|
||||
( SVG.svg
|
||||
{ viewBox: "0 0 24 24"
|
||||
, xmlns: "http://www.w3.org/2000/svg"
|
||||
, stroke: cssStringRGBA gray._400
|
||||
, fill: "none"
|
||||
, children:
|
||||
[ SVG.path
|
||||
{ strokeLinecap: "round"
|
||||
, strokeLinejoin: "round"
|
||||
, strokeWidth: "4"
|
||||
, d: "M19 9l-7 7-7-7"
|
||||
}
|
||||
]
|
||||
}
|
||||
)
|
||||
<> backgroundPosition ("right " <> size.s <> " center")
|
||||
<> backgroundNoRepeat
|
||||
<> backgroundSize "10px"
|
34
src/Yoga/Block/Atom/Select/View.purs
Normal file
34
src/Yoga/Block/Atom/Select/View.purs
Normal file
@ -0,0 +1,34 @@
|
||||
module Yoga.Block.Atom.Select.View where
|
||||
|
||||
import Yoga.Prelude.View
|
||||
|
||||
import Effect.Unsafe (unsafePerformEffect)
|
||||
import Yoga.Block.Atom.Select.Style as Style
|
||||
import React.Basic.DOM as R
|
||||
import React.Basic.Hooks as React
|
||||
|
||||
component ∷
|
||||
∀ a.
|
||||
ReactComponent
|
||||
( { choice ∷ a
|
||||
, choices ∷ Array a
|
||||
, onChange ∷ Array a → Effect Unit
|
||||
, toString ∷ a → String
|
||||
, toValue ∷ a → String
|
||||
}
|
||||
)
|
||||
component = unsafePerformEffect do
|
||||
React.reactComponent "Select" \{ toString, toValue, choices } → React.do
|
||||
pure $
|
||||
div "input-container" Style.container
|
||||
[ R.select'
|
||||
</*
|
||||
{ className: "select"
|
||||
, role: "listbox"
|
||||
, css: Style.select
|
||||
}
|
||||
/>
|
||||
( choices <#> \c → R.option' </ { value: toValue c } />
|
||||
[ R.text $ toString c ]
|
||||
)
|
||||
]
|
44
stories/Story/Yoga/Block/Atom/Select.purs
Normal file
44
stories/Story/Yoga/Block/Atom/Select.purs
Normal file
@ -0,0 +1,44 @@
|
||||
module Story.Yoga.Block.Atom.Select where
|
||||
|
||||
import Prelude
|
||||
|
||||
import Effect (Effect)
|
||||
import Effect.Unsafe (unsafePerformEffect)
|
||||
import React.Basic (JSX, element, fragment)
|
||||
import React.Basic.DOM (css)
|
||||
import React.Basic.DOM as R
|
||||
import React.Basic.Emotion as E
|
||||
import Storybook.Addon.Actions (action)
|
||||
import Yoga.Block.Atom.Select as Select
|
||||
import Yoga.Block.Container.Style as Styles
|
||||
|
||||
default ∷
|
||||
{ decorators ∷ Array (Effect JSX → JSX)
|
||||
, title ∷ String
|
||||
}
|
||||
default =
|
||||
{ title: "Atom/Select"
|
||||
, decorators:
|
||||
[ \storyFn →
|
||||
R.div_
|
||||
[ element E.global { styles: Styles.global }
|
||||
, unsafePerformEffect storyFn
|
||||
]
|
||||
]
|
||||
}
|
||||
|
||||
select ∷ Effect JSX
|
||||
select =
|
||||
pure
|
||||
$ fragment
|
||||
[ R.div_
|
||||
[ R.h2_ [ R.text "Select" ]
|
||||
, element Select.component
|
||||
{ choice: 1
|
||||
, choices: [ 1, 2, 3 ]
|
||||
, onChange: action "changed"
|
||||
, toString: show
|
||||
, toValue: show
|
||||
}
|
||||
]
|
||||
]
|
Loading…
Reference in New Issue
Block a user