@pie-lib/render-ui 4.47.0-mui-update.0 → 4.49.0-mui-update.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 +19 -0
- package/lib/feedback.js +49 -45
- package/lib/feedback.js.map +1 -1
- package/lib/ui-layout.js +5 -3
- package/lib/ui-layout.js.map +1 -1
- package/package.json +6 -7
- package/src/feedback.jsx +33 -35
- package/src/ui-layout.jsx +3 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
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
|
+
# [4.49.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/render-ui@4.48.0-mui-update.0...@pie-lib/render-ui@4.49.0-mui-update.0) (2025-12-29)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @pie-lib/render-ui
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
# [4.48.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/render-ui@4.47.0-mui-update.0...@pie-lib/render-ui@4.48.0-mui-update.0) (2025-12-29)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Bug Fixes
|
|
18
|
+
|
|
19
|
+
* **render-ui:** handle invalid values for fontSizeFactor PD-5412 ([39b13c0](https://github.com/pie-framework/pie-lib/commit/39b13c0583f3f83575e4c32ed2873eecfd4903cd))
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
# [4.47.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/render-ui@4.46.0-mui-update.0...@pie-lib/render-ui@4.47.0-mui-update.0) (2025-12-17)
|
|
7
26
|
|
|
8
27
|
**Note:** Version bump only for package @pie-lib/render-ui
|
package/lib/feedback.js
CHANGED
|
@@ -12,17 +12,14 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
|
|
|
12
12
|
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
13
13
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
14
14
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
15
|
-
var _styles = require("@mui/material/styles");
|
|
16
15
|
var _react = _interopRequireDefault(require("react"));
|
|
17
|
-
var _reactTransitionGroup = require("react-transition-group");
|
|
18
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
|
19
16
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
17
|
+
var _styles = require("@mui/material/styles");
|
|
18
|
+
var _reactTransitionGroup = require("react-transition-group");
|
|
20
19
|
var color = _interopRequireWildcard(require("./color"));
|
|
21
20
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
22
21
|
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
|
|
23
|
-
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
24
|
-
* Lifted from multiple-choice - TODO: create a shared package for it.
|
|
25
|
-
*/
|
|
22
|
+
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
26
23
|
var FeedbackContainer = (0, _styles.styled)('div')({
|
|
27
24
|
transformOrigin: '0% 0px 0px',
|
|
28
25
|
width: '100%',
|
|
@@ -48,55 +45,62 @@ var FeedbackContent = (0, _styles.styled)('div')({
|
|
|
48
45
|
backgroundColor: "var(--feedback-incorrect-bg-color, ".concat(color.incorrect(), ")")
|
|
49
46
|
}
|
|
50
47
|
});
|
|
51
|
-
var
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
}));
|
|
48
|
+
var TransitionWrapper = (0, _styles.styled)('div')({
|
|
49
|
+
'&.feedback-enter': {
|
|
50
|
+
height: '1px'
|
|
51
|
+
},
|
|
52
|
+
'&.feedback-enter-active': {
|
|
53
|
+
height: '45px',
|
|
54
|
+
transition: 'height 500ms'
|
|
55
|
+
},
|
|
56
|
+
'&.feedback-exit': {
|
|
57
|
+
height: '45px'
|
|
58
|
+
},
|
|
59
|
+
'&.feedback-exit-active': {
|
|
60
|
+
height: '1px',
|
|
61
|
+
transition: 'height 200ms'
|
|
62
|
+
}
|
|
63
|
+
});
|
|
68
64
|
var Feedback = exports.Feedback = /*#__PURE__*/function (_React$Component) {
|
|
69
65
|
function Feedback() {
|
|
66
|
+
var _this;
|
|
70
67
|
(0, _classCallCheck2["default"])(this, Feedback);
|
|
71
|
-
|
|
68
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
69
|
+
args[_key] = arguments[_key];
|
|
70
|
+
}
|
|
71
|
+
_this = _callSuper(this, Feedback, [].concat(args));
|
|
72
|
+
(0, _defineProperty2["default"])(_this, "nodeRef", /*#__PURE__*/_react["default"].createRef());
|
|
73
|
+
return _this;
|
|
72
74
|
}
|
|
73
75
|
(0, _inherits2["default"])(Feedback, _React$Component);
|
|
74
76
|
return (0, _createClass2["default"])(Feedback, [{
|
|
75
|
-
key: "
|
|
76
|
-
value: function
|
|
77
|
+
key: "renderFeedback",
|
|
78
|
+
value: function renderFeedback() {
|
|
77
79
|
var _this$props = this.props,
|
|
78
80
|
correctness = _this$props.correctness,
|
|
79
81
|
feedback = _this$props.feedback;
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
} else {
|
|
96
|
-
return null;
|
|
82
|
+
if (!correctness || !feedback) return null;
|
|
83
|
+
return /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.CSSTransition, {
|
|
84
|
+
key: "hasFeedback",
|
|
85
|
+
nodeRef: this.nodeRef,
|
|
86
|
+
timeout: {
|
|
87
|
+
enter: 500,
|
|
88
|
+
exit: 200
|
|
89
|
+
},
|
|
90
|
+
classNames: "feedback"
|
|
91
|
+
}, /*#__PURE__*/_react["default"].createElement(TransitionWrapper, {
|
|
92
|
+
ref: this.nodeRef
|
|
93
|
+
}, /*#__PURE__*/_react["default"].createElement(FeedbackContainer, null, /*#__PURE__*/_react["default"].createElement(FeedbackContent, {
|
|
94
|
+
className: correctness,
|
|
95
|
+
dangerouslySetInnerHTML: {
|
|
96
|
+
__html: feedback
|
|
97
97
|
}
|
|
98
|
-
}
|
|
99
|
-
|
|
98
|
+
}))));
|
|
99
|
+
}
|
|
100
|
+
}, {
|
|
101
|
+
key: "render",
|
|
102
|
+
value: function render() {
|
|
103
|
+
return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.TransitionGroup, null, this.renderFeedback()));
|
|
100
104
|
}
|
|
101
105
|
}]);
|
|
102
106
|
}(_react["default"].Component);
|
package/lib/feedback.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"feedback.js","names":["
|
|
1
|
+
{"version":3,"file":"feedback.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_reactTransitionGroup","color","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_callSuper","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","FeedbackContainer","styled","transformOrigin","width","display","overflow","FeedbackContent","WebkitFontSmoothing","backgroundColor","concat","disabled","borderRadius","lineHeight","margin","padding","verticalAlign","correct","incorrect","TransitionWrapper","height","transition","Feedback","exports","_React$Component","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","_defineProperty2","React","createRef","_inherits2","_createClass2","key","value","renderFeedback","_this$props","props","correctness","feedback","createElement","CSSTransition","nodeRef","timeout","enter","exit","classNames","ref","className","dangerouslySetInnerHTML","__html","render","TransitionGroup","Component","PropTypes","string","_default"],"sources":["../src/feedback.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport { TransitionGroup, CSSTransition } from 'react-transition-group';\nimport * as color from './color';\n\nconst FeedbackContainer = styled('div')({\n transformOrigin: '0% 0px 0px',\n width: '100%',\n display: 'block',\n overflow: 'hidden',\n '&.incorrect': {\n color: '#946202',\n },\n});\n\nconst FeedbackContent = styled('div')({\n WebkitFontSmoothing: 'antialiased',\n backgroundColor: `var(--feedback-bg-color, ${color.disabled()})`,\n borderRadius: '4px',\n lineHeight: '25px',\n margin: '0px',\n padding: '10px',\n verticalAlign: 'middle',\n color: 'var(--feedback-color, white)',\n '&.correct': {\n backgroundColor: `var(--feedback-correct-bg-color, ${color.correct()})`,\n },\n '&.incorrect': {\n backgroundColor: `var(--feedback-incorrect-bg-color, ${color.incorrect()})`,\n },\n});\n\nconst TransitionWrapper = styled('div')({\n '&.feedback-enter': {\n height: '1px',\n },\n '&.feedback-enter-active': {\n height: '45px',\n transition: 'height 500ms',\n },\n '&.feedback-exit': {\n height: '45px',\n },\n '&.feedback-exit-active': {\n height: '1px',\n transition: 'height 200ms',\n },\n});\n\nexport class Feedback extends React.Component {\n static propTypes = {\n correctness: PropTypes.string,\n feedback: PropTypes.string,\n };\n\n nodeRef = React.createRef();\n\n renderFeedback() {\n const { correctness, feedback } = this.props;\n\n if (!correctness || !feedback) return null;\n\n return (\n <CSSTransition\n key=\"hasFeedback\"\n nodeRef={this.nodeRef}\n timeout={{ enter: 500, exit: 200 }}\n classNames=\"feedback\"\n >\n <TransitionWrapper ref={this.nodeRef}>\n <FeedbackContainer>\n <FeedbackContent\n className={correctness}\n dangerouslySetInnerHTML={{ __html: feedback }}\n />\n </FeedbackContainer>\n </TransitionWrapper>\n </CSSTransition>\n );\n }\n\n render() {\n return (\n <div>\n <TransitionGroup>\n {this.renderFeedback()}\n </TransitionGroup>\n </div>\n );\n }\n}\n\nexport default Feedback;\n"],"mappings":"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","ignoreList":[]}
|
package/lib/ui-layout.js
CHANGED
|
@@ -16,7 +16,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
16
16
|
var _react = _interopRequireDefault(require("react"));
|
|
17
17
|
var _styles = require("@mui/material/styles");
|
|
18
18
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
19
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
|
20
19
|
var _appendCssRules = _interopRequireDefault(require("./append-css-rules"));
|
|
21
20
|
var _excluded = ["children", "className", "fontSizeFactor"],
|
|
22
21
|
_excluded2 = ["extraCSSRules"];
|
|
@@ -76,8 +75,11 @@ var UiLayout = /*#__PURE__*/function (_AppendCSSRules) {
|
|
|
76
75
|
var rootFontSize = getFontSize(document.documentElement);
|
|
77
76
|
var bodyFontSize = getFontSize(document.body);
|
|
78
77
|
var effectiveFontSize = Math.max(rootFontSize, bodyFontSize);
|
|
79
|
-
|
|
80
|
-
|
|
78
|
+
|
|
79
|
+
// Handle null, undefined, or invalid values by defaulting to 1
|
|
80
|
+
var factor = fontSizeFactor != null && typeof fontSizeFactor === 'number' ? fontSizeFactor : 1;
|
|
81
|
+
return factor !== 1 ? {
|
|
82
|
+
fontSize: "".concat(effectiveFontSize * factor, "px")
|
|
81
83
|
} : null;
|
|
82
84
|
}
|
|
83
85
|
}, {
|
package/lib/ui-layout.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ui-layout.js","names":["_react","_interopRequireDefault","require","_styles","_propTypes","
|
|
1
|
+
{"version":3,"file":"ui-layout.js","names":["_react","_interopRequireDefault","require","_styles","_propTypes","_appendCssRules","_excluded","_excluded2","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","call","theme","createTheme","typography","fontFamily","palette","action","disabled","components","MuiTypography","styleOverrides","root","MuiButton","contained","backgroundColor","color","StyledContainer","styled","fontSize","UiLayout","_AppendCSSRules","props","_this","_classCallCheck2","classesSheet","document","createElement","_inherits2","_createClass2","key","value","computeStyle","fontSizeFactor","getFontSize","element","parseFloat","getComputedStyle","rootFontSize","documentElement","bodyFontSize","body","effectiveFontSize","Math","max","factor","concat","render","_this$props","children","className","rest","_objectWithoutProperties2","extraCSSRules","restProps","style","StyledEngineProvider","injectFirst","ThemeProvider","_extends2","AppendCSSRules","_defineProperty2","PropTypes","string","array","shape","names","arrayOf","rules","classes","number","_default","exports"],"sources":["../src/ui-layout.jsx"],"sourcesContent":["import React from 'react';\nimport { createTheme, ThemeProvider, StyledEngineProvider } from '@mui/material/styles';\nimport { styled } from '@mui/material/styles';\nimport PropTypes from 'prop-types';\nimport AppendCSSRules from './append-css-rules';\n\nconst theme = createTheme({\n typography: {\n fontFamily: 'inherit',\n },\n palette: {\n action: {\n disabled: 'rgba(0, 0, 0, 0.54);',\n },\n },\n components: {\n MuiTypography: {\n styleOverrides: {\n root: { fontFamily: 'inherit' },\n },\n },\n MuiButton: {\n styleOverrides: {\n contained: {\n backgroundColor: '#e0e0e0',\n color: '#000000',\n '&:hover': {\n backgroundColor: '#bdbdbd',\n },\n },\n },\n },\n },\n});\n\nconst StyledContainer = styled('div')({\n // need this because some browsers set their own style on table\n '& table, th, td': {\n fontSize: 'inherit' /* Ensure table elements inherit font size */,\n },\n});\n\nclass UiLayout extends AppendCSSRules {\n static propTypes = {\n className: PropTypes.string,\n children: PropTypes.array,\n extraCSSRules: PropTypes.shape({\n names: PropTypes.arrayOf(PropTypes.string),\n rules: PropTypes.string,\n }),\n classes: PropTypes.shape({\n extraCSSRules: PropTypes.string,\n }),\n fontSizeFactor: PropTypes.number,\n };\n\n static defaultProps = {\n extraCSSRules: {},\n classes: {},\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 // Handle null, undefined, or invalid values by defaulting to 1\n const factor = fontSizeFactor != null && typeof fontSizeFactor === 'number' ? fontSizeFactor : 1;\n return factor !== 1 ? { fontSize: `${effectiveFontSize * factor}px` } : null;\n }\n\n render() {\n const { children, className, fontSizeFactor, ...rest } = this.props;\n\n const { extraCSSRules, ...restProps } = rest;\n const style = this.computeStyle(fontSizeFactor);\n\n return (\n <StyledEngineProvider injectFirst>\n <ThemeProvider theme={theme}>\n <StyledContainer className={className} {...restProps} {...(style && { style })}>\n {children}\n </StyledContainer>\n </ThemeProvider>\n </StyledEngineProvider>\n );\n }\n}\n\nexport default UiLayout;\n"],"mappings":";;;;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAEA,IAAAE,UAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,eAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAAgD,IAAAI,SAAA;EAAAC,UAAA;AAAA,SAAAC,WAAAC,CAAA,EAAAC,CAAA,EAAAC,CAAA,WAAAD,CAAA,OAAAE,gBAAA,aAAAF,CAAA,OAAAG,2BAAA,aAAAJ,CAAA,EAAAK,yBAAA,KAAAC,OAAA,CAAAC,SAAA,CAAAN,CAAA,EAAAC,CAAA,YAAAC,gBAAA,aAAAH,CAAA,EAAAQ,WAAA,IAAAP,CAAA,CAAAQ,KAAA,CAAAT,CAAA,EAAAE,CAAA;AAAA,SAAAG,0BAAA,cAAAL,CAAA,IAAAU,OAAA,CAAAC,SAAA,CAAAC,OAAA,CAAAC,IAAA,CAAAP,OAAA,CAAAC,SAAA,CAAAG,OAAA,iCAAAV,CAAA,aAAAK,yBAAA,YAAAA,0BAAA,aAAAL,CAAA;AAEhD,IAAMc,KAAK,GAAG,IAAAC,mBAAW,EAAC;EACxBC,UAAU,EAAE;IACVC,UAAU,EAAE;EACd,CAAC;EACDC,OAAO,EAAE;IACPC,MAAM,EAAE;MACNC,QAAQ,EAAE;IACZ;EACF,CAAC;EACDC,UAAU,EAAE;IACVC,aAAa,EAAE;MACbC,cAAc,EAAE;QACdC,IAAI,EAAE;UAAEP,UAAU,EAAE;QAAU;MAChC;IACF,CAAC;IACDQ,SAAS,EAAE;MACTF,cAAc,EAAE;QACdG,SAAS,EAAE;UACTC,eAAe,EAAE,SAAS;UAC1BC,KAAK,EAAE,SAAS;UAChB,SAAS,EAAE;YACTD,eAAe,EAAE;UACnB;QACF;MACF;IACF;EACF;AACF,CAAC,CAAC;AAEF,IAAME,eAAe,GAAG,IAAAC,cAAM,EAAC,KAAK,CAAC,CAAC;EACpC;EACA,iBAAiB,EAAE;IACjBC,QAAQ,EAAE,SAAS,CAAC;EACtB;AACF,CAAC,CAAC;AAAC,IAEGC,QAAQ,0BAAAC,eAAA;EAoBZ,SAAAD,SAAYE,KAAK,EAAE;IAAA,IAAAC,KAAA;IAAA,IAAAC,gBAAA,mBAAAJ,QAAA;IACjBG,KAAA,GAAApC,UAAA,OAAAiC,QAAA,GAAME,KAAK;IACXC,KAAA,CAAKE,YAAY,GAAGC,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;IAAC,OAAAJ,KAAA;EACtD;EAAC,IAAAK,UAAA,aAAAR,QAAA,EAAAC,eAAA;EAAA,WAAAQ,aAAA,aAAAT,QAAA;IAAAU,GAAA;IAAAC,KAAA,EAED,SAAAC,YAAYA,CAACC,cAAc,EAAE;MAC3B,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAIC,OAAO;QAAA,OAAKC,UAAU,CAACC,gBAAgB,CAACF,OAAO,CAAC,CAAChB,QAAQ,CAAC;MAAA;MAE/E,IAAMmB,YAAY,GAAGJ,WAAW,CAACR,QAAQ,CAACa,eAAe,CAAC;MAC1D,IAAMC,YAAY,GAAGN,WAAW,CAACR,QAAQ,CAACe,IAAI,CAAC;MAC/C,IAAMC,iBAAiB,GAAGC,IAAI,CAACC,GAAG,CAACN,YAAY,EAAEE,YAAY,CAAC;;MAE9D;MACA,IAAMK,MAAM,GAAGZ,cAAc,IAAI,IAAI,IAAI,OAAOA,cAAc,KAAK,QAAQ,GAAGA,cAAc,GAAG,CAAC;MAChG,OAAOY,MAAM,KAAK,CAAC,GAAG;QAAE1B,QAAQ,KAAA2B,MAAA,CAAKJ,iBAAiB,GAAGG,MAAM;MAAK,CAAC,GAAG,IAAI;IAC9E;EAAC;IAAAf,GAAA;IAAAC,KAAA,EAED,SAAAgB,MAAMA,CAAA,EAAG;MACP,IAAAC,WAAA,GAAyD,IAAI,CAAC1B,KAAK;QAA3D2B,QAAQ,GAAAD,WAAA,CAARC,QAAQ;QAAEC,SAAS,GAAAF,WAAA,CAATE,SAAS;QAAEjB,cAAc,GAAAe,WAAA,CAAdf,cAAc;QAAKkB,IAAI,OAAAC,yBAAA,aAAAJ,WAAA,EAAA/D,SAAA;MAEpD,IAAQoE,aAAa,GAAmBF,IAAI,CAApCE,aAAa;QAAKC,SAAS,OAAAF,yBAAA,aAAKD,IAAI,EAAAjE,UAAA;MAC5C,IAAMqE,KAAK,GAAG,IAAI,CAACvB,YAAY,CAACC,cAAc,CAAC;MAE/C,oBACEtD,MAAA,YAAAgD,aAAA,CAAC7C,OAAA,CAAA0E,oBAAoB;QAACC,WAAW;MAAA,gBAC/B9E,MAAA,YAAAgD,aAAA,CAAC7C,OAAA,CAAA4E,aAAa;QAACxD,KAAK,EAAEA;MAAM,gBAC1BvB,MAAA,YAAAgD,aAAA,CAACV,eAAe,MAAA0C,SAAA;QAACT,SAAS,EAAEA;MAAU,GAAKI,SAAS,EAAOC,KAAK,IAAI;QAAEA,KAAK,EAALA;MAAM,CAAC,GAC1EN,QACc,CACJ,CACK,CAAC;IAE3B;EAAC;AAAA,EApDoBW,0BAAc;AAAA,IAAAC,gBAAA,aAA/BzC,QAAQ,eACO;EACjB8B,SAAS,EAAEY,qBAAS,CAACC,MAAM;EAC3Bd,QAAQ,EAAEa,qBAAS,CAACE,KAAK;EACzBX,aAAa,EAAES,qBAAS,CAACG,KAAK,CAAC;IAC7BC,KAAK,EAAEJ,qBAAS,CAACK,OAAO,CAACL,qBAAS,CAACC,MAAM,CAAC;IAC1CK,KAAK,EAAEN,qBAAS,CAACC;EACnB,CAAC,CAAC;EACFM,OAAO,EAAEP,qBAAS,CAACG,KAAK,CAAC;IACvBZ,aAAa,EAAES,qBAAS,CAACC;EAC3B,CAAC,CAAC;EACF9B,cAAc,EAAE6B,qBAAS,CAACQ;AAC5B,CAAC;AAAA,IAAAT,gBAAA,aAZGzC,QAAQ,kBAcU;EACpBiC,aAAa,EAAE,CAAC,CAAC;EACjBgB,OAAO,EAAE,CAAC,CAAC;EACXpC,cAAc,EAAE;AAClB,CAAC;AAAA,IAAAsC,QAAA,GAAAC,OAAA,cAqCYpD,QAAQ","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pie-lib/render-ui",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.49.0-mui-update.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",
|
|
@@ -13,14 +13,13 @@
|
|
|
13
13
|
"@emotion/styled": "^11.14.1",
|
|
14
14
|
"@mui/icons-material": "^7.3.4",
|
|
15
15
|
"@mui/material": "^7.3.4",
|
|
16
|
-
"@pie-lib/icons": "2.
|
|
17
|
-
"@pie-lib/math-rendering": "3.
|
|
18
|
-
"@pie-lib/test-utils": "0.
|
|
19
|
-
"classnames": "^2.2.6",
|
|
16
|
+
"@pie-lib/icons": "2.38.0-mui-update.0",
|
|
17
|
+
"@pie-lib/math-rendering": "3.40.0-mui-update.0",
|
|
18
|
+
"@pie-lib/test-utils": "0.36.0-mui-update.0",
|
|
20
19
|
"debug": "^4.1.1",
|
|
21
20
|
"lodash": "^4.17.11",
|
|
22
21
|
"prop-types": "^15.7.2",
|
|
23
|
-
"react-transition-group": "^
|
|
22
|
+
"react-transition-group": "^4.4.5"
|
|
24
23
|
},
|
|
25
24
|
"peerDependencies": {
|
|
26
25
|
"@pie-lib/test-utils": "0.20.0-mui-update.0",
|
|
@@ -31,5 +30,5 @@
|
|
|
31
30
|
"react": "^18.2.0",
|
|
32
31
|
"react-dom": "^18.2.0"
|
|
33
32
|
},
|
|
34
|
-
"gitHead": "
|
|
33
|
+
"gitHead": "1e3f5fd7812b0a334d3b2719026a01c3102398c9"
|
|
35
34
|
}
|
package/src/feedback.jsx
CHANGED
|
@@ -1,12 +1,7 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Lifted from multiple-choice - TODO: create a shared package for it.
|
|
3
|
-
*/
|
|
4
|
-
import { styled } from '@mui/material/styles';
|
|
5
|
-
|
|
6
1
|
import React from 'react';
|
|
7
|
-
import { TransitionGroup, CSSTransition } from 'react-transition-group';
|
|
8
|
-
import classNames from 'classnames';
|
|
9
2
|
import PropTypes from 'prop-types';
|
|
3
|
+
import { styled } from '@mui/material/styles';
|
|
4
|
+
import { TransitionGroup, CSSTransition } from 'react-transition-group';
|
|
10
5
|
import * as color from './color';
|
|
11
6
|
|
|
12
7
|
const FeedbackContainer = styled('div')({
|
|
@@ -36,25 +31,18 @@ const FeedbackContent = styled('div')({
|
|
|
36
31
|
},
|
|
37
32
|
});
|
|
38
33
|
|
|
39
|
-
const transitionClasses = {
|
|
40
|
-
feedbackEnter: 'feedback-enter',
|
|
41
|
-
feedbackEnterActive: 'feedback-enter-active',
|
|
42
|
-
feedbackLeave: 'feedback-leave',
|
|
43
|
-
feedbackLeaveActive: 'feedback-leave-active',
|
|
44
|
-
};
|
|
45
|
-
|
|
46
34
|
const TransitionWrapper = styled('div')({
|
|
47
|
-
|
|
35
|
+
'&.feedback-enter': {
|
|
48
36
|
height: '1px',
|
|
49
37
|
},
|
|
50
|
-
|
|
38
|
+
'&.feedback-enter-active': {
|
|
51
39
|
height: '45px',
|
|
52
40
|
transition: 'height 500ms',
|
|
53
41
|
},
|
|
54
|
-
|
|
42
|
+
'&.feedback-exit': {
|
|
55
43
|
height: '45px',
|
|
56
44
|
},
|
|
57
|
-
|
|
45
|
+
'&.feedback-exit-active': {
|
|
58
46
|
height: '1px',
|
|
59
47
|
transition: 'height 200ms',
|
|
60
48
|
},
|
|
@@ -66,28 +54,38 @@ export class Feedback extends React.Component {
|
|
|
66
54
|
feedback: PropTypes.string,
|
|
67
55
|
};
|
|
68
56
|
|
|
69
|
-
|
|
57
|
+
nodeRef = React.createRef();
|
|
58
|
+
|
|
59
|
+
renderFeedback() {
|
|
70
60
|
const { correctness, feedback } = this.props;
|
|
71
61
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
62
|
+
if (!correctness || !feedback) return null;
|
|
63
|
+
|
|
64
|
+
return (
|
|
65
|
+
<CSSTransition
|
|
66
|
+
key="hasFeedback"
|
|
67
|
+
nodeRef={this.nodeRef}
|
|
68
|
+
timeout={{ enter: 500, exit: 200 }}
|
|
69
|
+
classNames="feedback"
|
|
70
|
+
>
|
|
71
|
+
<TransitionWrapper ref={this.nodeRef}>
|
|
72
|
+
<FeedbackContainer>
|
|
73
|
+
<FeedbackContent
|
|
74
|
+
className={correctness}
|
|
75
|
+
dangerouslySetInnerHTML={{ __html: feedback }}
|
|
76
|
+
/>
|
|
77
|
+
</FeedbackContainer>
|
|
78
|
+
</TransitionWrapper>
|
|
79
|
+
</CSSTransition>
|
|
80
|
+
);
|
|
81
|
+
}
|
|
87
82
|
|
|
83
|
+
render() {
|
|
88
84
|
return (
|
|
89
85
|
<div>
|
|
90
|
-
<TransitionGroup>
|
|
86
|
+
<TransitionGroup>
|
|
87
|
+
{this.renderFeedback()}
|
|
88
|
+
</TransitionGroup>
|
|
91
89
|
</div>
|
|
92
90
|
);
|
|
93
91
|
}
|
package/src/ui-layout.jsx
CHANGED
|
@@ -2,7 +2,6 @@ import React from 'react';
|
|
|
2
2
|
import { createTheme, ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
|
|
3
3
|
import { styled } from '@mui/material/styles';
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
|
-
import classNames from 'classnames';
|
|
6
5
|
import AppendCSSRules from './append-css-rules';
|
|
7
6
|
|
|
8
7
|
const theme = createTheme({
|
|
@@ -73,7 +72,9 @@ class UiLayout extends AppendCSSRules {
|
|
|
73
72
|
const bodyFontSize = getFontSize(document.body);
|
|
74
73
|
const effectiveFontSize = Math.max(rootFontSize, bodyFontSize);
|
|
75
74
|
|
|
76
|
-
|
|
75
|
+
// Handle null, undefined, or invalid values by defaulting to 1
|
|
76
|
+
const factor = fontSizeFactor != null && typeof fontSizeFactor === 'number' ? fontSizeFactor : 1;
|
|
77
|
+
return factor !== 1 ? { fontSize: `${effectiveFontSize * factor}px` } : null;
|
|
77
78
|
}
|
|
78
79
|
|
|
79
80
|
render() {
|