git.iko.soy/rowtype-yoga/psfp
on master help sign in
Springety spring
093e592Mark Eibes
components/package-lock.json+121−4
compare with master
unifiedsplit
@@ -1312,6 +1312,102 @@
1312 "react-lifecycles-compat": "^3.0.4"
1312 "react-lifecycles-compat": "^3.0.4"
1313 }
1313 }
1314 },
1314 },
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+ },
1315 "@storybook/addons": {
1411 "@storybook/addons": {
1316 "version": "5.3.17",
1412 "version": "5.3.17",
1317 "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-5.3.17.tgz",
1413 "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-5.3.17.tgz",
@@ -11656,12 +11752,18 @@
11656 }
11752 }
11657 },
11753 },
11658 "react-spring": {
11754 "react-spring": {
11659− "version": "8.0.27",
11755+ "version": "9.0.0-beta.34",
11660− "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz",
11756+ "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-9.0.0-beta.34.tgz",
11661− "integrity": "sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==",
11757+ "integrity": "sha512-Ey+Zg/jS2b/uaT6MlvMLnnNZ+N16Gc6r/CAwduC1+jy9UnB/fYnMMflZPemkGVEpZ+T9ef5FvWknw4ytnGl4zw==",
11662 "requires": {
11758 "requires": {
11663 "@babel/runtime": "^7.3.1",
11759 "@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"
11665 }
11767 }
11666 },
11768 },
11667 "react-svg-core": {
11769 "react-svg-core": {
@@ -11712,6 +11814,11 @@
11712 "prop-types": "^15.6.0"
11814 "prop-types": "^15.6.0"
11713 }
11815 }
11714 },
11816 },
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+ },
11715 "read-pkg": {
11822 "read-pkg": {
11716 "version": "3.0.0",
11823 "version": "3.0.0",
11717 "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
11824 "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -13544,6 +13651,11 @@
13544 "dev": true,
13651 "dev": true,
13545 "optional": true
13652 "optional": true
13546 },
13653 },
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+ },
13547 "tiny-warning": {
13659 "tiny-warning": {
13548 "version": "1.0.3",
13660 "version": "1.0.3",
13549 "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
13661 "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
@@ -13950,6 +14062,11 @@
13950 "integrity": "sha512-C3nvxh0ZpaOxs9RCnWwAJ+7bJPwQI8LHF71LzbQ3BvzH5XkdtlkMadqElGevg5bYBDFip4sAnD4m06zAKebg1w==",
14062 "integrity": "sha512-C3nvxh0ZpaOxs9RCnWwAJ+7bJPwQI8LHF71LzbQ3BvzH5XkdtlkMadqElGevg5bYBDFip4sAnD4m06zAKebg1w==",
13951 "dev": true
14063 "dev": true
13952 },
14064 },
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+ },
13953 "use-sidecar": {
14070 "use-sidecar": {
13954 "version": "1.0.2",
14071 "version": "1.0.2",
13955 "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.0.2.tgz",
14072 "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.0.2.tgz",
components/package.json+2−1
@@ -34,7 +34,8 @@
34 "homepage": "https://github.com/i-am-the-slime/psfp#readme",
34 "homepage": "https://github.com/i-am-the-slime/psfp#readme",
35 "dependencies": {
35 "dependencies": {
36 "react-jss": "^10.1.1",
36 "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"
38 },
39 },
39 "devDependencies": {
40 "devDependencies": {
40 "@babel/core": "^7.6.0",
41 "@babel/core": "^7.6.0",
components/src/React/Basic/Hooks/Spring.js+5−1
@@ -1,6 +1,10 @@
1"use strict";
1"use strict";
2Object.defineProperty(exports, "__esModule", { value: true });
2Object.defineProperty(exports, "__esModule", { value: true });
3var react_spring_1 = require("react-spring");
3var react_spring_1 = require("react-spring");
4+exports.useSpringImpl = function (tuple) { return function (styles) { return function () {
4−exports.useSpringImpl = react_spring_1.useSpring;
5+ var result = react_spring_1.useSpring(styles);
6+ return tuple(result[0])(result[1]);
7+}; }; };
8+exports.useTransitionImpl = react_spring_1.useTransition;
5exports.animatedComponentImpl = function (name) { return react_spring_1.animated[name]; };
9exports.animatedComponentImpl = function (name) { return react_spring_1.animated[name]; };
6exports.animatedImpl = react_spring_1.animated;
10exports.animatedImpl = react_spring_1.animated;
components/src/React/Basic/Hooks/Spring.purs+14−7
@@ -1,29 +1,36 @@
1module React.Basic.Hooks.Spring where
1module React.Basic.Hooks.Spring where
2
2
3+import Prelude
4+import Data.Tuple (Tuple(..))
5+import Data.Tuple.Nested (type (/\), (/\))
6+import Effect (Effect)
3import Effect.Uncurried (EffectFn1, runEffectFn1)
7import Effect.Uncurried (EffectFn1, runEffectFn1)
4import Prim.Row (class Union)
8import Prim.Row (class Union)
5import React.Basic (JSX, ReactComponent, element)
9import React.Basic (JSX, ReactComponent, element)
6import React.Basic.DOM (CSS, Props_div)
10import React.Basic.DOM (CSS, Props_div)
7import React.Basic.Hooks (Hook, unsafeHook)
11import React.Basic.Hooks (Hook, unsafeHook)
12+import React.Basic.Hooks as React
8
13
9foreign import data UseSpring ∷ Type -> Type -> Type
14foreign import data UseSpring ∷ Type -> Type -> Type
10
15
11−foreign import data SpringStyles ∷ Type
16+foreign import useSpringImpl ∷ ∀ r props. _ -> (props -> { | r }) -> Effect ({ | r } /\ (EffectFn1 { | r } Unit))
12
17
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))
14
22
15−useSpring ∷ CSS -> Hook (UseSpring CSS) SpringStyles
23+foreign import data UseTransition ∷ Type -> Type -> Type
16−useSpring css' = unsafeHook (runEffectFn1 useSpringImpl css')
17
24
18foreign import animatedImpl ∷ ∀ attrs. String -> ReactComponent { | attrs }
25foreign import animatedImpl ∷ ∀ attrs. String -> ReactComponent { | attrs }
19
26
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 }
21
28
22animated ∷
29animated ∷
23 ∀ attrs.
30 ∀ attrs.
24 ReactComponent { style ∷ CSS | attrs } ->
31 ReactComponent { style ∷ CSS | attrs } ->
25 ReactComponent
32 ReactComponent
26− { style ∷ SpringStyles
33+ { style ∷ CSS
27 | attrs
34 | attrs
28 }
35 }
29animated = animatedComponentImpl
36animated = animatedComponentImpl
@@ -31,6 +38,6 @@ animated = animatedComponentImpl
31animatedDiv ∷
38animatedDiv ∷
32 ∀ attrs attrs_.
39 ∀ attrs attrs_.
33 Union attrs attrs_ Props_div =>
40 Union attrs attrs_ Props_div =>
34− { style ∷ SpringStyles | attrs } ->
41+ { style ∷ CSS | attrs } ->
35 JSX
42 JSX
36animatedDiv = element (animatedImpl "div")
43animatedDiv = 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";
2
2
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;
4
9
5exports.animatedComponentImpl = (name: string) => animated[name];
10exports.animatedComponentImpl = (name: string) => animated[name];
6
11
components/src/React/Basic/Hooks/Spring/Stories.purs+30−3
@@ -4,14 +4,16 @@ import Prelude hiding (add)
4import Data.Tuple.Nested ((/\))
4import Data.Tuple.Nested ((/\))
5import Debug.Trace (spy)
5import Debug.Trace (spy)
6import Effect (Effect)
6import Effect (Effect)
7+import Effect.Unsafe (unsafePerformEffect)
7import Justifill (justifill)
8import Justifill (justifill)
8import React.Basic.DOM (css)
9import React.Basic.DOM (css)
9import React.Basic.DOM as R
10import React.Basic.DOM as R
10import React.Basic.Events (handler_)
11import React.Basic.Events (handler_)
11import React.Basic.Helpers (jsx)
12import React.Basic.Helpers (jsx)
12−import React.Basic.Hooks (component, element, fragment, useState)
13+import React.Basic.Hooks (component, element, fragment, useLayoutEffect, useState)
13import React.Basic.Hooks as React
14import React.Basic.Hooks as React
14import React.Basic.Hooks.Spring (animated, animatedDiv, useSpring, useSpringImpl)
15import React.Basic.Hooks.Spring (animated, animatedDiv, useSpring, useSpringImpl)
16+import React.Basic.Hooks.UseGesture (useDrag, withDragProps)
15import Storybook.Decorator.FullScreen (fullScreenDecorator)
17import Storybook.Decorator.FullScreen (fullScreenDecorator)
16import Storybook.React (Storybook, add, add_, addDecorator, storiesOf)
18import Storybook.React (Storybook, add, add_, addDecorator, storiesOf)
17import Web.DOM.DOMTokenList (toggle)
19import Web.DOM.DOMTokenList (toggle)
@@ -24,17 +26,42 @@ stories = do
24 storiesOf "Spring" do
26 storiesOf "Spring" do
25 add "The Spring" (withDarkTheme mkAnimated)
27 add "The Spring" (withDarkTheme mkAnimated)
26 [ {} ]
28 [ {} ]
29+ add "The Drag" (withDarkTheme mkDragAnimated)
30+ [ {} ]
27
31
28mkAnimated = do
32mkAnimated = do
29 box <- Box.makeComponent
33 box <- Box.makeComponent
30 component "Animated Example" \{} -> React.do
34 component "Animated Example" \{} -> React.do
31 toggled /\ modifyToggled <- useState false
35 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
33 pure
40 pure
34 $ fragment
41 $ fragment
35 [ R.button { children: [ R.text "Toggle" ], onClick: handler_ (modifyToggled not) }
42 [ R.button { children: [ R.text "Toggle" ], onClick: handler_ (modifyToggled not) }
36 , animatedDiv
43 , animatedDiv
37− { style: springStyles
44+ { style: css (spy "toni" springStyles)
38 , children: [ jsx box {} [ R.text "HIIIIIIIIIIIIOOOO" ] ]
45 , children: [ jsx box {} [ R.text "HIIIIIIIIIIIIOOOO" ] ]
39 }
46 }
40 ]
47 ]
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
13import React.Basic.Events (EventHandler, handler, handler_)
13import React.Basic.Events (EventHandler, handler, handler_)
14import React.Basic.Extra.Hooks.UseKeyUp (useKeyUp)
14import React.Basic.Extra.Hooks.UseKeyUp (useKeyUp)
15import React.Basic.Helpers (jsx)
15import React.Basic.Helpers (jsx)
16−import React.Basic.Hooks (ReactComponent, component)
16+import React.Basic.Hooks (ReactComponent, component, useEffect, useMemo, useState)
17import React.Basic.Hooks as React
17import React.Basic.Hooks as React
18import Record.Extra (pick)
18import Record.Extra (pick)
19import Yoga.Box.Component as Box
19import 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) {
35 if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
35 if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
36 }
36 }
37};
37};
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+};
38exports.monacoEditorImpl = function () { return __awaiter(void 0, void 0, void 0, function () {
45exports.monacoEditorImpl = function () { return __awaiter(void 0, void 0, void 0, function () {
39 var x;
46 var x;
40 return __generator(this, function (_a) {
47 return __generator(this, function (_a) {
41 switch (_a.label) {
48 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")); })];
43 case 1:
50 case 1:
44 x = _a.sent();
51 x = _a.sent();
45 return [2 /*return*/, x.default];
52 return [2 /*return*/, x.default];
components/src/tsconfig.json+1
@@ -2,6 +2,7 @@
2 "compilerOptions": {
2 "compilerOptions": {
3 "module": "commonjs",
3 "module": "commonjs",
4 "target": "ES5",
4 "target": "ES5",
5+ "esModuleInterop": true,
5 "sourceMap": false
6 "sourceMap": false
6 // "noImplicitAny": true
7 // "noImplicitAny": true
7 }
8 }