@pie-lib/render-ui 4.22.0 → 4.24.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 +10 -15
- package/lib/append-css-rules.js +88 -0
- package/lib/append-css-rules.js.map +1 -0
- package/lib/assets/enableAudioAutoplayImage.js +9 -0
- package/lib/assets/enableAudioAutoplayImage.js.map +1 -0
- package/lib/collapsible/index.js +135 -0
- package/lib/collapsible/index.js.map +1 -0
- package/lib/color.js +344 -0
- package/lib/color.js.map +1 -0
- package/lib/feedback.js +150 -0
- package/lib/feedback.js.map +1 -0
- package/lib/has-media.js +27 -0
- package/lib/has-media.js.map +1 -0
- package/lib/has-text.js +28 -0
- package/lib/has-text.js.map +1 -0
- package/lib/html-and-math.js +74 -0
- package/lib/html-and-math.js.map +1 -0
- package/lib/index.js +136 -0
- package/lib/index.js.map +1 -0
- package/lib/input-container.js +60 -0
- package/lib/input-container.js.map +1 -0
- package/lib/preview-layout.js +145 -0
- package/lib/preview-layout.js.map +1 -0
- package/lib/preview-prompt.js +321 -0
- package/lib/preview-prompt.js.map +1 -0
- package/lib/purpose.js +28 -0
- package/lib/purpose.js.map +1 -0
- package/lib/readable.js +28 -0
- package/lib/readable.js.map +1 -0
- package/lib/response-indicators.js +151 -0
- package/lib/response-indicators.js.map +1 -0
- package/lib/ui-layout.js +122 -0
- package/lib/ui-layout.js.map +1 -0
- package/lib/withUndoReset.js +181 -0
- package/lib/withUndoReset.js.map +1 -0
- package/package.json +5 -4
- package/src/__tests__/__snapshots__/response-indicators.test.jsx.snap +4 -72
- package/src/has-media.js +1 -1
- package/src/has-text.js +1 -1
package/lib/ui-layout.js
ADDED
|
@@ -0,0 +1,122 @@
|
|
|
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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
13
|
+
|
|
14
|
+
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
15
|
+
|
|
16
|
+
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
17
|
+
|
|
18
|
+
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
19
|
+
|
|
20
|
+
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
21
|
+
|
|
22
|
+
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
23
|
+
|
|
24
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
25
|
+
|
|
26
|
+
var _react = _interopRequireDefault(require("react"));
|
|
27
|
+
|
|
28
|
+
var _styles = require("@material-ui/core/styles");
|
|
29
|
+
|
|
30
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
31
|
+
|
|
32
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
33
|
+
|
|
34
|
+
var _appendCssRules = _interopRequireDefault(require("./append-css-rules"));
|
|
35
|
+
|
|
36
|
+
var _excluded = ["children", "className", "classes", "fontSizeFactor"],
|
|
37
|
+
_excluded2 = ["extraCSSRules"];
|
|
38
|
+
|
|
39
|
+
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); }; }
|
|
40
|
+
|
|
41
|
+
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; } }
|
|
42
|
+
|
|
43
|
+
var UiLayout = /*#__PURE__*/function (_AppendCSSRules) {
|
|
44
|
+
(0, _inherits2["default"])(UiLayout, _AppendCSSRules);
|
|
45
|
+
|
|
46
|
+
var _super = _createSuper(UiLayout);
|
|
47
|
+
|
|
48
|
+
function UiLayout(props) {
|
|
49
|
+
var _this;
|
|
50
|
+
|
|
51
|
+
(0, _classCallCheck2["default"])(this, UiLayout);
|
|
52
|
+
_this = _super.call(this, props);
|
|
53
|
+
_this.classesSheet = document.createElement('style');
|
|
54
|
+
return _this;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
(0, _createClass2["default"])(UiLayout, [{
|
|
58
|
+
key: "computeStyle",
|
|
59
|
+
value: function computeStyle(fontSizeFactor) {
|
|
60
|
+
var getFontSize = function getFontSize(element) {
|
|
61
|
+
return parseFloat(getComputedStyle(element).fontSize);
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
var rootFontSize = getFontSize(document.documentElement);
|
|
65
|
+
var bodyFontSize = getFontSize(document.body);
|
|
66
|
+
var effectiveFontSize = Math.max(rootFontSize, bodyFontSize);
|
|
67
|
+
return fontSizeFactor !== 1 ? {
|
|
68
|
+
fontSize: "".concat(effectiveFontSize * fontSizeFactor, "px")
|
|
69
|
+
} : null;
|
|
70
|
+
}
|
|
71
|
+
}, {
|
|
72
|
+
key: "render",
|
|
73
|
+
value: function render() {
|
|
74
|
+
var _this$props = this.props,
|
|
75
|
+
children = _this$props.children,
|
|
76
|
+
className = _this$props.className,
|
|
77
|
+
classes = _this$props.classes,
|
|
78
|
+
fontSizeFactor = _this$props.fontSizeFactor,
|
|
79
|
+
rest = (0, _objectWithoutProperties2["default"])(_this$props, _excluded);
|
|
80
|
+
var finalClass = (0, _classnames["default"])(className, classes.extraCSSRules, classes.uiLayoutContainer);
|
|
81
|
+
var extraCSSRules = rest.extraCSSRules,
|
|
82
|
+
restProps = (0, _objectWithoutProperties2["default"])(rest, _excluded2);
|
|
83
|
+
var style = this.computeStyle(fontSizeFactor);
|
|
84
|
+
return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
|
|
85
|
+
className: finalClass
|
|
86
|
+
}, restProps, style && {
|
|
87
|
+
style: style
|
|
88
|
+
}), children);
|
|
89
|
+
}
|
|
90
|
+
}]);
|
|
91
|
+
return UiLayout;
|
|
92
|
+
}(_appendCssRules["default"]);
|
|
93
|
+
|
|
94
|
+
(0, _defineProperty2["default"])(UiLayout, "propTypes", {
|
|
95
|
+
classes: _propTypes["default"].object,
|
|
96
|
+
className: _propTypes["default"].string,
|
|
97
|
+
children: _propTypes["default"].array,
|
|
98
|
+
extraCSSRules: _propTypes["default"].shape({
|
|
99
|
+
names: _propTypes["default"].arrayOf(_propTypes["default"].string),
|
|
100
|
+
rules: _propTypes["default"].string
|
|
101
|
+
}),
|
|
102
|
+
fontSizeFactor: _propTypes["default"].number
|
|
103
|
+
});
|
|
104
|
+
(0, _defineProperty2["default"])(UiLayout, "defaultProps", {
|
|
105
|
+
extraCSSRules: {},
|
|
106
|
+
fontSizeFactor: 1
|
|
107
|
+
});
|
|
108
|
+
var styles = {
|
|
109
|
+
extraCSSRules: {},
|
|
110
|
+
// need this because some browsers set their own style on table
|
|
111
|
+
uiLayoutContainer: {
|
|
112
|
+
'& table, th, td': {
|
|
113
|
+
fontSize: 'inherit'
|
|
114
|
+
/* Ensure table elements inherit font size */
|
|
115
|
+
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
};
|
|
119
|
+
var Styled = (0, _styles.withStyles)(styles)(UiLayout);
|
|
120
|
+
var _default = Styled;
|
|
121
|
+
exports["default"] = _default;
|
|
122
|
+
//# sourceMappingURL=ui-layout.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/ui-layout.jsx"],"names":["UiLayout","props","classesSheet","document","createElement","fontSizeFactor","getFontSize","element","parseFloat","getComputedStyle","fontSize","rootFontSize","documentElement","bodyFontSize","body","effectiveFontSize","Math","max","children","className","classes","rest","finalClass","extraCSSRules","uiLayoutContainer","restProps","style","computeStyle","AppendCSSRules","PropTypes","object","string","array","shape","names","arrayOf","rules","number","styles","Styled"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;IAEMA,Q;;;;;AAiBJ,oBAAYC,KAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,KAAN;AACA,UAAKC,YAAL,GAAoBC,QAAQ,CAACC,aAAT,CAAuB,OAAvB,CAApB;AAFiB;AAGlB;;;;WAED,sBAAaC,cAAb,EAA6B;AAC3B,UAAMC,WAAW,GAAG,SAAdA,WAAc,CAACC,OAAD;AAAA,eAAaC,UAAU,CAACC,gBAAgB,CAACF,OAAD,CAAhB,CAA0BG,QAA3B,CAAvB;AAAA,OAApB;;AAEA,UAAMC,YAAY,GAAGL,WAAW,CAACH,QAAQ,CAACS,eAAV,CAAhC;AACA,UAAMC,YAAY,GAAGP,WAAW,CAACH,QAAQ,CAACW,IAAV,CAAhC;AACA,UAAMC,iBAAiB,GAAGC,IAAI,CAACC,GAAL,CAASN,YAAT,EAAuBE,YAAvB,CAA1B;AAEA,aAAOR,cAAc,KAAK,CAAnB,GAAuB;AAAEK,QAAAA,QAAQ,YAAKK,iBAAiB,GAAGV,cAAzB;AAAV,OAAvB,GAAiF,IAAxF;AACD;;;WAED,kBAAS;AACP,wBAAkE,KAAKJ,KAAvE;AAAA,UAAQiB,QAAR,eAAQA,QAAR;AAAA,UAAkBC,SAAlB,eAAkBA,SAAlB;AAAA,UAA6BC,OAA7B,eAA6BA,OAA7B;AAAA,UAAsCf,cAAtC,eAAsCA,cAAtC;AAAA,UAAyDgB,IAAzD;AAEA,UAAMC,UAAU,GAAG,4BAAWH,SAAX,EAAsBC,OAAO,CAACG,aAA9B,EAA6CH,OAAO,CAACI,iBAArD,CAAnB;AACA,UAAQD,aAAR,GAAwCF,IAAxC,CAAQE,aAAR;AAAA,UAA0BE,SAA1B,6CAAwCJ,IAAxC;AACA,UAAMK,KAAK,GAAG,KAAKC,YAAL,CAAkBtB,cAAlB,CAAd;AAEA,0BACE;AAAK,QAAA,SAAS,EAAEiB;AAAhB,SAAgCG,SAAhC,EAAgDC,KAAK,IAAI;AAAEA,QAAAA,KAAK,EAALA;AAAF,OAAzD,GACGR,QADH,CADF;AAKD;;;EA5CoBU,0B;;iCAAjB5B,Q,eACe;AACjBoB,EAAAA,OAAO,EAAES,sBAAUC,MADF;AAEjBX,EAAAA,SAAS,EAAEU,sBAAUE,MAFJ;AAGjBb,EAAAA,QAAQ,EAAEW,sBAAUG,KAHH;AAIjBT,EAAAA,aAAa,EAAEM,sBAAUI,KAAV,CAAgB;AAC7BC,IAAAA,KAAK,EAAEL,sBAAUM,OAAV,CAAkBN,sBAAUE,MAA5B,CADsB;AAE7BK,IAAAA,KAAK,EAAEP,sBAAUE;AAFY,GAAhB,CAJE;AAQjB1B,EAAAA,cAAc,EAAEwB,sBAAUQ;AART,C;iCADfrC,Q,kBAYkB;AACpBuB,EAAAA,aAAa,EAAE,EADK;AAEpBlB,EAAAA,cAAc,EAAE;AAFI,C;AAmCxB,IAAMiC,MAAM,GAAG;AACbf,EAAAA,aAAa,EAAE,EADF;AAEb;AACAC,EAAAA,iBAAiB,EAAE;AACjB,uBAAmB;AACjBd,MAAAA,QAAQ,EAAE;AAAU;;AADH;AADF;AAHN,CAAf;AAUA,IAAM6B,MAAM,GAAG,wBAAWD,MAAX,EAAmBtC,QAAnB,CAAf;eAEeuC,M","sourcesContent":["import React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport AppendCSSRules from './append-css-rules';\n\nclass UiLayout extends AppendCSSRules {\n static propTypes = {\n classes: PropTypes.object,\n className: PropTypes.string,\n children: PropTypes.array,\n extraCSSRules: PropTypes.shape({\n names: PropTypes.arrayOf(PropTypes.string),\n rules: PropTypes.string,\n }),\n fontSizeFactor: PropTypes.number,\n };\n\n static defaultProps = {\n extraCSSRules: {},\n fontSizeFactor: 1,\n };\n\n constructor(props) {\n super(props);\n this.classesSheet = document.createElement('style');\n }\n\n computeStyle(fontSizeFactor) {\n const getFontSize = (element) => parseFloat(getComputedStyle(element).fontSize);\n\n const rootFontSize = getFontSize(document.documentElement);\n const bodyFontSize = getFontSize(document.body);\n const effectiveFontSize = Math.max(rootFontSize, bodyFontSize);\n\n return fontSizeFactor !== 1 ? { fontSize: `${effectiveFontSize * fontSizeFactor}px` } : null;\n }\n\n render() {\n const { children, className, classes, fontSizeFactor, ...rest } = this.props;\n\n const finalClass = classNames(className, classes.extraCSSRules, classes.uiLayoutContainer);\n const { extraCSSRules, ...restProps } = rest;\n const style = this.computeStyle(fontSizeFactor);\n\n return (\n <div className={finalClass} {...restProps} {...(style && { style })}>\n {children}\n </div>\n );\n }\n}\n\nconst styles = {\n extraCSSRules: {},\n // need this because some browsers set their own style on table\n uiLayoutContainer: {\n '& table, th, td': {\n fontSize: 'inherit' /* Ensure table elements inherit font size */,\n },\n },\n};\n\nconst Styled = withStyles(styles)(UiLayout);\n\nexport default Styled;\n"],"file":"ui-layout.js"}
|
|
@@ -0,0 +1,181 @@
|
|
|
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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
+
|
|
14
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
15
|
+
|
|
16
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
17
|
+
|
|
18
|
+
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
19
|
+
|
|
20
|
+
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
21
|
+
|
|
22
|
+
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
|
23
|
+
|
|
24
|
+
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
25
|
+
|
|
26
|
+
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
27
|
+
|
|
28
|
+
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
29
|
+
|
|
30
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
31
|
+
|
|
32
|
+
var React = _interopRequireWildcard(require("react"));
|
|
33
|
+
|
|
34
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
35
|
+
|
|
36
|
+
var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
|
|
37
|
+
|
|
38
|
+
var _styles = require("@material-ui/core/styles");
|
|
39
|
+
|
|
40
|
+
var _Restore = _interopRequireDefault(require("@material-ui/icons/Restore"));
|
|
41
|
+
|
|
42
|
+
var _Undo = _interopRequireDefault(require("@material-ui/icons/Undo"));
|
|
43
|
+
|
|
44
|
+
var _excluded = ["classes"];
|
|
45
|
+
|
|
46
|
+
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); }
|
|
47
|
+
|
|
48
|
+
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; }
|
|
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 styles = function styles(theme) {
|
|
55
|
+
return {
|
|
56
|
+
wrapper: {
|
|
57
|
+
display: 'flex',
|
|
58
|
+
flexDirection: 'column'
|
|
59
|
+
},
|
|
60
|
+
resetUndoContainer: {
|
|
61
|
+
display: 'flex',
|
|
62
|
+
alignItems: 'center',
|
|
63
|
+
justifyContent: 'center'
|
|
64
|
+
},
|
|
65
|
+
icon: {
|
|
66
|
+
width: '24px',
|
|
67
|
+
height: '24px',
|
|
68
|
+
color: 'gray',
|
|
69
|
+
marginRight: theme.spacing.unit
|
|
70
|
+
},
|
|
71
|
+
buttonContainer: {
|
|
72
|
+
display: 'flex',
|
|
73
|
+
alignItems: 'center',
|
|
74
|
+
marginLeft: theme.spacing.unit * 3,
|
|
75
|
+
marginRight: theme.spacing.unit * 3
|
|
76
|
+
}
|
|
77
|
+
};
|
|
78
|
+
};
|
|
79
|
+
/**
|
|
80
|
+
* HOC that adds undo and reset functionality for session values
|
|
81
|
+
*/
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
var withUndoReset = function withUndoReset(WrappedComponent) {
|
|
85
|
+
var WithUndoReset = /*#__PURE__*/function (_React$Component) {
|
|
86
|
+
(0, _inherits2["default"])(WithUndoReset, _React$Component);
|
|
87
|
+
|
|
88
|
+
var _super = _createSuper(WithUndoReset);
|
|
89
|
+
|
|
90
|
+
function WithUndoReset(props) {
|
|
91
|
+
var _this;
|
|
92
|
+
|
|
93
|
+
(0, _classCallCheck2["default"])(this, WithUndoReset);
|
|
94
|
+
_this = _super.call(this, props);
|
|
95
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onSessionChange", function (session) {
|
|
96
|
+
_this.setState(function (state) {
|
|
97
|
+
return {
|
|
98
|
+
session: session,
|
|
99
|
+
changes: [].concat((0, _toConsumableArray2["default"])(state.changes), [session])
|
|
100
|
+
};
|
|
101
|
+
}, function () {
|
|
102
|
+
return _this.props.onSessionChange(session);
|
|
103
|
+
});
|
|
104
|
+
});
|
|
105
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onUndo", function () {
|
|
106
|
+
_this.setState(function (state) {
|
|
107
|
+
var newChanges = (0, _toConsumableArray2["default"])(state.changes);
|
|
108
|
+
newChanges.pop();
|
|
109
|
+
return {
|
|
110
|
+
changes: newChanges,
|
|
111
|
+
session: newChanges.length ? newChanges[newChanges.length - 1] : state.sessionInitialValues
|
|
112
|
+
};
|
|
113
|
+
}, function () {
|
|
114
|
+
return _this.props.onSessionChange(_this.state.session);
|
|
115
|
+
});
|
|
116
|
+
});
|
|
117
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onReset", function () {
|
|
118
|
+
_this.setState(function (state) {
|
|
119
|
+
return {
|
|
120
|
+
session: state.sessionInitialValues,
|
|
121
|
+
changes: []
|
|
122
|
+
};
|
|
123
|
+
}, function () {
|
|
124
|
+
return _this.props.onSessionChange(_this.state.sessionInitialValues);
|
|
125
|
+
});
|
|
126
|
+
});
|
|
127
|
+
_this.state = {
|
|
128
|
+
sessionInitialValues: JSON.parse(JSON.stringify(props.session)),
|
|
129
|
+
session: props.session,
|
|
130
|
+
changes: []
|
|
131
|
+
};
|
|
132
|
+
return _this;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
(0, _createClass2["default"])(WithUndoReset, [{
|
|
136
|
+
key: "render",
|
|
137
|
+
value: function render() {
|
|
138
|
+
var _this$props = this.props,
|
|
139
|
+
classes = _this$props.classes,
|
|
140
|
+
rest = (0, _objectWithoutProperties2["default"])(_this$props, _excluded);
|
|
141
|
+
var _this$state = this.state,
|
|
142
|
+
changes = _this$state.changes,
|
|
143
|
+
session = _this$state.session;
|
|
144
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
145
|
+
className: classes.wrapper
|
|
146
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
147
|
+
className: classes.resetUndoContainer
|
|
148
|
+
}, /*#__PURE__*/React.createElement(_Button["default"], {
|
|
149
|
+
className: classes.buttonContainer,
|
|
150
|
+
color: "primary",
|
|
151
|
+
disabled: changes.length === 0,
|
|
152
|
+
onClick: this.onUndo
|
|
153
|
+
}, /*#__PURE__*/React.createElement(_Undo["default"], {
|
|
154
|
+
className: classes.icon
|
|
155
|
+
}), " Undo"), /*#__PURE__*/React.createElement(_Button["default"], {
|
|
156
|
+
className: classes.buttonContainer,
|
|
157
|
+
color: "primary",
|
|
158
|
+
disabled: changes.length === 0,
|
|
159
|
+
onClick: this.onReset
|
|
160
|
+
}, /*#__PURE__*/React.createElement(_Restore["default"], {
|
|
161
|
+
className: classes.icon
|
|
162
|
+
}), " Start Over")), /*#__PURE__*/React.createElement(WrappedComponent, (0, _extends2["default"])({}, rest, {
|
|
163
|
+
session: session,
|
|
164
|
+
onSessionChange: this.onSessionChange
|
|
165
|
+
})));
|
|
166
|
+
}
|
|
167
|
+
}]);
|
|
168
|
+
return WithUndoReset;
|
|
169
|
+
}(React.Component);
|
|
170
|
+
|
|
171
|
+
(0, _defineProperty2["default"])(WithUndoReset, "propTypes", {
|
|
172
|
+
classes: _propTypes["default"].object,
|
|
173
|
+
session: _propTypes["default"].object,
|
|
174
|
+
onSessionChange: _propTypes["default"].func
|
|
175
|
+
});
|
|
176
|
+
return (0, _styles.withStyles)(styles)(WithUndoReset);
|
|
177
|
+
};
|
|
178
|
+
|
|
179
|
+
var _default = withUndoReset;
|
|
180
|
+
exports["default"] = _default;
|
|
181
|
+
//# sourceMappingURL=withUndoReset.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/withUndoReset.jsx"],"names":["styles","theme","wrapper","display","flexDirection","resetUndoContainer","alignItems","justifyContent","icon","width","height","color","marginRight","spacing","unit","buttonContainer","marginLeft","withUndoReset","WrappedComponent","WithUndoReset","props","session","setState","state","changes","onSessionChange","newChanges","pop","length","sessionInitialValues","JSON","parse","stringify","classes","rest","onUndo","onReset","React","Component","PropTypes","object","func"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@material-ui/core/Button';\nimport { withStyles } from '@material-ui/core/styles';\nimport Restore from '@material-ui/icons/Restore';\nimport Undo from '@material-ui/icons/Undo';\n\nconst styles = (theme) => ({\n wrapper: {\n display: 'flex',\n flexDirection: 'column',\n },\n resetUndoContainer: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n icon: {\n width: '24px',\n height: '24px',\n color: 'gray',\n marginRight: theme.spacing.unit,\n },\n buttonContainer: {\n display: 'flex',\n alignItems: 'center',\n marginLeft: theme.spacing.unit * 3,\n marginRight: theme.spacing.unit * 3,\n },\n});\n\n/**\n * HOC that adds undo and reset functionality for session values\n */\nconst withUndoReset = (WrappedComponent) => {\n class WithUndoReset extends React.Component {\n static propTypes = {\n classes: PropTypes.object,\n session: PropTypes.object,\n onSessionChange: PropTypes.func,\n };\n\n constructor(props) {\n super(props);\n\n this.state = {\n sessionInitialValues: JSON.parse(JSON.stringify(props.session)),\n session: props.session,\n changes: [],\n };\n }\n\n onSessionChange = (session) => {\n this.setState(\n (state) => ({ session, changes: [...state.changes, session] }),\n () => this.props.onSessionChange(session),\n );\n };\n\n onUndo = () => {\n this.setState(\n (state) => {\n const newChanges = [...state.changes];\n\n newChanges.pop();\n\n return {\n changes: newChanges,\n session: newChanges.length ? newChanges[newChanges.length - 1] : state.sessionInitialValues,\n };\n },\n () => this.props.onSessionChange(this.state.session),\n );\n };\n\n onReset = () => {\n this.setState(\n (state) => ({ session: state.sessionInitialValues, changes: [] }),\n () => this.props.onSessionChange(this.state.sessionInitialValues),\n );\n };\n\n render() {\n const { classes, ...rest } = this.props;\n const { changes, session } = this.state;\n\n return (\n <div className={classes.wrapper}>\n <div className={classes.resetUndoContainer}>\n <Button\n className={classes.buttonContainer}\n color=\"primary\"\n disabled={changes.length === 0}\n onClick={this.onUndo}\n >\n <Undo className={classes.icon} /> Undo\n </Button>\n <Button\n className={classes.buttonContainer}\n color=\"primary\"\n disabled={changes.length === 0}\n onClick={this.onReset}\n >\n <Restore className={classes.icon} /> Start Over\n </Button>\n </div>\n <WrappedComponent {...rest} session={session} onSessionChange={this.onSessionChange} />\n </div>\n );\n }\n }\n\n return withStyles(styles)(WithUndoReset);\n};\n\nexport default withUndoReset;\n"],"file":"withUndoReset.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pie-lib/render-ui",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.24.0",
|
|
4
4
|
"description": "Some shared ui elements when rendering - but not worthy of their own package yet.",
|
|
5
5
|
"module": "src/index.js",
|
|
6
6
|
"main": "lib/index.js",
|
|
@@ -11,8 +11,9 @@
|
|
|
11
11
|
"dependencies": {
|
|
12
12
|
"@material-ui/core": "^3.8.3",
|
|
13
13
|
"@material-ui/icons": "^3.0.2",
|
|
14
|
-
"@pie-lib/icons": "^2.
|
|
15
|
-
"@pie-lib/math-rendering": "^3.
|
|
14
|
+
"@pie-lib/icons": "^2.13.0",
|
|
15
|
+
"@pie-lib/math-rendering": "^3.11.0",
|
|
16
|
+
"@pie-lib/test-utils": "^0.11.0",
|
|
16
17
|
"classnames": "^2.2.6",
|
|
17
18
|
"debug": "^4.1.1",
|
|
18
19
|
"lodash": "^4.17.11",
|
|
@@ -28,5 +29,5 @@
|
|
|
28
29
|
"react": "^16.8.1",
|
|
29
30
|
"react-dom": "^16.8.1"
|
|
30
31
|
},
|
|
31
|
-
"gitHead": "
|
|
32
|
+
"gitHead": "ba75c393e47a34ace71e2ee5c3a2ddd3b87423ec"
|
|
32
33
|
}
|
|
@@ -5,42 +5,8 @@ exports[`response-indicators snapshot - no feedback 1`] = `
|
|
|
5
5
|
<span
|
|
6
6
|
onClick={[Function]}
|
|
7
7
|
>
|
|
8
|
-
<div
|
|
9
|
-
|
|
10
|
-
Object {
|
|
11
|
-
"display": "inline-block",
|
|
12
|
-
"height": "30px",
|
|
13
|
-
"position": "relative",
|
|
14
|
-
"width": "30px",
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
>
|
|
18
|
-
<svg
|
|
19
|
-
preserveAspectRatio="xMinYMin meet"
|
|
20
|
-
style={
|
|
21
|
-
Object {
|
|
22
|
-
"enableBackground": "new 0 0 44 40",
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
version="1.1"
|
|
26
|
-
viewBox="0 0 44 40"
|
|
27
|
-
x="0px"
|
|
28
|
-
y="0px"
|
|
29
|
-
>
|
|
30
|
-
|
|
31
|
-
<circle
|
|
32
|
-
className="IconBase-bg-5"
|
|
33
|
-
cx="23"
|
|
34
|
-
cy="20.4"
|
|
35
|
-
r="16"
|
|
36
|
-
transform="translate(-3, 0)"
|
|
37
|
-
/>
|
|
38
|
-
<polygon
|
|
39
|
-
className="IconBase-fg-6"
|
|
40
|
-
points="19.1,28.6 11.8,22.3 14.4,19.2 17.9,22.1 23.9,11.4 27.5,13.4"
|
|
41
|
-
transform="translate(0, 0)"
|
|
42
|
-
/>
|
|
43
|
-
</svg>
|
|
8
|
+
<div>
|
|
9
|
+
correct
|
|
44
10
|
</div>
|
|
45
11
|
</span>
|
|
46
12
|
</div>
|
|
@@ -53,42 +19,8 @@ exports[`response-indicators snapshot - with feedback 1`] = `
|
|
|
53
19
|
<span
|
|
54
20
|
onClick={[Function]}
|
|
55
21
|
>
|
|
56
|
-
<div
|
|
57
|
-
|
|
58
|
-
Object {
|
|
59
|
-
"display": "inline-block",
|
|
60
|
-
"height": "30px",
|
|
61
|
-
"position": "relative",
|
|
62
|
-
"width": "30px",
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
>
|
|
66
|
-
<svg
|
|
67
|
-
preserveAspectRatio="xMinYMin meet"
|
|
68
|
-
style={
|
|
69
|
-
Object {
|
|
70
|
-
"enableBackground": "new 0 0 44 40",
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
version="1.1"
|
|
74
|
-
viewBox="0 0 44 40"
|
|
75
|
-
x="0px"
|
|
76
|
-
y="0px"
|
|
77
|
-
>
|
|
78
|
-
|
|
79
|
-
<circle
|
|
80
|
-
className="IconBase-bg-5"
|
|
81
|
-
cx="23"
|
|
82
|
-
cy="20.4"
|
|
83
|
-
r="16"
|
|
84
|
-
transform="translate(-3, 0)"
|
|
85
|
-
/>
|
|
86
|
-
<polygon
|
|
87
|
-
className="IconBase-fg-6"
|
|
88
|
-
points="19.1,28.6 11.8,22.3 14.4,19.2 17.9,22.1 23.9,11.4 27.5,13.4"
|
|
89
|
-
transform="translate(0, 0)"
|
|
90
|
-
/>
|
|
91
|
-
</svg>
|
|
22
|
+
<div>
|
|
23
|
+
correct
|
|
92
24
|
</div>
|
|
93
25
|
</span>
|
|
94
26
|
</div>
|
package/src/has-media.js
CHANGED
|
@@ -11,6 +11,6 @@ export const hasMedia = (s) => {
|
|
|
11
11
|
if (!s) {
|
|
12
12
|
return false;
|
|
13
13
|
}
|
|
14
|
-
const root =
|
|
14
|
+
const root = parser.parseFromString(s, 'text/html');
|
|
15
15
|
return !!root.body.querySelector('img') || !!root.body.querySelector('video') || !!root.body.querySelector('audio');
|
|
16
16
|
};
|