@@ -5,12 +5,13 @@ import Data.Tuple.Nested ((/\))
55import Debug.Trace (spy)
66import Effect (Effect)
77import Effect.Unsafe (unsafePerformEffect)
8+import JSS (jssClasses)
89import Justifill (justifill)
910import React.Basic.DOM (css)
1011import React.Basic.DOM as R
1112import React.Basic.Events (handler_)
1213import React.Basic.Helpers (jsx)
13−import React.Basic.Hooks (component, element, fragment, useLayoutEffect, useState)
14+import React.Basic.Hooks (ReactComponent, component, element, fragment, useLayoutEffect, useState)
1415import React.Basic.Hooks as React
1516import React.Basic.Hooks.Spring (animated, animatedDiv, useSpring, useSpringImpl)
1617import React.Basic.Hooks.UseGesture (useDrag, withDragProps)
@@ -20,6 +21,7 @@ import Web.DOM.DOMTokenList (toggle)
2021import Yoga.Box.Component as Box
2122import Yoga.Spec.Helpers (withDarkTheme)
2223import Yoga.Stack.Component as Stack
24+import Yoga.Theme.Styles (makeStylesJSS)
2325
2426stories ∷ Effect Storybook
2527stories = do
@@ -29,37 +31,40 @@ stories = do
2931 add "The Drag" (withDarkTheme mkDragAnimated)
3032 [ {} ]
3133
34+mkAnimated ∷ Effect (ReactComponent {})
3235mkAnimated = do
3336 box <- Box.makeComponent
3437 component "Animated Example" \{} -> React.do
3538 toggled /\ modifyToggled <- useState false
36− springStyles /\ set <- useSpring $ const { marginTop: "80px", transform: "scale3d(" <> if toggled then "0.9, 0.9, 1.0" else "1.0, 2.0, 1.0" <> ")" }
39+ springStyles /\ set <- useSpring $ const { marginTop: "80px", marginBottom: "80px", opacity: 0.7, transform: "scale3d(" <> if toggled then "0.9, 0.9, 1.0" else "1.0, 2.0, 1.0" <> ")" }
3740 useLayoutEffect toggled do
38− set { marginTop: "80px", transform: "scale3d(" <> if toggled then "0.9, 0.9, 1.0" else "1.0, 2.0, 1.0" <> ")" }
41+ set { marginTop: "80px", marginBottom: "30px", 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" <> ")" }
3942 pure mempty
4043 pure
4144 $ fragment
42− [ R.button { children: [ R.text "Toggle" ], onClick: handler_ (modifyToggled not) }
43− , animatedDiv
44− { style: css (spy "toni" springStyles)
45− , children: [ jsx box {} [ R.text "HIIIIIIIIIIIIOOOO" ] ]
45+ [ animatedDiv
46+ { style: css springStyles
47+ , children: [ jsx box {} [ R.text "Click the button" ] ]
4648 }
49+ , R.button { children: [ R.text "Toggle" ], onClick: handler_ (modifyToggled not) }
4750 ]
4851
52+mkDragAnimated ∷ Effect (ReactComponent {})
4953mkDragAnimated = do
5054 box <- Box.makeComponent
51− component "Animated Example" \{} -> React.do
52− toggled /\ modifyToggled <- useState false
55+ useStyles <- makeStylesJSS $ jssClasses \t -> { div: { width: "200px", height: "200px", background: "hotpink" } }
56+ component "Draggable Example" \{} -> React.do
5357 springStyles /\ set <- useSpring $ const { x: 0.0, y: 0.0 }
58+ classes <- useStyles {}
5459 mkDragProps <-
5560 useDrag \{ down, movement: mx /\ my } ->
5661 set { x: if down then mx else 0.0, y: if down then my else 0.0 }
5762 pure
5863 $ fragment
59− [ R.button { children: [ R.text "Toggle" ], onClick: handler_ (modifyToggled not) }
60− , animatedDiv
64+ [ animatedDiv
6165 ( { style: css springStyles
62− , children: [ jsx box {} [ R.text "HIIIIIIIIIIIIOOOO" ] ]
66+ , className: classes.div
67+ , children: [ jsx box {} [ R.text "Drag me somewhere" ] ]
6368 }
6469 `withDragProps`
6570 mkDragProps