28caf1e · rowtype-yoga/ry-blocks

git.iko.soy/rowtype-yoga/ry-blocks

on main help sign in

Add button

28caf1eMark Eibes6 years ago

src/Yoga/Block/Atom/Input/Placement/Types.purs → src/React/Basic/Popper/Placement/Types.pursrenamed+1−1

compare with main

unifiedsplit

@@ -1,4 +1,4 @@

1−module Yoga.Block.Atom.Input.Placement.Types (render, Placement(..), Primary(..), Secondary(..)) where

1+module React.Basic.Popper.Placement.Types (render, Placement(..), Primary(..), Secondary(..)) where

3import Prelude

4import Data.Foldable (foldMap)

src/Yoga/Block/Atom/Button/Story.pursnew file+37

@@ -0,0 +1,37 @@

1+module Yoga.Block.Atom.Button.Story where

3+import Prelude

4+import Effect (Effect)

5+import Effect.Unsafe (unsafePerformEffect)

6+import React.Basic (JSX, element, fragment)

7+import React.Basic.DOM as R

8+import React.Basic.Emotion as E

9+import React.Basic.Events (handler_)

10+import Yoga.Block.Atom.Button.View as Button

11+import Yoga.Block.Container.Style as Styles

12+

13+default ∷

14+ { decorators ∷ Array (Effect JSX -> JSX)

15+ , title ∷ String

16+ }

17+default =

18+ { title: "Atom/Button"

19+ , decorators:

20+ [ \storyFn ->

21+ R.div_

22+ [ element E.global { styles: Styles.global }

23+ , unsafePerformEffect storyFn

24+ ]

25+ ]

26+ }

27+

28+button ∷ Effect JSX

29+button = do

30+ pure

31+ $ fragment

32+ [ R.div_

33+ [ R.h1_ [ R.text "Button Examples" ]

34+ , R.h2_ [ R.text "Generic Button" ]

35+ , element Button.component { value: "A Generic Button", onClick: handler_ mempty }

36+ ]

37+ ]

src/Yoga/Block/Atom/Button/Style.pursnew file+11

@@ -0,0 +1,11 @@

1+module Yoga.Block.Atom.Button.Style where

3+import Yoga.Prelude.Style

5+type Props f r

6+ = ( css ∷ f Style

7+ | r

8+ )

10+button :: Style

11+button = css {}

src/Yoga/Block/Atom/Button/Types.pursnew file+9

@@ -0,0 +1,9 @@

1+module Yoga.Block.Atom.Button.Types where

3+import Prelude

5+data ButtonType

6+ = Primary

7+ | Secondary

8+ | Generic

9+derive instance eqHTMLButton ∷ Eq ButtonType

src/Yoga/Block/Atom/Button/View.pursnew file+40

@@ -0,0 +1,40 @@

1+module Yoga.Block.Atom.Button.View where

3+import Yoga.Prelude.View

4+import Data.Symbol (SProxy(..))

5+import Record.Builder as RB

6+import Yoga.Block.Atom.Button.Style as Style

7+import Yoga.Block.Atom.Button.Types (ButtonType)

8+import Yoga.Block.Internal (ButtonProps, emotionButton)

10+type PropsF f

11+ = ( buttonType ∷ f ButtonType

12+ | Style.Props f ButtonProps

13+ )

14+

15+type Props

16+ = PropsF Id

17+

18+type PropsOptional

19+ = PropsF OptionalProp

20+

21+key :: forall t1. SProxy t1

22+key = SProxy

23+

24+component ∷ ∀ p p_. Union p p_ Props => ReactComponent { | p }

25+component = rawComponent

26+

27+rawComponent ∷ ∀ p. ReactComponent { | p }

28+rawComponent =

29+ mkForwardRefComponent "Button" do

30+ \(props ∷ { | PropsOptional }) propsRef -> React.do

31+ pure

32+ $ emotionButton propsRef

33+ ( props

34+ # RB.build

35+ ( RB.delete (key :: _ "css") >>> RB.delete (key :: _ "buttonType")

36+ )

37+ )

38+ { className: "ry-button"

39+ , css: Style.button

40+ }

src/Yoga/Block/Atom/Input/Story.purs−3

@@ -73,9 +73,6 @@ input = do

