@pie-lib/drag 2.2.1-next.0 → 2.2.2-next.19

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.
Files changed (11) hide show
  1. package/CHANGELOG.md +28 -129
  2. package/lib/droppable-placeholder.js +11 -3
  3. package/lib/droppable-placeholder.js.map +1 -1
  4. package/lib/preview-component.js +107 -0
  5. package/lib/preview-component.js.map +1 -0
  6. package/lib/with-drag-context.js +29 -4
  7. package/lib/with-drag-context.js.map +1 -1
  8. package/package.json +3 -3
  9. package/src/droppable-placeholder.jsx +11 -1
  10. package/src/preview-component.jsx +79 -0
  11. package/src/with-drag-context.js +18 -3
package/CHANGELOG.md CHANGED
@@ -3,250 +3,149 @@
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.2.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.1.19...@pie-lib/drag@2.2.0) (2023-06-12)
6
+ ## [2.2.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.0...@pie-lib/drag@2.2.1) (2023-06-24)
7
7
 
8
+ **Note:** Version bump only for package @pie-lib/drag
8
9
 
9
- ### Features
10
10
 
11
- * **drag:** add context to dnd provider content is needed when multiple dndProviders are used ([07597d8](https://github.com/pie-framework/pie-lib/commit/07597d80aba5788c9cb3b58012742413c9bdad20))
12
11
 
13
12
 
14
13
 
14
+ # [2.2.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.1.19...@pie-lib/drag@2.2.0) (2023-06-12)
15
15
 
16
+ ### Features
16
17
 
17
- ## [2.1.19](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.1.18...@pie-lib/drag@2.1.19) (2023-06-05)
18
+ - **drag:** add context to dnd provider content is needed when multiple dndProviders are used ([07597d8](https://github.com/pie-framework/pie-lib/commit/07597d80aba5788c9cb3b58012742413c9bdad20))
18
19
 
20
+ ## [2.1.19](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.1.18...@pie-lib/drag@2.1.19) (2023-06-05)
19
21
 
20
22
  ### Bug Fixes
21
23
 
22
- * **drag:** provide drag support for multiple devices PD-2722 ([747186c](https://github.com/pie-framework/pie-lib/commit/747186c230645ca805a8c446e7c74d1ec0003ab7))
23
- * **drag:** provide drag support for multiple-devices PD-2722 ([04534da](https://github.com/pie-framework/pie-lib/commit/04534da486616ddbfd08794361c9bdadaa2d1655))
24
-
25
-
26
-
27
-
24
+ - **drag:** provide drag support for multiple devices PD-2722 ([747186c](https://github.com/pie-framework/pie-lib/commit/747186c230645ca805a8c446e7c74d1ec0003ab7))
25
+ - **drag:** provide drag support for multiple-devices PD-2722 ([04534da](https://github.com/pie-framework/pie-lib/commit/04534da486616ddbfd08794361c9bdadaa2d1655))
28
26
 
29
27
  ## [2.1.18](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.1.17...@pie-lib/drag@2.1.18) (2023-04-19)
30
28
 
31
-
32
29
  ### Bug Fixes
33
30
 
34
- * **eslint:** fix eslint problems-PD-2732 ([9eb9976](https://github.com/pie-framework/pie-lib/commit/9eb9976749753da86e1057a07bd2cfc65bf64ae4))
35
-
36
-
37
-
38
-
31
+ - **eslint:** fix eslint problems-PD-2732 ([9eb9976](https://github.com/pie-framework/pie-lib/commit/9eb9976749753da86e1057a07bd2cfc65bf64ae4))
39
32
 
40
33
  ## [2.1.17](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.1.16...@pie-lib/drag@2.1.17) (2023-04-14)
41
34
 
42
-
43
35
  ### Bug Fixes
44
36
 
45
- * **drag:** revert Carla's changes for PD-2495 because it looks like it's causing PD-2722 ([b8d6973](https://github.com/pie-framework/pie-lib/commit/b8d69737844d60b69641d57078eb6a3509d3728b))
46
-
47
-
48
-
49
-
37
+ - **drag:** revert Carla's changes for PD-2495 because it looks like it's causing PD-2722 ([b8d6973](https://github.com/pie-framework/pie-lib/commit/b8d69737844d60b69641d57078eb6a3509d3728b))
50
38
 
51
39
  ## [2.1.16](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.1.15...@pie-lib/drag@2.1.16) (2023-04-14)
52
40
 
53
-
54
41
  ### Bug Fixes
55
42
 
56
- * commit for build (testing purpose) ([75acd61](https://github.com/pie-framework/pie-lib/commit/75acd61956f266fc3d4d2b6819782a0de61b0ec7))
57
-
58
-
59
-
60
-
43
+ - commit for build (testing purpose) ([75acd61](https://github.com/pie-framework/pie-lib/commit/75acd61956f266fc3d4d2b6819782a0de61b0ec7))
61
44
 
62
45
  ## [2.1.15](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.1.13...@pie-lib/drag@2.1.15) (2023-02-28)
63
46
 
64
-
65
47
  ### Bug Fixes
66
48
 
67
- * version bump ([d9280a9](https://github.com/pie-framework/pie-lib/commit/d9280a9aeddab459b6d84ecdbeb62814e1eee965))
68
-
69
-
70
-
71
-
49
+ - version bump ([d9280a9](https://github.com/pie-framework/pie-lib/commit/d9280a9aeddab459b6d84ecdbeb62814e1eee965))
72
50
 
73
51
  ## [2.1.13](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.1.12...@pie-lib/drag@2.1.13) (2023-02-28)
74
52
 
75
-
76
53
  ### Bug Fixes
77
54
 
78
- * **categorize:** set maxWidth and minWidth in order to avoid overlapping ([329578b](https://github.com/pie-framework/pie-lib/commit/329578bd3a76112b1ab26b944f69bae95e622032))
79
- * **drag-in-the-blank:** prevent scroll of the page when dragging the choices, try to improve removing selected choices on touch devices ([ae485e3](https://github.com/pie-framework/pie-lib/commit/ae485e342ccc542dbd91765980bbf5588bfe4726))
80
-
81
-
82
-
83
-
55
+ - **categorize:** set maxWidth and minWidth in order to avoid overlapping ([329578b](https://github.com/pie-framework/pie-lib/commit/329578bd3a76112b1ab26b944f69bae95e622032))
56
+ - **drag-in-the-blank:** prevent scroll of the page when dragging the choices, try to improve removing selected choices on touch devices ([ae485e3](https://github.com/pie-framework/pie-lib/commit/ae485e342ccc542dbd91765980bbf5588bfe4726))
84
57
 
85
58
  ## [2.1.12](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.1.10...@pie-lib/drag@2.1.12) (2023-01-31)
86
59
 
87
60
  **Note:** Version bump only for package @pie-lib/drag
88
61
 
89
-
90
-
91
-
92
-
93
62
  ## [2.1.10](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.1.9...@pie-lib/drag@2.1.10) (2023-01-31)
94
63
 
95
64
  **Note:** Version bump only for package @pie-lib/drag
96
65
 
97
-
98
-
99
-
100
-
101
66
  ## [2.1.9](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.1.8...@pie-lib/drag@2.1.9) (2023-01-31)
102
67
 
103
68
  **Note:** Version bump only for package @pie-lib/drag
104
69
 
105
-
106
-
107
-
108
-
109
70
  ## [2.1.8](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.1.7...@pie-lib/drag@2.1.8) (2023-01-31)
110
71
 
111
72
  **Note:** Version bump only for package @pie-lib/drag
112
73
 
113
-
114
-
115
-
116
-
117
74
  ## [2.1.7](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.1.5...@pie-lib/drag@2.1.7) (2023-01-31)
118
75
 
119
76
  **Note:** Version bump only for package @pie-lib/drag
120
77
 
121
-
122
-
123
-
124
-
125
78
  ## [2.1.5](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.1.3...@pie-lib/drag@2.1.5) (2023-01-31)
126
79
 
127
80
  **Note:** Version bump only for package @pie-lib/drag
128
81
 
129
-
130
-
131
-
132
-
133
82
  ## [2.1.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.1.1...@pie-lib/drag@2.1.3) (2023-01-31)
134
83
 
135
84
  **Note:** Version bump only for package @pie-lib/drag
136
85
 
137
-
138
-
139
-
140
-
141
86
  ## [2.1.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.1.0...@pie-lib/drag@2.1.1) (2023-01-31)
142
87
 
143
-
144
88
  ### Bug Fixes
145
89
 
146
- * **drag:** add support for dragging events on touch devices ([b367c15](https://github.com/pie-framework/pie-lib/commit/b367c155df323a64da9f2b6633ec5eebda879e22))
147
- * **drag:** downgrade react-dnd-touch-backend to a version that is compatible with react-dnd version 14.x. ([d8a3577](https://github.com/pie-framework/pie-lib/commit/d8a35779ac8c55573cf71b4dedfa3617780303e4))
148
- * **drag:** prevent scroll for dragging placeholder board ([d37d211](https://github.com/pie-framework/pie-lib/commit/d37d2110af7a199e14d2c7f80720d65013f63602))
149
-
150
-
151
-
152
-
90
+ - **drag:** add support for dragging events on touch devices ([b367c15](https://github.com/pie-framework/pie-lib/commit/b367c155df323a64da9f2b6633ec5eebda879e22))
91
+ - **drag:** downgrade react-dnd-touch-backend to a version that is compatible with react-dnd version 14.x. ([d8a3577](https://github.com/pie-framework/pie-lib/commit/d8a35779ac8c55573cf71b4dedfa3617780303e4))
92
+ - **drag:** prevent scroll for dragging placeholder board ([d37d211](https://github.com/pie-framework/pie-lib/commit/d37d2110af7a199e14d2c7f80720d65013f63602))
153
93
 
154
94
  # [2.1.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.0.6...@pie-lib/drag@2.1.0) (2023-01-16)
155
95
 
156
-
157
96
  ### Bug Fixes
158
97
 
159
- * **match-list:** fix choices arrangement in the drag placeholder ([c05ad41](https://github.com/pie-framework/pie-lib/commit/c05ad41d37704aad0927fb36705c47cafe40add0))
160
-
98
+ - **match-list:** fix choices arrangement in the drag placeholder ([c05ad41](https://github.com/pie-framework/pie-lib/commit/c05ad41d37704aad0927fb36705c47cafe40add0))
161
99
 
162
100
  ### Features
163
101
 
164
- * added theme naming support + cleanup ([72d562d](https://github.com/pie-framework/pie-lib/commit/72d562d509e5d31d883690eb455a9afea6bf54fc))
165
-
166
-
167
-
168
-
102
+ - added theme naming support + cleanup ([72d562d](https://github.com/pie-framework/pie-lib/commit/72d562d509e5d31d883690eb455a9afea6bf54fc))
169
103
 
170
104
  ## [2.0.6](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.0.5...@pie-lib/drag@2.0.6) (2023-01-04)
171
105
 
172
-
173
106
  ### Bug Fixes
174
107
 
175
- * **drag:** refactor the droppable placeholder for match-list and drag-in-the-blank PD-1954 PD-1956 ([8696d61](https://github.com/pie-framework/pie-lib/commit/8696d61a0762835186ceb876e03100e2e9c820fc))
176
-
177
-
178
-
179
-
108
+ - **drag:** refactor the droppable placeholder for match-list and drag-in-the-blank PD-1954 PD-1956 ([8696d61](https://github.com/pie-framework/pie-lib/commit/8696d61a0762835186ceb876e03100e2e9c820fc))
180
109
 
181
110
  ## [2.0.5](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.0.4...@pie-lib/drag@2.0.5) (2023-01-03)
182
111
 
183
-
184
112
  ### Bug Fixes
185
113
 
186
- * **drag:** fix drop for match-list ([728203d](https://github.com/pie-framework/pie-lib/commit/728203d8014ce83b843b2695bf969c4fc53eb381))
187
- * **drag:** fix drop function for drag-in-the-blank element ([b491299](https://github.com/pie-framework/pie-lib/commit/b4912998d920c7e085dc9c9eb4e70c432cb7eb1c))
188
-
189
-
190
-
191
-
114
+ - **drag:** fix drop for match-list ([728203d](https://github.com/pie-framework/pie-lib/commit/728203d8014ce83b843b2695bf969c4fc53eb381))
115
+ - **drag:** fix drop function for drag-in-the-blank element ([b491299](https://github.com/pie-framework/pie-lib/commit/b4912998d920c7e085dc9c9eb4e70c432cb7eb1c))
192
116
 
193
117
  ## [2.0.4](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.0.3...@pie-lib/drag@2.0.4) (2022-12-19)
194
118
 
195
-
196
119
  ### Bug Fixes
197
120
 
198
- * **drag,categorize:** drag an answer choice elsewhere after it has been placed in a category-PD-1995 ([d32015b](https://github.com/pie-framework/pie-lib/commit/d32015b31d50b45851df2f27ad517eeaad8ae511))
199
-
200
-
201
-
202
-
121
+ - **drag,categorize:** drag an answer choice elsewhere after it has been placed in a category-PD-1995 ([d32015b](https://github.com/pie-framework/pie-lib/commit/d32015b31d50b45851df2f27ad517eeaad8ae511))
203
122
 
204
123
  ## [2.0.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.0.2...@pie-lib/drag@2.0.3) (2022-12-06)
205
124
 
206
-
207
125
  ### Bug Fixes
208
126
 
209
- * **categorize:** reduce lag when removing a token from a category PD-1953 ([f3bdb44](https://github.com/pie-framework/pie-lib/commit/f3bdb44360131fc61150fd42ec988eb1c5f15eaa))
210
-
211
-
212
-
213
-
127
+ - **categorize:** reduce lag when removing a token from a category PD-1953 ([f3bdb44](https://github.com/pie-framework/pie-lib/commit/f3bdb44360131fc61150fd42ec988eb1c5f15eaa))
214
128
 
215
129
  ## [2.0.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.0.1...@pie-lib/drag@2.0.2) (2022-11-29)
216
130
 
217
-
218
131
  ### Bug Fixes
219
132
 
220
- * react-dnd issue ([a39cb6d](https://github.com/pie-framework/pie-lib/commit/a39cb6dfa290840f3521f390ac3bd8091acee3d1))
221
-
222
-
223
-
224
-
133
+ - react-dnd issue ([a39cb6d](https://github.com/pie-framework/pie-lib/commit/a39cb6dfa290840f3521f390ac3bd8091acee3d1))
225
134
 
226
135
  ## [2.0.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.0.0...@pie-lib/drag@2.0.1) (2022-11-23)
227
136
 
228
137
  **Note:** Version bump only for package @pie-lib/drag
229
138
 
230
-
231
-
232
-
233
-
234
139
  # [2.0.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@1.1.52...@pie-lib/drag@2.0.0) (2022-11-23)
235
140
 
236
-
237
141
  ### Features
238
142
 
239
- * update react-dnd and react-dnd-html5-backend versions ([be0cbe8](https://github.com/pie-framework/pie-lib/commit/be0cbe83d4014e03e1b5dd6218d6176cf3c28cc6))
240
-
143
+ - update react-dnd and react-dnd-html5-backend versions ([be0cbe8](https://github.com/pie-framework/pie-lib/commit/be0cbe83d4014e03e1b5dd6218d6176cf3c28cc6))
241
144
 
242
145
  ### BREAKING CHANGES
243
146
 
244
- * updated react-dnd and react-dnd-html5-backend versions
245
- The update was made in a previous commit, but breaking changes might occur so that's the role for this commit.
246
-
247
-
248
-
249
-
147
+ - updated react-dnd and react-dnd-html5-backend versions
148
+ The update was made in a previous commit, but breaking changes might occur so that's the role for this commit.
250
149
 
251
150
  ## [1.1.52](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@1.1.50...@pie-lib/drag@1.1.52) (2021-06-25)
252
151
 
package/lib/droppable-placeholder.js CHANGED
@@ -29,6 +29,16 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
29
29
 
30
30
  function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
31
31
 
32
+ var preventInteractionStyle = {
33
+ flex: 1,
34
+ WebkitTouchCallout: 'none',
35
+ WebkitUserSelect: 'none',
36
+ KhtmlUserSelect: 'none',
37
+ MozUserSelect: 'none',
38
+ MsUserSelect: 'none',
39
+ UserSelect: 'none'
40
+ };
41
+
32
42
  var DroppablePlaceholder = /*#__PURE__*/function (_React$Component) {
33
43
  (0, _inherits2["default"])(DroppablePlaceholder, _React$Component);
34
44
 
@@ -49,9 +59,7 @@ var DroppablePlaceholder = /*#__PURE__*/function (_React$Component) {
49
59
  disabled = _this$props.disabled,
50
60
  classes = _this$props.classes;
51
61
  return connectDropTarget( /*#__PURE__*/_react["default"].createElement("div", {
52
- style: {
53
- flex: 1
54
- }
62
+ style: preventInteractionStyle
55
63
  }, /*#__PURE__*/_react["default"].createElement(_placeholder["default"], {
56
64
  disabled: disabled,
57
65
  isOver: isOver,
package/lib/droppable-placeholder.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/droppable-placeholder.jsx"],"names":["DroppablePlaceholder","props","children","connectDropTarget","isOver","disabled","classes","flex","React","Component","PropTypes","object","func","isRequired","bool","oneOfType","arrayOf","node"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;IAEaA,oB;;;;;;;;;;;;WASX,kBAAS;AACP,wBAAmE,KAAKC,KAAxE;AAAA,UAAQC,QAAR,eAAQA,QAAR;AAAA,UAAkBC,iBAAlB,eAAkBA,iBAAlB;AAAA,UAAqCC,MAArC,eAAqCA,MAArC;AAAA,UAA6CC,QAA7C,eAA6CA,QAA7C;AAAA,UAAuDC,OAAvD,eAAuDA,OAAvD;AAEA,aAAOH,iBAAiB,eACtB;AAAK,QAAA,KAAK,EAAE;AAAEI,UAAAA,IAAI,EAAE;AAAR;AAAZ,sBACE,gCAAC,uBAAD;AAAa,QAAA,QAAQ,EAAEF,QAAvB;AAAiC,QAAA,MAAM,EAAED,MAAzC;AAAiD,QAAA,WAAW,EAAE,IAA9D;AAAoE,QAAA,SAAS,EAAEE;AAA/E,SACGJ,QADH,CADF,CADsB,CAAxB;AAOD;;;EAnBuCM,kBAAMC,S;;;iCAAnCT,oB,eACQ;AACjBM,EAAAA,OAAO,EAAEI,sBAAUC,MADF;AAEjBR,EAAAA,iBAAiB,EAAEO,sBAAUE,IAAV,CAAeC,UAFjB;AAGjBT,EAAAA,MAAM,EAAEM,sBAAUI,IAHD;AAIjBZ,EAAAA,QAAQ,EAAEQ,sBAAUK,SAAV,CAAoB,CAACL,sBAAUM,OAAV,CAAkBN,sBAAUO,IAA5B,CAAD,EAAoCP,sBAAUO,IAA9C,CAApB,EAAyEJ,UAJlE;AAKjBR,EAAAA,QAAQ,EAAEK,sBAAUI;AALH,C","sourcesContent":["import React from 'react';\nimport PlaceHolder from './placeholder';\nimport PropTypes from 'prop-types';\n\nexport class DroppablePlaceholder extends React.Component {\n static propTypes = {\n classes: PropTypes.object,\n connectDropTarget: PropTypes.func.isRequired,\n isOver: PropTypes.bool,\n children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n disabled: PropTypes.bool,\n };\n\n render() {\n const { children, connectDropTarget, isOver, disabled, classes } = this.props;\n\n return connectDropTarget(\n <div style={{ flex: 1 }}>\n <PlaceHolder disabled={disabled} isOver={isOver} choiceBoard={true} className={classes}>\n {children}\n </PlaceHolder>\n </div>,\n );\n }\n}\n"],"file":"droppable-placeholder.js"}
1
+ {"version":3,"sources":["../src/droppable-placeholder.jsx"],"names":["preventInteractionStyle","flex","WebkitTouchCallout","WebkitUserSelect","KhtmlUserSelect","MozUserSelect","MsUserSelect","UserSelect","DroppablePlaceholder","props","children","connectDropTarget","isOver","disabled","classes","React","Component","PropTypes","object","func","isRequired","bool","oneOfType","arrayOf","node"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;AAEA,IAAMA,uBAAuB,GAAG;AAC9BC,EAAAA,IAAI,EAAE,CADwB;AAE9BC,EAAAA,kBAAkB,EAAE,MAFU;AAG9BC,EAAAA,gBAAgB,EAAE,MAHY;AAI9BC,EAAAA,eAAe,EAAE,MAJa;AAK9BC,EAAAA,aAAa,EAAE,MALe;AAM9BC,EAAAA,YAAY,EAAE,MANgB;AAO9BC,EAAAA,UAAU,EAAE;AAPkB,CAAhC;;IAUaC,oB;;;;;;;;;;;;WASX,kBAAS;AACP,wBAAmE,KAAKC,KAAxE;AAAA,UAAQC,QAAR,eAAQA,QAAR;AAAA,UAAkBC,iBAAlB,eAAkBA,iBAAlB;AAAA,UAAqCC,MAArC,eAAqCA,MAArC;AAAA,UAA6CC,QAA7C,eAA6CA,QAA7C;AAAA,UAAuDC,OAAvD,eAAuDA,OAAvD;AAEA,aAAOH,iBAAiB,eACtB;AAAK,QAAA,KAAK,EAAEX;AAAZ,sBACE,gCAAC,uBAAD;AAAa,QAAA,QAAQ,EAAEa,QAAvB;AAAiC,QAAA,MAAM,EAAED,MAAzC;AAAiD,QAAA,WAAW,EAAE,IAA9D;AAAoE,QAAA,SAAS,EAAEE;AAA/E,SACGJ,QADH,CADF,CADsB,CAAxB;AAOD;;;EAnBuCK,kBAAMC,S;;;iCAAnCR,oB,eACQ;AACjBM,EAAAA,OAAO,EAAEG,sBAAUC,MADF;AAEjBP,EAAAA,iBAAiB,EAAEM,sBAAUE,IAAV,CAAeC,UAFjB;AAGjBR,EAAAA,MAAM,EAAEK,sBAAUI,IAHD;AAIjBX,EAAAA,QAAQ,EAAEO,sBAAUK,SAAV,CAAoB,CAACL,sBAAUM,OAAV,CAAkBN,sBAAUO,IAA5B,CAAD,EAAoCP,sBAAUO,IAA9C,CAApB,EAAyEJ,UAJlE;AAKjBP,EAAAA,QAAQ,EAAEI,sBAAUI;AALH,C","sourcesContent":["import React from 'react';\nimport PlaceHolder from './placeholder';\nimport PropTypes from 'prop-types';\n\nconst preventInteractionStyle = {\n flex: 1,\n WebkitTouchCallout: 'none',\n WebkitUserSelect: 'none',\n KhtmlUserSelect: 'none',\n MozUserSelect: 'none',\n MsUserSelect: 'none',\n UserSelect: 'none',\n};\n\nexport class DroppablePlaceholder extends React.Component {\n static propTypes = {\n classes: PropTypes.object,\n connectDropTarget: PropTypes.func.isRequired,\n isOver: PropTypes.bool,\n children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n disabled: PropTypes.bool,\n };\n\n render() {\n const { children, connectDropTarget, isOver, disabled, classes } = this.props;\n\n return connectDropTarget(\n <div style={preventInteractionStyle}>\n <PlaceHolder disabled={disabled} isOver={isOver} choiceBoard={true} className={classes}>\n {children}\n </PlaceHolder>\n </div>,\n );\n }\n}\n"],"file":"droppable-placeholder.js"}
package/lib/preview-component.js ADDED
@@ -0,0 +1,107 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
6
+
7
+ Object.defineProperty(exports, "__esModule", {
8
+ value: true
9
+ });
10
+ exports["default"] = void 0;
11
+
12
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
+
14
+ var _react = _interopRequireWildcard(require("react"));
15
+
16
+ var _reactDndMultiBackend = require("react-dnd-multi-backend");
17
+
18
+ var _renderUi = require("@pie-lib/render-ui");
19
+
20
+ var _mathRendering = require("@pie-lib/math-rendering");
21
+
22
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
23
+
24
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
25
+
26
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
27
+
28
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
29
+
30
+ var MaskBlankStyle = {
31
+ border: '1px solid black',
32
+ color: 'black',
33
+ minWidth: '90px',
34
+ minHeight: '32px',
35
+ height: 'auto',
36
+ maxWidth: '374px',
37
+ display: 'flex',
38
+ padding: '4px',
39
+ alignItems: 'center',
40
+ justifyContent: 'center',
41
+ borderRadius: '16px'
42
+ };
43
+ var ICAStyle = {
44
+ backgroundColor: _renderUi.color.background(),
45
+ border: "1px solid ".concat(_renderUi.color.text()),
46
+ display: 'flex',
47
+ alignItems: 'center',
48
+ justifyContent: 'center',
49
+ minHeight: '28px',
50
+ padding: '0 3px',
51
+ marginLeft: 2,
52
+ marginTop: 2,
53
+ width: 'fit-content'
54
+ };
55
+
56
+ var getPrompt = function getPrompt(itemType, item) {
57
+ var _item$choice;
58
+
59
+ switch (itemType) {
60
+ // DRAG-IN-THE-BLANK
61
+ case 'MaskBlank':
62
+ return item === null || item === void 0 ? void 0 : (_item$choice = item.choice) === null || _item$choice === void 0 ? void 0 : _item$choice.value;
63
+ // IMAGE-CLOZE-ASSOCIATION
64
+
65
+ case 'react-dnd-response':
66
+ return item === null || item === void 0 ? void 0 : item.value;
67
+
68
+ default:
69
+ return undefined;
70
+ }
71
+ };
72
+
73
+ var PreviewComponent = function PreviewComponent() {
74
+ var _item$choice2;
75
+
76
+ var preview = (0, _reactDndMultiBackend.usePreview)();
77
+ var itemType = preview.itemType,
78
+ item = preview.item,
79
+ style = preview.style,
80
+ display = preview.display;
81
+ var root = (0, _react.useRef)(null);
82
+ (0, _react.useEffect)(function () {
83
+ if (display && root.current) {
84
+ (0, _mathRendering.renderMath)(root.current);
85
+ }
86
+ }, [display, item === null || item === void 0 ? void 0 : (_item$choice2 = item.choice) === null || _item$choice2 === void 0 ? void 0 : _item$choice2.value, item === null || item === void 0 ? void 0 : item.value, itemType, item]);
87
+
88
+ if (!display) {
89
+ return null;
90
+ }
91
+
92
+ var customStyle = _objectSpread(_objectSpread({}, style), itemType === 'MaskBlank' ? MaskBlankStyle : {});
93
+
94
+ var prompt = getPrompt(itemType, item);
95
+ return /*#__PURE__*/_react["default"].createElement("div", {
96
+ ref: root,
97
+ style: customStyle
98
+ }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
99
+ className: "label",
100
+ prompt: prompt,
101
+ tagName: "span"
102
+ }));
103
+ };
104
+
105
+ var _default = PreviewComponent;
106
+ exports["default"] = _default;
107
+ //# sourceMappingURL=preview-component.js.map
package/lib/preview-component.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/preview-component.jsx"],"names":["MaskBlankStyle","border","color","minWidth","minHeight","height","maxWidth","display","padding","alignItems","justifyContent","borderRadius","ICAStyle","backgroundColor","background","text","marginLeft","marginTop","width","getPrompt","itemType","item","choice","value","undefined","PreviewComponent","preview","style","root","current","customStyle","prompt"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;AAGA,IAAMA,cAAc,GAAG;AACrBC,EAAAA,MAAM,EAAE,iBADa;AAErBC,EAAAA,KAAK,EAAE,OAFc;AAGrBC,EAAAA,QAAQ,EAAE,MAHW;AAIrBC,EAAAA,SAAS,EAAE,MAJU;AAKrBC,EAAAA,MAAM,EAAE,MALa;AAMrBC,EAAAA,QAAQ,EAAE,OANW;AAOrBC,EAAAA,OAAO,EAAE,MAPY;AAQrBC,EAAAA,OAAO,EAAE,KARY;AASrBC,EAAAA,UAAU,EAAE,QATS;AAUrBC,EAAAA,cAAc,EAAE,QAVK;AAWrBC,EAAAA,YAAY,EAAE;AAXO,CAAvB;AAcA,IAAMC,QAAQ,GAAG;AACfC,EAAAA,eAAe,EAAEX,gBAAMY,UAAN,EADF;AAEfb,EAAAA,MAAM,sBAAeC,gBAAMa,IAAN,EAAf,CAFS;AAGfR,EAAAA,OAAO,EAAE,MAHM;AAIfE,EAAAA,UAAU,EAAE,QAJG;AAKfC,EAAAA,cAAc,EAAE,QALD;AAMfN,EAAAA,SAAS,EAAE,MANI;AAOfI,EAAAA,OAAO,EAAE,OAPM;AAQfQ,EAAAA,UAAU,EAAE,CARG;AASfC,EAAAA,SAAS,EAAE,CATI;AAUfC,EAAAA,KAAK,EAAE;AAVQ,CAAjB;;AAaA,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,QAAD,EAAWC,IAAX,EAAoB;AAAA;;AACpC,UAAQD,QAAR;AACE;AACA,SAAK,WAAL;AACE,aAAOC,IAAP,aAAOA,IAAP,uCAAOA,IAAI,CAAEC,MAAb,iDAAO,aAAcC,KAArB;AACF;;AACA,SAAK,oBAAL;AACE,aAAOF,IAAP,aAAOA,IAAP,uBAAOA,IAAI,CAAEE,KAAb;;AACF;AACE,aAAOC,SAAP;AARJ;AAUD,CAXD;;AAaA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,GAAM;AAAA;;AAC7B,MAAMC,OAAO,GAAG,uCAAhB;AACA,MAAQN,QAAR,GAA2CM,OAA3C,CAAQN,QAAR;AAAA,MAAkBC,IAAlB,GAA2CK,OAA3C,CAAkBL,IAAlB;AAAA,MAAwBM,KAAxB,GAA2CD,OAA3C,CAAwBC,KAAxB;AAAA,MAA+BpB,OAA/B,GAA2CmB,OAA3C,CAA+BnB,OAA/B;AAEA,MAAIqB,IAAI,GAAG,mBAAO,IAAP,CAAX;AAEA,wBAAU,YAAM;AACd,QAAIrB,OAAO,IAAIqB,IAAI,CAACC,OAApB,EAA6B;AAC3B,qCAAWD,IAAI,CAACC,OAAhB;AACD;AACF,GAJD,EAIG,CAACtB,OAAD,EAAUc,IAAV,aAAUA,IAAV,wCAAUA,IAAI,CAAEC,MAAhB,kDAAU,cAAcC,KAAxB,EAA+BF,IAA/B,aAA+BA,IAA/B,uBAA+BA,IAAI,CAAEE,KAArC,EAA4CH,QAA5C,EAAsDC,IAAtD,CAJH;;AAMA,MAAI,CAACd,OAAL,EAAc;AACZ,WAAO,IAAP;AACD;;AAED,MAAMuB,WAAW,mCACZH,KADY,GAEXP,QAAQ,KAAK,WAAb,GAA2BpB,cAA3B,GAA4C,EAFjC,CAAjB;;AAOA,MAAM+B,MAAM,GAAGZ,SAAS,CAACC,QAAD,EAAWC,IAAX,CAAxB;AAEA,sBACE;AAAK,IAAA,GAAG,EAAEO,IAAV;AAAgB,IAAA,KAAK,EAAEE;AAAvB,kBACE,gCAAC,uBAAD;AAAe,IAAA,SAAS,EAAC,OAAzB;AAAiC,IAAA,MAAM,EAAEC,MAAzC;AAAiD,IAAA,OAAO,EAAC;AAAzD,IADF,CADF;AAKD,CA9BD;;eAgCeN,gB","sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { usePreview } from 'react-dnd-multi-backend';\nimport { PreviewPrompt } from '@pie-lib/render-ui';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { color } from '@pie-lib/render-ui';\n\nconst MaskBlankStyle = {\n border: '1px solid black',\n color: 'black',\n minWidth: '90px',\n minHeight: '32px',\n height: 'auto',\n maxWidth: '374px',\n display: 'flex',\n padding: '4px',\n alignItems: 'center',\n justifyContent: 'center',\n borderRadius: '16px',\n};\n\nconst ICAStyle = {\n backgroundColor: color.background(),\n border: `1px solid ${color.text()}`,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n minHeight: '28px',\n padding: '0 3px',\n marginLeft: 2,\n marginTop: 2,\n width: 'fit-content',\n};\n\nconst getPrompt = (itemType, item) => {\n switch (itemType) {\n // DRAG-IN-THE-BLANK\n case 'MaskBlank':\n return item?.choice?.value;\n // IMAGE-CLOZE-ASSOCIATION\n case 'react-dnd-response':\n return item?.value;\n default:\n return undefined;\n }\n};\n\nconst PreviewComponent = () => {\n const preview = usePreview();\n const { itemType, item, style, display } = preview;\n\n let root = useRef(null);\n\n useEffect(() => {\n if (display && root.current) {\n renderMath(root.current);\n }\n }, [display, item?.choice?.value, item?.value, itemType, item]);\n\n if (!display) {\n return null;\n }\n\n const customStyle = {\n ...style,\n ...(itemType === 'MaskBlank' ? MaskBlankStyle : {}),\n // TODO: In the image-cloze-association component, there's a noticeable delay in the image rendering process. This results in a brief display of an empty image placeholder before the actual image appears after a few seconds. This issue also impacts the correct rendering of the preview feature, thereby negatively affecting the user experience. This needs to be addressed promptly.\n //...(itemType === 'react-dnd-response' ? ICAStyle : {}),\n };\n\n const prompt = getPrompt(itemType, item);\n\n return (\n <div ref={root} style={customStyle}>\n <PreviewPrompt className=\"label\" prompt={prompt} tagName=\"span\" />\n </div>\n );\n};\n\nexport default PreviewComponent;\n"],"file":"preview-component.js"}
package/lib/with-drag-context.js CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
4
 
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
6
+
5
7
  Object.defineProperty(exports, "__esModule", {
6
8
  value: true
7
9
  });
@@ -9,19 +11,42 @@ exports["default"] = void 0;
9
11
 
10
12
  var _react = _interopRequireDefault(require("react"));
11
13
 
12
- var _reactDndMultiBackend = _interopRequireDefault(require("react-dnd-multi-backend"));
14
+ var _reactDndMultiBackend = _interopRequireWildcard(require("react-dnd-multi-backend"));
13
15
 
14
16
  var _reactDnd = require("react-dnd");
15
17
 
16
- var _HTML5toTouch = _interopRequireDefault(require("react-dnd-multi-backend/dist/cjs/HTML5toTouch"));
18
+ var _reactDndTouchBackend = require("react-dnd-touch-backend");
19
+
20
+ var _reactDndHtml5Backend = require("react-dnd-html5-backend");
21
+
22
+ var _previewComponent = _interopRequireDefault(require("./preview-component"));
23
+
24
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
25
+
26
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
27
+
28
+ var backends = [{
29
+ backend: _reactDndHtml5Backend.HTML5Backend
30
+ }, {
31
+ backend: _reactDndTouchBackend.TouchBackend,
32
+ options: {
33
+ enableMouseEvents: true,
34
+ enableTouchEvents: true
35
+ },
36
+ preview: true,
37
+ transition: _reactDndMultiBackend.TouchTransition,
38
+ skipDispatchOnTransition: true
39
+ }];
17
40
 
18
41
  var _default = function _default(Component) {
19
42
  return function (props) {
20
43
  return /*#__PURE__*/_react["default"].createElement(_reactDnd.DndProvider, {
21
44
  backend: _reactDndMultiBackend["default"],
22
- options: _HTML5toTouch["default"],
45
+ options: {
46
+ backends: backends
47
+ },
23
48
  context: window
24
- }, /*#__PURE__*/_react["default"].createElement(Component, props));
49
+ }, /*#__PURE__*/_react["default"].createElement(Component, props), /*#__PURE__*/_react["default"].createElement(_previewComponent["default"], null));
25
50
  };
26
51
  };
27
52
 
package/lib/with-drag-context.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/with-drag-context.js"],"names":["Component","props","MultiBackend","HTML5toTouch","window"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;eAEe,kBAACA,SAAD;AAAA,SAAe,UAACC,KAAD;AAAA,wBAC5B,gCAAC,qBAAD;AAAa,MAAA,OAAO,EAAEC,gCAAtB;AAAoC,MAAA,OAAO,EAAEC,wBAA7C;AAA2D,MAAA,OAAO,EAAEC;AAApE,oBACE,gCAAC,SAAD,EAAeH,KAAf,CADF,CAD4B;AAAA,GAAf;AAAA,C","sourcesContent":["import React from 'react';\nimport MultiBackend from 'react-dnd-multi-backend';\nimport { DndProvider } from 'react-dnd';\nimport HTML5toTouch from 'react-dnd-multi-backend/dist/cjs/HTML5toTouch';\n\nexport default (Component) => (props) => (\n <DndProvider backend={MultiBackend} options={HTML5toTouch} context={window}>\n <Component {...props} />\n </DndProvider>\n);\n"],"file":"with-drag-context.js"}
1
+ {"version":3,"sources":["../src/with-drag-context.js"],"names":["backends","backend","HTML5Backend","TouchBackend","options","enableMouseEvents","enableTouchEvents","preview","transition","TouchTransition","skipDispatchOnTransition","Component","props","MultiBackend","window"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;AAEA,IAAMA,QAAQ,GAAG,CACf;AAAEC,EAAAA,OAAO,EAAEC;AAAX,CADe,EAEf;AACED,EAAAA,OAAO,EAAEE,kCADX;AAEEC,EAAAA,OAAO,EAAE;AAAEC,IAAAA,iBAAiB,EAAE,IAArB;AAA2BC,IAAAA,iBAAiB,EAAE;AAA9C,GAFX;AAGEC,EAAAA,OAAO,EAAE,IAHX;AAIEC,EAAAA,UAAU,EAAEC,qCAJd;AAKEC,EAAAA,wBAAwB,EAAE;AAL5B,CAFe,CAAjB;;eAWe,kBAACC,SAAD;AAAA,SAAe,UAACC,KAAD;AAAA,wBAC5B,gCAAC,qBAAD;AAAa,MAAA,OAAO,EAAEC,gCAAtB;AAAoC,MAAA,OAAO,EAAE;AAAEb,QAAAA,QAAQ,EAARA;AAAF,OAA7C;AAA2D,MAAA,OAAO,EAAEc;AAApE,oBACE,gCAAC,SAAD,EAAeF,KAAf,CADF,eAEE,gCAAC,4BAAD,OAFF,CAD4B;AAAA,GAAf;AAAA,C","sourcesContent":["import React from 'react';\nimport MultiBackend, { TouchTransition } from 'react-dnd-multi-backend';\nimport { DndProvider } from 'react-dnd';\nimport { TouchBackend } from 'react-dnd-touch-backend';\nimport { HTML5Backend } from 'react-dnd-html5-backend';\n\nimport PreviewComponent from './preview-component';\n\nconst backends = [\n { backend: HTML5Backend },\n {\n backend: TouchBackend,\n options: { enableMouseEvents: true, enableTouchEvents: true },\n preview: true,\n transition: TouchTransition,\n skipDispatchOnTransition: true,\n },\n];\n\nexport default (Component) => (props) => (\n <DndProvider backend={MultiBackend} options={{ backends }} context={window}>\n <Component {...props} />\n <PreviewComponent />\n </DndProvider>\n);\n"],"file":"with-drag-context.js"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pie-lib/drag",
3
- "version": "2.2.1-next.0+ec542de5",
3
+ "version": "2.2.2-next.19+e5eca8f5",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
6
  "module": "src/index.js",
@@ -11,7 +11,7 @@
11
11
  "react-dnd": "^14.0.5",
12
12
  "react-dnd-html5-backend": "^14.0.2",
13
13
  "react-dnd-multi-backend": "^6.0.2",
14
- "react-dnd-touch-backend": "^14.1.0"
14
+ "react-dnd-touch-backend": "^12.0.0"
15
15
  },
16
16
  "publishConfig": {
17
17
  "access": "public"
@@ -19,5 +19,5 @@
19
19
  "scripts": {},
20
20
  "author": "",
21
21
  "license": "ISC",
22
- "gitHead": "ec542de5af85f84a5b466a00266fb7b71fe260c1"
22
+ "gitHead": "e5eca8f590ebc528f72f6f38bc4b5fca0949919f"
23
23
  }
package/src/droppable-placeholder.jsx CHANGED
@@ -2,6 +2,16 @@ import React from 'react';
2
2
  import PlaceHolder from './placeholder';
3
3
  import PropTypes from 'prop-types';
4
4
 
5
+ const preventInteractionStyle = {
6
+ flex: 1,
7
+ WebkitTouchCallout: 'none',
8
+ WebkitUserSelect: 'none',
9
+ KhtmlUserSelect: 'none',
10
+ MozUserSelect: 'none',
11
+ MsUserSelect: 'none',
12
+ UserSelect: 'none',
13
+ };
14
+
5
15
  export class DroppablePlaceholder extends React.Component {
6
16
  static propTypes = {
7
17
  classes: PropTypes.object,
@@ -15,7 +25,7 @@ export class DroppablePlaceholder extends React.Component {
15
25
  const { children, connectDropTarget, isOver, disabled, classes } = this.props;
16
26
 
17
27
  return connectDropTarget(
18
- <div style={{ flex: 1 }}>
28
+ <div style={preventInteractionStyle}>
19
29
  <PlaceHolder disabled={disabled} isOver={isOver} choiceBoard={true} className={classes}>
20
30
  {children}
21
31
  </PlaceHolder>
package/src/preview-component.jsx ADDED
@@ -0,0 +1,79 @@
1
+ import React, { useEffect, useRef } from 'react';
2
+ import { usePreview } from 'react-dnd-multi-backend';
3
+ import { PreviewPrompt } from '@pie-lib/render-ui';
4
+ import { renderMath } from '@pie-lib/math-rendering';
5
+ import { color } from '@pie-lib/render-ui';
6
+
7
+ const MaskBlankStyle = {
8
+ border: '1px solid black',
9
+ color: 'black',
10
+ minWidth: '90px',
11
+ minHeight: '32px',
12
+ height: 'auto',
13
+ maxWidth: '374px',
14
+ display: 'flex',
15
+ padding: '4px',
16
+ alignItems: 'center',
17
+ justifyContent: 'center',
18
+ borderRadius: '16px',
19
+ };
20
+
21
+ const ICAStyle = {
22
+ backgroundColor: color.background(),
23
+ border: `1px solid ${color.text()}`,
24
+ display: 'flex',
25
+ alignItems: 'center',
26
+ justifyContent: 'center',
27
+ minHeight: '28px',
28
+ padding: '0 3px',
29
+ marginLeft: 2,
30
+ marginTop: 2,
31
+ width: 'fit-content',
32
+ };
33
+
34
+ const getPrompt = (itemType, item) => {
35
+ switch (itemType) {
36
+ // DRAG-IN-THE-BLANK
37
+ case 'MaskBlank':
38
+ return item?.choice?.value;
39
+ // IMAGE-CLOZE-ASSOCIATION
40
+ case 'react-dnd-response':
41
+ return item?.value;
42
+ default:
43
+ return undefined;
44
+ }
45
+ };
46
+
47
+ const PreviewComponent = () => {
48
+ const preview = usePreview();
49
+ const { itemType, item, style, display } = preview;
50
+
51
+ let root = useRef(null);
52
+
53
+ useEffect(() => {
54
+ if (display && root.current) {
55
+ renderMath(root.current);
56
+ }
57
+ }, [display, item?.choice?.value, item?.value, itemType, item]);
58
+
59
+ if (!display) {
60
+ return null;
61
+ }
62
+
63
+ const customStyle = {
64
+ ...style,
65
+ ...(itemType === 'MaskBlank' ? MaskBlankStyle : {}),
66
+ // TODO: In the image-cloze-association component, there's a noticeable delay in the image rendering process. This results in a brief display of an empty image placeholder before the actual image appears after a few seconds. This issue also impacts the correct rendering of the preview feature, thereby negatively affecting the user experience. This needs to be addressed promptly.
67
+ //...(itemType === 'react-dnd-response' ? ICAStyle : {}),
68
+ };
69
+
70
+ const prompt = getPrompt(itemType, item);
71
+
72
+ return (
73
+ <div ref={root} style={customStyle}>
74
+ <PreviewPrompt className="label" prompt={prompt} tagName="span" />
75
+ </div>
76
+ );
77
+ };
78
+
79
+ export default PreviewComponent;
package/src/with-drag-context.js CHANGED
@@ -1,10 +1,25 @@
1
1
  import React from 'react';
2
- import MultiBackend from 'react-dnd-multi-backend';
2
+ import MultiBackend, { TouchTransition } from 'react-dnd-multi-backend';
3
3
  import { DndProvider } from 'react-dnd';
4
- import HTML5toTouch from 'react-dnd-multi-backend/dist/cjs/HTML5toTouch';
4
+ import { TouchBackend } from 'react-dnd-touch-backend';
5
+ import { HTML5Backend } from 'react-dnd-html5-backend';
6
+
7
+ import PreviewComponent from './preview-component';
8
+
9
+ const backends = [
10
+ { backend: HTML5Backend },
11
+ {
12
+ backend: TouchBackend,
13
+ options: { enableMouseEvents: true, enableTouchEvents: true },
14
+ preview: true,
15
+ transition: TouchTransition,
16
+ skipDispatchOnTransition: true,
17
+ },
18
+ ];
5
19
 
6
20
  export default (Component) => (props) => (
7
- <DndProvider backend={MultiBackend} options={HTML5toTouch} context={window}>
21
+ <DndProvider backend={MultiBackend} options={{ backends }} context={window}>
8
22
  <Component {...props} />
23
+ <PreviewComponent />
9
24
  </DndProvider>
10
25
  );