@pie-lib/mask-markup 2.0.0-next.0 → 2.1.0-next.2
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 +38 -0
- package/package.json +6 -18
- package/src/constructed-response.jsx +6 -15
- package/src/serialization.js +143 -53
- package/lib/choices/choice.js +0 -116
- package/lib/choices/choice.js.map +0 -1
- package/lib/choices/index.js +0 -103
- package/lib/choices/index.js.map +0 -1
- package/lib/componentize.js +0 -21
- package/lib/componentize.js.map +0 -1
- package/lib/components/blank.js +0 -357
- package/lib/components/blank.js.map +0 -1
- package/lib/components/correct-input.js +0 -94
- package/lib/components/correct-input.js.map +0 -1
- package/lib/components/dropdown.js +0 -459
- package/lib/components/dropdown.js.map +0 -1
- package/lib/components/input.js +0 -50
- package/lib/components/input.js.map +0 -1
- package/lib/constructed-response.js +0 -102
- package/lib/constructed-response.js.map +0 -1
- package/lib/customizable.js +0 -44
- package/lib/customizable.js.map +0 -1
- package/lib/drag-in-the-blank.js +0 -252
- package/lib/drag-in-the-blank.js.map +0 -1
- package/lib/index.js +0 -55
- package/lib/index.js.map +0 -1
- package/lib/inline-dropdown.js +0 -40
- package/lib/inline-dropdown.js.map +0 -1
- package/lib/mask.js +0 -196
- package/lib/mask.js.map +0 -1
- package/lib/serialization.js +0 -167
- package/lib/serialization.js.map +0 -1
- package/lib/with-mask.js +0 -97
- package/lib/with-mask.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,44 @@
|
|
|
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.1.0-next.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@2.1.0-next.1...@pie-lib/mask-markup@2.1.0-next.2) (2026-01-26)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* removed slate-html-serializer from markup, and fixed extracss rules functionality ([1ac30a3](https://github.com/pie-framework/pie-lib/commit/1ac30a362202b9c063920642382cce8234b9de85))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
# [2.1.0-next.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.33.2...@pie-lib/mask-markup@2.1.0-next.1) (2026-01-26)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Bug Fixes
|
|
21
|
+
|
|
22
|
+
* fix math rendering issues after React, mui and drag upgrade for drag-in-the-blank ([6dc3c95](https://github.com/pie-framework/pie-lib/commit/6dc3c95c041be02015a9005133fe750e1ff78842))
|
|
23
|
+
* remove carets from [@pie-lib](https://github.com/pie-lib) dependencies and configure lerna to use exact versions ([c9cd800](https://github.com/pie-framework/pie-lib/commit/c9cd800844abca09e7acf1fd35b2ddf51a6d86df))
|
|
24
|
+
* remove carret, point to specific libs version ([09939a5](https://github.com/pie-framework/pie-lib/commit/09939a5aca19d7dda03d62c93d4d524f98dd69da))
|
|
25
|
+
* remove exports and publish ([#2068](https://github.com/pie-framework/pie-lib/issues/2068)) ([60a96cd](https://github.com/pie-framework/pie-lib/commit/60a96cde0ec65f6b1cac0ae329aa33a0abc50d05))
|
|
26
|
+
* simplify math render logic ([de11ebe](https://github.com/pie-framework/pie-lib/commit/de11ebe7f2faeb9dce6215673a90b79e86cbc590))
|
|
27
|
+
* updated tip-tap with mui instead of material-ui [PD-5141] ([880d3ab](https://github.com/pie-framework/pie-lib/commit/880d3ab1d63aa12c7e975c882f50624200565737))
|
|
28
|
+
* use fixed lib deps ([de7c64d](https://github.com/pie-framework/pie-lib/commit/de7c64d14f13259fe44d47405e4421baef21e24e))
|
|
29
|
+
* **config-ui, mask-markup:** replace deprecated props, externd AlerDialog with new props ([6e7a163](https://github.com/pie-framework/pie-lib/commit/6e7a16314944745154801010aa4973a03aa15dcc))
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
### Features
|
|
33
|
+
|
|
34
|
+
* bump react and react-dom ([01dc19e](https://github.com/pie-framework/pie-lib/commit/01dc19e88bbc8d372c561d1511df1a82937d45af))
|
|
35
|
+
* drag changes for ditb ([fc79ecd](https://github.com/pie-framework/pie-lib/commit/fc79ecdacb5693f1b5dcf19c7114f9cd4bed83ba))
|
|
36
|
+
* drag library update in mask-markup and demo packages ([c8a5c17](https://github.com/pie-framework/pie-lib/commit/c8a5c17b0cb16d0c9debb876b4fdba13fbdf5404))
|
|
37
|
+
* sync latest changes from dev ([c936e9c](https://github.com/pie-framework/pie-lib/commit/c936e9c7f9e095e7d9b9805ac2bf72bd271e05f1))
|
|
38
|
+
* updates for drag-in-the-blank ([0c096d8](https://github.com/pie-framework/pie-lib/commit/0c096d887f97edecd2dac68cda136b2d265dc7d5))
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
|
|
6
44
|
# [2.0.0-next.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.33.3-next.0...@pie-lib/mask-markup@2.0.0-next.0) (2026-01-19)
|
|
7
45
|
|
|
8
46
|
**Note:** Version bump only for package @pie-lib/mask-markup
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pie-lib/mask-markup",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.1.0-next.2",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "src/index.js",
|
|
@@ -12,32 +12,20 @@
|
|
|
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/drag": "
|
|
16
|
-
"@pie-lib/editable-html": "
|
|
17
|
-
"@pie-lib/math-rendering": "
|
|
18
|
-
"@pie-lib/render-ui": "
|
|
15
|
+
"@pie-lib/drag": "3.1.0-next.2",
|
|
16
|
+
"@pie-lib/editable-html-tip-tap": "1.1.0-next.2",
|
|
17
|
+
"@pie-lib/math-rendering": "4.1.0-next.1",
|
|
18
|
+
"@pie-lib/render-ui": "5.1.0-next.2",
|
|
19
19
|
"classnames": "^2.2.6",
|
|
20
20
|
"debug": "^4.1.1",
|
|
21
21
|
"lodash": "^4.17.11",
|
|
22
22
|
"prop-types": "^15.7.2",
|
|
23
23
|
"react": "^18.2.0",
|
|
24
24
|
"react-dom": "^18.2.0",
|
|
25
|
-
"slate": "^0.36.2",
|
|
26
|
-
"slate-html-serializer": "^0.6.12",
|
|
27
|
-
"slate-prop-types": "^0.4.38",
|
|
28
|
-
"slate-react": "^0.14.3",
|
|
29
25
|
"to-style": "^1.3.3"
|
|
30
26
|
},
|
|
31
27
|
"keywords": [],
|
|
32
28
|
"author": "",
|
|
33
29
|
"license": "ISC",
|
|
34
|
-
"gitHead": "
|
|
35
|
-
"exports": {
|
|
36
|
-
".": {
|
|
37
|
-
"require": "./lib/index.js",
|
|
38
|
-
"import": "./src/index.js",
|
|
39
|
-
"default": "./lib/index.js"
|
|
40
|
-
},
|
|
41
|
-
"./esm": "./esm/index.js"
|
|
42
|
-
}
|
|
30
|
+
"gitHead": "04c639af6e49d1881bf3244ebb3940171c26bd3e"
|
|
43
31
|
}
|
|
@@ -4,14 +4,14 @@ import classnames from 'classnames';
|
|
|
4
4
|
|
|
5
5
|
import { color } from '@pie-lib/render-ui';
|
|
6
6
|
import { withMask } from './with-mask';
|
|
7
|
-
//import EditableHtml from '@pie-lib/editable-html';
|
|
7
|
+
//import EditableHtml from '@pie-lib/editable-html-tip-tap';
|
|
8
8
|
|
|
9
9
|
let EditableHtml;
|
|
10
10
|
let StyledEditableHtml;
|
|
11
11
|
|
|
12
12
|
// - mathquill error window not defined
|
|
13
13
|
if (typeof window !== 'undefined') {
|
|
14
|
-
EditableHtml = require('@pie-lib/editable-html')['default'];
|
|
14
|
+
EditableHtml = require('@pie-lib/editable-html-tip-tap')['default'];
|
|
15
15
|
StyledEditableHtml = styled(EditableHtml)(() => ({
|
|
16
16
|
display: 'inline-block',
|
|
17
17
|
verticalAlign: 'middle',
|
|
@@ -25,19 +25,10 @@ if (typeof window !== 'undefined') {
|
|
|
25
25
|
border: `1px solid ${color.incorrect()}`,
|
|
26
26
|
},
|
|
27
27
|
}));
|
|
28
|
-
}
|
|
28
|
+
}
|
|
29
29
|
|
|
30
30
|
const MaskedInput = (props) => (node, data) => {
|
|
31
|
-
const {
|
|
32
|
-
adjustedLimit,
|
|
33
|
-
disabled,
|
|
34
|
-
feedback,
|
|
35
|
-
showCorrectAnswer,
|
|
36
|
-
maxLength,
|
|
37
|
-
spellCheck,
|
|
38
|
-
pluginProps,
|
|
39
|
-
onChange,
|
|
40
|
-
} = props;
|
|
31
|
+
const { adjustedLimit, disabled, feedback, showCorrectAnswer, maxLength, spellCheck, pluginProps, onChange } = props;
|
|
41
32
|
const dataset = node.data?.dataset || {};
|
|
42
33
|
|
|
43
34
|
if (dataset.component === 'input') {
|
|
@@ -59,7 +50,7 @@ const MaskedInput = (props) => (node, data) => {
|
|
|
59
50
|
const handleKeyDown = (event) => {
|
|
60
51
|
// the keyCode value for the Enter/Return key is 13
|
|
61
52
|
if (event.key === 'Enter' || event.keyCode === 13) {
|
|
62
|
-
return
|
|
53
|
+
return true;
|
|
63
54
|
}
|
|
64
55
|
};
|
|
65
56
|
|
|
@@ -76,7 +67,7 @@ const MaskedInput = (props) => (node, data) => {
|
|
|
76
67
|
pluginProps={pluginProps}
|
|
77
68
|
languageCharactersProps={[{ language: 'spanish' }]}
|
|
78
69
|
spellCheck={spellCheck}
|
|
79
|
-
width={`calc(${width}em +
|
|
70
|
+
width={`calc(${width}em + 32px)`} // added 32px for left and right padding of editable-html
|
|
80
71
|
onKeyDown={handleKeyDown}
|
|
81
72
|
autoWidthToolbar
|
|
82
73
|
toolbarOpts={{
|
package/src/serialization.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import Html from 'slate-html-serializer';
|
|
2
1
|
import { object as toStyleObject } from 'to-style';
|
|
3
2
|
import debug from 'debug';
|
|
4
3
|
|
|
@@ -8,6 +7,7 @@ const INLINE = ['span'];
|
|
|
8
7
|
const MARK = ['em', 'strong', 'u'];
|
|
9
8
|
const TEXT_NODE = 3;
|
|
10
9
|
const COMMENT_NODE = 8;
|
|
10
|
+
const ELEMENT_NODE = 1;
|
|
11
11
|
|
|
12
12
|
const attr = (el) => {
|
|
13
13
|
if (!el.attributes || el.attributes.length <= 0) {
|
|
@@ -102,69 +102,159 @@ export const MARK_TAGS = {
|
|
|
102
102
|
strong: 'strong',
|
|
103
103
|
};
|
|
104
104
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
105
|
+
/**
|
|
106
|
+
* Recursively process DOM nodes and convert them to Slate JSON format
|
|
107
|
+
*/
|
|
108
|
+
const processNode = (node, marks = []) => {
|
|
109
|
+
// Skip comment nodes
|
|
110
|
+
if (node.nodeType === COMMENT_NODE) {
|
|
111
|
+
return null;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
// Handle text nodes
|
|
115
|
+
if (node.nodeType === TEXT_NODE) {
|
|
116
|
+
const text = node.textContent;
|
|
117
|
+
const leaf = { text };
|
|
118
|
+
|
|
119
|
+
if (marks.length > 0) {
|
|
120
|
+
leaf.marks = marks.map((m) => ({ type: m, data: undefined }));
|
|
121
|
+
}
|
|
122
|
+
|
|
110
123
|
return {
|
|
111
|
-
object: '
|
|
112
|
-
|
|
113
|
-
nodes: next(el.childNodes),
|
|
124
|
+
object: 'text',
|
|
125
|
+
leaves: [leaf],
|
|
114
126
|
};
|
|
115
|
-
}
|
|
116
|
-
};
|
|
127
|
+
}
|
|
117
128
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
129
|
+
// Handle element nodes
|
|
130
|
+
if (node.nodeType === ELEMENT_NODE) {
|
|
131
|
+
const type = node.tagName.toLowerCase();
|
|
132
|
+
|
|
133
|
+
// Check if this is a mark tag
|
|
134
|
+
const markType = MARK_TAGS[type];
|
|
135
|
+
if (markType) {
|
|
136
|
+
log('[deserialize] mark: ', markType);
|
|
137
|
+
// Process children with this mark added and return them flattened
|
|
138
|
+
const childNodes = processNodes(node.childNodes, [...marks, markType]);
|
|
139
|
+
// Return an array indicator with the nodes (will be flattened by parent)
|
|
140
|
+
return { _flatten: true, nodes: childNodes };
|
|
141
|
+
}
|
|
128
142
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
}
|
|
143
|
+
// Handle math elements specially
|
|
144
|
+
if (type === 'math') {
|
|
145
|
+
return {
|
|
146
|
+
isMath: true,
|
|
147
|
+
nodes: [node],
|
|
148
|
+
};
|
|
149
|
+
}
|
|
135
150
|
|
|
136
|
-
|
|
151
|
+
// Process regular elements
|
|
152
|
+
const normalAttrs = attr(node) || {};
|
|
137
153
|
|
|
138
|
-
|
|
154
|
+
if (type === 'audio' && normalAttrs.controls === '') {
|
|
155
|
+
normalAttrs.controls = true;
|
|
156
|
+
}
|
|
139
157
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
}
|
|
158
|
+
const allAttrs = attributes.reduce(attributesToMap(node), { ...normalAttrs });
|
|
159
|
+
const object = getObject(type);
|
|
143
160
|
|
|
144
|
-
|
|
145
|
-
const object = getObject(type);
|
|
161
|
+
const childNodes = processNodes(node.childNodes, marks);
|
|
146
162
|
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
163
|
+
return {
|
|
164
|
+
object,
|
|
165
|
+
type,
|
|
166
|
+
data: { dataset: { ...node.dataset }, attributes: { ...allAttrs } },
|
|
167
|
+
nodes: childNodes,
|
|
168
|
+
};
|
|
169
|
+
}
|
|
153
170
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
171
|
+
return null;
|
|
172
|
+
};
|
|
173
|
+
|
|
174
|
+
/**
|
|
175
|
+
* Process a NodeList and convert to array of Slate nodes
|
|
176
|
+
*/
|
|
177
|
+
const processNodes = (nodeList, marks = []) => {
|
|
178
|
+
const nodes = [];
|
|
179
|
+
for (let i = 0; i < nodeList.length; i++) {
|
|
180
|
+
const result = processNode(nodeList[i], marks);
|
|
181
|
+
if (result !== null) {
|
|
182
|
+
// Handle flattening for mark nodes
|
|
183
|
+
if (result._flatten && result.nodes) {
|
|
184
|
+
nodes.push(...result.nodes);
|
|
185
|
+
} else {
|
|
186
|
+
nodes.push(result);
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
return nodes;
|
|
191
|
+
};
|
|
163
192
|
|
|
164
193
|
/**
|
|
165
|
-
*
|
|
166
|
-
* Having a default div block will just put every div on it's own line, which is not ideal.
|
|
194
|
+
* Deserialize HTML string to Slate JSON format
|
|
167
195
|
*/
|
|
168
|
-
const
|
|
196
|
+
export const deserialize = (htmlString) => {
|
|
197
|
+
// Handle empty or whitespace-only strings
|
|
198
|
+
if (!htmlString || !htmlString.trim()) {
|
|
199
|
+
return {
|
|
200
|
+
object: 'value',
|
|
201
|
+
document: {
|
|
202
|
+
object: 'document',
|
|
203
|
+
data: {},
|
|
204
|
+
nodes: [
|
|
205
|
+
{
|
|
206
|
+
object: 'block',
|
|
207
|
+
type: 'span',
|
|
208
|
+
data: {},
|
|
209
|
+
isVoid: false,
|
|
210
|
+
nodes: [],
|
|
211
|
+
},
|
|
212
|
+
],
|
|
213
|
+
},
|
|
214
|
+
};
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
// Use DOMParser to parse the HTML
|
|
218
|
+
const parser = new DOMParser();
|
|
219
|
+
const doc = parser.parseFromString(htmlString, 'text/html');
|
|
220
|
+
|
|
221
|
+
// Process all nodes in the body
|
|
222
|
+
let nodes = processNodes(doc.body.childNodes);
|
|
223
|
+
|
|
224
|
+
// If we only have text nodes (no block elements), wrap in default span block
|
|
225
|
+
const hasBlockElements = nodes.some((node) => node.object === 'block' || node.object === 'inline');
|
|
226
|
+
|
|
227
|
+
if (!hasBlockElements && nodes.length > 0) {
|
|
228
|
+
nodes = [
|
|
229
|
+
{
|
|
230
|
+
object: 'block',
|
|
231
|
+
type: 'span',
|
|
232
|
+
data: {},
|
|
233
|
+
isVoid: false,
|
|
234
|
+
nodes: nodes,
|
|
235
|
+
},
|
|
236
|
+
];
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
// If no nodes were produced, add a default span block
|
|
240
|
+
if (nodes.length === 0) {
|
|
241
|
+
nodes = [
|
|
242
|
+
{
|
|
243
|
+
object: 'block',
|
|
244
|
+
type: 'span',
|
|
245
|
+
data: {},
|
|
246
|
+
isVoid: false,
|
|
247
|
+
nodes: [],
|
|
248
|
+
},
|
|
249
|
+
];
|
|
250
|
+
}
|
|
169
251
|
|
|
170
|
-
|
|
252
|
+
return {
|
|
253
|
+
object: 'value',
|
|
254
|
+
document: {
|
|
255
|
+
object: 'document',
|
|
256
|
+
data: {},
|
|
257
|
+
nodes,
|
|
258
|
+
},
|
|
259
|
+
};
|
|
260
|
+
};
|
package/lib/choices/choice.js
DELETED
|
@@ -1,116 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.DRAG_TYPE = void 0;
|
|
9
|
-
exports["default"] = Choice;
|
|
10
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
12
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
14
|
-
var _core = require("@dnd-kit/core");
|
|
15
|
-
var _styles = require("@mui/material/styles");
|
|
16
|
-
var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
|
|
17
|
-
var _mathRendering = require("@pie-lib/math-rendering");
|
|
18
|
-
var _renderUi = require("@pie-lib/render-ui");
|
|
19
|
-
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); }
|
|
20
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
21
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
22
|
-
var DRAG_TYPE = exports.DRAG_TYPE = 'MaskBlank';
|
|
23
|
-
var StyledChoice = (0, _styles.styled)('span')(function (_ref) {
|
|
24
|
-
var theme = _ref.theme,
|
|
25
|
-
disabled = _ref.disabled;
|
|
26
|
-
return _objectSpread({
|
|
27
|
-
border: "solid 0px ".concat(theme.palette.primary.main),
|
|
28
|
-
borderRadius: theme.spacing(2),
|
|
29
|
-
margin: theme.spacing(0.5),
|
|
30
|
-
transform: 'translate(0, 0)',
|
|
31
|
-
display: 'inline-flex'
|
|
32
|
-
}, disabled && {});
|
|
33
|
-
});
|
|
34
|
-
var StyledChip = (0, _styles.styled)(_Chip["default"])(function () {
|
|
35
|
-
return {
|
|
36
|
-
backgroundColor: _renderUi.color.white(),
|
|
37
|
-
border: "1px solid ".concat(_renderUi.color.text()),
|
|
38
|
-
color: _renderUi.color.text(),
|
|
39
|
-
alignItems: 'center',
|
|
40
|
-
display: 'inline-flex',
|
|
41
|
-
height: 'initial',
|
|
42
|
-
minHeight: '32px',
|
|
43
|
-
fontSize: 'inherit',
|
|
44
|
-
whiteSpace: 'pre-wrap',
|
|
45
|
-
maxWidth: '374px',
|
|
46
|
-
// Added for touch devices, for image content.
|
|
47
|
-
// This will prevent the context menu from appearing and not allowing other interactions with the image.
|
|
48
|
-
// If interactions with the image in the token will be requested we should handle only the context Menu.
|
|
49
|
-
pointerEvents: 'none',
|
|
50
|
-
borderRadius: '3px',
|
|
51
|
-
paddingTop: '12px',
|
|
52
|
-
paddingBottom: '12px',
|
|
53
|
-
'&.Mui-disabled': {
|
|
54
|
-
opacity: 1
|
|
55
|
-
}
|
|
56
|
-
};
|
|
57
|
-
});
|
|
58
|
-
var StyledChipLabel = (0, _styles.styled)('span')(function () {
|
|
59
|
-
return {
|
|
60
|
-
whiteSpace: 'normal',
|
|
61
|
-
'& img': {
|
|
62
|
-
display: 'block',
|
|
63
|
-
padding: '2px 0'
|
|
64
|
-
},
|
|
65
|
-
'& mjx-frac': {
|
|
66
|
-
fontSize: '120% !important'
|
|
67
|
-
}
|
|
68
|
-
};
|
|
69
|
-
});
|
|
70
|
-
function Choice(_ref2) {
|
|
71
|
-
var _rootRef$current, _rootRef$current2;
|
|
72
|
-
var choice = _ref2.choice,
|
|
73
|
-
disabled = _ref2.disabled,
|
|
74
|
-
instanceId = _ref2.instanceId;
|
|
75
|
-
var rootRef = (0, _react.useRef)(null);
|
|
76
|
-
var _useDraggable = (0, _core.useDraggable)({
|
|
77
|
-
id: "choice-".concat(choice.id),
|
|
78
|
-
data: {
|
|
79
|
-
choice: choice,
|
|
80
|
-
instanceId: instanceId,
|
|
81
|
-
fromChoice: true,
|
|
82
|
-
type: DRAG_TYPE
|
|
83
|
-
},
|
|
84
|
-
disabled: disabled
|
|
85
|
-
}),
|
|
86
|
-
attributes = _useDraggable.attributes,
|
|
87
|
-
listeners = _useDraggable.listeners,
|
|
88
|
-
setNodeRef = _useDraggable.setNodeRef,
|
|
89
|
-
isDragging = _useDraggable.isDragging;
|
|
90
|
-
(0, _react.useEffect)(function () {
|
|
91
|
-
(0, _mathRendering.renderMath)(rootRef.current);
|
|
92
|
-
}, [choice.value]);
|
|
93
|
-
return /*#__PURE__*/_react["default"].createElement(StyledChoice, (0, _extends2["default"])({
|
|
94
|
-
ref: setNodeRef,
|
|
95
|
-
style: isDragging ? {
|
|
96
|
-
width: (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.offsetWidth,
|
|
97
|
-
height: (_rootRef$current2 = rootRef.current) === null || _rootRef$current2 === void 0 ? void 0 : _rootRef$current2.offsetHeight
|
|
98
|
-
} : {},
|
|
99
|
-
disabled: disabled
|
|
100
|
-
}, listeners, attributes), /*#__PURE__*/_react["default"].createElement(StyledChip, {
|
|
101
|
-
clickable: false,
|
|
102
|
-
disabled: disabled,
|
|
103
|
-
ref: rootRef,
|
|
104
|
-
label: /*#__PURE__*/_react["default"].createElement(StyledChipLabel, {
|
|
105
|
-
dangerouslySetInnerHTML: {
|
|
106
|
-
__html: choice.value
|
|
107
|
-
}
|
|
108
|
-
})
|
|
109
|
-
}));
|
|
110
|
-
}
|
|
111
|
-
Choice.propTypes = {
|
|
112
|
-
choice: _propTypes["default"].object.isRequired,
|
|
113
|
-
disabled: _propTypes["default"].bool,
|
|
114
|
-
instanceId: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
|
|
115
|
-
};
|
|
116
|
-
//# sourceMappingURL=choice.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"choice.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_core","_styles","_Chip","_mathRendering","_renderUi","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","DRAG_TYPE","exports","StyledChoice","styled","_ref","theme","disabled","border","concat","palette","primary","main","borderRadius","spacing","margin","transform","display","StyledChip","Chip","backgroundColor","color","white","text","alignItems","height","minHeight","fontSize","whiteSpace","maxWidth","pointerEvents","paddingTop","paddingBottom","opacity","StyledChipLabel","padding","Choice","_ref2","_rootRef$current","_rootRef$current2","choice","instanceId","rootRef","useRef","_useDraggable","useDraggable","id","data","fromChoice","type","attributes","listeners","setNodeRef","isDragging","useEffect","renderMath","current","value","createElement","_extends2","ref","style","width","offsetWidth","offsetHeight","clickable","label","dangerouslySetInnerHTML","__html","propTypes","PropTypes","object","isRequired","bool","oneOfType","string","number"],"sources":["../../src/choices/choice.jsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { useDraggable } from '@dnd-kit/core';\nimport { styled } from '@mui/material/styles';\nimport Chip from '@mui/material/Chip';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { color } from '@pie-lib/render-ui';\n\nexport const DRAG_TYPE = 'MaskBlank';\n\nconst StyledChoice = styled('span')(({ theme, disabled }) => ({\n border: `solid 0px ${theme.palette.primary.main}`,\n borderRadius: theme.spacing(2),\n margin: theme.spacing(0.5),\n transform: 'translate(0, 0)',\n display: 'inline-flex',\n ...(disabled && {}),\n}));\n\nconst StyledChip = styled(Chip)(() => ({\n backgroundColor: color.white(),\n border: `1px solid ${color.text()}`,\n color: color.text(),\n alignItems: 'center',\n display: 'inline-flex',\n height: 'initial',\n minHeight: '32px',\n fontSize: 'inherit',\n whiteSpace: 'pre-wrap',\n maxWidth: '374px',\n // Added for touch devices, for image content.\n // This will prevent the context menu from appearing and not allowing other interactions with the image.\n // If interactions with the image in the token will be requested we should handle only the context Menu.\n pointerEvents: 'none',\n borderRadius: '3px',\n paddingTop: '12px',\n paddingBottom: '12px',\n\n '&.Mui-disabled': {\n opacity: 1,\n },\n}));\n\nconst StyledChipLabel = styled('span')(() => ({\n whiteSpace: 'normal',\n '& img': {\n display: 'block',\n padding: '2px 0',\n },\n '& mjx-frac': {\n fontSize: '120% !important',\n },\n}));\n\nexport default function Choice({ choice, disabled, instanceId }) {\n const rootRef = useRef(null);\n\n const { attributes, listeners, setNodeRef, isDragging } = useDraggable({\n id: `choice-${choice.id}`,\n data: { choice, instanceId, fromChoice: true, type: DRAG_TYPE },\n disabled,\n });\n\n useEffect(() => {\n renderMath(rootRef.current);\n }, [choice.value]);\n\n return (\n <StyledChoice\n ref={setNodeRef}\n style={\n isDragging\n ? {\n width: rootRef.current?.offsetWidth,\n height: rootRef.current?.offsetHeight,\n }\n : {}\n }\n disabled={disabled}\n {...listeners}\n {...attributes}\n >\n <StyledChip\n clickable={false}\n disabled={disabled}\n ref={rootRef}\n label={<StyledChipLabel dangerouslySetInnerHTML={{ __html: choice.value }} />}\n />\n </StyledChoice>\n );\n}\n\nChoice.propTypes = {\n choice: PropTypes.object.isRequired,\n disabled: PropTypes.bool,\n instanceId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n};\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAH,sBAAA,CAAAF,OAAA;AACA,IAAAM,cAAA,GAAAN,OAAA;AACA,IAAAO,SAAA,GAAAP,OAAA;AAA2C,SAAAD,wBAAAS,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAX,uBAAA,YAAAA,wBAAAS,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;AAAA,SAAAmB,QAAApB,CAAA,EAAAG,CAAA,QAAAF,CAAA,GAAAgB,MAAA,CAAAI,IAAA,CAAArB,CAAA,OAAAiB,MAAA,CAAAK,qBAAA,QAAAhB,CAAA,GAAAW,MAAA,CAAAK,qBAAA,CAAAtB,CAAA,GAAAG,CAAA,KAAAG,CAAA,GAAAA,CAAA,CAAAiB,MAAA,WAAApB,CAAA,WAAAc,MAAA,CAAAE,wBAAA,CAAAnB,CAAA,EAAAG,CAAA,EAAAqB,UAAA,OAAAvB,CAAA,CAAAwB,IAAA,CAAAC,KAAA,CAAAzB,CAAA,EAAAK,CAAA,YAAAL,CAAA;AAAA,SAAA0B,cAAA3B,CAAA,aAAAG,CAAA,MAAAA,CAAA,GAAAyB,SAAA,CAAAC,MAAA,EAAA1B,CAAA,UAAAF,CAAA,WAAA2B,SAAA,CAAAzB,CAAA,IAAAyB,SAAA,CAAAzB,CAAA,QAAAA,CAAA,OAAAiB,OAAA,CAAAH,MAAA,CAAAhB,CAAA,OAAA6B,OAAA,WAAA3B,CAAA,QAAA4B,gBAAA,aAAA/B,CAAA,EAAAG,CAAA,EAAAF,CAAA,CAAAE,CAAA,SAAAc,MAAA,CAAAe,yBAAA,GAAAf,MAAA,CAAAgB,gBAAA,CAAAjC,CAAA,EAAAiB,MAAA,CAAAe,yBAAA,CAAA/B,CAAA,KAAAmB,OAAA,CAAAH,MAAA,CAAAhB,CAAA,GAAA6B,OAAA,WAAA3B,CAAA,IAAAc,MAAA,CAAAC,cAAA,CAAAlB,CAAA,EAAAG,CAAA,EAAAc,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAE,CAAA,iBAAAH,CAAA;AAEpC,IAAMkC,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,WAAW;AAEpC,IAAME,YAAY,GAAG,IAAAC,cAAM,EAAC,MAAM,CAAC,CAAC,UAAAC,IAAA;EAAA,IAAGC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;EAAA,OAAAb,aAAA;IACpDc,MAAM,eAAAC,MAAA,CAAeH,KAAK,CAACI,OAAO,CAACC,OAAO,CAACC,IAAI,CAAE;IACjDC,YAAY,EAAEP,KAAK,CAACQ,OAAO,CAAC,CAAC,CAAC;IAC9BC,MAAM,EAAET,KAAK,CAACQ,OAAO,CAAC,GAAG,CAAC;IAC1BE,SAAS,EAAE,iBAAiB;IAC5BC,OAAO,EAAE;EAAa,GAClBV,QAAQ,IAAI,CAAC,CAAC;AAAA,CAClB,CAAC;AAEH,IAAMW,UAAU,GAAG,IAAAd,cAAM,EAACe,gBAAI,CAAC,CAAC;EAAA,OAAO;IACrCC,eAAe,EAAEC,eAAK,CAACC,KAAK,CAAC,CAAC;IAC9Bd,MAAM,eAAAC,MAAA,CAAeY,eAAK,CAACE,IAAI,CAAC,CAAC,CAAE;IACnCF,KAAK,EAAEA,eAAK,CAACE,IAAI,CAAC,CAAC;IACnBC,UAAU,EAAE,QAAQ;IACpBP,OAAO,EAAE,aAAa;IACtBQ,MAAM,EAAE,SAAS;IACjBC,SAAS,EAAE,MAAM;IACjBC,QAAQ,EAAE,SAAS;IACnBC,UAAU,EAAE,UAAU;IACtBC,QAAQ,EAAE,OAAO;IACjB;IACA;IACA;IACAC,aAAa,EAAE,MAAM;IACrBjB,YAAY,EAAE,KAAK;IACnBkB,UAAU,EAAE,MAAM;IAClBC,aAAa,EAAE,MAAM;IAErB,gBAAgB,EAAE;MAChBC,OAAO,EAAE;IACX;EACF,CAAC;AAAA,CAAC,CAAC;AAEH,IAAMC,eAAe,GAAG,IAAA9B,cAAM,EAAC,MAAM,CAAC,CAAC;EAAA,OAAO;IAC5CwB,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE;MACPX,OAAO,EAAE,OAAO;MAChBkB,OAAO,EAAE;IACX,CAAC;IACD,YAAY,EAAE;MACZR,QAAQ,EAAE;IACZ;EACF,CAAC;AAAA,CAAC,CAAC;AAEY,SAASS,MAAMA,CAAAC,KAAA,EAAmC;EAAA,IAAAC,gBAAA,EAAAC,iBAAA;EAAA,IAAhCC,MAAM,GAAAH,KAAA,CAANG,MAAM;IAAEjC,QAAQ,GAAA8B,KAAA,CAAR9B,QAAQ;IAAEkC,UAAU,GAAAJ,KAAA,CAAVI,UAAU;EAC3D,IAAMC,OAAO,GAAG,IAAAC,aAAM,EAAC,IAAI,CAAC;EAE5B,IAAAC,aAAA,GAA0D,IAAAC,kBAAY,EAAC;MACrEC,EAAE,YAAArC,MAAA,CAAY+B,MAAM,CAACM,EAAE,CAAE;MACzBC,IAAI,EAAE;QAAEP,MAAM,EAANA,MAAM;QAAEC,UAAU,EAAVA,UAAU;QAAEO,UAAU,EAAE,IAAI;QAAEC,IAAI,EAAEhD;MAAU,CAAC;MAC/DM,QAAQ,EAARA;IACF,CAAC,CAAC;IAJM2C,UAAU,GAAAN,aAAA,CAAVM,UAAU;IAAEC,SAAS,GAAAP,aAAA,CAATO,SAAS;IAAEC,UAAU,GAAAR,aAAA,CAAVQ,UAAU;IAAEC,UAAU,GAAAT,aAAA,CAAVS,UAAU;EAMrD,IAAAC,gBAAS,EAAC,YAAM;IACd,IAAAC,yBAAU,EAACb,OAAO,CAACc,OAAO,CAAC;EAC7B,CAAC,EAAE,CAAChB,MAAM,CAACiB,KAAK,CAAC,CAAC;EAElB,oBACEpG,MAAA,YAAAqG,aAAA,CAACvD,YAAY,MAAAwD,SAAA;IACXC,GAAG,EAAER,UAAW;IAChBS,KAAK,EACHR,UAAU,GACN;MACES,KAAK,GAAAxB,gBAAA,GAAEI,OAAO,CAACc,OAAO,cAAAlB,gBAAA,uBAAfA,gBAAA,CAAiByB,WAAW;MACnCtC,MAAM,GAAAc,iBAAA,GAAEG,OAAO,CAACc,OAAO,cAAAjB,iBAAA,uBAAfA,iBAAA,CAAiByB;IAC3B,CAAC,GACD,CAAC,CACN;IACDzD,QAAQ,EAAEA;EAAS,GACf4C,SAAS,EACTD,UAAU,gBAEd7F,MAAA,YAAAqG,aAAA,CAACxC,UAAU;IACT+C,SAAS,EAAE,KAAM;IACjB1D,QAAQ,EAAEA,QAAS;IACnBqD,GAAG,EAAElB,OAAQ;IACbwB,KAAK,eAAE7G,MAAA,YAAAqG,aAAA,CAACxB,eAAe;MAACiC,uBAAuB,EAAE;QAAEC,MAAM,EAAE5B,MAAM,CAACiB;MAAM;IAAE,CAAE;EAAE,CAC/E,CACW,CAAC;AAEnB;AAEArB,MAAM,CAACiC,SAAS,GAAG;EACjB7B,MAAM,EAAE8B,qBAAS,CAACC,MAAM,CAACC,UAAU;EACnCjE,QAAQ,EAAE+D,qBAAS,CAACG,IAAI;EACxBhC,UAAU,EAAE6B,qBAAS,CAACI,SAAS,CAAC,CAACJ,qBAAS,CAACK,MAAM,EAAEL,qBAAS,CAACM,MAAM,CAAC;AACtE,CAAC","ignoreList":[]}
|
package/lib/choices/index.js
DELETED
|
@@ -1,103 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports["default"] = void 0;
|
|
8
|
-
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
9
|
-
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
10
|
-
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
11
|
-
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
12
|
-
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
13
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
14
|
-
var _react = _interopRequireDefault(require("react"));
|
|
15
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
16
|
-
var _findKey = _interopRequireDefault(require("lodash/findKey"));
|
|
17
|
-
var _choice = _interopRequireDefault(require("./choice"));
|
|
18
|
-
var _drag = require("@pie-lib/drag");
|
|
19
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
20
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
21
|
-
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
|
|
22
|
-
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
23
|
-
var Choices = exports["default"] = /*#__PURE__*/function (_React$Component) {
|
|
24
|
-
function Choices() {
|
|
25
|
-
var _this;
|
|
26
|
-
(0, _classCallCheck2["default"])(this, Choices);
|
|
27
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
28
|
-
args[_key] = arguments[_key];
|
|
29
|
-
}
|
|
30
|
-
_this = _callSuper(this, Choices, [].concat(args));
|
|
31
|
-
(0, _defineProperty2["default"])(_this, "getStyleForWrapper", function () {
|
|
32
|
-
var choicePosition = _this.props.choicePosition;
|
|
33
|
-
switch (choicePosition) {
|
|
34
|
-
case 'above':
|
|
35
|
-
return {
|
|
36
|
-
margin: '0 0 40px 0'
|
|
37
|
-
};
|
|
38
|
-
case 'below':
|
|
39
|
-
return {
|
|
40
|
-
margin: '40px 0 0 0'
|
|
41
|
-
};
|
|
42
|
-
case 'right':
|
|
43
|
-
return {
|
|
44
|
-
margin: '0 0 0 40px'
|
|
45
|
-
};
|
|
46
|
-
default:
|
|
47
|
-
return {
|
|
48
|
-
margin: '0 40px 0 0'
|
|
49
|
-
};
|
|
50
|
-
}
|
|
51
|
-
});
|
|
52
|
-
return _this;
|
|
53
|
-
}
|
|
54
|
-
(0, _inherits2["default"])(Choices, _React$Component);
|
|
55
|
-
return (0, _createClass2["default"])(Choices, [{
|
|
56
|
-
key: "render",
|
|
57
|
-
value: function render() {
|
|
58
|
-
var _this$props = this.props,
|
|
59
|
-
disabled = _this$props.disabled,
|
|
60
|
-
duplicates = _this$props.duplicates,
|
|
61
|
-
choices = _this$props.choices,
|
|
62
|
-
value = _this$props.value,
|
|
63
|
-
instanceId = _this$props.instanceId;
|
|
64
|
-
var filteredChoices = choices.filter(function (c) {
|
|
65
|
-
if (duplicates === true) {
|
|
66
|
-
return true;
|
|
67
|
-
}
|
|
68
|
-
var foundChoice = (0, _findKey["default"])(value, function (v) {
|
|
69
|
-
return v === c.id;
|
|
70
|
-
});
|
|
71
|
-
return foundChoice === undefined;
|
|
72
|
-
});
|
|
73
|
-
var elementStyle = _objectSpread(_objectSpread({}, this.getStyleForWrapper()), {}, {
|
|
74
|
-
minWidth: '100px'
|
|
75
|
-
});
|
|
76
|
-
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
77
|
-
style: elementStyle
|
|
78
|
-
}, /*#__PURE__*/_react["default"].createElement(_drag.DragDroppablePlaceholder, {
|
|
79
|
-
disabled: disabled,
|
|
80
|
-
instanceId: instanceId
|
|
81
|
-
}, filteredChoices.map(function (c, index) {
|
|
82
|
-
return /*#__PURE__*/_react["default"].createElement(_choice["default"], {
|
|
83
|
-
key: "".concat(c.value, "-").concat(index),
|
|
84
|
-
disabled: disabled,
|
|
85
|
-
choice: c,
|
|
86
|
-
instanceId: instanceId
|
|
87
|
-
});
|
|
88
|
-
})));
|
|
89
|
-
}
|
|
90
|
-
}]);
|
|
91
|
-
}(_react["default"].Component);
|
|
92
|
-
(0, _defineProperty2["default"])(Choices, "propTypes", {
|
|
93
|
-
disabled: _propTypes["default"].bool,
|
|
94
|
-
duplicates: _propTypes["default"].bool,
|
|
95
|
-
choices: _propTypes["default"].arrayOf(_propTypes["default"].shape({
|
|
96
|
-
label: _propTypes["default"].string,
|
|
97
|
-
value: _propTypes["default"].string
|
|
98
|
-
})),
|
|
99
|
-
value: _propTypes["default"].object,
|
|
100
|
-
choicePosition: _propTypes["default"].string.isRequired,
|
|
101
|
-
instanceId: _propTypes["default"].string // Added for drag isolation
|
|
102
|
-
});
|
|
103
|
-
//# sourceMappingURL=index.js.map
|
package/lib/choices/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_propTypes","_findKey","_choice","_drag","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","_callSuper","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","Boolean","prototype","valueOf","call","Choices","exports","_React$Component","_this","_classCallCheck2","_len","args","Array","_key","concat","choicePosition","props","margin","_inherits2","_createClass2","key","value","render","_this$props","disabled","duplicates","choices","instanceId","filteredChoices","c","foundChoice","findKey","v","id","undefined","elementStyle","getStyleForWrapper","minWidth","createElement","style","DragDroppablePlaceholder","map","index","choice","React","Component","PropTypes","bool","arrayOf","shape","label","string","object","isRequired"],"sources":["../../src/choices/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport findKey from 'lodash/findKey';\nimport Choice from './choice';\nimport { DragDroppablePlaceholder } from '@pie-lib/drag';\n\nexport default class Choices extends React.Component {\n static propTypes = {\n disabled: PropTypes.bool,\n duplicates: PropTypes.bool,\n choices: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.string })),\n value: PropTypes.object,\n choicePosition: PropTypes.string.isRequired,\n instanceId: PropTypes.string, // Added for drag isolation\n };\n\n getStyleForWrapper = () => {\n const { choicePosition } = this.props;\n\n switch (choicePosition) {\n case 'above':\n return {\n margin: '0 0 40px 0',\n };\n\n case 'below':\n return {\n margin: '40px 0 0 0',\n };\n\n case 'right':\n return {\n margin: '0 0 0 40px',\n };\n\n default:\n return {\n margin: '0 40px 0 0',\n };\n }\n };\n\n render() {\n const { disabled, duplicates, choices, value, instanceId } = this.props;\n const filteredChoices = choices.filter((c) => {\n if (duplicates === true) {\n return true;\n }\n const foundChoice = findKey(value, (v) => v === c.id);\n return foundChoice === undefined;\n });\n const elementStyle = { ...this.getStyleForWrapper(), minWidth: '100px' };\n\n return (\n <div style={elementStyle}>\n <DragDroppablePlaceholder disabled={disabled} instanceId={instanceId}>\n {filteredChoices.map((c, index) => (\n <Choice \n key={`${c.value}-${index}`} \n disabled={disabled} \n choice={c} \n instanceId={instanceId}\n />\n ))}\n </DragDroppablePlaceholder>\n </div>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
package/lib/componentize.js
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports["default"] = void 0;
|
|
7
|
-
var REGEX = /\{\{(\d+)\}\}/g;
|
|
8
|
-
var _default = exports["default"] = function _default(s, t) {
|
|
9
|
-
if (!s) {
|
|
10
|
-
return {
|
|
11
|
-
markup: ''
|
|
12
|
-
};
|
|
13
|
-
}
|
|
14
|
-
var markup = s.replace(REGEX, function (match, g) {
|
|
15
|
-
return "<span data-component=\"".concat(t, "\" data-id=\"").concat(g, "\"></span>");
|
|
16
|
-
});
|
|
17
|
-
return {
|
|
18
|
-
markup: markup
|
|
19
|
-
};
|
|
20
|
-
};
|
|
21
|
-
//# sourceMappingURL=componentize.js.map
|