@pie-lib/config-ui 11.29.0 → 11.30.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
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
|
+
## [11.30.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/config-ui@11.25.2...@pie-lib/config-ui@11.30.1) (2025-10-22)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* avoid redundant re-renders by guarding layoutMode setState ([3f4aecd](https://github.com/pie-framework/pie-lib/commit/3f4aecd1c862b94a9faf3e058086da30995ae60d))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
# [11.29.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/config-ui@11.28.0...@pie-lib/config-ui@11.29.0) (2025-10-16)
|
|
7
18
|
|
|
8
19
|
**Note:** Version bump only for package @pie-lib/config-ui
|
|
@@ -82,11 +82,13 @@ var MeasuredConfigLayout = /*#__PURE__*/function (_AppendCSSRules) {
|
|
|
82
82
|
var _ref = dimensions || {},
|
|
83
83
|
maxWidth = _ref.maxWidth;
|
|
84
84
|
|
|
85
|
-
var layoutMode = bounds.width > sidePanelMinWidth && (maxWidth ? maxWidth > sidePanelMinWidth : true) ? 'inline' : 'tabbed';
|
|
85
|
+
var layoutMode = bounds.width > sidePanelMinWidth && (maxWidth ? maxWidth > sidePanelMinWidth : true) ? 'inline' : 'tabbed'; // Only update state (and cause a re-render) if the computed layoutMode changed.
|
|
86
86
|
|
|
87
|
-
_this.
|
|
88
|
-
|
|
89
|
-
|
|
87
|
+
if (layoutMode !== _this.state.layoutMode) {
|
|
88
|
+
_this.setState({
|
|
89
|
+
layoutMode: layoutMode
|
|
90
|
+
});
|
|
91
|
+
}
|
|
90
92
|
});
|
|
91
93
|
_this.state = {
|
|
92
94
|
layoutMode: undefined
|
|
@@ -99,34 +101,39 @@ var MeasuredConfigLayout = /*#__PURE__*/function (_AppendCSSRules) {
|
|
|
99
101
|
value: function render() {
|
|
100
102
|
var _this2 = this;
|
|
101
103
|
|
|
102
|
-
return
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
104
|
+
return (
|
|
105
|
+
/*#__PURE__*/
|
|
106
|
+
// TODO: REVIEW MuiThemeProvider usage
|
|
107
|
+
// Different theme object identities will force theme consumers to re-render.
|
|
108
|
+
_react["default"].createElement(_styles.MuiThemeProvider, {
|
|
109
|
+
theme: theme
|
|
110
|
+
}, /*#__PURE__*/_react["default"].createElement(_reactMeasure["default"], {
|
|
111
|
+
bounds: true,
|
|
112
|
+
onResize: this.onResize
|
|
113
|
+
}, function (_ref2) {
|
|
114
|
+
var measureRef = _ref2.measureRef;
|
|
115
|
+
var _this2$props = _this2.props,
|
|
116
|
+
children = _this2$props.children,
|
|
117
|
+
settings = _this2$props.settings,
|
|
118
|
+
hideSettings = _this2$props.hideSettings,
|
|
119
|
+
dimensions = _this2$props.dimensions,
|
|
120
|
+
classes = _this2$props.classes;
|
|
121
|
+
var layoutMode = _this2.state.layoutMode;
|
|
122
|
+
var settingsPanel = layoutMode === 'inline' ? /*#__PURE__*/_react["default"].createElement(_settingsBox["default"], {
|
|
123
|
+
className: "settings-box"
|
|
124
|
+
}, settings) : settings;
|
|
125
|
+
var secondaryContent = hideSettings ? null : settingsPanel;
|
|
126
|
+
var finalClass = (0, _classnames["default"])('main-container', classes.extraCSSRules);
|
|
127
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
128
|
+
ref: measureRef,
|
|
129
|
+
className: finalClass
|
|
130
|
+
}, /*#__PURE__*/_react["default"].createElement(_layoutContents["default"], {
|
|
131
|
+
mode: layoutMode,
|
|
132
|
+
secondary: secondaryContent,
|
|
133
|
+
dimensions: dimensions
|
|
134
|
+
}, children));
|
|
135
|
+
}))
|
|
136
|
+
);
|
|
130
137
|
}
|
|
131
138
|
}]);
|
|
132
139
|
return MeasuredConfigLayout;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/layout/config-layout.jsx"],"names":["styles","extraCSSRules","theme","typography","useNextVariants","fontFamily","MeasuredConfigLayout","props","contentRect","bounds","sidePanelMinWidth","dimensions","maxWidth","layoutMode","width","
|
|
1
|
+
{"version":3,"sources":["../../src/layout/config-layout.jsx"],"names":["styles","extraCSSRules","theme","typography","useNextVariants","fontFamily","MeasuredConfigLayout","props","contentRect","bounds","sidePanelMinWidth","dimensions","maxWidth","layoutMode","width","state","setState","undefined","onResize","measureRef","children","settings","hideSettings","classes","settingsPanel","secondaryContent","finalClass","AppendCSSRules","PropTypes","oneOfType","string","arrayOf","element","className","object","number","bool","ConfigLayout"],"mappings":"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","sourcesContent":["import React from 'react';\nimport Measure from 'react-measure';\nimport { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';\nimport { withContentRect } from 'react-measure';\nimport { withStyles } from '@material-ui/core/styles';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport LayoutContents from './layout-contents';\nimport SettingsBox from './settings-box';\nimport { AppendCSSRules } from '@pie-lib/render-ui';\n\nconst styles = {\n extraCSSRules: {},\n};\n\nconst theme = createMuiTheme({\n typography: {\n // In MUI v3, this opts into the h1–h6 variants; otherwise use display1/headline/etc.\n useNextVariants: true,\n fontFamily: 'inherit',\n },\n});\n\nclass MeasuredConfigLayout extends AppendCSSRules {\n static propTypes = {\n children: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.element), PropTypes.element]),\n className: PropTypes.string,\n classes: PropTypes.object,\n dimensions: PropTypes.object,\n settings: PropTypes.element,\n sidePanelMinWidth: PropTypes.number,\n hideSettings: PropTypes.bool,\n };\n\n static defaultProps = {\n sidePanelMinWidth: 1135,\n hideSettings: false,\n dimensions: {},\n };\n\n constructor(...props) {\n super(...props);\n this.state = { layoutMode: undefined };\n }\n\n onResize = (contentRect) => {\n const { bounds } = contentRect;\n const { sidePanelMinWidth, dimensions } = this.props;\n const { maxWidth } = dimensions || {};\n\n const layoutMode =\n bounds.width > sidePanelMinWidth && (maxWidth ? maxWidth > sidePanelMinWidth : true) ? 'inline' : 'tabbed';\n\n // Only update state (and cause a re-render) if the computed layoutMode changed.\n if (layoutMode !== this.state.layoutMode) {\n this.setState({ layoutMode });\n }\n };\n\n render() {\n return (\n // TODO: REVIEW MuiThemeProvider usage\n // Different theme object identities will force theme consumers to re-render.\n <MuiThemeProvider theme={theme}>\n <Measure bounds onResize={this.onResize}>\n {({ measureRef }) => {\n const { children, settings, hideSettings, dimensions, classes } = this.props;\n const { layoutMode } = this.state;\n\n const settingsPanel =\n layoutMode === 'inline' ? <SettingsBox className=\"settings-box\">{settings}</SettingsBox> : settings;\n const secondaryContent = hideSettings ? null : settingsPanel;\n const finalClass = classNames('main-container', classes.extraCSSRules);\n\n return (\n <div ref={measureRef} className={finalClass}>\n <LayoutContents mode={layoutMode} secondary={secondaryContent} dimensions={dimensions}>\n {children}\n </LayoutContents>\n </div>\n );\n }}\n </Measure>\n </MuiThemeProvider>\n );\n }\n}\n\nconst ConfigLayout = withStyles(styles)(withContentRect('bounds')(MeasuredConfigLayout));\n\nexport default ConfigLayout;\n"],"file":"config-layout.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pie-lib/config-ui",
|
|
3
|
-
"version": "11.
|
|
3
|
+
"version": "11.30.1",
|
|
4
4
|
"main": "lib/index.js",
|
|
5
5
|
"module": "src/index.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -10,9 +10,9 @@
|
|
|
10
10
|
"dependencies": {
|
|
11
11
|
"@material-ui/core": "^3.8.3",
|
|
12
12
|
"@material-ui/icons": "^3.0.2",
|
|
13
|
-
"@pie-lib/editable-html": "^11.21.
|
|
14
|
-
"@pie-lib/icons": "^2.24.
|
|
15
|
-
"@pie-lib/render-ui": "^4.35.
|
|
13
|
+
"@pie-lib/editable-html": "^11.21.1",
|
|
14
|
+
"@pie-lib/icons": "^2.24.1",
|
|
15
|
+
"@pie-lib/render-ui": "^4.35.1",
|
|
16
16
|
"assert": "^1.4.1",
|
|
17
17
|
"classnames": "^2.2.6",
|
|
18
18
|
"complex.js": "2.1.1",
|
|
@@ -29,5 +29,5 @@
|
|
|
29
29
|
"peerDependencies": {
|
|
30
30
|
"react": "^16.8.1"
|
|
31
31
|
},
|
|
32
|
-
"gitHead": "
|
|
32
|
+
"gitHead": "ce0ec7134200c51f3a3301257be3e707054b36ca"
|
|
33
33
|
}
|
|
@@ -51,11 +51,16 @@ class MeasuredConfigLayout extends AppendCSSRules {
|
|
|
51
51
|
const layoutMode =
|
|
52
52
|
bounds.width > sidePanelMinWidth && (maxWidth ? maxWidth > sidePanelMinWidth : true) ? 'inline' : 'tabbed';
|
|
53
53
|
|
|
54
|
-
|
|
54
|
+
// Only update state (and cause a re-render) if the computed layoutMode changed.
|
|
55
|
+
if (layoutMode !== this.state.layoutMode) {
|
|
56
|
+
this.setState({ layoutMode });
|
|
57
|
+
}
|
|
55
58
|
};
|
|
56
59
|
|
|
57
60
|
render() {
|
|
58
61
|
return (
|
|
62
|
+
// TODO: REVIEW MuiThemeProvider usage
|
|
63
|
+
// Different theme object identities will force theme consumers to re-render.
|
|
59
64
|
<MuiThemeProvider theme={theme}>
|
|
60
65
|
<Measure bounds onResize={this.onResize}>
|
|
61
66
|
{({ measureRef }) => {
|