@pie-element/drag-in-the-blank 8.3.4-next.3 → 9.0.0-beta.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/configure/lib/choice.js +102 -101
- package/configure/lib/choice.js.map +1 -1
- package/configure/lib/choices.js +206 -313
- package/configure/lib/choices.js.map +1 -1
- package/configure/lib/defaults.js +2 -3
- package/configure/lib/defaults.js.map +1 -1
- package/configure/lib/index.js +119 -188
- package/configure/lib/index.js.map +1 -1
- package/configure/lib/main.js +410 -416
- package/configure/lib/main.js.map +1 -1
- package/configure/lib/markupUtils.js +35 -54
- package/configure/lib/markupUtils.js.map +1 -1
- package/configure/package.json +13 -10
- package/controller/lib/defaults.js +2 -3
- package/controller/lib/defaults.js.map +1 -1
- package/controller/lib/index.js +110 -207
- package/controller/lib/index.js.map +1 -1
- package/controller/lib/utils.js +12 -24
- package/controller/lib/utils.js.map +1 -1
- package/controller/package.json +2 -2
- package/lib/index.js +169 -238
- package/lib/index.js.map +1 -1
- package/lib/main.js +101 -160
- package/lib/main.js.map +1 -1
- package/package.json +13 -11
- package/esm/configure.js +0 -22070
- package/esm/configure.js.map +0 -1
- package/esm/controller.js +0 -4670
- package/esm/controller.js.map +0 -1
- package/esm/element.js +0 -8642
- package/esm/element.js.map +0 -1
- package/esm/package.json +0 -3
package/configure/lib/choice.js
CHANGED
|
@@ -1,86 +1,106 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
|
-
exports.
|
|
9
|
-
|
|
7
|
+
exports.default = exports.BlankContent = void 0;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
10
9
|
var _react = _interopRequireDefault(require("react"));
|
|
11
|
-
|
|
12
|
-
var _MoreVert = _interopRequireDefault(require("@material-ui/icons/MoreVert"));
|
|
13
|
-
|
|
14
|
-
var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));
|
|
15
|
-
|
|
16
|
-
var _reactDnd = require("react-dnd");
|
|
17
|
-
|
|
18
|
-
var _styles = require("@material-ui/core/styles");
|
|
19
|
-
|
|
20
|
-
var _markupUtils = require("./markupUtils");
|
|
21
|
-
|
|
22
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
23
|
-
|
|
24
|
-
var
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
11
|
+
var _MoreVert = _interopRequireDefault(require("@mui/icons-material/MoreVert"));
|
|
12
|
+
var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
|
|
13
|
+
var _core = require("@dnd-kit/core");
|
|
14
|
+
var _styles = require("@mui/material/styles");
|
|
15
|
+
var _markupUtils = require("./markupUtils");
|
|
16
|
+
const GripIcon = ({
|
|
17
|
+
style
|
|
18
|
+
}) => /*#__PURE__*/_react.default.createElement("span", {
|
|
19
|
+
style: style
|
|
20
|
+
}, /*#__PURE__*/_react.default.createElement(_MoreVert.default, {
|
|
21
|
+
style: {
|
|
22
|
+
margin: '0 -16px'
|
|
23
|
+
}
|
|
24
|
+
}), /*#__PURE__*/_react.default.createElement(_MoreVert.default, null));
|
|
35
25
|
GripIcon.propTypes = {
|
|
36
|
-
style: _propTypes
|
|
26
|
+
style: _propTypes.default.object
|
|
37
27
|
};
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
28
|
+
const StyledChoice = (0, _styles.styled)('div', {
|
|
29
|
+
shouldForwardProp: prop => !['error', 'isDragging'].includes(prop)
|
|
30
|
+
})(({
|
|
31
|
+
theme,
|
|
32
|
+
error
|
|
33
|
+
}) => ({
|
|
34
|
+
display: 'inline-flex',
|
|
35
|
+
minWidth: '178px',
|
|
36
|
+
minHeight: '36px',
|
|
37
|
+
background: theme.palette.common.white,
|
|
38
|
+
boxSizing: 'border-box',
|
|
39
|
+
borderRadius: '3px',
|
|
40
|
+
overflow: 'hidden',
|
|
41
|
+
position: 'relative',
|
|
42
|
+
padding: '8px 35px 8px 35px',
|
|
43
|
+
cursor: 'grab',
|
|
44
|
+
border: `1px solid ${error ? '#f44336' : '#C0C3CF'}`,
|
|
45
|
+
'& img': {
|
|
46
|
+
display: 'flex'
|
|
47
|
+
},
|
|
48
|
+
'& mjx-frac': {
|
|
49
|
+
fontSize: '120% !important'
|
|
50
|
+
}
|
|
51
|
+
}));
|
|
52
|
+
const StyledDeleteIcon = (0, _styles.styled)(_Delete.default)(({
|
|
53
|
+
theme
|
|
54
|
+
}) => ({
|
|
55
|
+
position: 'absolute',
|
|
56
|
+
top: '6px',
|
|
57
|
+
right: '0',
|
|
58
|
+
color: theme.palette.grey[500],
|
|
59
|
+
zIndex: 2,
|
|
60
|
+
'&:hover': {
|
|
61
|
+
cursor: 'pointer',
|
|
62
|
+
color: theme.palette.common.black
|
|
63
|
+
}
|
|
64
|
+
}));
|
|
65
|
+
const BlankContent = props => {
|
|
66
|
+
const {
|
|
67
|
+
choice,
|
|
68
|
+
onClick,
|
|
69
|
+
onRemoveChoice,
|
|
70
|
+
error,
|
|
71
|
+
instanceId,
|
|
72
|
+
disabled
|
|
73
|
+
} = props;
|
|
74
|
+
const {
|
|
75
|
+
attributes,
|
|
76
|
+
listeners,
|
|
77
|
+
setNodeRef,
|
|
78
|
+
isDragging
|
|
79
|
+
} = (0, _core.useDraggable)({
|
|
80
|
+
id: `choice-${choice.id}-${instanceId || 'default'}`,
|
|
81
|
+
data: {
|
|
82
|
+
type: 'drag-in-the-blank-choice',
|
|
83
|
+
id: choice.id,
|
|
84
|
+
value: choice,
|
|
85
|
+
instanceId: instanceId
|
|
57
86
|
},
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
cursor: 'pointer',
|
|
66
|
-
color: theme.palette.common.black
|
|
67
|
-
}
|
|
87
|
+
disabled: disabled || (0, _markupUtils.choiceIsEmpty)(choice)
|
|
88
|
+
});
|
|
89
|
+
const handleDragStart = e => {
|
|
90
|
+
if ((0, _markupUtils.choiceIsEmpty)(choice)) {
|
|
91
|
+
e.preventDefault();
|
|
92
|
+
alert('You need to define a value for an answer choice before it can be associated with a response area.');
|
|
93
|
+
return;
|
|
68
94
|
}
|
|
69
95
|
};
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
onClick = props.onClick,
|
|
75
|
-
onRemoveChoice = props.onRemoveChoice,
|
|
76
|
-
error = props.error;
|
|
77
|
-
return connectDragSource( /*#__PURE__*/_react["default"].createElement("div", {
|
|
78
|
-
className: classes.choice,
|
|
79
|
-
style: {
|
|
80
|
-
border: "1px solid ".concat(error ? '#f44336' : '#C0C3CF')
|
|
81
|
-
},
|
|
96
|
+
return /*#__PURE__*/_react.default.createElement(StyledChoice, (0, _extends2.default)({
|
|
97
|
+
ref: setNodeRef,
|
|
98
|
+
error: error,
|
|
99
|
+
isDragging: isDragging,
|
|
82
100
|
onClick: onClick
|
|
83
|
-
},
|
|
101
|
+
}, attributes, listeners, {
|
|
102
|
+
onDragStart: handleDragStart
|
|
103
|
+
}), /*#__PURE__*/_react.default.createElement(GripIcon, {
|
|
84
104
|
style: {
|
|
85
105
|
position: 'absolute',
|
|
86
106
|
top: '6px',
|
|
@@ -88,45 +108,26 @@ var BlankContent = (0, _styles.withStyles)(function (theme) {
|
|
|
88
108
|
color: '#9e9e9e',
|
|
89
109
|
zIndex: 2
|
|
90
110
|
}
|
|
91
|
-
}), /*#__PURE__*/_react
|
|
111
|
+
}), /*#__PURE__*/_react.default.createElement("span", {
|
|
92
112
|
dangerouslySetInnerHTML: {
|
|
93
113
|
__html: choice.value
|
|
94
114
|
}
|
|
95
|
-
}), /*#__PURE__*/_react
|
|
96
|
-
|
|
97
|
-
onClick: function onClick(e) {
|
|
115
|
+
}), /*#__PURE__*/_react.default.createElement(StyledDeleteIcon, {
|
|
116
|
+
onClick: e => {
|
|
98
117
|
e.preventDefault();
|
|
99
118
|
e.stopPropagation();
|
|
100
119
|
onRemoveChoice(e);
|
|
101
120
|
}
|
|
102
|
-
}))
|
|
103
|
-
}
|
|
121
|
+
}));
|
|
122
|
+
};
|
|
104
123
|
exports.BlankContent = BlankContent;
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
return !props.disabled;
|
|
113
|
-
},
|
|
114
|
-
beginDrag: function beginDrag(props) {
|
|
115
|
-
return {
|
|
116
|
-
id: props.targetId,
|
|
117
|
-
value: props.choice,
|
|
118
|
-
instanceId: props.instanceId
|
|
119
|
-
};
|
|
120
|
-
}
|
|
124
|
+
BlankContent.propTypes = {
|
|
125
|
+
choice: _propTypes.default.object.isRequired,
|
|
126
|
+
onClick: _propTypes.default.func,
|
|
127
|
+
onRemoveChoice: _propTypes.default.func.isRequired,
|
|
128
|
+
error: _propTypes.default.bool,
|
|
129
|
+
instanceId: _propTypes.default.string,
|
|
130
|
+
disabled: _propTypes.default.bool
|
|
121
131
|
};
|
|
122
|
-
exports.
|
|
123
|
-
|
|
124
|
-
var _default = (0, _reactDnd.DragSource)('drag-in-the-blank-choice', tileSource, function (connect, monitor) {
|
|
125
|
-
return {
|
|
126
|
-
connectDragSource: connect.dragSource(),
|
|
127
|
-
isDragging: monitor.isDragging()
|
|
128
|
-
};
|
|
129
|
-
})(BlankContent);
|
|
130
|
-
|
|
131
|
-
exports["default"] = _default;
|
|
132
|
+
var _default = exports.default = BlankContent;
|
|
132
133
|
//# sourceMappingURL=choice.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"choice.js","names":["_react","_interopRequireDefault","require","_propTypes","_MoreVert","_Delete","_core","_styles","_markupUtils","GripIcon","style","default","createElement","margin","propTypes","PropTypes","object","StyledChoice","styled","shouldForwardProp","prop","includes","theme","error","display","minWidth","minHeight","background","palette","common","white","boxSizing","borderRadius","overflow","position","padding","cursor","border","fontSize","StyledDeleteIcon","Delete","top","right","color","grey","zIndex","black","BlankContent","props","choice","onClick","onRemoveChoice","instanceId","disabled","attributes","listeners","setNodeRef","isDragging","useDraggable","id","data","type","value","choiceIsEmpty","handleDragStart","e","preventDefault","alert","_extends2","ref","onDragStart","left","dangerouslySetInnerHTML","__html","stopPropagation","exports","isRequired","func","bool","string","_default"],"sources":["../src/choice.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport MoreVert from '@mui/icons-material/MoreVert';\nimport Delete from '@mui/icons-material/Delete';\nimport { useDraggable } from '@dnd-kit/core';\nimport { styled } from '@mui/material/styles';\nimport { choiceIsEmpty } from './markupUtils';\n\nconst GripIcon = ({ style }) => (\n <span style={style}>\n <MoreVert style={{ margin: '0 -16px' }}/>\n <MoreVert/>\n </span>\n);\n\nGripIcon.propTypes = {\n style: PropTypes.object,\n};\n\nconst StyledChoice = styled('div', {\n shouldForwardProp: (prop) => !['error', 'isDragging'].includes(prop),\n})(({ theme, error }) => ({\n display: 'inline-flex',\n minWidth: '178px',\n minHeight: '36px',\n background: theme.palette.common.white,\n boxSizing: 'border-box',\n borderRadius: '3px',\n overflow: 'hidden',\n position: 'relative',\n padding: '8px 35px 8px 35px',\n cursor: 'grab',\n border: `1px solid ${error ? '#f44336' : '#C0C3CF'}`,\n '& img': {\n display: 'flex'\n },\n '& mjx-frac': {\n fontSize: '120% !important',\n },\n}));\n\nconst StyledDeleteIcon = styled(Delete)(({ theme }) => ({\n position: 'absolute',\n top: '6px',\n right: '0',\n color: theme.palette.grey[500],\n zIndex: 2,\n '&:hover': {\n cursor: 'pointer',\n color: theme.palette.common.black,\n },\n}));\n\nexport const BlankContent = (props) => {\n const { choice, onClick, onRemoveChoice, error, instanceId, disabled } = props;\n const {\n attributes,\n listeners,\n setNodeRef,\n isDragging,\n } = useDraggable({\n id: `choice-${choice.id}-${instanceId || 'default'}`,\n data: {\n type: 'drag-in-the-blank-choice',\n id: choice.id,\n value: choice,\n instanceId: instanceId,\n },\n disabled: disabled || choiceIsEmpty(choice),\n\n });\n\n const handleDragStart = (e) => {\n if (choiceIsEmpty(choice)) {\n e.preventDefault();\n alert('You need to define a value for an answer choice before it can be associated with a response area.');\n return;\n }\n };\n\n return (\n <StyledChoice\n ref={setNodeRef}\n error={error}\n isDragging={isDragging}\n onClick={onClick}\n {...attributes}\n {...listeners}\n onDragStart={handleDragStart}\n >\n <GripIcon\n style={{\n position: 'absolute',\n top: '6px',\n left: '15px',\n color: '#9e9e9e',\n zIndex: 2,\n }}\n />\n\n <span dangerouslySetInnerHTML={{ __html: choice.value }} />\n\n <StyledDeleteIcon\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n\n onRemoveChoice(e);\n }}\n />\n </StyledChoice>\n );\n};\n\nBlankContent.propTypes = {\n choice: PropTypes.object.isRequired,\n onClick: PropTypes.func,\n onRemoveChoice: PropTypes.func.isRequired,\n error: PropTypes.bool,\n instanceId: PropTypes.string,\n disabled: PropTypes.bool,\n};\n\nexport default BlankContent;\n"],"mappings":"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","ignoreList":[]}
|