git.iko.soy/rowtype-yoga/psfp
on master help sign in
Make API less silly
commitd04de9c32ba02f21eeb2a1e626a2b9bdee46e580 authorMark Eibes <mark.eibes@gmail.com> dateFri 3 Apr 2020, 21:39 (7 years ago) parenta1f9c3b
4 files changed+31−16
compare with master
unifiedsplit
components/src/React/Basic/Hooks/Spring.js+4−4 components/src/React/Basic/Hooks/Spring.purs+20−4 components/src/React/Basic/Hooks/Spring.ts+2−2 components/src/React/Basic/Hooks/Spring/Stories.purs+5−6
components/src/React/Basic/Hooks/Spring.js+4−4
@@ -1,10 +1,10 @@
11"use strict";
22Object.defineProperty(exports, "__esModule", { value: true });
33var react_spring_1 = require("react-spring");
4−exports.useSpringImpl = function (tuple) { return function (styles) { return function () {
5− var result = react_spring_1.useSpring(styles);
6− return tuple(result[0])(result[1]);
7−}; }; };
4+exports.useSpringImpl = function (mkStyles) { return function () {
5+ var result = react_spring_1.useSpring(mkStyles);
6+ return { style: result[0], set: result[1], stop: result[2] };
7+}; };
88exports.useTransitionImpl = react_spring_1.useTransition;
99exports.animatedComponentImpl = function (name) { return react_spring_1.animated[name]; };
1010exports.animatedImpl = react_spring_1.animated;
components/src/React/Basic/Hooks/Spring.purs+20−4
@@ -13,15 +13,31 @@ import React.Basic.Hooks as React
1313
1414foreign import data UseSpring ∷ Type -> Type -> Type
1515
16−foreign import useSpringImpl ∷ ∀ r props. _ -> (props -> { | r }) -> Effect ({ | r } /\ (EffectFn1 { | r } Unit))
16+type StopSpring
17+ = Effect Unit
1718
18−useSpring ∷ ∀ r props. (props -> { | r }) -> Hook (UseSpring { | r }) ({ | r } /\ ({ | r } -> Effect Unit))
19+type SetSpringImpl r
20+ = EffectFn1 { | r } Unit
21+
22+type SetSpring r
23+ = { | r } -> Effect Unit
24+
25+foreign import useSpringImpl ∷ ∀ r props. (props -> { | r }) -> Effect { style ∷ { | r }, set ∷ SetSpringImpl r, stop ∷ StopSpring }
26+
27+useSpring ∷ ∀ r props. (props -> { | r }) -> Hook (UseSpring { | r }) { style ∷ { | r }, set ∷ SetSpring r, stop ∷ StopSpring }
1928useSpring f = React.do
20− styles /\ setFn <- unsafeHook (useSpringImpl Tuple (f))
21− pure (styles /\ (runEffectFn1 setFn))
29+ res <- unsafeHook (useSpringImpl f)
30+ pure $ res { set = runEffectFn1 res.set }
2231
2332foreign import data UseTransition ∷ Type -> Type -> Type
2433
34+{- foreign import useTransitionImpl ∷ ∀ r. _ -> () -> Effect ({ | r } /\ (EffectFn1 { | r } Unit))
35+
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+-}
2541foreign import animatedImpl ∷ ∀ attrs. String -> ReactComponent { | attrs }
2642
2743foreign import animatedComponentImpl ∷ ∀ attrs. ReactComponent { style ∷ CSS | attrs } -> ReactComponent { style ∷ CSS | attrs }
components/src/React/Basic/Hooks/Spring.ts+2−2
@@ -1,8 +1,8 @@
11import { useSpring, useTransition, animated } from "react-spring";
22
3−exports.useSpringImpl = tuple => mkStyles => () => {
3+exports.useSpringImpl = mkStyles => () => {
44 const result = useSpring(mkStyles);
5− return tuple(result[0])(result[1]);
5+ return { style: result[0], set: result[1], stop: result[2] };
66};
77
88exports.useTransitionImpl = useTransition;
components/src/React/Basic/Hooks/Spring/Stories.purs+5−6
@@ -4,7 +4,6 @@ import Prelude hiding (add)
44import Data.Tuple.Nested ((/\))
55import Debug.Trace (spy)
66import Effect (Effect)
7−import Effect.Unsafe (unsafePerformEffect)
87import JSS (jssClasses)
98import Justifill (justifill)
109import React.Basic.DOM (css)
@@ -36,14 +35,14 @@ mkAnimated = do
3635 box <- Box.makeComponent
3736 component "Animated Example" \{} -> React.do
3837 toggled /\ modifyToggled <- useState false
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" <> ")" }
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" <> ")" }
4039 useLayoutEffect toggled do
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" <> ")" }
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" <> ")" }
4241 pure mempty
4342 pure
4443 $ fragment
4544 [ animatedDiv
46− { style: css springStyles
45+ { style: css style
4746 , children: [ jsx box {} [ R.text "Click the button" ] ]
4847 }
4948 , R.button { children: [ R.text "Toggle" ], onClick: handler_ (modifyToggled not) }
@@ -54,7 +53,7 @@ mkDragAnimated = do
5453 box <- Box.makeComponent
5554 useStyles <- makeStylesJSS $ jssClasses \t -> { div: { width: "200px", height: "200px", background: "hotpink" } }
5655 component "Draggable Example" \{} -> React.do
57− springStyles /\ set <- useSpring $ const { x: 0.0, y: 0.0 }
56+ { style, set } <- useSpring $ const { x: 0.0, y: 0.0 }
5857 classes <- useStyles {}
5958 mkDragProps <-
6059 useDrag \{ down, movement: mx /\ my } ->
@@ -62,7 +61,7 @@ mkDragAnimated = do
6261 pure
6362 $ fragment
6463 [ animatedDiv
65− ( { style: css springStyles
64+ ( { style: css style
6665 , className: classes.div
6766 , children: [ jsx box {} [ R.text "Drag me somewhere" ] ]
6867 }