@@ -10,16 +10,18 @@ import 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, fragment, useLayoutEffect, useState)
13+import React.Basic.Hooks (ReactComponent, component, fragment, useEffect, useState)
1414import React.Basic.Hooks as React
1515import React.Basic.Hooks.Spring (animatedDiv, useSpring, useTransition)
1616import React.Basic.Hooks.UseGesture (useDrag, withDragProps)
1717import Storybook.React (Storybook, add, storiesOf)
1818import Yoga.Box.Component as Box
19−import Yoga.Box.Component as Center
2019import Yoga.Button.Component (mkButton)
2120import Yoga.Card.Component (mkCard)
21+import Yoga.Centre.Component as Centre
22+import Yoga.Cluster.Component as Cluster
2223import Yoga.Spec.Helpers (withDarkTheme)
24+import Yoga.Stack.Component as Stack
2325import Yoga.Theme.Styles (makeStylesJSS)
2426import Yoga.Theme.Types (CSSTheme)
2527
@@ -35,33 +37,51 @@ stories = do
3537
3638mkAnimated ∷ Effect (ReactComponent {})
3739mkAnimated = do
40+ button <- mkButton
41+ stack <- Stack.makeComponent
42+ centre <- Centre.makeComponent
3843 box <- Box.makeComponent
44+ cluster <- Cluster.makeComponent
3945 component "Animated Example" \{} -> React.do
4046 toggled /\ modifyToggled <- useState false
41− { style, set, stop } <- useSpring $ const { opacity: 0.7, transform: "scale3d(0.9,0.9,0.9)" }
42− let
43− _ =
44− unsafePerformEffect
45− $ 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" <> ")" }
47+ { style, set, stop } <- useSpring $ const { opacity: 1.0, transform: "scale3d(1.0,1.0,1.0)" }
48+ useEffect toggled do
49+ set
50+ { opacity: if toggled then 0.7 else 1.0
51+ , transform: "scale3d(" <> if toggled then "0.2, 0.2, 1.0" else "1.0, 1.0, 1.0" <> ")"
52+ , config: { mass: 1, tension: 200, friction: 20 }
53+ }
54+ pure mempty
4655 pure
47− $ fragment
48− [ R.button { children: [ R.text "Toggle" ], onClick: handler_ $ modifyToggled not }
49− , animatedDiv
50− { style: css style
51− , children: [ jsx box {} [ R.text "Click the button" ] ]
52− }
56+ $ jsx stack {}
57+ [ jsx cluster {}
58+ [ R.div_
59+ [ jsx centre {}
60+ [ jsx button { onClick: handler_ $ modifyToggled not } [ R.text $ if toggled then "Zoom in" else "Zoom out" ]
61+ ]
62+ ]
63+ ]
64+ , jsx cluster {}
65+ [ R.div_
66+ [ jsx centre {}
67+ [ animatedDiv
68+ { style: css style
69+ , children: [ jsx box { invert: true } [ R.text "Click the button" ] ]
70+ }
71+ ]
72+ ]
73+ ]
5374 ]
5475
5576mkTransition ∷ Effect (ReactComponent {})
5677mkTransition = do
5778 button <- mkButton
79+ card <- mkCard
5880 useStyles <-
5981 makeStylesJSS
6082 $ jssClasses \(t ∷ CSSTheme) ->
6183 { div:
6284 { marginTop: "300px", marginLeft: "300px", width: "200px", height: "200px" }
63− , blue: { background: t.textColour }
64− , red: { background: t.white }
6585 }
6686 component "Transition Example" \{} -> React.do
6787 toggled /\ modifyToggled <- useState false
@@ -69,9 +89,10 @@ mkTransition = do
6989 transitions <-
7090 useTransition [ toggled ] Nothing
7191 $ css
72− { from: { opacity: 0.0, transform: "translate3d(-1000px, 0px, 0.0)", position: "absolute" }
73− , enter: { opacity: 1.0, transform: "translate3d(0.0, 0px, 0.0)" }
74− , leave: { opacity: 0.0, transform: "scale3d(0, 0, 1)" }
92+ { from: { opacity: 0.0, transform: "translate3d(-50vw, 0px, 0.0) scale3d(0.2, 0.2, 0.2)", position: "absolute" }
93+ , enter: { opacity: 1.0, transform: "translate3d(0.0, 0px, 0.0) scale3d(1.0,1.0,1.0)" }
94+ , leave: { opacity: 0.0, transform: "translate3d(50vw, 0px, 0.0) scale3d(0.0, 0.0, 1.0)" }
95+ , config: { mass: 5, tension: 500, friction: 100 }
7596 }
7697 pure
7798 $ fragment
@@ -79,15 +100,15 @@ mkTransition = do
79100 <#> \{ item, key, props } ->
80101 if item == Just true then
81102 animatedDiv
82− { className: classes.div <> " " <> classes.red
103+ { className: classes.div
83104 , style: props
84− , children: [ R.text "hello, you" ]
105+ , children: [ jsx card {} [ R.text "hello, you" ] ]
85106 }
86107 else
87108 animatedDiv
88− { className: classes.div <> " " <> classes.blue
109+ { className: classes.div
89110 , style: props
90− , children: [ R.text "I am different" ]
111+ , children: [ jsx card {} [ R.text "hello, again" ] ]
91112 }
92113 )
93114 <> [ jsx button { onClick: handler_ (modifyToggled not) } [ R.text "Toggle" ] ]
@@ -98,8 +119,7 @@ mkDragAnimated = do
98119 useStyles <-
99120 makeStylesJSS
100121 $ jssClasses \t ->
101− { card: { width: "200px", height: "200px" }
102− , div: { overflow: "visible" }
122+ { card: { width: "200px", height: "200px", marginTop: "30px" }
103123 }
104124 component "Draggable Example" \{} -> React.do
105125 { style, set } <- useSpring $ const { x: 0.0, y: 0.0, config: { mass: 1, tension: 210, friction: 20 } }
@@ -108,15 +128,11 @@ mkDragAnimated = do
108128 useDrag \{ down, movement: mx /\ my } ->
109129 set { x: if down then mx else 0.0, y: if down then my else 0.0 }
110130 pure
111− $ fragment
112− [ animatedDiv
113− ( { style: css style
114− , className: classes.div
115− , children:
116− [ jsx card { className: classes.card } [ R.text "Drag me somewhere" ]
117− ]
118− }
119− `withDragProps`
120− mkDragProps
121− )
131+ $ animatedDiv
132+ $ { style: css style
133+ , children:
134+ [ jsx card { className: classes.card } [ R.text "Drag me somewhere" ]
122135 ]
136+ }
137+ `withDragProps`
138+ mkDragProps