73 , element Input.component { type: HTMLInput.Text, value: "", label: NonEmptyString "Heinzi", onChange: handler_ mempty }

74 , R.h2_ [ R.text "Search Input" ]

75 , element Input.component { type: HTMLInput.Search, placeholder: "Search...", onChange: handler_ mempty }

76− , R.h2_ [ R.text "Button" ]

77− , element Input.component { type: HTMLInput.Button, value: "A button", onChange: handler_ mempty }

78− , R.h2_ [ R.text "Submit" ]

79 -- , element Input.component { type: "submit" }

76 -- , element Input.component { type: "submit" }

80 -- , R.h2_ [ R.text "Radio" ]

77 -- , R.h2_ [ R.text "Radio" ]

81 -- , element Input.component { type: "radio" }

78 -- , element Input.component { type: "radio" }

src/Yoga/Block/Atom/Input/Style.purs+4−4

@@ -4,10 +4,10 @@ import Yoga.Prelude.Style

4import Data.Interpolate (i)

5import Yoga.Block.Container.Style (colour)

7−type Props f r =

7+type Props f r

8− ( css ∷ f Style

8+ = ( css ∷ f Style

9− | r

9+ | r

10− )

10+ )

12leftIconSize ∷ StyleProperty

13leftIconSize = var "--left-icon-size"

src/Yoga/Block/Atom/Input/Types.purs+3−4

@@ -2,9 +2,10 @@ module Yoga.Block.Atom.Input.Types where

3import Prelude

5+-- No support for "button" because of the dedicated

6+-- HTML Element

5data HTMLInput

7data HTMLInput

6− = Button

7− | Checkbox

8+ = Checkbox

8 | Color

9 | Color

9 | Date

10 | Date

10 | DatetimeLocal

11 | DatetimeLocal

@@ -25,12 +26,10 @@ data HTMLInput

25 | Time

26 | Time

26 | Url

27 | Url

27 | Week

28 | Week

28−

29derive instance eqHTMLInput ∷ Eq HTMLInput

31toString ∷ HTMLInput -> String

32toString = case _ of

33− Button -> "button"

34 Checkbox -> "checkbox"

33 Checkbox -> "checkbox"

35 Color -> "color"

34 Color -> "color"

36 Date -> "date"

35 Date -> "date"

src/Yoga/Block/Atom/Input/View.purs−1

@@ -4,7 +4,6 @@ import Yoga.Prelude.View

4import Data.String.NonEmpty (NonEmptyString)

5import Data.String.NonEmpty as NonEmptyString

6import Data.Symbol (SProxy(..))

7−import Effect.Uncurried (mkEffectFn1, runEffectFn1)

8import Foreign.Object (Object)

7import Foreign.Object (Object)

9import Foreign.Object as Object

8import Foreign.Object as Object

10import Framer.Motion as M

9import Framer.Motion as M

src/Yoga/Block/Atom/Popover/Story.purs+2−2

@@ -22,12 +22,12 @@ import React.Basic.Emotion as E

22import React.Basic.Events (handler, handler_)

23import React.Basic.Hooks (reactComponent)

24import React.Basic.Hooks as React

25+import React.Basic.Popper.Placement.Types (Placement(..))

26+import React.Basic.Popper.Placement.Types as Placement

25import React.Basic.Popper.Types (nullRef)

27import React.Basic.Popper.Types (nullRef)

26import Unsafe.Coerce (unsafeCoerce)

28import Unsafe.Coerce (unsafeCoerce)

27import Yoga ((/>), (</), (</>))

29import Yoga ((/>), (</), (</>))

28import Yoga.Block.Atom.Input as Input

30import Yoga.Block.Atom.Input as Input

29−import Yoga.Block.Atom.Input.Placement.Types (Placement(..))

30−import Yoga.Block.Atom.Input.Placement.Types as Placement

31import Yoga.Block.Atom.Input.Types as HTMLInput

32import Yoga.Block.Atom.Popover as Popover

33import Yoga.Block.Container.Style as Styles

src/Yoga/Block/Atom/Popover/Style.purs+4−4

@@ -2,10 +2,10 @@ module Yoga.Block.Atom.Popover.Style where

3import Yoga.Prelude.Style

5−type Props f r =

5+type Props f r

6− ( css ∷ f Style

6+ = ( css ∷ f Style

7− | r

7+ | r

8− )

8+ )

