d04de9c · rowtype-yoga/psfp

git.iko.soy/rowtype-yoga/psfp

on master help sign in

Make API less silly

d04de9cMark Eibes7 years ago

components/src/React/Basic/Hooks/Spring.js+4−4

compare with master

unifiedsplit

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

1"use strict";

2Object.defineProperty(exports, "__esModule", { value: true });

3var react_spring_1 = require("react-spring");

4−exports.useSpringImpl = function (tuple) { return function (styles) { return function () {

4+exports.useSpringImpl = function (mkStyles) { return function () {

5− var result = react_spring_1.useSpring(styles);

5+ var result = react_spring_1.useSpring(mkStyles);

6− return tuple(result[0])(result[1]);

6+ return { style: result[0], set: result[1], stop: result[2] };

7−}; }; };

7+}; };

8exports.useTransitionImpl = react_spring_1.useTransition;

9exports.animatedComponentImpl = function (name) { return react_spring_1.animated[name]; };

10exports.animatedImpl = react_spring_1.animated;

components/src/React/Basic/Hooks/Spring.purs+20−4

@@ -13,15 +13,31 @@ import React.Basic.Hooks as React

14foreign import data UseSpring ∷ Type -> Type -> Type

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

16+type StopSpring

17+ = 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+

18−useSpring ∷ ∀ r props. (props -> { | r }) -> Hook (UseSpring { | r }) ({ | r } /\ ({ | r } -> Effect Unit))

27+useSpring ∷ ∀ r props. (props -> { | r }) -> Hook (UseSpring { | r }) { style ∷ { | r }, set ∷ SetSpring r, stop ∷ StopSpring }

19useSpring f = React.do

28useSpring f = React.do

20− styles /\ setFn <- unsafeHook (useSpringImpl Tuple (f))

29+ res <- unsafeHook (useSpringImpl f)

21− pure (styles /\ (runEffectFn1 setFn))

30+ pure $ res { set = runEffectFn1 res.set }

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

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

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+-}

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

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

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

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

components/src/React/Basic/Hooks/Spring.ts+2−2

@@ -1,8 +1,8 @@

1import { useSpring, useTransition, animated } from "react-spring";

3−exports.useSpringImpl = tuple => mkStyles => () => {

3+exports.useSpringImpl = mkStyles => () => {

4 const result = useSpring(mkStyles);

5− return tuple(result[0])(result[1]);

5+ return { style: result[0], set: result[1], stop: result[2] };

6};

8exports.useTransitionImpl = useTransition;

components/src/React/Basic/Hooks/Spring/Stories.purs+5−6

@@ -4,7 +4,6 @@ import Prelude hiding (add)

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

5import Debug.Trace (spy)

6import Effect (Effect)

7−import Effect.Unsafe (unsafePerformEffect)

8import JSS (jssClasses)

7import JSS (jssClasses)

9import Justifill (justifill)

8import Justifill (justifill)

10import React.Basic.DOM (css)

9import React.Basic.DOM (css)

@@ -36,14 +35,14 @@ mkAnimated = do

36 box <- Box.makeComponent

35 box <- Box.makeComponent

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

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

38 toggled /\ modifyToggled <- useState false

37 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" <> ")" }

40 useLayoutEffect toggled do

39 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" <> ")" }

42 pure mempty

41 pure mempty

43 pure

42 pure

44 $ fragment

43 $ fragment

45 [ animatedDiv

44 [ animatedDiv

46− { style: css springStyles

45+ { style: css style

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

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

48 }

47 }

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

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

@@ -54,7 +53,7 @@ mkDragAnimated = do

54 box <- Box.makeComponent

53 box <- Box.makeComponent

55 useStyles <- makeStylesJSS $ jssClasses \t -> { div: { width: "200px", height: "200px", background: "hotpink" } }

54 useStyles <- makeStylesJSS $ jssClasses \t -> { div: { width: "200px", height: "200px", background: "hotpink" } }

56 component "Draggable Example" \{} -> React.do

55 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 }

58 classes <- useStyles {}

57 classes <- useStyles {}

59 mkDragProps <-

58 mkDragProps <-

60 useDrag \{ down, movement: mx /\ my } ->

59 useDrag \{ down, movement: mx /\ my } ->

@@ -62,7 +61,7 @@ mkDragAnimated = do

62 pure

61 pure

63 $ fragment

62 $ fragment

64 [ animatedDiv

63 [ animatedDiv

65− ( { style: css springStyles

64+ ( { style: css style

66 , className: classes.div

65 , className: classes.div

67 , children: [ jsx box {} [ R.text "Drag me somewhere" ] ]

66 , children: [ jsx box {} [ R.text "Drag me somewhere" ] ]

68 }

67 }