fe82dc5...main · rowtype-yoga/ry-blocks

packages.dhall+20

since splitsnapshots

unifiedsplit

@@ -172,3 +172,23 @@ in upstream

172 [ "heterogeneous", "lists", "prelude", "record", "typelevel-prelude" ]

173 }

174 with react-basic-storybook = ../purescript-react-basic-storybook/spago.dhall as Location

175+ with react-aria =

176+ { repo = "https://github.com/rowtype-yoga/purescript-react-aria"

177+ , version = "v0.2.0"

178+ , dependencies =

179+ [ "aff"

180+ , "effect"

181+ , "foreign"

182+ , "foreign-object"

183+ , "nullable"

184+ , "ordered-collections"

185+ , "prelude"

186+ , "react-basic"

187+ , "react-basic-dom"

188+ , "react-basic-hooks"

189+ , "unsafe-coerce"

190+ , "untagged-union"

191+ , "web-dom"

192+ , "web-html"

193+ ]

194+ }

spago.dhall+1

@@ -36,6 +36,7 @@ You can edit this file as you like.

36 , "prelude"

37 , "profunctor-lenses"

38 , "random"

39+ , "react-aria"

39 , "react-basic"

40 , "react-basic"

40 , "react-basic-dom"

41 , "react-basic-dom"

41 , "react-basic-emotion"

42 , "react-basic-emotion"

src/React/Aria/Interactions.jsdeleted−4

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

1−import { useFocusWithin, useFocus } from "@react-aria/interactions"

2−

3−export const useFocusWithinImpl = useFocusWithin

4−export const useFocusImpl = useFocus

src/React/Aria/Interactions.pursdeleted−56

@@ -1,56 +0,0 @@

1−module React.Aria.Interactions where

2−

3−import Prelude

4−

5−import Effect.Uncurried (EffectFn1, runEffectFn1)

6−import Prim.Row (class Union)

7−import React.Basic.Events (EventHandler)

8−import React.Basic.Hooks (Hook, unsafeHook)

9−

10−-- UseFocusWithin

11−

12−type FocusWithinProps =

13− ( isDisabled ∷ Boolean

14− , onFocusWithin ∷ EventHandler

15− , onBlurWithin ∷ EventHandler

16− , onFocusWithinChange ∷ EffectFn1 Boolean Unit

17− )

18−

19−type FocusWithinResult =

20− { focusWithinProps ∷

21− { onBlur ∷ EventHandler, onFocus ∷ EventHandler }

22− }

23−

24−foreign import useFocusWithinImpl ∷ ∀ props. EffectFn1 props FocusWithinResult

25−

26−newtype UseFocusWithin a = UseFocusWithin a

27−

28−useFocusWithin

29− ∷ ∀ props props_

30− . Union props props_ FocusWithinProps

31− ⇒ { | props }

32− → Hook UseFocusWithin FocusWithinResult

33−useFocusWithin = unsafeHook <<< runEffectFn1 useFocusWithinImpl

34−

35−-- UseFocus

36−

37−type FocusProps =

38− ( isDisabled ∷ Boolean

39− , onFocus ∷ EventHandler

40− , onBlur ∷ EventHandler

41− , onFocusChange ∷ EffectFn1 Boolean Unit

42− )

43−

44−type FocusResult =

45− { focusProps ∷ { onBlur ∷ EventHandler, onFocus ∷ EventHandler } }

46−

47−foreign import useFocusImpl ∷ ∀ props. EffectFn1 props FocusResult

48−

49−newtype UseFocus a = UseFocus a

50−

51−useFocus

52− ∷ ∀ props props_

53− . Union props props_ FocusProps

54− ⇒ { | props }

55− → Hook UseFocus FocusResult

56−useFocus = unsafeHook <<< runEffectFn1 useFocusImpl

src/React/Aria/Utils.jsdeleted−7

@@ -1,7 +0,0 @@

1−import { mergeProps, useId } from "@react-aria/utils"

2−

3−export function mergePropsImpl(args) {

4− return mergeProps(...args)

5−}

6−

7−export const useIdImpl = useId

src/React/Aria/Utils.pursdeleted−19

@@ -1,19 +0,0 @@

1−module React.Aria.Utils where

2−

3−import Foreign (Foreign, unsafeFromForeign, unsafeToForeign)

4−import Prim.Row (class Union)

5−import React.Basic.Hooks (Hook, unsafeHook)

6−import Effect (Effect)

7−

8−foreign import useIdImpl ∷ Effect String

9−

10−newtype UseId a = UseId a