10content ∷ Style

11content =

src/Yoga/Block/Atom/Popover/View.purs+2−2

@@ -4,10 +4,10 @@ import Yoga.Prelude.View

4import Effect.Uncurried (mkEffectFn1)

5import React.Basic.Hooks as React

6import React.Basic.Popper.Hook (usePopper)

7+import React.Basic.Popper.Placement.Types (Placement)

8+import React.Basic.Popper.Placement.Types as Placement

7import React.Basic.Popper.Types (modifierOffset, nullRef)

9import React.Basic.Popper.Types (modifierOffset, nullRef)

8import Unsafe.Coerce (unsafeCoerce)

10import Unsafe.Coerce (unsafeCoerce)

9−import Yoga.Block.Atom.Input.Placement.Types (Placement)

10−import Yoga.Block.Atom.Input.Placement.Types as Placement

11import Yoga.Block.Atom.Popover.Style as Style

13type PropsF f

src/Yoga/Block/Internal.purs+184−8

@@ -9,9 +9,12 @@ module Yoga.Block.Internal

9 , DivPropsF

10 , InputProps

11 , InputPropsF

12+ , ButtonProps

13+ , ButtonPropsF

12 , NodeRef

14 , NodeRef

13 , emotionDiv

15 , emotionDiv

14 , emotionInput

16 , emotionInput

17+ , emotionButton

15 , module Yoga.Block.Internal.OptionalProp

18 , module Yoga.Block.Internal.OptionalProp

16 , module Yoga.Block.Internal.CSS

19 , module Yoga.Block.Internal.CSS

17 , unsafeUnionDroppingUndefined

20 , unsafeUnionDroppingUndefined

@@ -35,13 +38,14 @@ import Foreign.Object (Object)

35import Prim.Row (class Lacks, class Union)

38import Prim.Row (class Lacks, class Union)

36import Prim.Row as Row

39import Prim.Row as Row

37import Prim.RowList as RL

40import Prim.RowList as RL

38−import React.Basic.DOM (CSS, unsafeCreateDOMComponent)

41+import React.Basic.DOM (CSS, Props_input, Props_button, unsafeCreateDOMComponent)

39import React.Basic.Emotion (Style)

42import React.Basic.Emotion (Style)

40import React.Basic.Emotion as E

43import React.Basic.Emotion as E

41import React.Basic.Events (EventHandler)

44import React.Basic.Events (EventHandler)

42import React.Basic.Hooks (JSX, ReactComponent, Ref, Render, readRefMaybe)

45import React.Basic.Hooks (JSX, ReactComponent, Ref, Render, readRefMaybe)

43import Record.Extra (class Keys, keys)

46import Record.Extra (class Keys, keys)

44import Type.Data.Row (RProxy(..))

47import Type.Data.Row (RProxy(..))

48+import Type.Row (type (+))

45import Unsafe.Coerce (unsafeCoerce)

49import Unsafe.Coerce (unsafeCoerce)

46import Untagged.Union (UndefinedOr, uorToMaybe)

50import Untagged.Union (UndefinedOr, uorToMaybe)

47import Web.DOM (Node)

51import Web.DOM (Node)

@@ -136,30 +140,31 @@ pickDefined ref = runFn3 pickDefinedFn ref ks

136 where

140 where

137 ks = Array.fromFoldable $ keys (RProxy ∷ RProxy b)

141 ks = Array.fromFoldable $ keys (RProxy ∷ RProxy b)

138

142

139−emotionInput_ ∷

143+-- [TODO] Delete?

144+emotionInputKeyed_ ∷

140 ∀ props props_.

145 ∀ props props_.

141 Lacks "ref" props =>

146 Lacks "ref" props =>

142− Union props props_ ( className ∷ String, css ∷ Style, ref ∷ Ref (Nullable Node) | InputProps ) =>

147+ Union props props_ ( className ∷ String, css ∷ Style, ref ∷ Ref (Nullable Node), key ∷ String | InputProps ) =>

143 { | InputProps } ->

148 { | InputProps } ->

144 { className ∷ String

149 { className ∷ String

145 , css ∷ Style

150 , css ∷ Style

151+ , key ∷ String

146 | props

152 | props

147 } ->

153 } ->

148 JSX

