5e88c94 · rowtype-yoga/psfp

git.iko.soy/rowtype-yoga/psfp

Don't remember

commit5e88c94f4bb0abbb4b4fa2200aff7c622cc3f1d7 authorMark Eibes <mark.eibes@gmail.com> dateSat 4 Apr 2020, 00:24 (7 years ago) parentd04de9c

2 files changed+73−23

compare with master

unifiedsplit

components/src/React/Basic/Hooks/Spring.purs+17−9 components/src/React/Basic/Hooks/Spring/Stories.purs+56−14

components/src/React/Basic/Hooks/Spring.purs+17−9

@@ -1,10 +1,11 @@

11module React.Basic.Hooks.Spring where

33import Prelude

4−import Data.Tuple (Tuple(..))

5−import Data.Tuple.Nested (type (/\), (/\))

4+import Data.Maybe (Maybe)

5+import Data.Nullable (Nullable, toNullable)

6+import Data.Nullable as Nullable

67import Effect (Effect)

7−import Effect.Uncurried (EffectFn1, runEffectFn1)

8+import Effect.Uncurried (EffectFn1, EffectFn3, runEffectFn1, runEffectFn3)

89import Prim.Row (class Union)

910import React.Basic (JSX, ReactComponent, element)

1011import React.Basic.DOM (CSS, Props_div)

@@ -31,13 +32,20 @@ useSpring f = React.do

3132

3233foreign import data UseTransition ∷ Type -> Type -> Type

3334

34−{- foreign import useTransitionImpl ∷ ∀ r. _ -> () -> Effect ({ | r } /\ (EffectFn1 { | r } Unit))

35+foreign import useTransitionImpl ∷ ∀ a. EffectFn3 (Array a) (Nullable (a -> String)) CSS (Array { item ∷ Nullable a, key ∷ Nullable String, props ∷ CSS })

36+

37+useTransition ∷

38+ ∀ item.

39+ Array item ->

40+ Maybe (item -> String) ->

41+ CSS ->

42+ Hook (UseTransition item) (Array { item ∷ Maybe item, key ∷ Maybe String, props ∷ CSS })

43+useTransition items toKey transition =

44+ unsafeHook

45+ ( runEffectFn3 useTransitionImpl items (toNullable toKey) transition

46+ <#> map \x -> x { item = x.item # Nullable.toMaybe, key = x.key # Nullable.toMaybe }

47+ )

3548

36−-- useTransition ∷ ∀ r props. (props -> { | r }) -> Hook (UseTransition { | r }) ({ | r } /\ ({ | r } -> Effect Unit))

37−-- useTransition f = React.do

38−-- styles /\ setFn <- unsafeHook (useTransitionImpl Tuple (f))

39−-- pure (styles /\ (runEffectFn1 setFn))

40−-}

4149foreign import animatedImpl ∷ ∀ attrs. String -> ReactComponent { | attrs }

4250

4351foreign import animatedComponentImpl ∷ ∀ attrs. ReactComponent { style ∷ CSS | attrs } -> ReactComponent { style ∷ CSS | attrs }

components/src/React/Basic/Hooks/Spring/Stories.purs+56−14

@@ -1,32 +1,33 @@

11module React.Basic.Hooks.Spring.Stories where

33import Prelude hiding (add)

4+import Data.Maybe (Maybe(..))

45import Data.Tuple.Nested ((/\))

5−import Debug.Trace (spy)

66import Effect (Effect)

7+import Effect.Unsafe (unsafePerformEffect)

78import JSS (jssClasses)

8−import Justifill (justifill)

99import React.Basic.DOM (css)

1010import React.Basic.DOM as R

1111import React.Basic.Events (handler_)

1212import React.Basic.Helpers (jsx)

13−import React.Basic.Hooks (ReactComponent, component, element, fragment, useLayoutEffect, useState)

13+import React.Basic.Hooks (ReactComponent, component, fragment, useLayoutEffect, useState)

1414import React.Basic.Hooks as React

15−import React.Basic.Hooks.Spring (animated, animatedDiv, useSpring, useSpringImpl)

15+import React.Basic.Hooks.Spring (animatedDiv, useSpring, useTransition)

1616import React.Basic.Hooks.UseGesture (useDrag, withDragProps)

