git.iko.soy/rowtype-yoga/psfp
on master help sign in
Don't remember
5e88c94Mark Eibes
components/src/React/Basic/Hooks/Spring.purs+17−9
compare with master
unifiedsplit
@@ -1,10 +1,11 @@
1module React.Basic.Hooks.Spring where
1module React.Basic.Hooks.Spring where
2
2
3import Prelude
3import Prelude
4−import Data.Tuple (Tuple(..))
4+import Data.Maybe (Maybe)
5−import Data.Tuple.Nested (type (/\), (/\))
5+import Data.Nullable (Nullable, toNullable)
6+import Data.Nullable as Nullable
6import Effect (Effect)
7import Effect (Effect)
7−import Effect.Uncurried (EffectFn1, runEffectFn1)
8+import Effect.Uncurried (EffectFn1, EffectFn3, runEffectFn1, runEffectFn3)
8import Prim.Row (class Union)
9import Prim.Row (class Union)
9import React.Basic (JSX, ReactComponent, element)
10import React.Basic (JSX, ReactComponent, element)
10import React.Basic.DOM (CSS, Props_div)
11import React.Basic.DOM (CSS, Props_div)
@@ -31,13 +32,20 @@ useSpring f = React.do
31
32
32foreign import data UseTransition ∷ Type -> Type -> Type
33foreign import data UseTransition ∷ Type -> Type -> Type
33
34
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+ )
35
48
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−-}
41foreign import animatedImpl ∷ ∀ attrs. String -> ReactComponent { | attrs }
49foreign import animatedImpl ∷ ∀ attrs. String -> ReactComponent { | attrs }
42
50
43foreign import animatedComponentImpl ∷ ∀ attrs. ReactComponent { style ∷ CSS | attrs } -> ReactComponent { style ∷ CSS | attrs }
51foreign 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 @@
1module React.Basic.Hooks.Spring.Stories where
1module React.Basic.Hooks.Spring.Stories where
2
2
3import Prelude hiding (add)
3import Prelude hiding (add)
4+import Data.Maybe (Maybe(..))
4import Data.Tuple.Nested ((/\))
5import Data.Tuple.Nested ((/\))
5−import Debug.Trace (spy)
6import Effect (Effect)
6import Effect (Effect)
7+import Effect.Unsafe (unsafePerformEffect)
7import JSS (jssClasses)
8import JSS (jssClasses)
8−import Justifill (justifill)
9import React.Basic.DOM (css)
9import React.Basic.DOM (css)
10import React.Basic.DOM as R
10import React.Basic.DOM as R
11import React.Basic.Events (handler_)
11import React.Basic.Events (handler_)
12import React.Basic.Helpers (jsx)
12import 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)
14import React.Basic.Hooks as React
14import React.Basic.Hooks as React
15−import React.Basic.Hooks.Spring (animated, animatedDiv, useSpring, useSpringImpl)
15+import React.Basic.Hooks.Spring (animatedDiv, useSpring, useTransition)
16import React.Basic.Hooks.UseGesture (useDrag, withDragProps)
16import React.Basic.Hooks.UseGesture (useDrag, withDragProps)
17−import Storybook.Decorator.FullScreen (fullScreenDecorator)
18−import Storybook.React (Storybook, add, add_, addDecorator, storiesOf)
17+import Storybook.React (Storybook, add, storiesOf)
19−import Web.DOM.DOMTokenList (toggle)
20import Yoga.Box.Component as Box
18import Yoga.Box.Component as Box
19+import Yoga.Button.Component (mkButton)
21import Yoga.Spec.Helpers (withDarkTheme)
20import Yoga.Spec.Helpers (withDarkTheme)
22−import Yoga.Stack.Component as Stack
23import Yoga.Theme.Styles (makeStylesJSS)
21import Yoga.Theme.Styles (makeStylesJSS)
22+import Yoga.Theme.Types (CSSTheme)
24
23
25stories ∷ Effect Storybook
24stories ∷ Effect Storybook
26stories = do
25stories = do
27 storiesOf "Spring" do
26 storiesOf "Spring" do
28 add "The Spring" (withDarkTheme mkAnimated)
27 add "The Spring" (withDarkTheme mkAnimated)
29 [ {} ]
28 [ {} ]
29+ add "The Transition" (withDarkTheme mkTransition)
30+ [ {} ]
30 add "The Drag" (withDarkTheme mkDragAnimated)
31 add "The Drag" (withDarkTheme mkDragAnimated)
31 [ {} ]
32 [ {} ]
32
33
@@ -35,19 +36,60 @@ mkAnimated = do
35 box <- Box.makeComponent
36 box <- Box.makeComponent
36 component "Animated Example" \{} -> React.do
37 component "Animated Example" \{} -> React.do
37 toggled /\ modifyToggled <- useState false
38 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+ { style, set, stop } <- useSpring $ const { opacity: 0.7, transform: "scale3d(0.9,0.9,0.9)" }
39− useLayoutEffect toggled do
40+ let
41+ _ =
42+ unsafePerformEffect
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" <> ")" }
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" <> ")" }
41− pure mempty
42 pure
44 pure
43 $ fragment
45 $ fragment
46+ [ R.button { children: [ R.text "Toggle" ], onClick: handler_ $ modifyToggled not }
44− [ animatedDiv
47+ , animatedDiv
45 { style: css style
48 { style: css style
46 , children: [ jsx box {} [ R.text "Click the button" ] ]
49 , children: [ jsx box {} [ R.text "Click the button" ] ]
47 }
50 }
48− , R.button { children: [ R.text "Toggle" ], onClick: handler_ (modifyToggled not) }
49 ]
51 ]
50
52
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+
51mkDragAnimated ∷ Effect (ReactComponent {})
93mkDragAnimated ∷ Effect (ReactComponent {})
52mkDragAnimated = do
94mkDragAnimated = do
53 box <- Box.makeComponent
95 box <- Box.makeComponent