@pie-lib/drag 2.29.1-mui-update.0 → 2.31.0-mui-update.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -48
- package/lib/drag-provider.js +7 -2
- package/lib/drag-provider.js.map +1 -1
- package/lib/draggable-choice.js +11 -12
- package/lib/draggable-choice.js.map +1 -1
- package/lib/placeholder.js +21 -18
- package/lib/placeholder.js.map +1 -1
- package/package.json +4 -4
- package/src/drag-provider.jsx +5 -1
- package/src/draggable-choice.jsx +20 -21
- package/src/placeholder.jsx +20 -17
package/CHANGELOG.md
CHANGED
|
@@ -3,48 +3,24 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
# [2.31.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.30.0-mui-update.0...@pie-lib/drag@2.31.0-mui-update.0) (2025-12-02)
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
### Bug Fixes
|
|
10
10
|
|
|
11
|
-
*
|
|
11
|
+
* drag components ([bea5eaa](https://github.com/pie-framework/pie-lib/commit/bea5eaaa54fc9060ac83bb7d6383b4c9e2491574))
|
|
12
12
|
|
|
13
13
|
|
|
14
|
+
### Features
|
|
14
15
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
# [2.29.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.28.0-mui-update.0...@pie-lib/drag@2.29.0-mui-update.0) (2025-11-20)
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
### Bug Fixes
|
|
21
|
-
|
|
22
|
-
* remove carret, point to specific libs version ([09939a5](https://github.com/pie-framework/pie-lib/commit/09939a5aca19d7dda03d62c93d4d524f98dd69da))
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
# [2.28.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.27.0-mui-update.0...@pie-lib/drag@2.28.0-mui-update.0) (2025-11-20)
|
|
29
|
-
|
|
30
|
-
**Note:** Version bump only for package @pie-lib/drag
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
# [2.27.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.26.0-mui-update.0...@pie-lib/drag@2.27.0-mui-update.0) (2025-11-19)
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
### Bug Fixes
|
|
40
|
-
|
|
41
|
-
* use fixed lib deps ([de7c64d](https://github.com/pie-framework/pie-lib/commit/de7c64d14f13259fe44d47405e4421baef21e24e))
|
|
16
|
+
* add drag provider onDragStart prop ([0879247](https://github.com/pie-framework/pie-lib/commit/087924747b02ceed710e971e8dbe0291071396af))
|
|
17
|
+
* sync latest changes from dev ([c936e9c](https://github.com/pie-framework/pie-lib/commit/c936e9c7f9e095e7d9b9805ac2bf72bd271e05f1))
|
|
42
18
|
|
|
43
19
|
|
|
44
20
|
|
|
45
21
|
|
|
46
22
|
|
|
47
|
-
|
|
23
|
+
## [2.22.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.22.1...@pie-lib/drag@2.22.2) (2025-11-27)
|
|
48
24
|
|
|
49
25
|
**Note:** Version bump only for package @pie-lib/drag
|
|
50
26
|
|
|
@@ -52,7 +28,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
52
28
|
|
|
53
29
|
|
|
54
30
|
|
|
55
|
-
|
|
31
|
+
## [2.22.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.18.2...@pie-lib/drag@2.22.1) (2025-10-22)
|
|
56
32
|
|
|
57
33
|
**Note:** Version bump only for package @pie-lib/drag
|
|
58
34
|
|
|
@@ -60,7 +36,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
60
36
|
|
|
61
37
|
|
|
62
38
|
|
|
63
|
-
# [2.
|
|
39
|
+
# [2.22.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.21.0...@pie-lib/drag@2.22.0) (2025-10-16)
|
|
64
40
|
|
|
65
41
|
**Note:** Version bump only for package @pie-lib/drag
|
|
66
42
|
|
|
@@ -68,7 +44,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
68
44
|
|
|
69
45
|
|
|
70
46
|
|
|
71
|
-
# [2.
|
|
47
|
+
# [2.21.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.18.0...@pie-lib/drag@2.21.0) (2025-10-16)
|
|
72
48
|
|
|
73
49
|
**Note:** Version bump only for package @pie-lib/drag
|
|
74
50
|
|
|
@@ -76,7 +52,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
76
52
|
|
|
77
53
|
|
|
78
54
|
|
|
79
|
-
# [2.
|
|
55
|
+
# [2.20.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.18.0...@pie-lib/drag@2.20.0) (2025-10-16)
|
|
80
56
|
|
|
81
57
|
**Note:** Version bump only for package @pie-lib/drag
|
|
82
58
|
|
|
@@ -84,7 +60,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
84
60
|
|
|
85
61
|
|
|
86
62
|
|
|
87
|
-
# [2.
|
|
63
|
+
# [2.19.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.18.0...@pie-lib/drag@2.19.0) (2025-10-16)
|
|
88
64
|
|
|
89
65
|
**Note:** Version bump only for package @pie-lib/drag
|
|
90
66
|
|
|
@@ -92,19 +68,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
92
68
|
|
|
93
69
|
|
|
94
70
|
|
|
95
|
-
# [2.19.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.18.2...@pie-lib/drag@2.19.0-mui-update.0) (2025-10-31)
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
### Features
|
|
99
|
-
|
|
100
|
-
* drag library update ([fb7a4d0](https://github.com/pie-framework/pie-lib/commit/fb7a4d0ce761f2f4c1a122854cfa306abb8ea7c8))
|
|
101
|
-
* **drag:** update drag package to corresp to material v5 PD-5258 ([7400327](https://github.com/pie-framework/pie-lib/commit/740032735077939f4e05897aaf6b618bfa5b236d))
|
|
102
|
-
* bump react and react-dom ([01dc19e](https://github.com/pie-framework/pie-lib/commit/01dc19e88bbc8d372c561d1511df1a82937d45af))
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
71
|
## [2.18.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.18.1...@pie-lib/drag@2.18.2) (2025-10-14)
|
|
109
72
|
|
|
110
73
|
**Note:** Version bump only for package @pie-lib/drag
|
package/lib/drag-provider.js
CHANGED
|
@@ -14,7 +14,8 @@ var _core = require("@dnd-kit/core");
|
|
|
14
14
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
15
15
|
function DragProvider(_ref) {
|
|
16
16
|
var children = _ref.children,
|
|
17
|
-
onDragEnd = _ref.onDragEnd
|
|
17
|
+
onDragEnd = _ref.onDragEnd,
|
|
18
|
+
onDragStart = _ref.onDragStart;
|
|
18
19
|
var _useState = (0, _react.useState)(null),
|
|
19
20
|
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
20
21
|
activeId = _useState2[0],
|
|
@@ -26,6 +27,9 @@ function DragProvider(_ref) {
|
|
|
26
27
|
}), (0, _core.useSensor)(_core.KeyboardSensor));
|
|
27
28
|
var handleDragStart = function handleDragStart(event) {
|
|
28
29
|
setActiveId(event.active.id);
|
|
30
|
+
if (onDragStart) {
|
|
31
|
+
onDragStart(event);
|
|
32
|
+
}
|
|
29
33
|
};
|
|
30
34
|
var handleDragEnd = function handleDragEnd(event) {
|
|
31
35
|
setActiveId(null);
|
|
@@ -41,7 +45,8 @@ function DragProvider(_ref) {
|
|
|
41
45
|
}
|
|
42
46
|
DragProvider.propTypes = {
|
|
43
47
|
children: _propTypes["default"].node.isRequired,
|
|
44
|
-
onDragEnd: _propTypes["default"].func
|
|
48
|
+
onDragEnd: _propTypes["default"].func,
|
|
49
|
+
onDragStart: _propTypes["default"].func
|
|
45
50
|
};
|
|
46
51
|
var _default = exports["default"] = DragProvider;
|
|
47
52
|
//# sourceMappingURL=drag-provider.js.map
|
package/lib/drag-provider.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drag-provider.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_core","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DragProvider","_ref","children","onDragEnd","_useState","useState","_useState2","_slicedToArray2","activeId","setActiveId","sensors","useSensors","useSensor","PointerSensor","activationConstraint","distance","KeyboardSensor","handleDragStart","event","active","id","handleDragEnd","createElement","DndContext","
|
|
1
|
+
{"version":3,"file":"drag-provider.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_core","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DragProvider","_ref","children","onDragEnd","onDragStart","_useState","useState","_useState2","_slicedToArray2","activeId","setActiveId","sensors","useSensors","useSensor","PointerSensor","activationConstraint","distance","KeyboardSensor","handleDragStart","event","active","id","handleDragEnd","createElement","DndContext","propTypes","PropTypes","node","isRequired","func","_default","exports"],"sources":["../src/drag-provider.jsx"],"sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { DndContext, PointerSensor, KeyboardSensor, useSensor, useSensors } from '@dnd-kit/core';\n\nexport function DragProvider({ children, onDragEnd, onDragStart }) {\n const [activeId, setActiveId] = useState(null);\n \n const sensors = useSensors(\n useSensor(PointerSensor, { activationConstraint: { distance: 8 }}),\n useSensor(KeyboardSensor)\n );\n\n const handleDragStart = (event) => {\n setActiveId(event.active.id);\n if (onDragStart) {\n onDragStart(event);\n }\n };\n\n const handleDragEnd = (event) => {\n setActiveId(null);\n if (onDragEnd) {\n onDragEnd(event);\n }\n };\n\n return (\n <DndContext \n sensors={sensors} \n onDragStart={handleDragStart}\n onDragEnd={handleDragEnd}\n >\n {children}\n </DndContext>\n );\n}\n\nDragProvider.propTypes = {\n children: PropTypes.node.isRequired,\n onDragEnd: PropTypes.func,\n onDragStart: PropTypes.func,\n};\n\nexport default DragProvider;"],"mappings":";;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AAAiG,SAAAD,wBAAAK,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAP,uBAAA,YAAAA,wBAAAK,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,mBAAAT,CAAA,iBAAAA,CAAA,gBAAAU,OAAA,CAAAV,CAAA,0BAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,cAAAM,EAAA,IAAAd,CAAA,gBAAAc,EAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,EAAA,OAAAP,CAAA,IAAAD,CAAA,GAAAW,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAnB,CAAA,EAAAc,EAAA,OAAAP,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAM,EAAA,EAAAP,CAAA,IAAAC,CAAA,CAAAM,EAAA,IAAAd,CAAA,CAAAc,EAAA,WAAAN,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAE1F,SAASmB,YAAYA,CAAAC,IAAA,EAAuC;EAAA,IAApCC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAEC,SAAS,GAAAF,IAAA,CAATE,SAAS;IAAEC,WAAW,GAAAH,IAAA,CAAXG,WAAW;EAC7D,IAAAC,SAAA,GAAgC,IAAAC,eAAQ,EAAC,IAAI,CAAC;IAAAC,UAAA,OAAAC,eAAA,aAAAH,SAAA;IAAvCI,QAAQ,GAAAF,UAAA;IAAEG,WAAW,GAAAH,UAAA;EAE5B,IAAMI,OAAO,GAAG,IAAAC,gBAAU,EACxB,IAAAC,eAAS,EAACC,mBAAa,EAAE;IAAEC,oBAAoB,EAAE;MAAEC,QAAQ,EAAE;IAAE;EAAC,CAAC,CAAC,EAClE,IAAAH,eAAS,EAACI,oBAAc,CAC1B,CAAC;EAED,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,KAAK,EAAK;IACjCT,WAAW,CAACS,KAAK,CAACC,MAAM,CAACC,EAAE,CAAC;IAC5B,IAAIjB,WAAW,EAAE;MACfA,WAAW,CAACe,KAAK,CAAC;IACpB;EACF,CAAC;EAED,IAAMG,aAAa,GAAG,SAAhBA,aAAaA,CAAIH,KAAK,EAAK;IAC/BT,WAAW,CAAC,IAAI,CAAC;IACjB,IAAIP,SAAS,EAAE;MACbA,SAAS,CAACgB,KAAK,CAAC;IAClB;EACF,CAAC;EAED,oBACE7C,MAAA,YAAAiD,aAAA,CAAC5C,KAAA,CAAA6C,UAAU;IACTb,OAAO,EAAEA,OAAQ;IACjBP,WAAW,EAAEc,eAAgB;IAC7Bf,SAAS,EAAEmB;EAAc,GAExBpB,QACS,CAAC;AAEjB;AAEAF,YAAY,CAACyB,SAAS,GAAG;EACvBvB,QAAQ,EAAEwB,qBAAS,CAACC,IAAI,CAACC,UAAU;EACnCzB,SAAS,EAAEuB,qBAAS,CAACG,IAAI;EACzBzB,WAAW,EAAEsB,qBAAS,CAACG;AACzB,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,cAEa/B,YAAY","ignoreList":[]}
|
package/lib/draggable-choice.js
CHANGED
|
@@ -12,12 +12,10 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
12
12
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
13
|
var _styles = require("@mui/material/styles");
|
|
14
14
|
var _core = require("@dnd-kit/core");
|
|
15
|
-
var _utilities = require("@dnd-kit/utilities");
|
|
16
15
|
var _colors = require("@mui/material/colors");
|
|
17
16
|
var DRAG_TYPE = exports.DRAG_TYPE = 'CHOICE';
|
|
18
17
|
var StyledChoice = (0, _styles.styled)('div')(function (_ref) {
|
|
19
|
-
var theme = _ref.theme
|
|
20
|
-
isDragging = _ref.isDragging;
|
|
18
|
+
var theme = _ref.theme;
|
|
21
19
|
return {
|
|
22
20
|
backgroundColor: theme.palette.background.paper,
|
|
23
21
|
border: "solid 1px ".concat(_colors.grey[400]),
|
|
@@ -26,7 +24,6 @@ var StyledChoice = (0, _styles.styled)('div')(function (_ref) {
|
|
|
26
24
|
minWidth: theme.spacing(20),
|
|
27
25
|
maxWidth: theme.spacing(75),
|
|
28
26
|
cursor: 'grab',
|
|
29
|
-
opacity: isDragging ? 0.5 : 1,
|
|
30
27
|
'&:active': {
|
|
31
28
|
cursor: 'grabbing'
|
|
32
29
|
}
|
|
@@ -40,30 +37,31 @@ function DraggableChoice(_ref2) {
|
|
|
40
37
|
category = _ref2.category,
|
|
41
38
|
alternateResponseIndex = _ref2.alternateResponseIndex,
|
|
42
39
|
choiceIndex = _ref2.choiceIndex,
|
|
43
|
-
onRemoveChoice = _ref2.onRemoveChoice
|
|
40
|
+
onRemoveChoice = _ref2.onRemoveChoice,
|
|
41
|
+
type = _ref2.type;
|
|
44
42
|
var _useDraggable = (0, _core.useDraggable)({
|
|
45
43
|
id: choice.id,
|
|
46
44
|
disabled: disabled,
|
|
45
|
+
categoryId: category === null || category === void 0 ? void 0 : category.id,
|
|
46
|
+
alternateResponseIndex: alternateResponseIndex,
|
|
47
47
|
data: {
|
|
48
|
+
id: choice.id,
|
|
48
49
|
value: choice.value,
|
|
49
50
|
choiceId: choice.id,
|
|
50
51
|
from: category === null || category === void 0 ? void 0 : category.id,
|
|
52
|
+
categoryId: category === null || category === void 0 ? void 0 : category.id,
|
|
51
53
|
alternateResponseIndex: alternateResponseIndex,
|
|
52
54
|
choiceIndex: choiceIndex,
|
|
53
|
-
onRemoveChoice: onRemoveChoice
|
|
55
|
+
onRemoveChoice: onRemoveChoice,
|
|
56
|
+
type: type
|
|
54
57
|
}
|
|
55
58
|
}),
|
|
56
59
|
attributes = _useDraggable.attributes,
|
|
57
60
|
listeners = _useDraggable.listeners,
|
|
58
61
|
setNodeRef = _useDraggable.setNodeRef,
|
|
59
|
-
transform = _useDraggable.transform,
|
|
60
62
|
isDragging = _useDraggable.isDragging;
|
|
61
|
-
var style = {
|
|
62
|
-
transform: _utilities.CSS.Translate.toString(transform)
|
|
63
|
-
};
|
|
64
63
|
return /*#__PURE__*/_react["default"].createElement(StyledChoice, (0, _extends2["default"])({
|
|
65
64
|
ref: setNodeRef,
|
|
66
|
-
style: style,
|
|
67
65
|
className: className,
|
|
68
66
|
isDragging: isDragging
|
|
69
67
|
}, attributes, listeners), children);
|
|
@@ -81,7 +79,8 @@ DraggableChoice.propTypes = {
|
|
|
81
79
|
}),
|
|
82
80
|
alternateResponseIndex: _propTypes["default"].number,
|
|
83
81
|
choiceIndex: _propTypes["default"].number,
|
|
84
|
-
onRemoveChoice: _propTypes["default"].func
|
|
82
|
+
onRemoveChoice: _propTypes["default"].func,
|
|
83
|
+
type: _propTypes["default"].string
|
|
85
84
|
};
|
|
86
85
|
var _default = exports["default"] = DraggableChoice;
|
|
87
86
|
//# sourceMappingURL=draggable-choice.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"draggable-choice.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_core","
|
|
1
|
+
{"version":3,"file":"draggable-choice.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_core","_colors","DRAG_TYPE","exports","StyledChoice","styled","_ref","theme","backgroundColor","palette","background","paper","border","concat","grey","padding","spacing","minHeight","minWidth","maxWidth","cursor","DraggableChoice","_ref2","choice","children","className","disabled","category","alternateResponseIndex","choiceIndex","onRemoveChoice","type","_useDraggable","useDraggable","id","categoryId","data","value","choiceId","from","attributes","listeners","setNodeRef","isDragging","createElement","_extends2","ref","propTypes","PropTypes","shape","oneOfType","string","number","isRequired","any","arrayOf","node","bool","func","_default"],"sources":["../src/draggable-choice.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport { useDraggable } from '@dnd-kit/core';\nimport { grey } from '@mui/material/colors';\n\nexport const DRAG_TYPE = 'CHOICE';\n\nconst StyledChoice = styled('div')(({ theme }) => ({\n backgroundColor: theme.palette.background.paper,\n border: `solid 1px ${grey[400]}`,\n padding: theme.spacing(1),\n minHeight: '30px',\n minWidth: theme.spacing(20),\n maxWidth: theme.spacing(75),\n cursor: 'grab',\n '&:active': {\n cursor: 'grabbing',\n },\n}));\n\nexport function DraggableChoice({\n choice,\n children,\n className,\n disabled,\n category,\n alternateResponseIndex,\n choiceIndex,\n onRemoveChoice,\n type,\n}) {\n const {\n attributes,\n listeners,\n setNodeRef,\n isDragging\n } = useDraggable({\n id: choice.id,\n disabled: disabled,\n categoryId: category?.id,\n alternateResponseIndex,\n data: {\n id: choice.id,\n value: choice.value,\n choiceId: choice.id,\n from: category?.id,\n categoryId: category?.id,\n alternateResponseIndex,\n choiceIndex,\n onRemoveChoice,\n type\n }\n });\n\n return (\n <StyledChoice\n ref={setNodeRef}\n className={className}\n isDragging={isDragging}\n {...attributes}\n {...listeners}\n >\n {children}\n </StyledChoice>\n );\n}\n\nDraggableChoice.propTypes = {\n choice: PropTypes.shape({\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n value: PropTypes.any,\n }).isRequired,\n children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),\n className: PropTypes.string,\n disabled: PropTypes.bool,\n category: PropTypes.shape({\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n }),\n alternateResponseIndex: PropTypes.number,\n choiceIndex: PropTypes.number,\n onRemoveChoice: PropTypes.func,\n type: PropTypes.string,\n};\n\nexport default DraggableChoice;\n"],"mappings":"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","ignoreList":[]}
|
package/lib/placeholder.js
CHANGED
|
@@ -17,22 +17,24 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
17
17
|
var StyledPlaceholder = (0, _styles.styled)('div')(function (_ref) {
|
|
18
18
|
var theme = _ref.theme;
|
|
19
19
|
return {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
20
|
+
'&.placeholder': {
|
|
21
|
+
WebkitTouchCallout: 'none',
|
|
22
|
+
WebkitUserSelect: 'none',
|
|
23
|
+
KhtmlUserSelect: 'none',
|
|
24
|
+
MozUserSelect: 'none',
|
|
25
|
+
MsUserSelect: 'none',
|
|
26
|
+
userSelect: 'none',
|
|
27
|
+
width: '100%',
|
|
28
|
+
height: '100%',
|
|
29
|
+
background: _renderUi.color.white(),
|
|
30
|
+
transition: 'background-color 200ms linear, border-color 200ms linear',
|
|
31
|
+
boxSizing: 'border-box',
|
|
32
|
+
display: 'grid',
|
|
33
|
+
gridRowGap: "".concat(theme.spacing(1), "px"),
|
|
34
|
+
gridColumnGap: "".concat(theme.spacing(1), "px"),
|
|
35
|
+
padding: theme.spacing(1),
|
|
36
|
+
border: "2px dashed ".concat(_renderUi.color.black())
|
|
37
|
+
},
|
|
36
38
|
'&.disabled': {
|
|
37
39
|
boxShadow: 'none',
|
|
38
40
|
background: theme.palette.background.paper
|
|
@@ -79,7 +81,8 @@ var PlaceHolder = exports.PlaceHolder = function PlaceHolder(props) {
|
|
|
79
81
|
choiceBoard = props.choiceBoard,
|
|
80
82
|
isCategorize = props.isCategorize,
|
|
81
83
|
isVerticalPool = props.isVerticalPool,
|
|
82
|
-
minHeight = props.minHeight
|
|
84
|
+
minHeight = props.minHeight,
|
|
85
|
+
extraStyles = props.extraStyles;
|
|
83
86
|
var names = (0, _classnames["default"])('placeholder', disabled && 'disabled', isOver && 'over', type, className);
|
|
84
87
|
var style = {};
|
|
85
88
|
if (grid && grid.columns) {
|
|
@@ -102,7 +105,7 @@ var PlaceHolder = exports.PlaceHolder = function PlaceHolder(props) {
|
|
|
102
105
|
return /*#__PURE__*/_react["default"].createElement(StyledPlaceholder, {
|
|
103
106
|
style: _objectSpread(_objectSpread({}, style), {}, {
|
|
104
107
|
minHeight: minHeight
|
|
105
|
-
}),
|
|
108
|
+
}, extraStyles),
|
|
106
109
|
className: (0, _classnames["default"])(choiceBoard ? boardStyle : names, isVerticalPool && 'verticalPool')
|
|
107
110
|
}, children);
|
|
108
111
|
};
|
package/lib/placeholder.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"placeholder.js","names":["_react","_interopRequireDefault","require","_styles","_classnames","_propTypes","_renderUi","_colors","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","StyledPlaceholder","styled","_ref","theme","WebkitTouchCallout","WebkitUserSelect","KhtmlUserSelect","MozUserSelect","MsUserSelect","userSelect","width","height","background","color","white","transition","boxSizing","display","gridRowGap","concat","spacing","gridColumnGap","padding","border","black","boxShadow","palette","paper","grey","backgroundColor","flexWrap","alignItems","minHeight","justifyContent","overflow","touchAction","backgroundDark","flexFlow","PlaceHolder","exports","props","children","className","isOver","type","grid","disabled","choiceBoard","isCategorize","isVerticalPool","names","classNames","style","columns","gridTemplateColumns","rows","repeatValue","rowsRepeatValue","gridTemplateRows","borderLight","boardStyle","createElement","propTypes","PropTypes","bool","shape","number","string","oneOfType","arrayOf","node","isRequired","index","_default"],"sources":["../src/placeholder.jsx"],"sourcesContent":["import React from 'react';\nimport { styled } from '@mui/material/styles';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport { color } from '@pie-lib/render-ui';\nimport { grey } from '@mui/material/colors';\n\nconst StyledPlaceholder = styled('div')(({ theme }) => ({\n WebkitTouchCallout: 'none',\n
|
|
1
|
+
{"version":3,"file":"placeholder.js","names":["_react","_interopRequireDefault","require","_styles","_classnames","_propTypes","_renderUi","_colors","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","StyledPlaceholder","styled","_ref","theme","WebkitTouchCallout","WebkitUserSelect","KhtmlUserSelect","MozUserSelect","MsUserSelect","userSelect","width","height","background","color","white","transition","boxSizing","display","gridRowGap","concat","spacing","gridColumnGap","padding","border","black","boxShadow","palette","paper","grey","backgroundColor","flexWrap","alignItems","minHeight","justifyContent","overflow","touchAction","backgroundDark","flexFlow","PlaceHolder","exports","props","children","className","isOver","type","grid","disabled","choiceBoard","isCategorize","isVerticalPool","extraStyles","names","classNames","style","columns","gridTemplateColumns","rows","repeatValue","rowsRepeatValue","gridTemplateRows","borderLight","boardStyle","createElement","propTypes","PropTypes","bool","shape","number","string","oneOfType","arrayOf","node","isRequired","index","_default"],"sources":["../src/placeholder.jsx"],"sourcesContent":["import React from 'react';\nimport { styled } from '@mui/material/styles';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport { color } from '@pie-lib/render-ui';\nimport { grey } from '@mui/material/colors';\n\nconst StyledPlaceholder = styled('div')(({ theme }) => ({\n '&.placeholder': {\n WebkitTouchCallout: 'none',\n WebkitUserSelect: 'none',\n KhtmlUserSelect: 'none',\n MozUserSelect: 'none',\n MsUserSelect: 'none',\n userSelect: 'none',\n width: '100%',\n height: '100%',\n background: color.white(),\n transition: 'background-color 200ms linear, border-color 200ms linear',\n boxSizing: 'border-box',\n display: 'grid',\n gridRowGap: `${theme.spacing(1)}px`,\n gridColumnGap: `${theme.spacing(1)}px`,\n padding: theme.spacing(1),\n border: `2px dashed ${color.black()}`,\n },\n '&.disabled': {\n boxShadow: 'none',\n background: theme.palette.background.paper,\n },\n '&.over': {\n border: `1px solid ${grey[500]}`,\n backgroundColor: `${grey[300]}`,\n },\n '&.board': {\n padding: theme.spacing(1),\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'center',\n minHeight: '100px',\n justifyContent: 'center',\n overflow: 'hidden',\n touchAction: 'none',\n backgroundColor: color.backgroundDark(),\n },\n '&.categorizeBoard': {\n padding: theme.spacing(0.5),\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'center',\n minHeight: '100px',\n justifyContent: 'center',\n overflow: 'hidden',\n touchAction: 'none',\n backgroundColor: color.backgroundDark(),\n },\n '&.verticalPool': {\n display: 'flex',\n flexFlow: 'column wrap',\n },\n}));\n\nexport const PlaceHolder = (props) => {\n const {\n children,\n className,\n isOver,\n type,\n grid,\n disabled,\n choiceBoard,\n isCategorize,\n isVerticalPool,\n minHeight,\n extraStyles\n } = props;\n\n const names = classNames(\n 'placeholder',\n disabled && 'disabled',\n isOver && 'over',\n type,\n className,\n );\n\n const style = {};\n\n if (grid && grid.columns) {\n style.gridTemplateColumns = `repeat(${grid.columns}, 1fr)`;\n }\n\n if (grid && grid.rows) {\n const repeatValue = grid.rowsRepeatValue || '1fr';\n\n style.gridTemplateRows = `repeat(${grid.rows}, ${repeatValue})`;\n }\n\n // The \"type\" is only sent through placement-ordering / placeholder\n // It can be \"choice\" or \"target\"\n // We apply a different style for the \"choice\" type\n // For any other type, use a dashed black border and a white fill\n if (type === 'choice') {\n style.border = `1px solid ${color.borderLight()}`;\n style.background = color.backgroundDark();\n }\n\n const boardStyle = isCategorize ? 'categorizeBoard' : 'board';\n\n return (\n <StyledPlaceholder\n style={{ ...style, minHeight: minHeight, ...extraStyles }}\n className={classNames(\n choiceBoard ? boardStyle : names,\n isVerticalPool && 'verticalPool',\n )}\n >\n {children}\n </StyledPlaceholder>\n );\n};\n\nPlaceHolder.propTypes = {\n choiceBoard: PropTypes.bool,\n grid: PropTypes.shape({\n columns: PropTypes.number,\n rows: PropTypes.number,\n // if a different value then 1fr is wanted\n rowsRepeatValue: PropTypes.string,\n }),\n children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n className: PropTypes.string,\n isOver: PropTypes.bool,\n index: PropTypes.number,\n type: PropTypes.string,\n disabled: PropTypes.bool,\n isCategorize: PropTypes.bool,\n isVerticalPool: PropTypes.bool,\n minHeight: PropTypes.number,\n};\n\nexport default PlaceHolder;\n"],"mappings":"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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pie-lib/drag",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.31.0-mui-update.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "src/index.js",
|
|
@@ -12,8 +12,8 @@
|
|
|
12
12
|
"@emotion/style": "^0.8.0",
|
|
13
13
|
"@mui/icons-material": "^7.3.4",
|
|
14
14
|
"@mui/material": "^7.3.4",
|
|
15
|
-
"@pie-lib/math-rendering": "3.
|
|
16
|
-
"@pie-lib/render-ui": "4.
|
|
15
|
+
"@pie-lib/math-rendering": "3.35.0-mui-update.0",
|
|
16
|
+
"@pie-lib/render-ui": "4.44.0-mui-update.0",
|
|
17
17
|
"classnames": "^2.2.6",
|
|
18
18
|
"lodash": "^4.17.11",
|
|
19
19
|
"prop-types": "^15.7.2",
|
|
@@ -25,5 +25,5 @@
|
|
|
25
25
|
"scripts": {},
|
|
26
26
|
"author": "",
|
|
27
27
|
"license": "ISC",
|
|
28
|
-
"gitHead": "
|
|
28
|
+
"gitHead": "23a7cb8864b947778ac7e6dffdc6fa4a74af5927"
|
|
29
29
|
}
|
package/src/drag-provider.jsx
CHANGED
|
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
|
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import { DndContext, PointerSensor, KeyboardSensor, useSensor, useSensors } from '@dnd-kit/core';
|
|
4
4
|
|
|
5
|
-
export function DragProvider({ children, onDragEnd }) {
|
|
5
|
+
export function DragProvider({ children, onDragEnd, onDragStart }) {
|
|
6
6
|
const [activeId, setActiveId] = useState(null);
|
|
7
7
|
|
|
8
8
|
const sensors = useSensors(
|
|
@@ -12,6 +12,9 @@ export function DragProvider({ children, onDragEnd }) {
|
|
|
12
12
|
|
|
13
13
|
const handleDragStart = (event) => {
|
|
14
14
|
setActiveId(event.active.id);
|
|
15
|
+
if (onDragStart) {
|
|
16
|
+
onDragStart(event);
|
|
17
|
+
}
|
|
15
18
|
};
|
|
16
19
|
|
|
17
20
|
const handleDragEnd = (event) => {
|
|
@@ -35,6 +38,7 @@ export function DragProvider({ children, onDragEnd }) {
|
|
|
35
38
|
DragProvider.propTypes = {
|
|
36
39
|
children: PropTypes.node.isRequired,
|
|
37
40
|
onDragEnd: PropTypes.func,
|
|
41
|
+
onDragStart: PropTypes.func,
|
|
38
42
|
};
|
|
39
43
|
|
|
40
44
|
export default DragProvider;
|
package/src/draggable-choice.jsx
CHANGED
|
@@ -2,12 +2,11 @@ import React from 'react';
|
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import { styled } from '@mui/material/styles';
|
|
4
4
|
import { useDraggable } from '@dnd-kit/core';
|
|
5
|
-
import { CSS } from '@dnd-kit/utilities';
|
|
6
5
|
import { grey } from '@mui/material/colors';
|
|
7
6
|
|
|
8
7
|
export const DRAG_TYPE = 'CHOICE';
|
|
9
8
|
|
|
10
|
-
const StyledChoice = styled('div')(({ theme
|
|
9
|
+
const StyledChoice = styled('div')(({ theme }) => ({
|
|
11
10
|
backgroundColor: theme.palette.background.paper,
|
|
12
11
|
border: `solid 1px ${grey[400]}`,
|
|
13
12
|
padding: theme.spacing(1),
|
|
@@ -15,49 +14,48 @@ const StyledChoice = styled('div')(({ theme, isDragging }) => ({
|
|
|
15
14
|
minWidth: theme.spacing(20),
|
|
16
15
|
maxWidth: theme.spacing(75),
|
|
17
16
|
cursor: 'grab',
|
|
18
|
-
opacity: isDragging ? 0.5 : 1,
|
|
19
17
|
'&:active': {
|
|
20
18
|
cursor: 'grabbing',
|
|
21
19
|
},
|
|
22
20
|
}));
|
|
23
21
|
|
|
24
|
-
export function DraggableChoice({
|
|
25
|
-
choice,
|
|
26
|
-
children,
|
|
22
|
+
export function DraggableChoice({
|
|
23
|
+
choice,
|
|
24
|
+
children,
|
|
27
25
|
className,
|
|
28
26
|
disabled,
|
|
29
27
|
category,
|
|
30
28
|
alternateResponseIndex,
|
|
31
29
|
choiceIndex,
|
|
32
|
-
onRemoveChoice
|
|
30
|
+
onRemoveChoice,
|
|
31
|
+
type,
|
|
33
32
|
}) {
|
|
34
|
-
const {
|
|
35
|
-
attributes,
|
|
36
|
-
listeners,
|
|
37
|
-
setNodeRef,
|
|
38
|
-
|
|
39
|
-
isDragging
|
|
33
|
+
const {
|
|
34
|
+
attributes,
|
|
35
|
+
listeners,
|
|
36
|
+
setNodeRef,
|
|
37
|
+
isDragging
|
|
40
38
|
} = useDraggable({
|
|
41
39
|
id: choice.id,
|
|
42
40
|
disabled: disabled,
|
|
43
|
-
|
|
41
|
+
categoryId: category?.id,
|
|
42
|
+
alternateResponseIndex,
|
|
43
|
+
data: {
|
|
44
|
+
id: choice.id,
|
|
44
45
|
value: choice.value,
|
|
45
46
|
choiceId: choice.id,
|
|
46
47
|
from: category?.id,
|
|
48
|
+
categoryId: category?.id,
|
|
47
49
|
alternateResponseIndex,
|
|
48
50
|
choiceIndex,
|
|
49
|
-
onRemoveChoice
|
|
51
|
+
onRemoveChoice,
|
|
52
|
+
type
|
|
50
53
|
}
|
|
51
54
|
});
|
|
52
55
|
|
|
53
|
-
const style = {
|
|
54
|
-
transform: CSS.Translate.toString(transform),
|
|
55
|
-
};
|
|
56
|
-
|
|
57
56
|
return (
|
|
58
|
-
<StyledChoice
|
|
57
|
+
<StyledChoice
|
|
59
58
|
ref={setNodeRef}
|
|
60
|
-
style={style}
|
|
61
59
|
className={className}
|
|
62
60
|
isDragging={isDragging}
|
|
63
61
|
{...attributes}
|
|
@@ -82,6 +80,7 @@ DraggableChoice.propTypes = {
|
|
|
82
80
|
alternateResponseIndex: PropTypes.number,
|
|
83
81
|
choiceIndex: PropTypes.number,
|
|
84
82
|
onRemoveChoice: PropTypes.func,
|
|
83
|
+
type: PropTypes.string,
|
|
85
84
|
};
|
|
86
85
|
|
|
87
86
|
export default DraggableChoice;
|
package/src/placeholder.jsx
CHANGED
|
@@ -6,22 +6,24 @@ import { color } from '@pie-lib/render-ui';
|
|
|
6
6
|
import { grey } from '@mui/material/colors';
|
|
7
7
|
|
|
8
8
|
const StyledPlaceholder = styled('div')(({ theme }) => ({
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
9
|
+
'&.placeholder': {
|
|
10
|
+
WebkitTouchCallout: 'none',
|
|
11
|
+
WebkitUserSelect: 'none',
|
|
12
|
+
KhtmlUserSelect: 'none',
|
|
13
|
+
MozUserSelect: 'none',
|
|
14
|
+
MsUserSelect: 'none',
|
|
15
|
+
userSelect: 'none',
|
|
16
|
+
width: '100%',
|
|
17
|
+
height: '100%',
|
|
18
|
+
background: color.white(),
|
|
19
|
+
transition: 'background-color 200ms linear, border-color 200ms linear',
|
|
20
|
+
boxSizing: 'border-box',
|
|
21
|
+
display: 'grid',
|
|
22
|
+
gridRowGap: `${theme.spacing(1)}px`,
|
|
23
|
+
gridColumnGap: `${theme.spacing(1)}px`,
|
|
24
|
+
padding: theme.spacing(1),
|
|
25
|
+
border: `2px dashed ${color.black()}`,
|
|
26
|
+
},
|
|
25
27
|
'&.disabled': {
|
|
26
28
|
boxShadow: 'none',
|
|
27
29
|
background: theme.palette.background.paper,
|
|
@@ -70,6 +72,7 @@ export const PlaceHolder = (props) => {
|
|
|
70
72
|
isCategorize,
|
|
71
73
|
isVerticalPool,
|
|
72
74
|
minHeight,
|
|
75
|
+
extraStyles
|
|
73
76
|
} = props;
|
|
74
77
|
|
|
75
78
|
const names = classNames(
|
|
@@ -105,7 +108,7 @@ export const PlaceHolder = (props) => {
|
|
|
105
108
|
|
|
106
109
|
return (
|
|
107
110
|
<StyledPlaceholder
|
|
108
|
-
style={{ ...style, minHeight: minHeight }}
|
|
111
|
+
style={{ ...style, minHeight: minHeight, ...extraStyles }}
|
|
109
112
|
className={classNames(
|
|
110
113
|
choiceBoard ? boardStyle : names,
|
|
111
114
|
isVerticalPool && 'verticalPool',
|