17−import Storybook.Decorator.FullScreen (fullScreenDecorator)

18−import Storybook.React (Storybook, add, add_, addDecorator, storiesOf)

19−import Web.DOM.DOMTokenList (toggle)

17+import Storybook.React (Storybook, add, storiesOf)

2018import Yoga.Box.Component as Box

19+import Yoga.Button.Component (mkButton)

2120import Yoga.Spec.Helpers (withDarkTheme)

22−import Yoga.Stack.Component as Stack

2321import Yoga.Theme.Styles (makeStylesJSS)

22+import Yoga.Theme.Types (CSSTheme)

2423

2524stories ∷ Effect Storybook

2625stories = do

2726 storiesOf "Spring" do

2827 add "The Spring" (withDarkTheme mkAnimated)

2928 [ {} ]

29+ add "The Transition" (withDarkTheme mkTransition)

30+ [ {} ]

3031 add "The Drag" (withDarkTheme mkDragAnimated)

3132 [ {} ]

3233

@@ -35,19 +36,60 @@ mkAnimated = do

3536 box <- Box.makeComponent

3637 component "Animated Example" \{} -> React.do

3738 toggled /\ modifyToggled <- useState false

38− { style, set, stop } <- useSpring $ const { opacity: 0.7, transform: "scale3d(" <> if toggled then "0.9, 0.9, 1.0" else "1.0, 2.0, 1.0" <> ")" }

39− useLayoutEffect toggled do

40− (spy "fuck" set) { opacity: if toggled then 0.7 else 0.9, transform: "scale3d(" <> if toggled then "0.9, 0.9, 1.0" else "1.0, 2.0, 1.0" <> ")" }

41− pure mempty

39+ { style, set, stop } <- useSpring $ const { opacity: 0.7, transform: "scale3d(0.9,0.9,0.9)" }

40+ let

41+ _ =

42+ unsafePerformEffect

43+ $ set { opacity: if toggled then 0.7 else 0.9, transform: "scale3d(" <> if toggled then "0.9, 0.9, 1.0" else "0.95, 0.95, 1.0" <> ")" }

4244 pure

4345 $ fragment

44− [ animatedDiv

46+ [ R.button { children: [ R.text "Toggle" ], onClick: handler_ $ modifyToggled not }

47+ , animatedDiv

4548 { style: css style

4649 , children: [ jsx box {} [ R.text "Click the button" ] ]

4750 }

48− , R.button { children: [ R.text "Toggle" ], onClick: handler_ (modifyToggled not) }

4951 ]

5052

53+mkTransition ∷ Effect (ReactComponent {})

54+mkTransition = do

55+ button <- mkButton

56+ useStyles <-

57+ makeStylesJSS

58+ $ jssClasses \(t ∷ CSSTheme) ->

59+ { div:

60+ { marginTop: "300px", marginLeft: "300px", width: "200px", height: "200px" }

61+ , blue: { background: t.textColour }

62+ , red: { background: t.white }

63+ }

64+ component "Transition Example" \{} -> React.do

65+ toggled /\ modifyToggled <- useState false

66+ classes <- useStyles {}

67+ transitions <-

68+ useTransition [ toggled ] Nothing

69+ $ css

70+ { from: { opacity: 0.0, transform: "translate3d(-1000px, 0px, 0.0)", position: "absolute" }

71+ , enter: { opacity: 1.0, transform: "translate3d(0.0, 0px, 0.0)" }

72+ , leave: { opacity: 0.0, transform: "scale3d(0, 0, 1)" }

73+ }

74+ pure

75+ $ fragment

76+ $ ( transitions

77+ <#> \{ item, key, props } ->

78+ if item == Just true then

79+ animatedDiv

80+ { className: classes.div <> " " <> classes.red

81+ , style: props

82+ , children: [ R.text "hello, you" ]

83+ }

84+ else

85+ animatedDiv

86+ { className: classes.div <> " " <> classes.blue

87+ , style: props

88+ , children: [ R.text "I am different" ]

89+ }

90+ )

91+ <> [ jsx button { onClick: handler_ (modifyToggled not) } [ R.text "Toggle" ] ]

92+

5193mkDragAnimated ∷ Effect (ReactComponent {})

5294mkDragAnimated = do

5395 box <- Box.makeComponent