154 JSX

149−emotionInput_ = unsafeEmotion unsafeInput

155+emotionInputKeyed_ = unsafeEmotionKeyed unsafeInput

150

156

151−emotionInputKeyed_ ∷

157+emotionInput_ ∷

152 ∀ props props_.

158 ∀ props props_.

153 Lacks "ref" props =>

159 Lacks "ref" props =>

154− Union props props_ ( className ∷ String, css ∷ Style, ref ∷ Ref (Nullable Node), key ∷ String | InputProps ) =>

160+ Union props props_ ( className ∷ String, css ∷ Style, ref ∷ Ref (Nullable Node) | InputProps ) =>

155 { | InputProps } ->

161 { | InputProps } ->

156 { className ∷ String

162 { className ∷ String

157 , css ∷ Style

163 , css ∷ Style

158− , key ∷ String

159 | props

164 | props

160 } ->

165 } ->

161 JSX

166 JSX

162−emotionInputKeyed_ = unsafeEmotionKeyed unsafeInput

167+emotionInput_ = unsafeEmotion unsafeInput

163

168

164emotionInput ∷

169emotionInput ∷

165 ∀ props props_ more.

170 ∀ props props_ more.

@@ -177,6 +182,34 @@ emotionInput ref = emotionInput_ <<< pickDefined ref

177unsafeInput ∷ ∀ r. ReactComponent (Record r)

182unsafeInput ∷ ∀ r. ReactComponent (Record r)

178unsafeInput = dangerous "input"

183unsafeInput = dangerous "input"

179

184

185+emotionButton_ ∷

186+ ∀ props props_.

187+ Lacks "ref" props =>

188+ Union props props_ ( className ∷ String, css ∷ Style | ButtonProps ) =>

189+ { | ButtonProps } ->

190+ { className ∷ String

191+ , css ∷ Style

192+ | props

193+ } ->

194+ JSX

195+emotionButton_ = unsafeEmotion unsafeButton

196+

197+emotionButton ∷

198+ ∀ props props_ more.

199+ Lacks "ref" props =>

200+ Union props props_ ( className ∷ String, css ∷ Style | ButtonProps ) =>

201+ Ref (Nullable Node) ->

202+ { | ButtonPropsF Id more } ->

203+ { className ∷ String

204+ , css ∷ Style

205+ | props

206+ } ->

207+ JSX

208+emotionButton ref = emotionButton_ <<< pickDefined ref

209+

210+unsafeButton ∷ ∀ r. ReactComponent (Record r)

211+unsafeButton = dangerous "button"

212+

180dangerous ∷ ∀ props. String -> ReactComponent (Record props)

213dangerous ∷ ∀ props. String -> ReactComponent (Record props)

181dangerous = unsafePerformEffect <<< unsafeCreateDOMComponent

214dangerous = unsafePerformEffect <<< unsafeCreateDOMComponent

182

215

@@ -479,3 +512,146 @@ type InputPropsF f more

479 , max ∷ f (String)

512 , max ∷ f (String)

480 | more

513 | more

481 )

514 )

515+

516+type ButtonProps

517+ = ButtonPropsF Id ()

518+

519+type ButtonPropsF f more

