@pie-lib/mask-markup 1.13.46 → 1.14.1-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +15 -56
- package/NEXT.CHANGELOG.json +1 -0
- 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/lib/choices/choice.js +0 -158
- package/lib/choices/choice.js.map +0 -1
- package/lib/choices/index.js +0 -127
- package/lib/choices/index.js.map +0 -1
- package/lib/componentize.js +0 -25
- package/lib/componentize.js.map +0 -1
- package/lib/components/blank.js +0 -303
- package/lib/components/blank.js.map +0 -1
- package/lib/components/correct-input.js +0 -113
- package/lib/components/correct-input.js.map +0 -1
- package/lib/components/dropdown.js +0 -216
- package/lib/components/dropdown.js.map +0 -1
- package/lib/components/input.js +0 -57
- package/lib/components/input.js.map +0 -1
- package/lib/constructed-response.js +0 -52
- package/lib/constructed-response.js.map +0 -1
- package/lib/drag-in-the-blank.js +0 -191
- package/lib/drag-in-the-blank.js.map +0 -1
- package/lib/index.js +0 -54
- package/lib/index.js.map +0 -1
- package/lib/inline-dropdown.js +0 -46
- package/lib/inline-dropdown.js.map +0 -1
- package/lib/mask.js +0 -215
- package/lib/mask.js.map +0 -1
- package/lib/serialization.js +0 -207
- package/lib/serialization.js.map +0 -1
- package/lib/with-mask.js +0 -93
- package/lib/with-mask.js.map +0 -1
package/lib/choices/index.js
DELETED
|
@@ -1,127 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports["default"] = void 0;
|
|
9
|
-
|
|
10
|
-
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
11
|
-
|
|
12
|
-
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
13
|
-
|
|
14
|
-
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
|
15
|
-
|
|
16
|
-
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
17
|
-
|
|
18
|
-
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
19
|
-
|
|
20
|
-
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
21
|
-
|
|
22
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
23
|
-
|
|
24
|
-
var _react = _interopRequireDefault(require("react"));
|
|
25
|
-
|
|
26
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
27
|
-
|
|
28
|
-
var _findKey = _interopRequireDefault(require("lodash/findKey"));
|
|
29
|
-
|
|
30
|
-
var _choice = _interopRequireDefault(require("./choice"));
|
|
31
|
-
|
|
32
|
-
var _dragInTheBlankDp = _interopRequireDefault(require("@pie-lib/drag/lib/drag-in-the-blank-dp"));
|
|
33
|
-
|
|
34
|
-
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
|
-
|
|
36
|
-
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; } }
|
|
37
|
-
|
|
38
|
-
var Choices = /*#__PURE__*/function (_React$Component) {
|
|
39
|
-
(0, _inherits2["default"])(Choices, _React$Component);
|
|
40
|
-
|
|
41
|
-
var _super = _createSuper(Choices);
|
|
42
|
-
|
|
43
|
-
function Choices() {
|
|
44
|
-
var _this;
|
|
45
|
-
|
|
46
|
-
(0, _classCallCheck2["default"])(this, Choices);
|
|
47
|
-
|
|
48
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
49
|
-
args[_key] = arguments[_key];
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
_this = _super.call.apply(_super, [this].concat(args));
|
|
53
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getStyleForWrapper", function () {
|
|
54
|
-
var choicePosition = _this.props.choicePosition;
|
|
55
|
-
|
|
56
|
-
switch (choicePosition) {
|
|
57
|
-
case 'above':
|
|
58
|
-
return {
|
|
59
|
-
margin: '0 0 40px 0'
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
case 'below':
|
|
63
|
-
return {
|
|
64
|
-
margin: '40px 0 0 0'
|
|
65
|
-
};
|
|
66
|
-
|
|
67
|
-
case 'right':
|
|
68
|
-
return {
|
|
69
|
-
margin: '0 0 0 40px'
|
|
70
|
-
};
|
|
71
|
-
|
|
72
|
-
default:
|
|
73
|
-
return {
|
|
74
|
-
margin: '0 40px 0 0'
|
|
75
|
-
};
|
|
76
|
-
}
|
|
77
|
-
});
|
|
78
|
-
return _this;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
(0, _createClass2["default"])(Choices, [{
|
|
82
|
-
key: "render",
|
|
83
|
-
value: function render() {
|
|
84
|
-
var _this$props = this.props,
|
|
85
|
-
disabled = _this$props.disabled,
|
|
86
|
-
duplicates = _this$props.duplicates,
|
|
87
|
-
choices = _this$props.choices,
|
|
88
|
-
value = _this$props.value;
|
|
89
|
-
var filteredChoices = choices.filter(function (c) {
|
|
90
|
-
if (duplicates === true) {
|
|
91
|
-
return true;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
var foundChoice = (0, _findKey["default"])(value, function (v) {
|
|
95
|
-
return v === c.id;
|
|
96
|
-
});
|
|
97
|
-
return foundChoice === undefined;
|
|
98
|
-
});
|
|
99
|
-
var elementStyle = this.getStyleForWrapper();
|
|
100
|
-
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
101
|
-
style: elementStyle
|
|
102
|
-
}, /*#__PURE__*/_react["default"].createElement(_dragInTheBlankDp["default"], {
|
|
103
|
-
disabled: disabled
|
|
104
|
-
}, filteredChoices.map(function (c, index) {
|
|
105
|
-
return /*#__PURE__*/_react["default"].createElement(_choice["default"], {
|
|
106
|
-
key: "".concat(c.value, "-").concat(index),
|
|
107
|
-
disabled: disabled,
|
|
108
|
-
choice: c
|
|
109
|
-
});
|
|
110
|
-
})));
|
|
111
|
-
}
|
|
112
|
-
}]);
|
|
113
|
-
return Choices;
|
|
114
|
-
}(_react["default"].Component);
|
|
115
|
-
|
|
116
|
-
exports["default"] = Choices;
|
|
117
|
-
(0, _defineProperty2["default"])(Choices, "propTypes", {
|
|
118
|
-
disabled: _propTypes["default"].bool,
|
|
119
|
-
duplicates: _propTypes["default"].bool,
|
|
120
|
-
choices: _propTypes["default"].arrayOf(_propTypes["default"].shape({
|
|
121
|
-
label: _propTypes["default"].string,
|
|
122
|
-
value: _propTypes["default"].string
|
|
123
|
-
})),
|
|
124
|
-
value: _propTypes["default"].object,
|
|
125
|
-
choicePosition: _propTypes["default"].string.isRequired
|
|
126
|
-
});
|
|
127
|
-
//# sourceMappingURL=index.js.map
|
package/lib/choices/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
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;;;;;;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,GAAG,KAAKC,kBAAL,EAArB;AAEA,0BACE;AAAK,QAAA,KAAK,EAAED;AAAZ,sBACE,gCAAC,4BAAD;AAA0B,QAAA,QAAQ,EAAEX;AAApC,SACGI,eAAe,CAACS,GAAhB,CAAoB,UAACP,CAAD,EAAIQ,KAAJ;AAAA,4BACnB,gCAAC,kBAAD;AAAQ,UAAA,GAAG,YAAKR,CAAC,CAACH,KAAP,cAAgBW,KAAhB,CAAX;AAAoC,UAAA,QAAQ,EAAEd,QAA9C;AAAwD,UAAA,MAAM,EAAEM;AAAhE,UADmB;AAAA,OAApB,CADH,CADF,CADF;AASD;;;EAvDkCS,kBAAMC,S;;;iCAAtBpB,O,eACA;AACjBI,EAAAA,QAAQ,EAAEiB,sBAAUC,IADH;AAEjBjB,EAAAA,UAAU,EAAEgB,sBAAUC,IAFL;AAGjBhB,EAAAA,OAAO,EAAEe,sBAAUE,OAAV,CAAkBF,sBAAUG,KAAV,CAAgB;AAAEC,IAAAA,KAAK,EAAEJ,sBAAUK,MAAnB;AAA2BnB,IAAAA,KAAK,EAAEc,sBAAUK;AAA5C,GAAhB,CAAlB,CAHQ;AAIjBnB,EAAAA,KAAK,EAAEc,sBAAUM,MAJA;AAKjB1B,EAAAA,cAAc,EAAEoB,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/lib/drag-in-the-blank-dp';\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();\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"}
|
package/lib/componentize.js
DELETED
|
@@ -1,25 +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
|
-
|
|
9
|
-
var _default = function _default(s, t) {
|
|
10
|
-
if (!s) {
|
|
11
|
-
return {
|
|
12
|
-
markup: ''
|
|
13
|
-
};
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
var markup = s.replace(REGEX, function (match, g) {
|
|
17
|
-
return "<span data-component=\"".concat(t, "\" data-id=\"").concat(g, "\"></span>");
|
|
18
|
-
});
|
|
19
|
-
return {
|
|
20
|
-
markup: markup
|
|
21
|
-
};
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
exports["default"] = _default;
|
|
25
|
-
//# sourceMappingURL=componentize.js.map
|
package/lib/componentize.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/componentize.js"],"names":["REGEX","s","t","markup","replace","match","g"],"mappings":";;;;;;AAAA,IAAMA,KAAK,GAAG,gBAAd;;eAEe,kBAACC,CAAD,EAAIC,CAAJ,EAAU;AACvB,MAAI,CAACD,CAAL,EAAQ;AACN,WAAO;AAAEE,MAAAA,MAAM,EAAE;AAAV,KAAP;AACD;;AAED,MAAMA,MAAM,GAAGF,CAAC,CAACG,OAAF,CAAUJ,KAAV,EAAiB,UAACK,KAAD,EAAQC,CAAR,EAAc;AAC5C,4CAAgCJ,CAAhC,0BAA+CI,CAA/C;AACD,GAFc,CAAf;AAIA,SAAO;AAAEH,IAAAA,MAAM,EAANA;AAAF,GAAP;AACD,C","sourcesContent":["const REGEX = /\\{\\{(\\d+)\\}\\}/g;\n\nexport default (s, t) => {\n if (!s) {\n return { markup: '' };\n }\n\n const markup = s.replace(REGEX, (match, g) => {\n return `<span data-component=\"${t}\" data-id=\"${g}\"></span>`;\n });\n\n return { markup };\n};\n"],"file":"componentize.js"}
|
package/lib/components/blank.js
DELETED
|
@@ -1,303 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports["default"] = exports.DRAG_TYPE = exports.BlankContent = void 0;
|
|
9
|
-
|
|
10
|
-
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
11
|
-
|
|
12
|
-
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
13
|
-
|
|
14
|
-
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
15
|
-
|
|
16
|
-
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
17
|
-
|
|
18
|
-
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
19
|
-
|
|
20
|
-
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
21
|
-
|
|
22
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
23
|
-
|
|
24
|
-
var _react = _interopRequireDefault(require("react"));
|
|
25
|
-
|
|
26
|
-
var _reactDom = _interopRequireDefault(require("react-dom"));
|
|
27
|
-
|
|
28
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
29
|
-
|
|
30
|
-
var _mathRendering = require("@pie-lib/math-rendering");
|
|
31
|
-
|
|
32
|
-
var _debug = _interopRequireDefault(require("debug"));
|
|
33
|
-
|
|
34
|
-
var _drag = require("@pie-lib/drag");
|
|
35
|
-
|
|
36
|
-
var _styles = require("@material-ui/core/styles");
|
|
37
|
-
|
|
38
|
-
var _Chip = _interopRequireDefault(require("@material-ui/core/Chip"));
|
|
39
|
-
|
|
40
|
-
var _classnames3 = _interopRequireDefault(require("classnames"));
|
|
41
|
-
|
|
42
|
-
var _renderUi = require("@pie-lib/render-ui");
|
|
43
|
-
|
|
44
|
-
var _excluded = ["connectDragSource", "connectDropTarget"];
|
|
45
|
-
|
|
46
|
-
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; }
|
|
47
|
-
|
|
48
|
-
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; }
|
|
49
|
-
|
|
50
|
-
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); }; }
|
|
51
|
-
|
|
52
|
-
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; } }
|
|
53
|
-
|
|
54
|
-
var log = (0, _debug["default"])('pie-lib:mask-markup:blank');
|
|
55
|
-
var DRAG_TYPE = 'MaskBlank';
|
|
56
|
-
exports.DRAG_TYPE = DRAG_TYPE;
|
|
57
|
-
var useStyles = (0, _styles.withStyles)(function () {
|
|
58
|
-
return {
|
|
59
|
-
content: {
|
|
60
|
-
border: "solid 0px ".concat(_renderUi.color.primary()),
|
|
61
|
-
minWidth: '200px',
|
|
62
|
-
touchAction: 'none',
|
|
63
|
-
overflow: 'hidden'
|
|
64
|
-
},
|
|
65
|
-
chip: {
|
|
66
|
-
backgroundColor: _renderUi.color.background(),
|
|
67
|
-
border: "1px solid ".concat(_renderUi.color.text()),
|
|
68
|
-
color: _renderUi.color.text(),
|
|
69
|
-
minWidth: '90px',
|
|
70
|
-
fontSize: 'inherit',
|
|
71
|
-
minHeight: '32px',
|
|
72
|
-
height: 'auto',
|
|
73
|
-
maxWidth: '374px',
|
|
74
|
-
position: 'relative'
|
|
75
|
-
},
|
|
76
|
-
chipLabel: {
|
|
77
|
-
whiteSpace: 'pre-wrap',
|
|
78
|
-
// Added for touch devices, for image content.
|
|
79
|
-
// This will prevent the context menu from appearing and not allowing other interactions with the image.
|
|
80
|
-
// If interactions with the image in the token will be requested we should handle only the context Menu.
|
|
81
|
-
pointerEvents: 'none',
|
|
82
|
-
'& img': {
|
|
83
|
-
display: 'block',
|
|
84
|
-
padding: '2px 0'
|
|
85
|
-
}
|
|
86
|
-
},
|
|
87
|
-
hidden: {
|
|
88
|
-
color: 'transparent',
|
|
89
|
-
opacity: 0
|
|
90
|
-
},
|
|
91
|
-
dragged: {
|
|
92
|
-
position: 'absolute',
|
|
93
|
-
left: 16,
|
|
94
|
-
maxWidth: '60px'
|
|
95
|
-
},
|
|
96
|
-
correct: {
|
|
97
|
-
border: "solid 1px ".concat(_renderUi.color.correct())
|
|
98
|
-
},
|
|
99
|
-
incorrect: {
|
|
100
|
-
border: "solid 1px ".concat(_renderUi.color.incorrect())
|
|
101
|
-
},
|
|
102
|
-
over: {
|
|
103
|
-
whiteSpace: 'nowrap',
|
|
104
|
-
overflow: 'hidden'
|
|
105
|
-
}
|
|
106
|
-
};
|
|
107
|
-
});
|
|
108
|
-
|
|
109
|
-
var BlankContent = /*#__PURE__*/function (_React$Component) {
|
|
110
|
-
(0, _inherits2["default"])(BlankContent, _React$Component);
|
|
111
|
-
|
|
112
|
-
var _super = _createSuper(BlankContent);
|
|
113
|
-
|
|
114
|
-
function BlankContent() {
|
|
115
|
-
var _this;
|
|
116
|
-
|
|
117
|
-
(0, _classCallCheck2["default"])(this, BlankContent);
|
|
118
|
-
_this = _super.call(this);
|
|
119
|
-
_this.state = {
|
|
120
|
-
height: 0
|
|
121
|
-
};
|
|
122
|
-
return _this;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
(0, _createClass2["default"])(BlankContent, [{
|
|
126
|
-
key: "componentDidUpdate",
|
|
127
|
-
value: function componentDidUpdate(prevProps) {
|
|
128
|
-
var _this2 = this;
|
|
129
|
-
|
|
130
|
-
(0, _mathRendering.renderMath)(this.rootRef);
|
|
131
|
-
var currentChoice = this.props.choice;
|
|
132
|
-
var prevChoice = prevProps.choice;
|
|
133
|
-
|
|
134
|
-
if (JSON.stringify(currentChoice) !== JSON.stringify(prevChoice)) {
|
|
135
|
-
if (!currentChoice) {
|
|
136
|
-
this.setState({
|
|
137
|
-
height: 0
|
|
138
|
-
});
|
|
139
|
-
return;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
setTimeout(function () {
|
|
143
|
-
_this2.setState({
|
|
144
|
-
height: _this2.spanRef.offsetHeight
|
|
145
|
-
});
|
|
146
|
-
}, 300);
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
}, {
|
|
150
|
-
key: "addDraggableFalseAttributes",
|
|
151
|
-
value: function addDraggableFalseAttributes(parent) {
|
|
152
|
-
parent.childNodes.forEach(function (elem) {
|
|
153
|
-
if (elem instanceof Element || elem instanceof HTMLDocument) {
|
|
154
|
-
elem.setAttribute('draggable', false);
|
|
155
|
-
}
|
|
156
|
-
});
|
|
157
|
-
}
|
|
158
|
-
}, {
|
|
159
|
-
key: "render",
|
|
160
|
-
value: function render() {
|
|
161
|
-
var _this3 = this,
|
|
162
|
-
_classnames2;
|
|
163
|
-
|
|
164
|
-
var _this$props = this.props,
|
|
165
|
-
disabled = _this$props.disabled,
|
|
166
|
-
choice = _this$props.choice,
|
|
167
|
-
classes = _this$props.classes,
|
|
168
|
-
isOver = _this$props.isOver,
|
|
169
|
-
dragItem = _this$props.dragItem,
|
|
170
|
-
correct = _this$props.correct;
|
|
171
|
-
var draggedLabel = dragItem && isOver && dragItem.choice.value;
|
|
172
|
-
var label = choice && choice.value;
|
|
173
|
-
return (
|
|
174
|
-
/*#__PURE__*/
|
|
175
|
-
// 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.
|
|
176
|
-
_react["default"].createElement(_Chip["default"], {
|
|
177
|
-
clickable: false,
|
|
178
|
-
disabled: true,
|
|
179
|
-
ref: function ref(_ref3) {
|
|
180
|
-
//eslint-disable-next-line
|
|
181
|
-
_this3.rootRef = _reactDom["default"].findDOMNode(_ref3);
|
|
182
|
-
},
|
|
183
|
-
component: "span",
|
|
184
|
-
label: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
|
|
185
|
-
className: (0, _classnames3["default"])(classes.chipLabel, isOver && classes.over, (0, _defineProperty2["default"])({}, classes.hidden, draggedLabel)),
|
|
186
|
-
ref: function ref(_ref) {
|
|
187
|
-
if (_ref) {
|
|
188
|
-
//eslint-disable-next-line
|
|
189
|
-
_this3.spanRef = _reactDom["default"].findDOMNode(_ref);
|
|
190
|
-
_ref.innerHTML = label || '';
|
|
191
|
-
|
|
192
|
-
_this3.addDraggableFalseAttributes(_ref);
|
|
193
|
-
}
|
|
194
|
-
}
|
|
195
|
-
}, ' '), draggedLabel && /*#__PURE__*/_react["default"].createElement("span", {
|
|
196
|
-
className: (0, _classnames3["default"])(classes.chipLabel, isOver && classes.over, classes.dragged),
|
|
197
|
-
ref: function ref(_ref2) {
|
|
198
|
-
if (_ref2) {
|
|
199
|
-
//eslint-disable-next-line
|
|
200
|
-
_this3.spanRef = _reactDom["default"].findDOMNode(_ref2);
|
|
201
|
-
_ref2.innerHTML = draggedLabel || '';
|
|
202
|
-
|
|
203
|
-
_this3.addDraggableFalseAttributes(_ref2);
|
|
204
|
-
}
|
|
205
|
-
}
|
|
206
|
-
}, ' ')),
|
|
207
|
-
className: (0, _classnames3["default"])(classes.chip, isOver && classes.over, (_classnames2 = {}, (0, _defineProperty2["default"])(_classnames2, classes.correct, correct !== undefined && correct), (0, _defineProperty2["default"])(_classnames2, classes.incorrect, correct !== undefined && !correct), _classnames2)),
|
|
208
|
-
variant: disabled ? 'outlined' : undefined,
|
|
209
|
-
style: _objectSpread({}, this.state.height ? {
|
|
210
|
-
height: this.state.height
|
|
211
|
-
} : {}),
|
|
212
|
-
classes: {
|
|
213
|
-
label: isOver && classes.over
|
|
214
|
-
}
|
|
215
|
-
})
|
|
216
|
-
);
|
|
217
|
-
}
|
|
218
|
-
}]);
|
|
219
|
-
return BlankContent;
|
|
220
|
-
}(_react["default"].Component);
|
|
221
|
-
|
|
222
|
-
exports.BlankContent = BlankContent;
|
|
223
|
-
(0, _defineProperty2["default"])(BlankContent, "propTypes", {
|
|
224
|
-
id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
|
|
225
|
-
disabled: _propTypes["default"].bool,
|
|
226
|
-
duplicates: _propTypes["default"].bool,
|
|
227
|
-
choice: _propTypes["default"].object,
|
|
228
|
-
classes: _propTypes["default"].object,
|
|
229
|
-
isOver: _propTypes["default"].bool,
|
|
230
|
-
dragItem: _propTypes["default"].object,
|
|
231
|
-
correct: _propTypes["default"].bool,
|
|
232
|
-
onChange: _propTypes["default"].func
|
|
233
|
-
});
|
|
234
|
-
var StyledBlankContent = useStyles(BlankContent);
|
|
235
|
-
var connectedBlankContent = useStyles(function (_ref4) {
|
|
236
|
-
var connectDragSource = _ref4.connectDragSource,
|
|
237
|
-
connectDropTarget = _ref4.connectDropTarget,
|
|
238
|
-
props = (0, _objectWithoutProperties2["default"])(_ref4, _excluded);
|
|
239
|
-
var classes = props.classes,
|
|
240
|
-
isOver = props.isOver;
|
|
241
|
-
return connectDropTarget(connectDragSource( /*#__PURE__*/_react["default"].createElement("span", {
|
|
242
|
-
className: (0, _classnames3["default"])(classes.content, isOver && classes.over)
|
|
243
|
-
}, /*#__PURE__*/_react["default"].createElement(StyledBlankContent, props))));
|
|
244
|
-
});
|
|
245
|
-
var tileTarget = {
|
|
246
|
-
drop: function drop(props, monitor) {
|
|
247
|
-
var draggedItem = monitor.getItem();
|
|
248
|
-
log('props.instanceId', props.instanceId, 'draggedItem.instanceId:', draggedItem.instanceId);
|
|
249
|
-
|
|
250
|
-
if (draggedItem.id !== props.id) {
|
|
251
|
-
props.onChange(props.id, draggedItem.choice.id);
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
return {
|
|
255
|
-
dropped: draggedItem.id !== props.id
|
|
256
|
-
};
|
|
257
|
-
},
|
|
258
|
-
canDrop: function canDrop(props, monitor) {
|
|
259
|
-
var draggedItem = monitor.getItem();
|
|
260
|
-
return draggedItem.instanceId === props.instanceId;
|
|
261
|
-
}
|
|
262
|
-
};
|
|
263
|
-
var DropTile = (0, _drag.DropTarget)(DRAG_TYPE, tileTarget, function (connect, monitor) {
|
|
264
|
-
return {
|
|
265
|
-
connectDropTarget: connect.dropTarget(),
|
|
266
|
-
isOver: monitor.isOver(),
|
|
267
|
-
dragItem: monitor.getItem()
|
|
268
|
-
};
|
|
269
|
-
})(connectedBlankContent);
|
|
270
|
-
var tileSource = {
|
|
271
|
-
canDrag: function canDrag(props) {
|
|
272
|
-
return !props.disabled && !!props.choice;
|
|
273
|
-
},
|
|
274
|
-
beginDrag: function beginDrag(props) {
|
|
275
|
-
return {
|
|
276
|
-
id: props.id,
|
|
277
|
-
choice: props.choice,
|
|
278
|
-
instanceId: props.instanceId,
|
|
279
|
-
fromChoice: true
|
|
280
|
-
};
|
|
281
|
-
},
|
|
282
|
-
endDrag: function endDrag(props, monitor) {
|
|
283
|
-
// this will be null if it did not drop
|
|
284
|
-
var dropResult = monitor.getDropResult();
|
|
285
|
-
|
|
286
|
-
if (!dropResult || dropResult.dropped && !props.duplicates) {
|
|
287
|
-
var draggedItem = monitor.getItem();
|
|
288
|
-
|
|
289
|
-
if (draggedItem.fromChoice) {
|
|
290
|
-
props.onChange(props.id, undefined);
|
|
291
|
-
}
|
|
292
|
-
}
|
|
293
|
-
}
|
|
294
|
-
};
|
|
295
|
-
var DragDropTile = (0, _drag.DragSource)(DRAG_TYPE, tileSource, function (connect, monitor) {
|
|
296
|
-
return {
|
|
297
|
-
connectDragSource: connect.dragSource(),
|
|
298
|
-
isDragging: monitor.isDragging()
|
|
299
|
-
};
|
|
300
|
-
})(DropTile);
|
|
301
|
-
var _default = DragDropTile;
|
|
302
|
-
exports["default"] = _default;
|
|
303
|
-
//# sourceMappingURL=blank.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/blank.jsx"],"names":["log","DRAG_TYPE","useStyles","content","border","color","primary","minWidth","touchAction","overflow","chip","backgroundColor","background","text","fontSize","minHeight","height","maxWidth","position","chipLabel","whiteSpace","pointerEvents","display","padding","hidden","opacity","dragged","left","correct","incorrect","over","BlankContent","state","prevProps","rootRef","currentChoice","props","choice","prevChoice","JSON","stringify","setState","setTimeout","spanRef","offsetHeight","parent","childNodes","forEach","elem","Element","HTMLDocument","setAttribute","disabled","classes","isOver","dragItem","draggedLabel","value","label","ref","ReactDOM","findDOMNode","innerHTML","addDraggableFalseAttributes","undefined","React","Component","id","PropTypes","oneOfType","string","number","bool","duplicates","object","onChange","func","StyledBlankContent","connectedBlankContent","connectDragSource","connectDropTarget","tileTarget","drop","monitor","draggedItem","getItem","instanceId","dropped","canDrop","DropTile","connect","dropTarget","tileSource","canDrag","beginDrag","fromChoice","endDrag","dropResult","getDropResult","DragDropTile","dragSource","isDragging"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport debug from 'debug';\nimport { DragSource, DropTarget } from '@pie-lib/drag';\nimport { withStyles } from '@material-ui/core/styles';\nimport Chip from '@material-ui/core/Chip';\nimport classnames from 'classnames';\nimport { color } from '@pie-lib/render-ui';\nconst log = debug('pie-lib:mask-markup:blank');\nexport const DRAG_TYPE = 'MaskBlank';\n\nconst useStyles = withStyles(() => ({\n content: {\n border: `solid 0px ${color.primary()}`,\n minWidth: '200px',\n touchAction: 'none',\n overflow: 'hidden',\n },\n chip: {\n backgroundColor: color.background(),\n border: `1px solid ${color.text()}`,\n color: color.text(),\n minWidth: '90px',\n fontSize: 'inherit',\n minHeight: '32px',\n height: 'auto',\n maxWidth: '374px',\n position: 'relative',\n },\n chipLabel: {\n whiteSpace: 'pre-wrap',\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 '& img': {\n display: 'block',\n padding: '2px 0',\n },\n },\n hidden: {\n color: 'transparent',\n opacity: 0,\n },\n dragged: {\n position: 'absolute',\n left: 16,\n maxWidth: '60px',\n },\n correct: {\n border: `solid 1px ${color.correct()}`,\n },\n incorrect: {\n border: `solid 1px ${color.incorrect()}`,\n },\n over: {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n },\n}));\n\nexport class BlankContent extends React.Component {\n static propTypes = {\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n disabled: PropTypes.bool,\n duplicates: PropTypes.bool,\n choice: PropTypes.object,\n classes: PropTypes.object,\n isOver: PropTypes.bool,\n dragItem: PropTypes.object,\n correct: PropTypes.bool,\n onChange: PropTypes.func,\n };\n\n constructor() {\n super();\n this.state = {\n height: 0,\n };\n }\n\n componentDidUpdate(prevProps) {\n renderMath(this.rootRef);\n const { choice: currentChoice } = this.props;\n const { choice: prevChoice } = prevProps;\n\n if (JSON.stringify(currentChoice) !== JSON.stringify(prevChoice)) {\n if (!currentChoice) {\n this.setState({\n height: 0,\n });\n return;\n }\n setTimeout(() => {\n this.setState({\n height: this.spanRef.offsetHeight,\n });\n }, 300);\n }\n }\n\n addDraggableFalseAttributes(parent) {\n parent.childNodes.forEach((elem) => {\n if (elem instanceof Element || elem instanceof HTMLDocument) {\n elem.setAttribute('draggable', false);\n }\n });\n }\n\n render() {\n const { disabled, choice, classes, isOver, dragItem, correct } = this.props;\n const draggedLabel = dragItem && isOver && dragItem.choice.value;\n const label = choice && choice.value;\n\n return (\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 <Chip\n clickable={false}\n disabled={true}\n ref={(ref) => {\n //eslint-disable-next-line\n this.rootRef = ReactDOM.findDOMNode(ref);\n }}\n component=\"span\"\n label={\n <React.Fragment>\n <span\n className={classnames(classes.chipLabel, isOver && classes.over, {\n [classes.hidden]: draggedLabel,\n })}\n ref={(ref) => {\n if (ref) {\n //eslint-disable-next-line\n this.spanRef = ReactDOM.findDOMNode(ref);\n ref.innerHTML = label || '';\n this.addDraggableFalseAttributes(ref);\n }\n }}\n >\n {' '}\n </span>\n {draggedLabel && (\n <span\n className={classnames(classes.chipLabel, isOver && classes.over, classes.dragged)}\n ref={(ref) => {\n if (ref) {\n //eslint-disable-next-line\n this.spanRef = ReactDOM.findDOMNode(ref);\n ref.innerHTML = draggedLabel || '';\n this.addDraggableFalseAttributes(ref);\n }\n }}\n >\n {' '}\n </span>\n )}\n </React.Fragment>\n }\n className={classnames(classes.chip, isOver && classes.over, {\n [classes.correct]: correct !== undefined && correct,\n [classes.incorrect]: correct !== undefined && !correct,\n })}\n variant={disabled ? 'outlined' : undefined}\n style={{\n ...(this.state.height ? { height: this.state.height } : {}),\n }}\n classes={{\n label: isOver && classes.over,\n }}\n />\n );\n }\n}\n\nconst StyledBlankContent = useStyles(BlankContent);\n\nconst connectedBlankContent = useStyles(({ connectDragSource, connectDropTarget, ...props }) => {\n const { classes, isOver } = props;\n\n return connectDropTarget(\n connectDragSource(\n <span className={classnames(classes.content, isOver && classes.over)}>\n <StyledBlankContent {...props} />\n </span>,\n ),\n );\n});\n\nconst tileTarget = {\n drop(props, monitor) {\n const draggedItem = monitor.getItem();\n\n log('props.instanceId', props.instanceId, 'draggedItem.instanceId:', draggedItem.instanceId);\n\n if (draggedItem.id !== props.id) {\n props.onChange(props.id, draggedItem.choice.id);\n }\n\n return {\n dropped: draggedItem.id !== props.id,\n };\n },\n canDrop(props, monitor) {\n const draggedItem = monitor.getItem();\n\n return draggedItem.instanceId === props.instanceId;\n },\n};\n\nconst DropTile = DropTarget(DRAG_TYPE, tileTarget, (connect, monitor) => ({\n connectDropTarget: connect.dropTarget(),\n isOver: monitor.isOver(),\n dragItem: monitor.getItem(),\n}))(connectedBlankContent);\n\nconst tileSource = {\n canDrag(props) {\n return !props.disabled && !!props.choice;\n },\n beginDrag(props) {\n return {\n id: props.id,\n choice: props.choice,\n instanceId: props.instanceId,\n fromChoice: true,\n };\n },\n endDrag(props, monitor) {\n // this will be null if it did not drop\n const dropResult = monitor.getDropResult();\n\n if (!dropResult || (dropResult.dropped && !props.duplicates)) {\n const draggedItem = monitor.getItem();\n\n if (draggedItem.fromChoice) {\n props.onChange(props.id, undefined);\n }\n }\n },\n};\n\nconst DragDropTile = DragSource(DRAG_TYPE, tileSource, (connect, monitor) => ({\n connectDragSource: connect.dragSource(),\n isDragging: monitor.isDragging(),\n}))(DropTile);\n\nexport default DragDropTile;\n"],"file":"blank.js"}
|
|
@@ -1,113 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports["default"] = void 0;
|
|
9
|
-
|
|
10
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
-
|
|
12
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
13
|
-
|
|
14
|
-
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
15
|
-
|
|
16
|
-
var _react = _interopRequireDefault(require("react"));
|
|
17
|
-
|
|
18
|
-
var _OutlinedInput = _interopRequireDefault(require("@material-ui/core/OutlinedInput"));
|
|
19
|
-
|
|
20
|
-
var _classnames3 = _interopRequireDefault(require("classnames"));
|
|
21
|
-
|
|
22
|
-
var _styles = require("@material-ui/core/styles");
|
|
23
|
-
|
|
24
|
-
var _renderUi = require("@pie-lib/render-ui");
|
|
25
|
-
|
|
26
|
-
var _excluded = ["correct", "charactersLimit", "classes", "disabled", "isBox", "isConstructedResponse", "width", "spellCheck"];
|
|
27
|
-
|
|
28
|
-
var correctStyle = function correctStyle(color) {
|
|
29
|
-
return {
|
|
30
|
-
borderColor: "".concat(color, " !important")
|
|
31
|
-
};
|
|
32
|
-
};
|
|
33
|
-
|
|
34
|
-
var _default = (0, _styles.withStyles)(function () {
|
|
35
|
-
return {
|
|
36
|
-
input: {
|
|
37
|
-
color: _renderUi.color.text(),
|
|
38
|
-
backgroundColor: _renderUi.color.background(),
|
|
39
|
-
borderRadius: '4px !important',
|
|
40
|
-
borderWidth: '1px',
|
|
41
|
-
borderStyle: 'solid',
|
|
42
|
-
padding: '10px 20px 10px 10px',
|
|
43
|
-
'&:disabled': {
|
|
44
|
-
opacity: 0.8,
|
|
45
|
-
cursor: 'not-allowed !important'
|
|
46
|
-
},
|
|
47
|
-
'&:hover': {
|
|
48
|
-
borderColor: _renderUi.color.primary(),
|
|
49
|
-
'&:disabled': {
|
|
50
|
-
borderColor: 'initial'
|
|
51
|
-
}
|
|
52
|
-
},
|
|
53
|
-
'&:focus': {
|
|
54
|
-
borderColor: _renderUi.color.primaryDark()
|
|
55
|
-
}
|
|
56
|
-
},
|
|
57
|
-
crInput: {
|
|
58
|
-
padding: '8px !important'
|
|
59
|
-
},
|
|
60
|
-
correct: correctStyle(_renderUi.color.correct()),
|
|
61
|
-
incorrect: correctStyle(_renderUi.color.incorrect()),
|
|
62
|
-
box: {
|
|
63
|
-
fontSize: 'inherit'
|
|
64
|
-
},
|
|
65
|
-
outlinedInput: {
|
|
66
|
-
padding: '2px',
|
|
67
|
-
borderRadius: '4px',
|
|
68
|
-
'& fieldset': {
|
|
69
|
-
border: 0
|
|
70
|
-
}
|
|
71
|
-
},
|
|
72
|
-
notchedOutline: {
|
|
73
|
-
borderColor: _renderUi.color.correct()
|
|
74
|
-
}
|
|
75
|
-
};
|
|
76
|
-
})(function (props) {
|
|
77
|
-
var _classnames, _classnames2;
|
|
78
|
-
|
|
79
|
-
var correct = props.correct,
|
|
80
|
-
charactersLimit = props.charactersLimit,
|
|
81
|
-
classes = props.classes,
|
|
82
|
-
disabled = props.disabled,
|
|
83
|
-
isBox = props.isBox,
|
|
84
|
-
isConstructedResponse = props.isConstructedResponse,
|
|
85
|
-
width = props.width,
|
|
86
|
-
spellCheck = props.spellCheck,
|
|
87
|
-
rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
|
|
88
|
-
var label = typeof correct === 'boolean' ? correct ? 'correct' : 'incorrect' : undefined;
|
|
89
|
-
var inputProps = charactersLimit ? {
|
|
90
|
-
maxLength: charactersLimit
|
|
91
|
-
} : {};
|
|
92
|
-
|
|
93
|
-
if (width) {
|
|
94
|
-
inputProps.style = {
|
|
95
|
-
width: "".concat(width + Math.round(width / 10) + 1, "ch") // added some extra space for capital letters
|
|
96
|
-
|
|
97
|
-
};
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
return /*#__PURE__*/_react["default"].createElement(_OutlinedInput["default"], (0, _extends2["default"])({
|
|
101
|
-
className: (0, _classnames3["default"])((_classnames = {}, (0, _defineProperty2["default"])(_classnames, classes.disabledInput, disabled), (0, _defineProperty2["default"])(_classnames, classes.box, isBox), (0, _defineProperty2["default"])(_classnames, classes.outlinedInput, true), _classnames)),
|
|
102
|
-
classes: {
|
|
103
|
-
input: (0, _classnames3["default"])((_classnames2 = {}, (0, _defineProperty2["default"])(_classnames2, classes.input, true), (0, _defineProperty2["default"])(_classnames2, classes[label], label), (0, _defineProperty2["default"])(_classnames2, classes.crInput, isConstructedResponse), _classnames2))
|
|
104
|
-
},
|
|
105
|
-
inputProps: inputProps,
|
|
106
|
-
labelWidth: 0,
|
|
107
|
-
disabled: disabled,
|
|
108
|
-
spellCheck: spellCheck
|
|
109
|
-
}, rest));
|
|
110
|
-
});
|
|
111
|
-
|
|
112
|
-
exports["default"] = _default;
|
|
113
|
-
//# sourceMappingURL=correct-input.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/correct-input.jsx"],"names":["correctStyle","color","borderColor","input","text","backgroundColor","background","borderRadius","borderWidth","borderStyle","padding","opacity","cursor","primary","primaryDark","crInput","correct","incorrect","box","fontSize","outlinedInput","border","notchedOutline","props","charactersLimit","classes","disabled","isBox","isConstructedResponse","width","spellCheck","rest","label","undefined","inputProps","maxLength","style","Math","round","disabledInput"],"mappings":"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","sourcesContent":["import React from 'react';\nimport OutlinedInput from '@material-ui/core/OutlinedInput';\nimport classnames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/render-ui';\n\nconst correctStyle = (color) => ({\n borderColor: `${color} !important`,\n});\n\nexport default withStyles(() => ({\n input: {\n color: color.text(),\n backgroundColor: color.background(),\n borderRadius: '4px !important',\n borderWidth: '1px',\n borderStyle: 'solid',\n padding: '10px 20px 10px 10px',\n '&:disabled': {\n opacity: 0.8,\n cursor: 'not-allowed !important',\n },\n '&:hover': {\n borderColor: color.primary(),\n '&:disabled': {\n borderColor: 'initial',\n },\n },\n '&:focus': {\n borderColor: color.primaryDark(),\n },\n },\n crInput: {\n padding: '8px !important',\n },\n correct: correctStyle(color.correct()),\n incorrect: correctStyle(color.incorrect()),\n box: {\n fontSize: 'inherit',\n },\n outlinedInput: {\n padding: '2px',\n borderRadius: '4px',\n '& fieldset': {\n border: 0,\n },\n },\n notchedOutline: {\n borderColor: color.correct(),\n },\n}))((props) => {\n const {\n correct,\n charactersLimit,\n classes,\n disabled,\n isBox,\n isConstructedResponse,\n width,\n spellCheck,\n ...rest\n } = props;\n const label = typeof correct === 'boolean' ? (correct ? 'correct' : 'incorrect') : undefined;\n const inputProps = charactersLimit ? { maxLength: charactersLimit } : {};\n\n if (width) {\n inputProps.style = {\n width: `${width + Math.round(width / 10) + 1}ch`, // added some extra space for capital letters\n };\n }\n\n return (\n <OutlinedInput\n className={classnames({\n [classes.disabledInput]: disabled,\n [classes.box]: isBox,\n [classes.outlinedInput]: true,\n })}\n classes={{\n input: classnames({\n [classes.input]: true,\n [classes[label]]: label,\n [classes.crInput]: isConstructedResponse,\n }),\n }}\n inputProps={inputProps}\n labelWidth={0}\n disabled={disabled}\n spellCheck={spellCheck}\n {...rest}\n />\n );\n});\n"],"file":"correct-input.js"}
|