@pie-lib/mask-markup 1.13.46 → 1.14.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +15 -56
- package/NEXT.CHANGELOG.json +1 -0
- package/lib/choices/choice.js +80 -17
- package/lib/choices/choice.js.map +1 -1
- package/lib/choices/index.js +11 -3
- package/lib/choices/index.js.map +1 -1
- package/lib/components/blank.js +146 -34
- package/lib/components/blank.js.map +1 -1
- package/lib/components/correct-input.js +8 -3
- package/lib/components/correct-input.js.map +1 -1
- package/lib/components/dropdown.js +182 -49
- package/lib/components/dropdown.js.map +1 -1
- package/lib/constructed-response.js +87 -23
- package/lib/constructed-response.js.map +1 -1
- package/lib/customizable.js +48 -0
- package/lib/customizable.js.map +1 -0
- package/lib/drag-in-the-blank.js +34 -8
- package/lib/drag-in-the-blank.js.map +1 -1
- package/lib/index.js +8 -0
- package/lib/index.js.map +1 -1
- package/lib/inline-dropdown.js +3 -1
- package/lib/inline-dropdown.js.map +1 -1
- package/lib/mask.js +45 -6
- package/lib/mask.js.map +1 -1
- package/lib/with-mask.js +34 -2
- package/lib/with-mask.js.map +1 -1
- package/package.json +9 -5
- package/src/__tests__/__snapshots__/drag-in-the-blank.test.js.snap +316 -0
- package/src/__tests__/__snapshots__/mask.test.js.snap +55 -0
- package/src/__tests__/__snapshots__/with-mask.test.js.snap +62 -0
- package/src/__tests__/drag-in-the-blank.test.js +71 -0
- package/src/__tests__/index.test.js +39 -0
- package/src/__tests__/mask.test.js +152 -0
- package/src/__tests__/serialization.test.js +54 -0
- package/src/__tests__/utils.js +1 -0
- package/src/__tests__/with-mask.test.js +51 -0
- package/src/choices/__tests__/__snapshots__/index.test.js.snap +209 -0
- package/src/choices/__tests__/index.test.js +62 -0
- package/src/choices/choice.jsx +60 -6
- package/src/choices/index.jsx +2 -2
- package/src/components/__tests__/__snapshots__/blank.test.js.snap +111 -0
- package/src/components/__tests__/__snapshots__/correct-input.test.js.snap +64 -0
- package/src/components/__tests__/__snapshots__/dropdown.test.js.snap +133 -0
- package/src/components/__tests__/__snapshots__/input.test.js.snap +34 -0
- package/src/components/__tests__/blank.test.js +202 -0
- package/src/components/__tests__/correct-input.test.js +49 -0
- package/src/components/__tests__/dropdown.test.js +51 -0
- package/src/components/__tests__/input.test.js +50 -0
- package/src/components/blank.jsx +139 -28
- package/src/components/correct-input.jsx +6 -1
- package/src/components/dropdown.jsx +192 -71
- package/src/constructed-response.jsx +76 -18
- package/src/customizable.jsx +35 -0
- package/src/drag-in-the-blank.jsx +26 -3
- package/src/index.js +10 -1
- package/src/inline-dropdown.jsx +2 -0
- package/src/mask.jsx +30 -5
- package/src/with-mask.jsx +39 -2
- package/README.md +0 -14
package/CHANGELOG.md
CHANGED
|
@@ -3,18 +3,15 @@
|
|
|
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
|
-
|
|
7
|
-
|
|
6
|
+
# [1.14.0-beta.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.46...@pie-lib/mask-markup@1.14.0-beta.1) (2025-07-20)
|
|
8
7
|
|
|
9
|
-
|
|
8
|
+
**Note:** Version bump only for package @pie-lib/mask-markup
|
|
10
9
|
|
|
11
|
-
* revert to pie-lib/math-rendering that what working ([25660ea](https://github.com/pie-framework/pie-lib/commit/25660ea6595e800a71c5494bd3bb9eecd3609a5a))
|
|
12
10
|
|
|
13
11
|
|
|
14
12
|
|
|
15
13
|
|
|
16
|
-
|
|
17
|
-
## [1.13.45](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.44...@pie-lib/mask-markup@1.13.45) (2023-10-01)
|
|
14
|
+
# [1.14.0-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.46...@pie-lib/mask-markup@1.14.0-beta.0) (2025-07-20)
|
|
18
15
|
|
|
19
16
|
**Note:** Version bump only for package @pie-lib/mask-markup
|
|
20
17
|
|
|
@@ -22,118 +19,80 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
22
19
|
|
|
23
20
|
|
|
24
21
|
|
|
25
|
-
|
|
22
|
+
# [1.15.0-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.46...@pie-lib/mask-markup@1.15.0-beta.0) (2025-07-15)
|
|
26
23
|
|
|
27
24
|
**Note:** Version bump only for package @pie-lib/mask-markup
|
|
28
25
|
|
|
26
|
+
# [1.14.0-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.46...@pie-lib/mask-markup@1.14.0-beta.0) (2025-07-15)
|
|
29
27
|
|
|
28
|
+
**Note:** Version bump only for package @pie-lib/mask-markup
|
|
30
29
|
|
|
30
|
+
## [1.13.46](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.45...@pie-lib/mask-markup@1.13.46) (2023-10-03)
|
|
31
31
|
|
|
32
|
+
### Bug Fixes
|
|
32
33
|
|
|
33
|
-
|
|
34
|
+
- revert to pie-lib/math-rendering that what working ([25660ea](https://github.com/pie-framework/pie-lib/commit/25660ea6595e800a71c5494bd3bb9eecd3609a5a))
|
|
35
|
+
|
|
36
|
+
## [1.13.45](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.44...@pie-lib/mask-markup@1.13.45) (2023-10-01)
|
|
34
37
|
|
|
35
38
|
**Note:** Version bump only for package @pie-lib/mask-markup
|
|
36
39
|
|
|
40
|
+
## [1.13.44](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.43...@pie-lib/mask-markup@1.13.44) (2023-09-27)
|
|
37
41
|
|
|
42
|
+
**Note:** Version bump only for package @pie-lib/mask-markup
|
|
38
43
|
|
|
44
|
+
## [1.13.43](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.42...@pie-lib/mask-markup@1.13.43) (2023-09-27)
|
|
39
45
|
|
|
46
|
+
**Note:** Version bump only for package @pie-lib/mask-markup
|
|
40
47
|
|
|
41
48
|
## [1.13.42](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.41...@pie-lib/mask-markup@1.13.42) (2023-09-27)
|
|
42
49
|
|
|
43
50
|
**Note:** Version bump only for package @pie-lib/mask-markup
|
|
44
51
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
52
|
## [1.13.41](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.40...@pie-lib/mask-markup@1.13.41) (2023-09-25)
|
|
50
53
|
|
|
51
54
|
**Note:** Version bump only for package @pie-lib/mask-markup
|
|
52
55
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
56
|
## [1.13.40](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.39...@pie-lib/mask-markup@1.13.40) (2023-09-20)
|
|
58
57
|
|
|
59
58
|
**Note:** Version bump only for package @pie-lib/mask-markup
|
|
60
59
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
60
|
## [1.13.39](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.38...@pie-lib/mask-markup@1.13.39) (2023-09-20)
|
|
66
61
|
|
|
67
62
|
**Note:** Version bump only for package @pie-lib/mask-markup
|
|
68
63
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
64
|
## [1.13.38](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.37...@pie-lib/mask-markup@1.13.38) (2023-09-14)
|
|
74
65
|
|
|
75
66
|
**Note:** Version bump only for package @pie-lib/mask-markup
|
|
76
67
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
68
|
## [1.13.37](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.36...@pie-lib/mask-markup@1.13.37) (2023-08-21)
|
|
82
69
|
|
|
83
70
|
**Note:** Version bump only for package @pie-lib/mask-markup
|
|
84
71
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
72
|
## [1.13.36](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.35...@pie-lib/mask-markup@1.13.36) (2023-08-15)
|
|
90
73
|
|
|
91
74
|
**Note:** Version bump only for package @pie-lib/mask-markup
|
|
92
75
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
76
|
## [1.13.35](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.34...@pie-lib/mask-markup@1.13.35) (2023-08-07)
|
|
98
77
|
|
|
99
78
|
**Note:** Version bump only for package @pie-lib/mask-markup
|
|
100
79
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
80
|
## [1.13.34](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.33...@pie-lib/mask-markup@1.13.34) (2023-07-31)
|
|
106
81
|
|
|
107
82
|
**Note:** Version bump only for package @pie-lib/mask-markup
|
|
108
83
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
84
|
## [1.13.33](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.32...@pie-lib/mask-markup@1.13.33) (2023-07-24)
|
|
114
85
|
|
|
115
86
|
**Note:** Version bump only for package @pie-lib/mask-markup
|
|
116
87
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
88
|
## [1.13.32](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.31...@pie-lib/mask-markup@1.13.32) (2023-06-24)
|
|
122
89
|
|
|
123
90
|
**Note:** Version bump only for package @pie-lib/mask-markup
|
|
124
91
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
92
|
## [1.13.31](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.30...@pie-lib/mask-markup@1.13.31) (2023-06-13)
|
|
130
93
|
|
|
131
94
|
**Note:** Version bump only for package @pie-lib/mask-markup
|
|
132
95
|
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
96
|
## [1.13.30](https://github.com/pie-framework/pie-lib/compare/@pie-lib/mask-markup@1.13.29...@pie-lib/mask-markup@1.13.30) (2023-06-12)
|
|
138
97
|
|
|
139
98
|
**Note:** Version bump only for package @pie-lib/mask-markup
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
[]
|
package/lib/choices/choice.js
CHANGED
|
@@ -11,6 +11,8 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
|
|
|
11
11
|
|
|
12
12
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
13
13
|
|
|
14
|
+
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
|
15
|
+
|
|
14
16
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
15
17
|
|
|
16
18
|
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
@@ -21,9 +23,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
21
23
|
|
|
22
24
|
var _react = _interopRequireDefault(require("react"));
|
|
23
25
|
|
|
24
|
-
var
|
|
26
|
+
var _reactDom = _interopRequireDefault(require("react-dom"));
|
|
25
27
|
|
|
26
|
-
var
|
|
28
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
27
29
|
|
|
28
30
|
var _styles = require("@material-ui/core/styles");
|
|
29
31
|
|
|
@@ -31,12 +33,12 @@ var _Chip = _interopRequireDefault(require("@material-ui/core/Chip"));
|
|
|
31
33
|
|
|
32
34
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
33
35
|
|
|
34
|
-
var _reactDom = _interopRequireDefault(require("react-dom"));
|
|
35
|
-
|
|
36
36
|
var _mathRendering = require("@pie-lib/math-rendering");
|
|
37
37
|
|
|
38
38
|
var _renderUi = require("@pie-lib/render-ui");
|
|
39
39
|
|
|
40
|
+
var _drag = require("@pie-lib/drag");
|
|
41
|
+
|
|
40
42
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
|
|
41
43
|
|
|
42
44
|
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; } }
|
|
@@ -50,11 +52,60 @@ var BlankContentComp = /*#__PURE__*/function (_React$Component) {
|
|
|
50
52
|
var _super = _createSuper(BlankContentComp);
|
|
51
53
|
|
|
52
54
|
function BlankContentComp() {
|
|
55
|
+
var _this;
|
|
56
|
+
|
|
53
57
|
(0, _classCallCheck2["default"])(this, BlankContentComp);
|
|
54
|
-
|
|
58
|
+
|
|
59
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
60
|
+
args[_key] = arguments[_key];
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
|
64
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "startDrag", function () {
|
|
65
|
+
var _this$props = _this.props,
|
|
66
|
+
connectDragSource = _this$props.connectDragSource,
|
|
67
|
+
disabled = _this$props.disabled;
|
|
68
|
+
|
|
69
|
+
if (!disabled) {
|
|
70
|
+
connectDragSource(_this.dragContainerRef);
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleTouchStart", function (e) {
|
|
74
|
+
e.preventDefault();
|
|
75
|
+
_this.longPressTimer = setTimeout(function () {
|
|
76
|
+
_this.startDrag(e);
|
|
77
|
+
}, 500);
|
|
78
|
+
});
|
|
79
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleTouchEnd", function () {
|
|
80
|
+
clearTimeout(_this.longPressTimer);
|
|
81
|
+
});
|
|
82
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleTouchMove", function () {
|
|
83
|
+
clearTimeout(_this.longPressTimer);
|
|
84
|
+
});
|
|
85
|
+
return _this;
|
|
55
86
|
}
|
|
56
87
|
|
|
57
88
|
(0, _createClass2["default"])(BlankContentComp, [{
|
|
89
|
+
key: "componentDidMount",
|
|
90
|
+
value: function componentDidMount() {
|
|
91
|
+
if (this.dragContainerRef) {
|
|
92
|
+
this.dragContainerRef.addEventListener('touchstart', this.handleTouchStart, {
|
|
93
|
+
passive: false
|
|
94
|
+
});
|
|
95
|
+
this.dragContainerRef.addEventListener('touchend', this.handleTouchEnd);
|
|
96
|
+
this.dragContainerRef.addEventListener('touchmove', this.handleTouchMove);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}, {
|
|
100
|
+
key: "componentWillUnmount",
|
|
101
|
+
value: function componentWillUnmount() {
|
|
102
|
+
if (this.dragContainerRef) {
|
|
103
|
+
this.dragContainerRef.removeEventListener('touchstart', this.handleTouchStart);
|
|
104
|
+
this.dragContainerRef.removeEventListener('touchend', this.handleTouchEnd);
|
|
105
|
+
this.dragContainerRef.removeEventListener('touchmove', this.handleTouchMove);
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
}, {
|
|
58
109
|
key: "componentDidUpdate",
|
|
59
110
|
value: function componentDidUpdate() {
|
|
60
111
|
(0, _mathRendering.renderMath)(this.rootRef);
|
|
@@ -62,22 +113,26 @@ var BlankContentComp = /*#__PURE__*/function (_React$Component) {
|
|
|
62
113
|
}, {
|
|
63
114
|
key: "render",
|
|
64
115
|
value: function render() {
|
|
65
|
-
var
|
|
116
|
+
var _this2 = this;
|
|
66
117
|
|
|
67
|
-
var _this$
|
|
68
|
-
connectDragSource = _this$
|
|
69
|
-
choice = _this$
|
|
70
|
-
classes = _this$
|
|
71
|
-
disabled = _this$
|
|
118
|
+
var _this$props2 = this.props,
|
|
119
|
+
connectDragSource = _this$props2.connectDragSource,
|
|
120
|
+
choice = _this$props2.choice,
|
|
121
|
+
classes = _this$props2.classes,
|
|
122
|
+
disabled = _this$props2.disabled; // TODO the Chip element is causing drag problems on touch devices. Avoid using Chip and consider refactoring the code. Keep in mind that Chip is a span with a button role, which interferes with seamless touch device dragging.
|
|
72
123
|
|
|
73
124
|
return connectDragSource( /*#__PURE__*/_react["default"].createElement("span", {
|
|
74
|
-
className: (0, _classnames["default"])(classes.choice, disabled && classes.disabled)
|
|
125
|
+
className: (0, _classnames["default"])(classes.choice, disabled && classes.disabled),
|
|
126
|
+
ref: function ref(_ref3) {
|
|
127
|
+
//eslint-disable-next-line
|
|
128
|
+
_this2.dragContainerRef = _reactDom["default"].findDOMNode(_ref3);
|
|
129
|
+
}
|
|
75
130
|
}, /*#__PURE__*/_react["default"].createElement(_Chip["default"], {
|
|
76
131
|
clickable: false,
|
|
77
132
|
disabled: true,
|
|
78
133
|
ref: function ref(_ref2) {
|
|
79
134
|
//eslint-disable-next-line
|
|
80
|
-
|
|
135
|
+
_this2.rootRef = _reactDom["default"].findDOMNode(_ref2);
|
|
81
136
|
},
|
|
82
137
|
className: classes.chip,
|
|
83
138
|
label: /*#__PURE__*/_react["default"].createElement("span", {
|
|
@@ -110,7 +165,7 @@ var BlankContent = (0, _styles.withStyles)(function (theme) {
|
|
|
110
165
|
transform: 'translate(0, 0)'
|
|
111
166
|
},
|
|
112
167
|
chip: {
|
|
113
|
-
backgroundColor: _renderUi.color.
|
|
168
|
+
backgroundColor: _renderUi.color.white(),
|
|
114
169
|
border: "1px solid ".concat(_renderUi.color.text()),
|
|
115
170
|
color: _renderUi.color.text(),
|
|
116
171
|
alignItems: 'center',
|
|
@@ -123,16 +178,24 @@ var BlankContent = (0, _styles.withStyles)(function (theme) {
|
|
|
123
178
|
// Added for touch devices, for image content.
|
|
124
179
|
// This will prevent the context menu from appearing and not allowing other interactions with the image.
|
|
125
180
|
// If interactions with the image in the token will be requested we should handle only the context Menu.
|
|
126
|
-
pointerEvents: 'none'
|
|
181
|
+
pointerEvents: 'none',
|
|
182
|
+
borderRadius: '3px',
|
|
183
|
+
paddingTop: '12px',
|
|
184
|
+
paddingBottom: '12px'
|
|
127
185
|
},
|
|
128
186
|
chipLabel: {
|
|
129
|
-
whiteSpace: '
|
|
187
|
+
whiteSpace: 'normal',
|
|
130
188
|
'& img': {
|
|
131
189
|
display: 'block',
|
|
132
190
|
padding: '2px 0'
|
|
191
|
+
},
|
|
192
|
+
'& mjx-frac': {
|
|
193
|
+
fontSize: '120% !important'
|
|
133
194
|
}
|
|
134
195
|
},
|
|
135
|
-
disabled: {
|
|
196
|
+
disabled: {
|
|
197
|
+
opacity: 0.6
|
|
198
|
+
}
|
|
136
199
|
};
|
|
137
200
|
})(BlankContentComp);
|
|
138
201
|
exports.BlankContent = BlankContent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/choices/choice.jsx"],"names":["DRAG_TYPE","BlankContentComp","
|
|
1
|
+
{"version":3,"sources":["../../src/choices/choice.jsx"],"names":["DRAG_TYPE","BlankContentComp","props","connectDragSource","disabled","dragContainerRef","e","preventDefault","longPressTimer","setTimeout","startDrag","clearTimeout","addEventListener","handleTouchStart","passive","handleTouchEnd","handleTouchMove","removeEventListener","rootRef","choice","classes","ref","ReactDOM","findDOMNode","chip","chipLabel","innerHTML","value","undefined","React","Component","PropTypes","bool","object","func","BlankContent","theme","border","palette","primary","main","borderRadius","spacing","unit","margin","transform","backgroundColor","color","white","text","alignItems","display","height","minHeight","fontSize","whiteSpace","maxWidth","pointerEvents","paddingTop","paddingBottom","padding","opacity","tileSource","canDrag","beginDrag","instanceId","DragDropTile","connect","monitor","dragSource","isDragging"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport Chip from '@material-ui/core/Chip';\nimport classnames from 'classnames';\n\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { color } from '@pie-lib/render-ui';\nimport { DragSource } from '@pie-lib/drag';\n\nexport const DRAG_TYPE = 'MaskBlank';\n\nclass BlankContentComp extends React.Component {\n static propTypes = {\n disabled: PropTypes.bool,\n choice: PropTypes.object,\n classes: PropTypes.object,\n connectDragSource: PropTypes.func,\n };\n\n startDrag = () => {\n const { connectDragSource, disabled } = this.props;\n if (!disabled) {\n connectDragSource(this.dragContainerRef);\n }\n };\n\n // start drag after 500ms (touch and hold duration) for chromebooks and other touch devices PD-4888\n handleTouchStart = (e) => {\n e.preventDefault();\n this.longPressTimer = setTimeout(() => {\n this.startDrag(e);\n }, 500);\n };\n\n handleTouchEnd = () => {\n clearTimeout(this.longPressTimer);\n };\n\n handleTouchMove = () => {\n clearTimeout(this.longPressTimer);\n };\n\n componentDidMount() {\n if (this.dragContainerRef) {\n this.dragContainerRef.addEventListener('touchstart', this.handleTouchStart, { passive: false });\n this.dragContainerRef.addEventListener('touchend', this.handleTouchEnd);\n this.dragContainerRef.addEventListener('touchmove', this.handleTouchMove);\n }\n }\n\n componentWillUnmount() {\n if (this.dragContainerRef) {\n this.dragContainerRef.removeEventListener('touchstart', this.handleTouchStart);\n this.dragContainerRef.removeEventListener('touchend', this.handleTouchEnd);\n this.dragContainerRef.removeEventListener('touchmove', this.handleTouchMove);\n }\n }\n\n componentDidUpdate() {\n renderMath(this.rootRef);\n }\n\n render() {\n const { connectDragSource, choice, classes, disabled } = this.props;\n\n // TODO the Chip element is causing drag problems on touch devices. Avoid using Chip and consider refactoring the code. Keep in mind that Chip is a span with a button role, which interferes with seamless touch device dragging.\n\n return connectDragSource(\n <span\n className={classnames(classes.choice, disabled && classes.disabled)}\n ref={(ref) => {\n //eslint-disable-next-line\n this.dragContainerRef = ReactDOM.findDOMNode(ref);\n }}\n >\n <Chip\n clickable={false}\n disabled={true}\n ref={(ref) => {\n //eslint-disable-next-line\n this.rootRef = ReactDOM.findDOMNode(ref);\n }}\n className={classes.chip}\n label={\n <span\n className={classes.chipLabel}\n ref={(ref) => {\n if (ref) {\n ref.innerHTML = choice.value || ' ';\n }\n }}\n >\n {' '}\n </span>\n }\n variant={disabled ? 'outlined' : undefined}\n />\n </span>,\n {},\n );\n }\n}\n\nexport const BlankContent = withStyles((theme) => ({\n choice: {\n border: `solid 0px ${theme.palette.primary.main}`,\n borderRadius: theme.spacing.unit * 2,\n margin: theme.spacing.unit / 2,\n transform: 'translate(0, 0)',\n },\n 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 chipLabel: {\n whiteSpace: 'normal',\n '& img': {\n display: 'block',\n padding: '2px 0',\n },\n '& mjx-frac': {\n fontSize: '120% !important',\n },\n },\n disabled: {\n opacity: 0.6,\n },\n}))(BlankContentComp);\n\nconst tileSource = {\n canDrag(props) {\n return !props.disabled;\n },\n beginDrag(props) {\n return {\n choice: props.choice,\n instanceId: props.instanceId,\n };\n },\n};\n\nconst DragDropTile = DragSource(DRAG_TYPE, tileSource, (connect, monitor) => ({\n connectDragSource: connect.dragSource(),\n isDragging: monitor.isDragging(),\n}))(BlankContent);\n\nexport default DragDropTile;\n"],"file":"choice.js"}
|
package/lib/choices/index.js
CHANGED
|
@@ -29,7 +29,11 @@ var _findKey = _interopRequireDefault(require("lodash/findKey"));
|
|
|
29
29
|
|
|
30
30
|
var _choice = _interopRequireDefault(require("./choice"));
|
|
31
31
|
|
|
32
|
-
var
|
|
32
|
+
var _drag = require("@pie-lib/drag");
|
|
33
|
+
|
|
34
|
+
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; }
|
|
35
|
+
|
|
36
|
+
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; }
|
|
33
37
|
|
|
34
38
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
|
|
35
39
|
|
|
@@ -96,10 +100,14 @@ var Choices = /*#__PURE__*/function (_React$Component) {
|
|
|
96
100
|
});
|
|
97
101
|
return foundChoice === undefined;
|
|
98
102
|
});
|
|
99
|
-
|
|
103
|
+
|
|
104
|
+
var elementStyle = _objectSpread(_objectSpread({}, this.getStyleForWrapper()), {}, {
|
|
105
|
+
minWidth: '100px'
|
|
106
|
+
});
|
|
107
|
+
|
|
100
108
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
101
109
|
style: elementStyle
|
|
102
|
-
}, /*#__PURE__*/_react["default"].createElement(
|
|
110
|
+
}, /*#__PURE__*/_react["default"].createElement(_drag.DragDroppablePlaceholder, {
|
|
103
111
|
disabled: disabled
|
|
104
112
|
}, filteredChoices.map(function (c, index) {
|
|
105
113
|
return /*#__PURE__*/_react["default"].createElement(_choice["default"], {
|
package/lib/choices/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/choices/index.jsx"],"names":["Choices","choicePosition","props","margin","disabled","duplicates","choices","value","filteredChoices","filter","c","foundChoice","v","id","undefined","elementStyle","getStyleForWrapper","map","index","React","Component","PropTypes","bool","arrayOf","shape","label","string","object","isRequired"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA
|
|
1
|
+
{"version":3,"sources":["../../src/choices/index.jsx"],"names":["Choices","choicePosition","props","margin","disabled","duplicates","choices","value","filteredChoices","filter","c","foundChoice","v","id","undefined","elementStyle","getStyleForWrapper","minWidth","map","index","React","Component","PropTypes","bool","arrayOf","shape","label","string","object","isRequired"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;IAEqBA,O;;;;;;;;;;;;;;;2GASE,YAAM;AACzB,UAAQC,cAAR,GAA2B,MAAKC,KAAhC,CAAQD,cAAR;;AAEA,cAAQA,cAAR;AACE,aAAK,OAAL;AACE,iBAAO;AACLE,YAAAA,MAAM,EAAE;AADH,WAAP;;AAIF,aAAK,OAAL;AACE,iBAAO;AACLA,YAAAA,MAAM,EAAE;AADH,WAAP;;AAIF,aAAK,OAAL;AACE,iBAAO;AACLA,YAAAA,MAAM,EAAE;AADH,WAAP;;AAIF;AACE,iBAAO;AACLA,YAAAA,MAAM,EAAE;AADH,WAAP;AAjBJ;AAqBD,K;;;;;;WAED,kBAAS;AACP,wBAAiD,KAAKD,KAAtD;AAAA,UAAQE,QAAR,eAAQA,QAAR;AAAA,UAAkBC,UAAlB,eAAkBA,UAAlB;AAAA,UAA8BC,OAA9B,eAA8BA,OAA9B;AAAA,UAAuCC,KAAvC,eAAuCA,KAAvC;AACA,UAAMC,eAAe,GAAGF,OAAO,CAACG,MAAR,CAAe,UAACC,CAAD,EAAO;AAC5C,YAAIL,UAAU,KAAK,IAAnB,EAAyB;AACvB,iBAAO,IAAP;AACD;;AACD,YAAMM,WAAW,GAAG,yBAAQJ,KAAR,EAAe,UAACK,CAAD;AAAA,iBAAOA,CAAC,KAAKF,CAAC,CAACG,EAAf;AAAA,SAAf,CAApB;AACA,eAAOF,WAAW,KAAKG,SAAvB;AACD,OANuB,CAAxB;;AAOA,UAAMC,YAAY,mCAAQ,KAAKC,kBAAL,EAAR;AAAmCC,QAAAA,QAAQ,EAAE;AAA7C,QAAlB;;AAEA,0BACE;AAAK,QAAA,KAAK,EAAEF;AAAZ,sBACE,gCAAC,8BAAD;AAA0B,QAAA,QAAQ,EAAEX;AAApC,SACGI,eAAe,CAACU,GAAhB,CAAoB,UAACR,CAAD,EAAIS,KAAJ;AAAA,4BACnB,gCAAC,kBAAD;AAAQ,UAAA,GAAG,YAAKT,CAAC,CAACH,KAAP,cAAgBY,KAAhB,CAAX;AAAoC,UAAA,QAAQ,EAAEf,QAA9C;AAAwD,UAAA,MAAM,EAAEM;AAAhE,UADmB;AAAA,OAApB,CADH,CADF,CADF;AASD;;;EAvDkCU,kBAAMC,S;;;iCAAtBrB,O,eACA;AACjBI,EAAAA,QAAQ,EAAEkB,sBAAUC,IADH;AAEjBlB,EAAAA,UAAU,EAAEiB,sBAAUC,IAFL;AAGjBjB,EAAAA,OAAO,EAAEgB,sBAAUE,OAAV,CAAkBF,sBAAUG,KAAV,CAAgB;AAAEC,IAAAA,KAAK,EAAEJ,sBAAUK,MAAnB;AAA2BpB,IAAAA,KAAK,EAAEe,sBAAUK;AAA5C,GAAhB,CAAlB,CAHQ;AAIjBpB,EAAAA,KAAK,EAAEe,sBAAUM,MAJA;AAKjB3B,EAAAA,cAAc,EAAEqB,sBAAUK,MAAV,CAAiBE;AALhB,C","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 };\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 } = 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}>\n {filteredChoices.map((c, index) => (\n <Choice key={`${c.value}-${index}`} disabled={disabled} choice={c} />\n ))}\n </DragDroppablePlaceholder>\n </div>\n );\n }\n}\n"],"file":"index.js"}
|