@pie-lib/drag 2.30.0-mui-update.0 → 2.32.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 +15 -51
- package/lib/drag-in-the-blank-dp.js +39 -12
- package/lib/drag-in-the-blank-dp.js.map +1 -1
- package/lib/drag-provider.js +14 -3
- 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/ica-dp.js +2 -14
- package/lib/ica-dp.js.map +1 -1
- package/package.json +4 -4
- package/src/drag-in-the-blank-dp.jsx +44 -15
- package/src/drag-provider.jsx +9 -1
- package/src/draggable-choice.jsx +20 -21
- package/src/ica-dp.jsx +3 -24
package/CHANGELOG.md
CHANGED
|
@@ -3,59 +3,36 @@
|
|
|
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
|
-
# [2.
|
|
6
|
+
# [2.32.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.31.0-mui-update.0...@pie-lib/drag@2.32.0-mui-update.0) (2025-12-11)
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
###
|
|
10
|
-
|
|
11
|
-
* placehoder styles in drag ([431adbe](https://github.com/pie-framework/pie-lib/commit/431adbe6c020f32615910885dee5d4bd5efbe76a))
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
## [2.29.1-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.29.0-mui-update.0...@pie-lib/drag@2.29.1-mui-update.0) (2025-11-20)
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
### Bug Fixes
|
|
9
|
+
### Features
|
|
21
10
|
|
|
22
|
-
*
|
|
11
|
+
* drag changes for ditb ([fc79ecd](https://github.com/pie-framework/pie-lib/commit/fc79ecdacb5693f1b5dcf19c7114f9cd4bed83ba))
|
|
12
|
+
* updates for drag-in-the-blank ([0c096d8](https://github.com/pie-framework/pie-lib/commit/0c096d887f97edecd2dac68cda136b2d265dc7d5))
|
|
23
13
|
|
|
24
14
|
|
|
25
15
|
|
|
26
16
|
|
|
27
17
|
|
|
28
|
-
# [2.
|
|
18
|
+
# [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)
|
|
29
19
|
|
|
30
20
|
|
|
31
21
|
### Bug Fixes
|
|
32
22
|
|
|
33
|
-
*
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
# [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)
|
|
40
|
-
|
|
41
|
-
**Note:** Version bump only for package @pie-lib/drag
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
23
|
+
* drag components ([bea5eaa](https://github.com/pie-framework/pie-lib/commit/bea5eaaa54fc9060ac83bb7d6383b4c9e2491574))
|
|
46
24
|
|
|
47
|
-
# [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)
|
|
48
25
|
|
|
26
|
+
### Features
|
|
49
27
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
* use fixed lib deps ([de7c64d](https://github.com/pie-framework/pie-lib/commit/de7c64d14f13259fe44d47405e4421baef21e24e))
|
|
28
|
+
* add drag provider onDragStart prop ([0879247](https://github.com/pie-framework/pie-lib/commit/087924747b02ceed710e971e8dbe0291071396af))
|
|
29
|
+
* sync latest changes from dev ([c936e9c](https://github.com/pie-framework/pie-lib/commit/c936e9c7f9e095e7d9b9805ac2bf72bd271e05f1))
|
|
53
30
|
|
|
54
31
|
|
|
55
32
|
|
|
56
33
|
|
|
57
34
|
|
|
58
|
-
|
|
35
|
+
## [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)
|
|
59
36
|
|
|
60
37
|
**Note:** Version bump only for package @pie-lib/drag
|
|
61
38
|
|
|
@@ -63,7 +40,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
63
40
|
|
|
64
41
|
|
|
65
42
|
|
|
66
|
-
|
|
43
|
+
## [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)
|
|
67
44
|
|
|
68
45
|
**Note:** Version bump only for package @pie-lib/drag
|
|
69
46
|
|
|
@@ -71,7 +48,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
71
48
|
|
|
72
49
|
|
|
73
50
|
|
|
74
|
-
# [2.
|
|
51
|
+
# [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)
|
|
75
52
|
|
|
76
53
|
**Note:** Version bump only for package @pie-lib/drag
|
|
77
54
|
|
|
@@ -79,7 +56,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
79
56
|
|
|
80
57
|
|
|
81
58
|
|
|
82
|
-
# [2.
|
|
59
|
+
# [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)
|
|
83
60
|
|
|
84
61
|
**Note:** Version bump only for package @pie-lib/drag
|
|
85
62
|
|
|
@@ -87,7 +64,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
87
64
|
|
|
88
65
|
|
|
89
66
|
|
|
90
|
-
# [2.
|
|
67
|
+
# [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)
|
|
91
68
|
|
|
92
69
|
**Note:** Version bump only for package @pie-lib/drag
|
|
93
70
|
|
|
@@ -95,7 +72,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
95
72
|
|
|
96
73
|
|
|
97
74
|
|
|
98
|
-
# [2.
|
|
75
|
+
# [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)
|
|
99
76
|
|
|
100
77
|
**Note:** Version bump only for package @pie-lib/drag
|
|
101
78
|
|
|
@@ -103,19 +80,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
103
80
|
|
|
104
81
|
|
|
105
82
|
|
|
106
|
-
# [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)
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
### Features
|
|
110
|
-
|
|
111
|
-
* drag library update ([fb7a4d0](https://github.com/pie-framework/pie-lib/commit/fb7a4d0ce761f2f4c1a122854cfa306abb8ea7c8))
|
|
112
|
-
* **drag:** update drag package to corresp to material v5 PD-5258 ([7400327](https://github.com/pie-framework/pie-lib/commit/740032735077939f4e05897aaf6b618bfa5b236d))
|
|
113
|
-
* bump react and react-dom ([01dc19e](https://github.com/pie-framework/pie-lib/commit/01dc19e88bbc8d372c561d1511df1a82937d45af))
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
83
|
## [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)
|
|
120
84
|
|
|
121
85
|
**Note:** Version bump only for package @pie-lib/drag
|
|
@@ -6,34 +6,61 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.DragInTheBlankDroppable = DragInTheBlankDroppable;
|
|
8
8
|
exports["default"] = void 0;
|
|
9
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
10
9
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
11
10
|
var _react = _interopRequireDefault(require("react"));
|
|
12
11
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
-
var
|
|
14
|
-
var
|
|
12
|
+
var _placeholder = _interopRequireDefault(require("./placeholder"));
|
|
13
|
+
var _core = require("@dnd-kit/core");
|
|
14
|
+
var _styles = require("@mui/material/styles");
|
|
15
|
+
var _excluded = ["children", "disabled", "classes", "isVerticalPool", "minHeight", "instanceId"];
|
|
15
16
|
// With @dnd-kit, the drop logic is handled in the DragProvider's onDragEnd callback
|
|
16
17
|
// This component now just wraps DroppablePlaceholder with drag-in-the-blank specific logic
|
|
17
18
|
|
|
19
|
+
var DroppablePlaceholderContainer = (0, _styles.styled)('div')({
|
|
20
|
+
minHeight: '100px'
|
|
21
|
+
});
|
|
18
22
|
function DragInTheBlankDroppable(_ref) {
|
|
19
|
-
var
|
|
20
|
-
children = _ref.children,
|
|
23
|
+
var children = _ref.children,
|
|
21
24
|
disabled = _ref.disabled,
|
|
22
|
-
|
|
25
|
+
classes = _ref.classes,
|
|
26
|
+
isVerticalPool = _ref.isVerticalPool,
|
|
27
|
+
minHeight = _ref.minHeight,
|
|
28
|
+
instanceId = _ref.instanceId,
|
|
23
29
|
rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
|
24
30
|
// The actual drop handling will be managed by the parent component
|
|
25
31
|
// through the DragProvider's onDragEnd callback
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
32
|
+
var _useDroppable = (0, _core.useDroppable)({
|
|
33
|
+
id: 'drag-in-the-blank-droppable',
|
|
34
|
+
data: {
|
|
35
|
+
type: 'MaskBlank',
|
|
36
|
+
accepts: ['MaskBlank'],
|
|
37
|
+
id: 'drag-in-the-blank-droppable',
|
|
38
|
+
toChoiceBoard: true,
|
|
39
|
+
instanceId: instanceId
|
|
40
|
+
}
|
|
41
|
+
}),
|
|
42
|
+
setNodeRef = _useDroppable.setNodeRef,
|
|
43
|
+
isOver = _useDroppable.isOver;
|
|
44
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
45
|
+
ref: setNodeRef
|
|
46
|
+
}, /*#__PURE__*/_react["default"].createElement(DroppablePlaceholderContainer, null, /*#__PURE__*/_react["default"].createElement(_placeholder["default"], {
|
|
47
|
+
isOver: isOver,
|
|
48
|
+
choiceBoard: true,
|
|
49
|
+
className: classes,
|
|
50
|
+
isVerticalPool: isVerticalPool,
|
|
51
|
+
extraStyles: {
|
|
52
|
+
width: '100%',
|
|
53
|
+
minHeight: minHeight || 100,
|
|
54
|
+
height: 'auto'
|
|
55
|
+
}
|
|
56
|
+
}, children)));
|
|
31
57
|
}
|
|
32
58
|
DragInTheBlankDroppable.propTypes = {
|
|
33
59
|
id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired,
|
|
34
60
|
children: _propTypes["default"].node,
|
|
35
61
|
disabled: _propTypes["default"].bool,
|
|
36
|
-
onDrop: _propTypes["default"].func
|
|
62
|
+
onDrop: _propTypes["default"].func,
|
|
63
|
+
instanceId: _propTypes["default"].string
|
|
37
64
|
};
|
|
38
65
|
var _default = exports["default"] = DragInTheBlankDroppable;
|
|
39
66
|
//# sourceMappingURL=drag-in-the-blank-dp.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drag-in-the-blank-dp.js","names":["_react","_interopRequireDefault","require","_propTypes","
|
|
1
|
+
{"version":3,"file":"drag-in-the-blank-dp.js","names":["_react","_interopRequireDefault","require","_propTypes","_placeholder","_core","_styles","_excluded","DroppablePlaceholderContainer","styled","minHeight","DragInTheBlankDroppable","_ref","children","disabled","classes","isVerticalPool","instanceId","rest","_objectWithoutProperties2","_useDroppable","useDroppable","id","data","type","accepts","toChoiceBoard","setNodeRef","isOver","createElement","ref","choiceBoard","className","extraStyles","width","height","propTypes","PropTypes","oneOfType","string","number","isRequired","node","bool","onDrop","func","_default","exports"],"sources":["../src/drag-in-the-blank-dp.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport PlaceHolder from './placeholder';\nimport { useDroppable } from '@dnd-kit/core';\nimport { styled } from '@mui/material/styles';\n\n// With @dnd-kit, the drop logic is handled in the DragProvider's onDragEnd callback\n// This component now just wraps DroppablePlaceholder with drag-in-the-blank specific logic\n\nconst DroppablePlaceholderContainer = styled('div')({\n minHeight: '100px',\n});\n\nexport function DragInTheBlankDroppable({\n children,\n disabled,\n classes,\n isVerticalPool,\n minHeight,\n instanceId,\n ...rest\n}) {\n // The actual drop handling will be managed by the parent component\n // through the DragProvider's onDragEnd callback\n const { setNodeRef, isOver } = useDroppable({\n id: 'drag-in-the-blank-droppable',\n data: {\n type: 'MaskBlank',\n accepts: ['MaskBlank'],\n id: 'drag-in-the-blank-droppable',\n toChoiceBoard: true,\n instanceId\n }\n });\n\n return (\n <div ref={setNodeRef} >\n <DroppablePlaceholderContainer>\n <PlaceHolder\n isOver={isOver}\n choiceBoard={true}\n className={classes}\n isVerticalPool={isVerticalPool}\n extraStyles={{\n width: '100%',\n minHeight: minHeight || 100,\n height: 'auto',\n }}\n >\n {children}\n </PlaceHolder>\n </DroppablePlaceholderContainer>\n </div>\n );\n}\n\nDragInTheBlankDroppable.propTypes = {\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n children: PropTypes.node,\n disabled: PropTypes.bool,\n onDrop: PropTypes.func,\n instanceId: PropTypes.string,\n};\n\nexport default DragInTheBlankDroppable;\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,YAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AAA8C,IAAAK,SAAA;AAE9C;AACA;;AAEA,IAAMC,6BAA6B,GAAG,IAAAC,cAAM,EAAC,KAAK,CAAC,CAAC;EAClDC,SAAS,EAAE;AACb,CAAC,CAAC;AAEK,SAASC,uBAAuBA,CAAAC,IAAA,EAQpC;EAAA,IAPDC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IACPC,cAAc,GAAAJ,IAAA,CAAdI,cAAc;IACdN,SAAS,GAAAE,IAAA,CAATF,SAAS;IACTO,UAAU,GAAAL,IAAA,CAAVK,UAAU;IACPC,IAAI,OAAAC,yBAAA,aAAAP,IAAA,EAAAL,SAAA;EAEP;EACA;EACA,IAAAa,aAAA,GAA+B,IAAAC,kBAAY,EAAC;MACzCC,EAAE,EAAE,6BAA6B;MAClCC,IAAI,EAAE;QACJC,IAAI,EAAE,WAAW;QACjBC,OAAO,EAAE,CAAC,WAAW,CAAC;QACtBH,EAAE,EAAE,6BAA6B;QACjCI,aAAa,EAAE,IAAI;QACnBT,UAAU,EAAVA;MACF;IACF,CAAC,CAAC;IATMU,UAAU,GAAAP,aAAA,CAAVO,UAAU;IAAEC,MAAM,GAAAR,aAAA,CAANQ,MAAM;EAW1B,oBACE5B,MAAA,YAAA6B,aAAA;IAAKC,GAAG,EAAEH;EAAW,gBACnB3B,MAAA,YAAA6B,aAAA,CAACrB,6BAA6B,qBAC5BR,MAAA,YAAA6B,aAAA,CAACzB,YAAA,WAAW;IACVwB,MAAM,EAAEA,MAAO;IACfG,WAAW,EAAE,IAAK;IAClBC,SAAS,EAAEjB,OAAQ;IACnBC,cAAc,EAAEA,cAAe;IAC/BiB,WAAW,EAAE;MACXC,KAAK,EAAE,MAAM;MACbxB,SAAS,EAAEA,SAAS,IAAI,GAAG;MAC3ByB,MAAM,EAAE;IACV;EAAE,GAEDtB,QACU,CACgB,CAC5B,CAAC;AAEV;AAEAF,uBAAuB,CAACyB,SAAS,GAAG;EAClCd,EAAE,EAAEe,qBAAS,CAACC,SAAS,CAAC,CAACD,qBAAS,CAACE,MAAM,EAAEF,qBAAS,CAACG,MAAM,CAAC,CAAC,CAACC,UAAU;EACxE5B,QAAQ,EAAEwB,qBAAS,CAACK,IAAI;EACxB5B,QAAQ,EAAEuB,qBAAS,CAACM,IAAI;EACxBC,MAAM,EAAEP,qBAAS,CAACQ,IAAI;EACtB5B,UAAU,EAAEoB,qBAAS,CAACE;AACxB,CAAC;AAAC,IAAAO,QAAA,GAAAC,OAAA,cAEapC,uBAAuB","ignoreList":[]}
|
package/lib/drag-provider.js
CHANGED
|
@@ -14,7 +14,10 @@ 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,
|
|
19
|
+
collisionDetection = _ref.collisionDetection,
|
|
20
|
+
modifiers = _ref.modifiers;
|
|
18
21
|
var _useState = (0, _react.useState)(null),
|
|
19
22
|
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
20
23
|
activeId = _useState2[0],
|
|
@@ -26,6 +29,9 @@ function DragProvider(_ref) {
|
|
|
26
29
|
}), (0, _core.useSensor)(_core.KeyboardSensor));
|
|
27
30
|
var handleDragStart = function handleDragStart(event) {
|
|
28
31
|
setActiveId(event.active.id);
|
|
32
|
+
if (onDragStart) {
|
|
33
|
+
onDragStart(event);
|
|
34
|
+
}
|
|
29
35
|
};
|
|
30
36
|
var handleDragEnd = function handleDragEnd(event) {
|
|
31
37
|
setActiveId(null);
|
|
@@ -36,12 +42,17 @@ function DragProvider(_ref) {
|
|
|
36
42
|
return /*#__PURE__*/_react["default"].createElement(_core.DndContext, {
|
|
37
43
|
sensors: sensors,
|
|
38
44
|
onDragStart: handleDragStart,
|
|
39
|
-
onDragEnd: handleDragEnd
|
|
45
|
+
onDragEnd: handleDragEnd,
|
|
46
|
+
collisionDetection: collisionDetection,
|
|
47
|
+
modifiers: modifiers
|
|
40
48
|
}, children);
|
|
41
49
|
}
|
|
42
50
|
DragProvider.propTypes = {
|
|
43
51
|
children: _propTypes["default"].node.isRequired,
|
|
44
|
-
onDragEnd: _propTypes["default"].func
|
|
52
|
+
onDragEnd: _propTypes["default"].func,
|
|
53
|
+
onDragStart: _propTypes["default"].func,
|
|
54
|
+
collisionDetection: _propTypes["default"].func,
|
|
55
|
+
modifiers: _propTypes["default"].arrayOf(_propTypes["default"].func)
|
|
45
56
|
};
|
|
46
57
|
var _default = exports["default"] = DragProvider;
|
|
47
58
|
//# 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","collisionDetection","modifiers","_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","arrayOf","_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, collisionDetection, modifiers }) {\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 collisionDetection={collisionDetection}\n modifiers={modifiers}\n >\n {children}\n </DndContext>\n );\n}\n\nDragProvider.propTypes = {\n children: PropTypes.node.isRequired,\n onDragEnd: PropTypes.func,\n onDragStart: PropTypes.func,\n collisionDetection: PropTypes.func,\n modifiers: PropTypes.arrayOf(PropTypes.func),\n};\n\nexport default DragProvider;"],"mappings":"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","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/ica-dp.js
CHANGED
|
@@ -11,7 +11,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
|
|
|
11
11
|
var _react = _interopRequireDefault(require("react"));
|
|
12
12
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
13
|
var _droppablePlaceholder = require("./droppable-placeholder");
|
|
14
|
-
var _excluded = ["id", "children", "disabled"
|
|
14
|
+
var _excluded = ["id", "children", "disabled"];
|
|
15
15
|
// With @dnd-kit, the drop logic is handled in the DragProvider's onDragEnd callback
|
|
16
16
|
// This component now just wraps DroppablePlaceholder with ICA specific logic
|
|
17
17
|
|
|
@@ -19,20 +19,9 @@ function ICADroppable(_ref) {
|
|
|
19
19
|
var id = _ref.id,
|
|
20
20
|
children = _ref.children,
|
|
21
21
|
disabled = _ref.disabled,
|
|
22
|
-
onRemoveAnswer = _ref.onRemoveAnswer,
|
|
23
22
|
rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
|
24
23
|
// The actual drop handling will be managed by the parent component
|
|
25
24
|
// through the DragProvider's onDragEnd callback
|
|
26
|
-
// The onRemoveAnswer logic should be handled in the parent's onDragEnd:
|
|
27
|
-
//
|
|
28
|
-
// const handleDragEnd = (event) => {
|
|
29
|
-
// if (event.over && event.active) {
|
|
30
|
-
// const item = event.active.data.current;
|
|
31
|
-
// if (onRemoveAnswer) {
|
|
32
|
-
// onRemoveAnswer(item);
|
|
33
|
-
// }
|
|
34
|
-
// }
|
|
35
|
-
// };
|
|
36
25
|
|
|
37
26
|
return /*#__PURE__*/_react["default"].createElement(_droppablePlaceholder.DroppablePlaceholder, (0, _extends2["default"])({
|
|
38
27
|
id: id,
|
|
@@ -42,8 +31,7 @@ function ICADroppable(_ref) {
|
|
|
42
31
|
ICADroppable.propTypes = {
|
|
43
32
|
id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired,
|
|
44
33
|
children: _propTypes["default"].node,
|
|
45
|
-
disabled: _propTypes["default"].bool
|
|
46
|
-
onRemoveAnswer: _propTypes["default"].func
|
|
34
|
+
disabled: _propTypes["default"].bool
|
|
47
35
|
};
|
|
48
36
|
var _default = exports["default"] = ICADroppable;
|
|
49
37
|
//# sourceMappingURL=ica-dp.js.map
|
package/lib/ica-dp.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ica-dp.js","names":["_react","_interopRequireDefault","require","_propTypes","_droppablePlaceholder","_excluded","ICADroppable","_ref","id","children","disabled","
|
|
1
|
+
{"version":3,"file":"ica-dp.js","names":["_react","_interopRequireDefault","require","_propTypes","_droppablePlaceholder","_excluded","ICADroppable","_ref","id","children","disabled","rest","_objectWithoutProperties2","createElement","DroppablePlaceholder","_extends2","propTypes","PropTypes","oneOfType","string","number","isRequired","node","bool","_default","exports"],"sources":["../src/ica-dp.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DroppablePlaceholder } from './droppable-placeholder';\n\n// With @dnd-kit, the drop logic is handled in the DragProvider's onDragEnd callback\n// This component now just wraps DroppablePlaceholder with ICA specific logic\n\nexport function ICADroppable({ id, children, disabled, ...rest }) {\n // The actual drop handling will be managed by the parent component\n // through the DragProvider's onDragEnd callback\n\n return (\n <DroppablePlaceholder id={id} disabled={disabled} {...rest}>\n {children}\n </DroppablePlaceholder>\n );\n}\n\nICADroppable.propTypes = {\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n children: PropTypes.node,\n disabled: PropTypes.bool,\n};\n\nexport default ICADroppable;\n"],"mappings":";;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,qBAAA,GAAAF,OAAA;AAA+D,IAAAG,SAAA;AAE/D;AACA;;AAEO,SAASC,YAAYA,CAAAC,IAAA,EAAsC;EAAA,IAAnCC,EAAE,GAAAD,IAAA,CAAFC,EAAE;IAAEC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAEC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IAAKC,IAAI,OAAAC,yBAAA,aAAAL,IAAA,EAAAF,SAAA;EAC5D;EACA;;EAEA,oBACEL,MAAA,YAAAa,aAAA,CAACT,qBAAA,CAAAU,oBAAoB,MAAAC,SAAA;IAACP,EAAE,EAAEA,EAAG;IAACE,QAAQ,EAAEA;EAAS,GAAKC,IAAI,GACvDF,QACmB,CAAC;AAE3B;AAEAH,YAAY,CAACU,SAAS,GAAG;EACvBR,EAAE,EAAES,qBAAS,CAACC,SAAS,CAAC,CAACD,qBAAS,CAACE,MAAM,EAAEF,qBAAS,CAACG,MAAM,CAAC,CAAC,CAACC,UAAU;EACxEZ,QAAQ,EAAEQ,qBAAS,CAACK,IAAI;EACxBZ,QAAQ,EAAEO,qBAAS,CAACM;AACtB,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,cAEanB,YAAY","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pie-lib/drag",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.32.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.36.0-mui-update.0",
|
|
16
|
+
"@pie-lib/render-ui": "4.45.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": "56f71068deecd32adaab99fd03515f1133919d9d"
|
|
29
29
|
}
|
|
@@ -1,28 +1,56 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
|
-
import
|
|
3
|
+
import PlaceHolder from './placeholder';
|
|
4
|
+
import { useDroppable } from '@dnd-kit/core';
|
|
5
|
+
import { styled } from '@mui/material/styles';
|
|
4
6
|
|
|
5
7
|
// With @dnd-kit, the drop logic is handled in the DragProvider's onDragEnd callback
|
|
6
8
|
// This component now just wraps DroppablePlaceholder with drag-in-the-blank specific logic
|
|
7
9
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
10
|
+
const DroppablePlaceholderContainer = styled('div')({
|
|
11
|
+
minHeight: '100px',
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
export function DragInTheBlankDroppable({
|
|
15
|
+
children,
|
|
16
|
+
disabled,
|
|
17
|
+
classes,
|
|
18
|
+
isVerticalPool,
|
|
19
|
+
minHeight,
|
|
20
|
+
instanceId,
|
|
21
|
+
...rest
|
|
14
22
|
}) {
|
|
15
23
|
// The actual drop handling will be managed by the parent component
|
|
16
24
|
// through the DragProvider's onDragEnd callback
|
|
17
|
-
|
|
25
|
+
const { setNodeRef, isOver } = useDroppable({
|
|
26
|
+
id: 'drag-in-the-blank-droppable',
|
|
27
|
+
data: {
|
|
28
|
+
type: 'MaskBlank',
|
|
29
|
+
accepts: ['MaskBlank'],
|
|
30
|
+
id: 'drag-in-the-blank-droppable',
|
|
31
|
+
toChoiceBoard: true,
|
|
32
|
+
instanceId
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
|
|
18
36
|
return (
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
37
|
+
<div ref={setNodeRef} >
|
|
38
|
+
<DroppablePlaceholderContainer>
|
|
39
|
+
<PlaceHolder
|
|
40
|
+
isOver={isOver}
|
|
41
|
+
choiceBoard={true}
|
|
42
|
+
className={classes}
|
|
43
|
+
isVerticalPool={isVerticalPool}
|
|
44
|
+
extraStyles={{
|
|
45
|
+
width: '100%',
|
|
46
|
+
minHeight: minHeight || 100,
|
|
47
|
+
height: 'auto',
|
|
48
|
+
}}
|
|
49
|
+
>
|
|
50
|
+
{children}
|
|
51
|
+
</PlaceHolder>
|
|
52
|
+
</DroppablePlaceholderContainer>
|
|
53
|
+
</div>
|
|
26
54
|
);
|
|
27
55
|
}
|
|
28
56
|
|
|
@@ -31,6 +59,7 @@ DragInTheBlankDroppable.propTypes = {
|
|
|
31
59
|
children: PropTypes.node,
|
|
32
60
|
disabled: PropTypes.bool,
|
|
33
61
|
onDrop: PropTypes.func,
|
|
62
|
+
instanceId: PropTypes.string,
|
|
34
63
|
};
|
|
35
64
|
|
|
36
65
|
export default DragInTheBlankDroppable;
|
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, collisionDetection, modifiers }) {
|
|
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) => {
|
|
@@ -26,6 +29,8 @@ export function DragProvider({ children, onDragEnd }) {
|
|
|
26
29
|
sensors={sensors}
|
|
27
30
|
onDragStart={handleDragStart}
|
|
28
31
|
onDragEnd={handleDragEnd}
|
|
32
|
+
collisionDetection={collisionDetection}
|
|
33
|
+
modifiers={modifiers}
|
|
29
34
|
>
|
|
30
35
|
{children}
|
|
31
36
|
</DndContext>
|
|
@@ -35,6 +40,9 @@ export function DragProvider({ children, onDragEnd }) {
|
|
|
35
40
|
DragProvider.propTypes = {
|
|
36
41
|
children: PropTypes.node.isRequired,
|
|
37
42
|
onDragEnd: PropTypes.func,
|
|
43
|
+
onDragStart: PropTypes.func,
|
|
44
|
+
collisionDetection: PropTypes.func,
|
|
45
|
+
modifiers: PropTypes.arrayOf(PropTypes.func),
|
|
38
46
|
};
|
|
39
47
|
|
|
40
48
|
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/ica-dp.jsx
CHANGED
|
@@ -5,32 +5,12 @@ import { DroppablePlaceholder } from './droppable-placeholder';
|
|
|
5
5
|
// With @dnd-kit, the drop logic is handled in the DragProvider's onDragEnd callback
|
|
6
6
|
// This component now just wraps DroppablePlaceholder with ICA specific logic
|
|
7
7
|
|
|
8
|
-
export function ICADroppable({
|
|
9
|
-
id,
|
|
10
|
-
children,
|
|
11
|
-
disabled,
|
|
12
|
-
onRemoveAnswer,
|
|
13
|
-
...rest
|
|
14
|
-
}) {
|
|
8
|
+
export function ICADroppable({ id, children, disabled, ...rest }) {
|
|
15
9
|
// The actual drop handling will be managed by the parent component
|
|
16
10
|
// through the DragProvider's onDragEnd callback
|
|
17
|
-
|
|
18
|
-
//
|
|
19
|
-
// const handleDragEnd = (event) => {
|
|
20
|
-
// if (event.over && event.active) {
|
|
21
|
-
// const item = event.active.data.current;
|
|
22
|
-
// if (onRemoveAnswer) {
|
|
23
|
-
// onRemoveAnswer(item);
|
|
24
|
-
// }
|
|
25
|
-
// }
|
|
26
|
-
// };
|
|
27
|
-
|
|
11
|
+
|
|
28
12
|
return (
|
|
29
|
-
<DroppablePlaceholder
|
|
30
|
-
id={id}
|
|
31
|
-
disabled={disabled}
|
|
32
|
-
{...rest}
|
|
33
|
-
>
|
|
13
|
+
<DroppablePlaceholder id={id} disabled={disabled} {...rest}>
|
|
34
14
|
{children}
|
|
35
15
|
</DroppablePlaceholder>
|
|
36
16
|
);
|
|
@@ -40,7 +20,6 @@ ICADroppable.propTypes = {
|
|
|
40
20
|
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
|
|
41
21
|
children: PropTypes.node,
|
|
42
22
|
disabled: PropTypes.bool,
|
|
43
|
-
onRemoveAnswer: PropTypes.func,
|
|
44
23
|
};
|
|
45
24
|
|
|
46
25
|
export default ICADroppable;
|