11−

12−useId ∷ Hook UseId String

13−useId = unsafeHook useIdImpl

14−

15−foreign import mergePropsImpl ∷ Array Foreign → Foreign

16−

17−mergeProps ∷ ∀ r1 r2 r3. Union r1 r2 r3 ⇒ { | r1 } → { | r2 } → { | r3 }

18−mergeProps r1 r2 = unsafeFromForeign

19− (mergePropsImpl [ unsafeToForeign r1, unsafeToForeign r2 ])

src/Yoga/Block.purs+7

@@ -10,6 +10,7 @@ import Yoga.Block.Atom.Icon as Icon

10import Yoga.Block.Atom.Image as Image

11import Yoga.Block.Atom.Input as Input

12import Yoga.Block.Atom.Range as Range

13+import Yoga.Block.Atom.Select as Select

13import Yoga.Block.Atom.Segmented as Segmented

14import Yoga.Block.Atom.Segmented as Segmented

14import Yoga.Block.Atom.Toggle as Toggle

15import Yoga.Block.Atom.Toggle as Toggle

15import Yoga.Block.Container as Container

16import Yoga.Block.Container as Container

@@ -152,6 +153,12 @@ layer = React.element layer'

152range ∷ ∀ p q. Union p q Range.Props ⇒ ReactComponent { | p }

153range ∷ ∀ p q. Union p q Range.Props ⇒ ReactComponent { | p }

153range = Range.component

154range = Range.component

154

155

156+select' ∷ ∀ a. ReactComponent (Select.Props a)

157+select' = Select.component

158+

159+select ∷ ∀ a. (Select.Props a) → JSX

160+select = React.element select'

161+

155segmented' ∷ ReactComponent Segmented.Props

162segmented' ∷ ReactComponent Segmented.Props

156segmented' = Segmented.component

163segmented' = Segmented.component

157

164

src/Yoga/Block/Atom/Select/Style.purs+2

@@ -30,6 +30,8 @@ select =

30 <> pY' sizeStyle.xxs

31 <> pL' sizeStyle.s

32 <> textDefault

33+ <> textCol' col.text

34+ <> background transparent

33 <> svgBackgroundImage

35 <> svgBackgroundImage

34 ( SVG.svg

36 ( SVG.svg

35 { viewBox: "0 0 24 24"

37 { viewBox: "0 0 24 24"

src/Yoga/Block/Atom/Select/View.purs+31−25

@@ -2,33 +2,39 @@ module Yoga.Block.Atom.Select.View where

2

3import Yoga.Prelude.View

4

5+import Data.Array as Array

5import Effect.Unsafe (unsafePerformEffect)

6import Effect.Unsafe (unsafePerformEffect)

6−import Yoga.Block.Atom.Select.Style as Style

7import React.Basic.DOM as R

8import React.Basic.Hooks as React

9+import Yoga.Block.Atom.Select.Style as Style

9

10

10−component ∷

11+type Props a =

11− ∀ a.

12− ReactComponent

13− ( { choice ∷ a

12+ { choice ∷ a

14− , choices ∷ Array a

13+ , choices ∷ Array a

15− , onChange ∷ Array a → Effect Unit

14+ , onChange ∷ a → Effect Unit

16− , toString ∷ a → String

15+ , toString ∷ a → String

17− , toValue ∷ a → String

16+ , toValue ∷ a → String

18− }

17+ }

19− )

18+

19+component ∷ ∀ a. ReactComponent (Props a)

20component = unsafePerformEffect do

21− React.reactComponent "Select" \{ toString, toValue, choices } → React.do

21+ React.reactComponent "Select" \{ toString, toValue, choices, onChange } →

22− pure $

22+ React.do

23+ pure $

23− div "input-container" Style.container

24+ div "input-container" Style.container

24− [ R.select'

25+ [ R.select'

25− </*

26+ </*

26− { className: "select"

27+ { className: "select"

27− , role: "listbox"

28+ , role: "listbox"

28− , css: Style.select

29+ , css: Style.select

30+ , onChange: handler targetValue

31+ \maybeVal → traverse_ onChange do

32+ val ← maybeVal

33+ choices # Array.find (toString >>> (_ == val))

34+

29− }

35+ }

30− />

36+ />

31− ( choices <#> \c → R.option' </ { value: toValue c } />

37+ ( choices <#> \c → R.option' </ { value: toValue c } />

32− [ R.text $ toString c ]

38+ [ R.text $ toString c ]

33− )

39+ )

34− ]

40+ ]