git.iko.soy/rowtype-yoga/psfp
on master help sign in
Springety spring
commit093e592eda7af76394cc905c94ebf4d3a44f3f75 authorMark Eibes <mark.eibes@gmail.com> dateFri 3 Apr 2020, 00:10 (7 years ago) parent65bcaa6
12 files changed+238−20
compare with master
unifiedsplit
components/package-lock.json+121−4 components/package.json+2−1 components/src/React/Basic/Hooks/Spring.js+5−1 components/src/React/Basic/Hooks/Spring.purs+14−7 components/src/React/Basic/Hooks/Spring.ts+7−2 components/src/React/Basic/Hooks/Spring/Stories.purs+30−3 components/src/React/Basic/Hooks/UseGesture.js+4 components/src/React/Basic/Hooks/UseGesture.purs+42 components/src/React/Basic/Hooks/UseGesture.ts+3 components/src/Yoga/Modal/Component.purs+1−1 components/src/Yoga/Monaco/Editor.js+8−1 components/src/tsconfig.json+1
components/package-lock.json+121−4
@@ -1312,6 +1312,102 @@
13121312 "react-lifecycles-compat": "^3.0.4"
13131313 }
13141314 },
1315+ "@react-spring/addons": {
1316+ "version": "9.0.0-beta.33",
1317+ "resolved": "https://registry.npmjs.org/@react-spring/addons/-/addons-9.0.0-beta.33.tgz",
1318+ "integrity": "sha512-/QJ5vcq54oljT1n4dSx9maYGaIKzz5WRuKGa12fhLD2JsYo9syTc9S3VH4qmAM4pkbggUQdiaA/AJWack4NF7A==",
1319+ "requires": {
1320+ "@babel/runtime": "^7.3.1",
1321+ "@react-spring/animated": "^9.0.0-beta.33",
1322+ "@react-spring/core": "^9.0.0-beta.33",
1323+ "use-memo-one": "^1.1.0"
1324+ }
1325+ },
1326+ "@react-spring/animated": {
1327+ "version": "9.0.0-beta.33",
1328+ "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.0.0-beta.33.tgz",
1329+ "integrity": "sha512-0ecIXTLjvUuplQgUOr3fhXzHuVcCuVi4gLAEG74m/OcXZ8JZ0DuQCwdIT2TNJYaWX1pOG0OstT3bJ8KN+Ji/BQ==",
1330+ "requires": {
1331+ "@babel/runtime": "^7.3.1",
1332+ "@react-spring/shared": "^9.0.0-beta.33",
1333+ "tiny-invariant": "^1.0.4"
1334+ }
1335+ },
1336+ "@react-spring/core": {
1337+ "version": "9.0.0-beta.33",
1338+ "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.0.0-beta.33.tgz",
1339+ "integrity": "sha512-fIUGsAsCmZSBtucfE3zf2XTBjdTYbzdcblZyeo1/pUGW7ehjB85x2oNj7o6JQ603+elsTJ9k7POiYI5/wn1N3A==",
1340+ "requires": {
1341+ "@babel/runtime": "^7.3.1",
1342+ "@react-spring/animated": "^9.0.0-beta.33",
1343+ "@react-spring/shared": "^9.0.0-beta.33",
1344+ "use-memo-one": "^1.1.0"
1345+ }
1346+ },
1347+ "@react-spring/konva": {
1348+ "version": "9.0.0-beta.33",
1349+ "resolved": "https://registry.npmjs.org/@react-spring/konva/-/konva-9.0.0-beta.33.tgz",
1350+ "integrity": "sha512-9tfrbd/j3ZZHu8Vjpx86vAkLZ3lQLv9VEgvDIQSpzUzQOUojeQPdbB/xVKSoqR2hWR0XMV2IurD2e6rolZv7fQ==",
1351+ "requires": {
1352+ "@babel/runtime": "^7.3.1",
1353+ "@react-spring/animated": "^9.0.0-beta.33",
1354+ "@react-spring/core": "^9.0.0-beta.33",
1355+ "@react-spring/shared": "^9.0.0-beta.33"
1356+ }
1357+ },
1358+ "@react-spring/native": {
1359+ "version": "9.0.0-beta.33",
1360+ "resolved": "https://registry.npmjs.org/@react-spring/native/-/native-9.0.0-beta.33.tgz",
1361+ "integrity": "sha512-x2Wlcr0JSxc2O/6QsOut4aR3VOVYP8QOLBNXA+5tgQGK5yfkTaDoXTZC8vD/uX3dBsY41FUr2x9a+LOqvTfziQ==",
1362+ "requires": {
1363+ "@babel/runtime": "^7.3.1",
1364+ "@react-spring/animated": "^9.0.0-beta.33",
1365+ "@react-spring/core": "^9.0.0-beta.33",
1366+ "@react-spring/shared": "^9.0.0-beta.33"
1367+ }
1368+ },
1369+ "@react-spring/shared": {
1370+ "version": "9.0.0-beta.33",
1371+ "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.0.0-beta.33.tgz",
1372+ "integrity": "sha512-oGalrGtIg7ZMn9VW5PzLFMDAa8vH5V0XIeC4WFk7JB4hBfhxx6yzPwjMxSJfRrt/Q+WuS2cPoR5qN0RpH+fJOA==",
1373+ "requires": {
1374+ "@babel/runtime": "^7.3.1",
1375+ "tiny-invariant": "^1.0.4"
1376+ }
1377+ },
1378+ "@react-spring/three": {
1379+ "version": "9.0.0-beta.33",
1380+ "resolved": "https://registry.npmjs.org/@react-spring/three/-/three-9.0.0-beta.33.tgz",
1381+ "integrity": "sha512-ouTN6w1VMjN2V04JGSG7eliesBgOqPmplrETeUSc3gAl3unv9LzqRDK/NGan0GwvsCx98BUycKYD26wWAAu1lA==",
1382+ "requires": {
1383+ "@babel/runtime": "^7.3.1",
1384+ "@react-spring/animated": "^9.0.0-beta.33",
1385+ "@react-spring/core": "^9.0.0-beta.33",
1386+ "@react-spring/shared": "^9.0.0-beta.33"
1387+ }
1388+ },
1389+ "@react-spring/web": {
1390+ "version": "9.0.0-beta.34",
1391+ "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.0.0-beta.34.tgz",
1392+ "integrity": "sha512-K5kF2e0BgUE6ehY81NF9C8eYiopFx9YrWQvxRXVUbXUYOgLjZ5JsKFlAbM52PAl3AgP5c1pMP9ir6yzn144nig==",
1393+ "requires": {
1394+ "@babel/runtime": "^7.3.1",
1395+ "@react-spring/animated": "^9.0.0-beta.33",
1396+ "@react-spring/core": "^9.0.0-beta.33",
1397+ "@react-spring/shared": "^9.0.0-beta.33"
1398+ }
1399+ },
1400+ "@react-spring/zdog": {
1401+ "version": "9.0.0-beta.33",
1402+ "resolved": "https://registry.npmjs.org/@react-spring/zdog/-/zdog-9.0.0-beta.33.tgz",
1403+ "integrity": "sha512-cGxNJxZxbKpaagpelTxdOLOxJkdUEjmiXzrePu0dAgO58WTGcya9XWcI0ntKZo1/8T6E2qR29j0J59MDeHkAZQ==",
1404+ "requires": {
1405+ "@babel/runtime": "^7.3.1",
1406+ "@react-spring/animated": "^9.0.0-beta.33",
1407+ "@react-spring/core": "^9.0.0-beta.33",
1408+ "@react-spring/shared": "^9.0.0-beta.33"
1409+ }
1410+ },
13151411 "@storybook/addons": {
13161412 "version": "5.3.17",
13171413 "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-5.3.17.tgz",
@@ -11656,12 +11752,18 @@
1165611752 }
1165711753 },
1165811754 "react-spring": {
11659− "version": "8.0.27",
11660− "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz",
11661− "integrity": "sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==",
11755+ "version": "9.0.0-beta.34",
11756+ "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-9.0.0-beta.34.tgz",
11757+ "integrity": "sha512-Ey+Zg/jS2b/uaT6MlvMLnnNZ+N16Gc6r/CAwduC1+jy9UnB/fYnMMflZPemkGVEpZ+T9ef5FvWknw4ytnGl4zw==",
1166211758 "requires": {
1166311759 "@babel/runtime": "^7.3.1",
11664− "prop-types": "^15.5.8"
11760+ "@react-spring/addons": "^9.0.0-beta.33",
11761+ "@react-spring/core": "^9.0.0-beta.33",
11762+ "@react-spring/konva": "^9.0.0-beta.33",
11763+ "@react-spring/native": "^9.0.0-beta.33",
11764+ "@react-spring/three": "^9.0.0-beta.33",
11765+ "@react-spring/web": "^9.0.0-beta.34",
11766+ "@react-spring/zdog": "^9.0.0-beta.33"
1166511767 }
1166611768 },
1166711769 "react-svg-core": {
@@ -11712,6 +11814,11 @@
1171211814 "prop-types": "^15.6.0"
1171311815 }
1171411816 },
11817+ "react-use-gesture": {
11818+ "version": "7.0.8",
11819+ "resolved": "https://registry.npmjs.org/react-use-gesture/-/react-use-gesture-7.0.8.tgz",
11820+ "integrity": "sha512-Fy50US06pVkfsIEKDV18v3835Xa65/3QH9gDYRStjCgM273jnaH8WUsx4UxUag/NgevLnB3RPePUHkxtJheoSw=="
11821+ },
1171511822 "read-pkg": {
1171611823 "version": "3.0.0",
1171711824 "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -13544,6 +13651,11 @@
1354413651 "dev": true,
1354513652 "optional": true
1354613653 },
13654+ "tiny-invariant": {
13655+ "version": "1.1.0",
13656+ "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
13657+ "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
13658+ },
1354713659 "tiny-warning": {
1354813660 "version": "1.0.3",
1354913661 "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
@@ -13950,6 +14062,11 @@
1395014062 "integrity": "sha512-C3nvxh0ZpaOxs9RCnWwAJ+7bJPwQI8LHF71LzbQ3BvzH5XkdtlkMadqElGevg5bYBDFip4sAnD4m06zAKebg1w==",
1395114063 "dev": true
1395214064 },
14065+ "use-memo-one": {
14066+ "version": "1.1.1",
14067+ "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.1.tgz",
14068+ "integrity": "sha512-oFfsyun+bP7RX8X2AskHNTxu+R3QdE/RC5IefMbqptmACAA/gfol1KDD5KRzPsGMa62sWxGZw+Ui43u6x4ddoQ=="
14069+ },
1395314070 "use-sidecar": {
1395414071 "version": "1.0.2",
1395514072 "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.0.2.tgz",
components/package.json+2−1
@@ -34,7 +34,8 @@
3434 "homepage": "https://github.com/i-am-the-slime/psfp#readme",
3535 "dependencies": {
3636 "react-jss": "^10.1.1",
37− "react-spring": "^8.0.27"
37+ "react-spring": "^9.0.0-beta.34",
38+ "react-use-gesture": "^7.0.8"
3839 },
3940 "devDependencies": {
4041 "@babel/core": "^7.6.0",
components/src/React/Basic/Hooks/Spring.js+5−1
@@ -1,6 +1,10 @@
11"use strict";
22Object.defineProperty(exports, "__esModule", { value: true });
33var react_spring_1 = require("react-spring");
4−exports.useSpringImpl = react_spring_1.useSpring;
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+}; }; };
8+exports.useTransitionImpl = react_spring_1.useTransition;
59exports.animatedComponentImpl = function (name) { return react_spring_1.animated[name]; };
610exports.animatedImpl = react_spring_1.animated;
components/src/React/Basic/Hooks/Spring.purs+14−7
@@ -1,29 +1,36 @@
11module React.Basic.Hooks.Spring where
22
3+import Prelude
4+import Data.Tuple (Tuple(..))
5+import Data.Tuple.Nested (type (/\), (/\))
6+import Effect (Effect)
37import Effect.Uncurried (EffectFn1, runEffectFn1)
48import Prim.Row (class Union)
59import React.Basic (JSX, ReactComponent, element)
610import React.Basic.DOM (CSS, Props_div)
711import React.Basic.Hooks (Hook, unsafeHook)
12+import React.Basic.Hooks as React
813
914foreign import data UseSpring ∷ Type -> Type -> Type
1015
11−foreign import data SpringStyles ∷ Type
16+foreign import useSpringImpl ∷ ∀ r props. _ -> (props -> { | r }) -> Effect ({ | r } /\ (EffectFn1 { | r } Unit))
1217
13−foreign import useSpringImpl ∷ EffectFn1 CSS SpringStyles
18+useSpring ∷ ∀ r props. (props -> { | r }) -> Hook (UseSpring { | r }) ({ | r } /\ ({ | r } -> Effect Unit))
19+useSpring f = React.do
20+ styles /\ setFn <- unsafeHook (useSpringImpl Tuple (f))
21+ pure (styles /\ (runEffectFn1 setFn))
1422
15−useSpring ∷ CSS -> Hook (UseSpring CSS) SpringStyles
16−useSpring css' = unsafeHook (runEffectFn1 useSpringImpl css')
23+foreign import data UseTransition ∷ Type -> Type -> Type
1724
1825foreign import animatedImpl ∷ ∀ attrs. String -> ReactComponent { | attrs }
1926
20−foreign import animatedComponentImpl ∷ ∀ attrs. ReactComponent { style ∷ CSS | attrs } -> ReactComponent { style ∷ SpringStyles | attrs }
27+foreign import animatedComponentImpl ∷ ∀ attrs. ReactComponent { style ∷ CSS | attrs } -> ReactComponent { style ∷ CSS | attrs }
2128
2229animated ∷
2330 ∀ attrs.
2431 ReactComponent { style ∷ CSS | attrs } ->
2532 ReactComponent
26− { style ∷ SpringStyles
33+ { style ∷ CSS
2734 | attrs
2835 }
2936animated = animatedComponentImpl
@@ -31,6 +38,6 @@ animated = animatedComponentImpl
3138animatedDiv ∷
3239 ∀ attrs attrs_.
3340 Union attrs attrs_ Props_div =>
34− { style ∷ SpringStyles | attrs } ->
41+ { style ∷ CSS | attrs } ->
3542 JSX
3643animatedDiv = element (animatedImpl "div")
components/src/React/Basic/Hooks/Spring.ts+7−2
@@ -1,6 +1,11 @@
1−import { useSpring, animated } from "react-spring";
1+import { useSpring, useTransition, animated } from "react-spring";
22
3−exports.useSpringImpl = useSpring;
3+exports.useSpringImpl = tuple => mkStyles => () => {
4+ const result = useSpring(mkStyles);
5+ return tuple(result[0])(result[1]);
6+};
7+
8+exports.useTransitionImpl = useTransition;
49
510exports.animatedComponentImpl = (name: string) => animated[name];
611
components/src/React/Basic/Hooks/Spring/Stories.purs+30−3
@@ -4,14 +4,16 @@ import Prelude hiding (add)
44import Data.Tuple.Nested ((/\))
55import Debug.Trace (spy)
66import Effect (Effect)
7+import Effect.Unsafe (unsafePerformEffect)
78import Justifill (justifill)
89import React.Basic.DOM (css)
910import React.Basic.DOM as R
1011import React.Basic.Events (handler_)
1112import React.Basic.Helpers (jsx)
12−import React.Basic.Hooks (component, element, fragment, useState)
13+import React.Basic.Hooks (component, element, fragment, useLayoutEffect, useState)
1314import React.Basic.Hooks as React
1415import React.Basic.Hooks.Spring (animated, animatedDiv, useSpring, useSpringImpl)
16+import React.Basic.Hooks.UseGesture (useDrag, withDragProps)
1517import Storybook.Decorator.FullScreen (fullScreenDecorator)
1618import Storybook.React (Storybook, add, add_, addDecorator, storiesOf)
1719import Web.DOM.DOMTokenList (toggle)
@@ -24,17 +26,42 @@ stories = do
2426 storiesOf "Spring" do
2527 add "The Spring" (withDarkTheme mkAnimated)
2628 [ {} ]
29+ add "The Drag" (withDarkTheme mkDragAnimated)
30+ [ {} ]
2731
2832mkAnimated = do
2933 box <- Box.makeComponent
3034 component "Animated Example" \{} -> React.do
3135 toggled /\ modifyToggled <- useState false
32− springStyles <- useSpring (css { marginTop: "200px", transform: "scale3d(" <> if toggled then "0.2, 0.2, 1.0" else "10.0, 10.0, 0.0" <> ")" })
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" <> ")" }
37+ 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" <> ")" }
39+ pure mempty
3340 pure
3441 $ fragment
3542 [ R.button { children: [ R.text "Toggle" ], onClick: handler_ (modifyToggled not) }
3643 , animatedDiv
37− { style: springStyles
44+ { style: css (spy "toni" springStyles)
3845 , children: [ jsx box {} [ R.text "HIIIIIIIIIIIIOOOO" ] ]
3946 }
4047 ]
48+
49+mkDragAnimated = do
50+ box <- Box.makeComponent
51+ component "Animated Example" \{} -> React.do
52+ toggled /\ modifyToggled <- useState false
53+ springStyles /\ set <- useSpring $ const { x: 0.0, y: 0.0 }
54+ mkDragProps <-
55+ useDrag \{ down, movement: mx /\ my } ->
56+ set { x: if down then mx else 0.0, y: if down then my else 0.0 }
57+ pure
58+ $ fragment
59+ [ R.button { children: [ R.text "Toggle" ], onClick: handler_ (modifyToggled not) }
60+ , animatedDiv
61+ ( { style: css springStyles
62+ , children: [ jsx box {} [ R.text "HIIIIIIIIIIIIOOOO" ] ]
63+ }
64+ `withDragProps`
65+ mkDragProps
66+ )
67+ ]
components/src/React/Basic/Hooks/UseGesture.jsnew file+4
@@ -0,0 +1,4 @@
1+"use strict";
2+Object.defineProperty(exports, "__esModule", { value: true });
3+var react_use_gesture_1 = require("react-use-gesture");
4+exports.useDragImpl = react_use_gesture_1.useDrag;
components/src/React/Basic/Hooks/UseGesture.pursnew file+42
@@ -0,0 +1,42 @@
1+module React.Basic.Hooks.UseGesture where
2+
3+import Prelude
4+import Data.Tuple (Tuple)
5+import Effect (Effect)
6+import Effect.Uncurried (EffectFn1, runEffectFn1)
7+import Effect.Unsafe (unsafePerformEffect)
8+import Prim.Row (class Lacks, class Nub)
9+import React.Basic.Events (EventHandler)
10+import React.Basic.Hooks (Hook, unsafeHook)
11+import Record (disjointUnion)
12+
13+foreign import data UseDrag ∷ Type -> Type -> Type
14+
15+type DragHandler
16+ = { down ∷ Boolean, movement ∷ Tuple Number Number } -> Effect Unit
17+
18+type DragHandlerImpl
19+ = { down ∷ Boolean, movement ∷ Tuple Number Number } -> Unit
20+
21+type DragProps
22+ = { onMouseDown ∷ EventHandler, onTouchStart ∷ EventHandler }
23+
24+foreign import useDragImpl ∷ EffectFn1 DragHandlerImpl (Effect DragProps)
25+
26+useDrag ∷ DragHandler -> Hook (UseDrag Unit) (Effect DragProps)
27+useDrag dragHandler = unsafeHook (runEffectFn1 useDragImpl x)
28+ where
29+ x ∷ DragHandlerImpl
30+ x = unsafePerformEffect <<< dragHandler
31+
32+withDragProps ∷
33+ ∀ attrs.
34+ Lacks "onMouseDown" attrs =>
35+ Lacks "onTouchStart" attrs =>
36+ Nub
37+ ( onMouseDown ∷ EventHandler, onTouchStart ∷ EventHandler | attrs )
38+ ( onMouseDown ∷ EventHandler, onTouchStart ∷ EventHandler | attrs ) =>
39+ { | attrs } ->
40+ Effect DragProps ->
41+ { onMouseDown ∷ EventHandler, onTouchStart ∷ EventHandler | attrs }
42+withDragProps x (y ∷ Effect DragProps) = disjointUnion (unsafePerformEffect y) x
components/src/React/Basic/Hooks/UseGesture.tsnew file+3
@@ -0,0 +1,3 @@
1+import { useDrag } from "react-use-gesture";
2+
3+exports.useDragImpl = useDrag;
components/src/Yoga/Modal/Component.purs+1−1
@@ -13,7 +13,7 @@ import React.Basic.DOM.SVG as SVG
1313import React.Basic.Events (EventHandler, handler, handler_)
1414import React.Basic.Extra.Hooks.UseKeyUp (useKeyUp)
1515import React.Basic.Helpers (jsx)
16−import React.Basic.Hooks (ReactComponent, component)
16+import React.Basic.Hooks (ReactComponent, component, useEffect, useMemo, useState)
1717import React.Basic.Hooks as React
1818import Record.Extra (pick)
1919import Yoga.Box.Component as Box
components/src/Yoga/Monaco/Editor.js+8−1
@@ -35,11 +35,18 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
3535 if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
3636 }
3737};
38+var __importStar = (this && this.__importStar) || function (mod) {
39+ if (mod && mod.__esModule) return mod;
40+ var result = {};
41+ if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
42+ result["default"] = mod;
43+ return result;
44+};
3845exports.monacoEditorImpl = function () { return __awaiter(void 0, void 0, void 0, function () {
3946 var x;
4047 return __generator(this, function (_a) {
4148 switch (_a.label) {
42− case 0: return [4 /*yield*/, Promise.resolve().then(function () { return require("react-monaco-editor"); })];
49+ case 0: return [4 /*yield*/, Promise.resolve().then(function () { return __importStar(require("react-monaco-editor")); })];
4350 case 1:
4451 x = _a.sent();
4552 return [2 /*return*/, x.default];
components/src/tsconfig.json+1
@@ -2,6 +2,7 @@
22 "compilerOptions": {
33 "module": "commonjs",
44 "target": "ES5",
5+ "esModuleInterop": true,
56 "sourceMap": false
67 // "noImplicitAny": true
78 }