520+ = ( _aria :: f (Object String)

521+ , _data :: f (Object String)

522+ , about :: f String

523+ , acceptCharset :: f String

524+ , accessKey :: f String

525+ , allowFullScreen :: f Boolean

526+ , allowTransparency :: f Boolean

527+ , autoFocus :: f Boolean

528+ , autoPlay :: f Boolean

529+ , capture :: f Boolean

530+ , cellPadding :: f String

531+ , cellSpacing :: f String

532+ , charSet :: f String

533+ , children :: f (Array JSX)

534+ , classID :: f String

535+ , className :: f String

536+ , colSpan :: f Int

537+ , contentEditable :: f Boolean

538+ , contextMenu :: f String

539+ , crossOrigin :: f String

540+ , dangerouslySetInnerHTML :: f { __html :: String }

541+ , datatype :: f String

542+ , dateTime :: f String

543+ , dir :: f String

544+ , disabled :: f Boolean

545+ , draggable :: f Boolean

546+ , encType :: f String

547+ , form :: f String

548+ , formAction :: f String

549+ , formEncType :: f String

550+ , formMethod :: f String

551+ , formNoValidate :: f Boolean

552+ , formTarget :: f String

553+ , frameBorder :: f String

554+ , hidden :: f Boolean

555+ , hrefLang :: f String

556+ , htmlFor :: f String

557+ , httpEquiv :: f String

558+ , icon :: f String

559+ , id :: f String

560+ , inlist :: f String

561+ , inputMode :: f String

562+ , is :: f String

563+ , itemID :: f String

564+ , itemProp :: f String

565+ , itemRef :: f String

566+ , itemScope :: f Boolean

567+ , itemType :: f String

568+ , key :: f String

569+ , keyParams :: f String

570+ , keyType :: f String

571+ , lang :: f String

572+ , marginHeight :: f String

573+ , marginWidth :: f String

574+ , maxLength :: f Int

575+ , mediaGroup :: f String

576+ , minLength :: f Int

577+ , name :: f String

578+ , noValidate :: f Boolean

579+ , onAnimationEnd :: f EventHandler

580+ , onAnimationIteration :: f EventHandler

581+ , onAnimationStart :: f EventHandler

582+ , onBlur :: f EventHandler

583+ , onClick :: f EventHandler

584+ , onCompositionEnd :: f EventHandler

585+ , onCompositionStart :: f EventHandler

586+ , onCompositionUpdate :: f EventHandler

587+ , onContextMenu :: f EventHandler

588+ , onCopy :: f EventHandler

589+ , onCut :: f EventHandler

590+ , onDoubleClick :: f EventHandler

591+ , onDrag :: f EventHandler

592+ , onDragEnd :: f EventHandler

593+ , onDragEnter :: f EventHandler

594+ , onDragExit :: f EventHandler

595+ , onDragLeave :: f EventHandler

596+ , onDragOver :: f EventHandler

597+ , onDragStart :: f EventHandler

598+ , onDrop :: f EventHandler

599+ , onFocus :: f EventHandler

600+ , onGotPointerCapture :: f EventHandler

601+ , onInvalid :: f EventHandler

602+ , onKeyDown :: f EventHandler

603+ , onKeyPress :: f EventHandler

604+ , onKeyUp :: f EventHandler

605+ , onLostPointerCapture :: f EventHandler

606+ , onMouseDown :: f EventHandler

607+ , onMouseEnter :: f EventHandler

608+ , onMouseLeave :: f EventHandler

609+ , onMouseMove :: f EventHandler

610+ , onMouseOut :: f EventHandler

611+ , onMouseOver :: f EventHandler

612+ , onMouseUp :: f EventHandler

613+ , onPaste :: f EventHandler

614+ , onPointerCancel :: f EventHandler

615+ , onPointerDown :: f EventHandler

616+ , onPointerEnter :: f EventHandler

617+ , onPointerLeave :: f EventHandler

618+ , onPointerMove :: f EventHandler

619+ , onPointerOut :: f EventHandler

620+ , onPointerOver :: f EventHandler

621+ , onPointerUp :: f EventHandler

622+ , onSelect :: f EventHandler

623+ , onSubmit :: f EventHandler

624+ , onTouchCancel :: f EventHandler

625+ , onTouchEnd :: f EventHandler

626+ , onTouchMove :: f EventHandler

627+ , onTouchStart :: f EventHandler

628+ , onTransitionEnd :: f EventHandler

629+ , onWheel :: f EventHandler

630+ , prefix :: f String

631+ , property :: f String

632+ , radioGroup :: f String

633+ , readOnly :: f Boolean

634+ , ref :: f (Ref (Nullable Node))

635+ , resource :: f String

636+ , role :: f String

637+ , rowSpan :: f Int

638+ , scoped :: f Boolean

639+ , seamless :: f Boolean

640+ , security :: f String

641+ , spellCheck :: f Boolean

642+ , srcDoc :: f JSX

643+ , srcLang :: f String

644+ , srcSet :: f String

645+ , style :: f CSS

646+ , suppressContentEditableWarning :: f Boolean

647+ , tabIndex :: f Int

648+ , title :: f String

649+ , type :: f String

650+ , typeof :: f String

651+ , unselectable :: f Boolean

652+ , useMap :: f String

653+ , value :: f String

654+ , vocab :: f String

655+ , wmode :: f String

656+ | more

657+ )