@pie-lib/config-ui 11.5.6-next.4 → 11.6.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/layout/config-layout.js +17 -7
- package/lib/layout/config-layout.js.map +1 -1
- package/lib/layout/layout-contents.js +24 -8
- package/lib/layout/layout-contents.js.map +1 -1
- package/package.json +4 -4
- package/src/layout/config-layout.jsx +9 -4
- package/src/layout/layout-contents.jsx +5 -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
|
+
# [11.6.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/config-ui@11.5.6...@pie-lib/config-ui@11.6.0) (2023-04-03)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* added the ability to set min/max width and height for the layout content PD-2425 ([f040d77](https://github.com/pie-framework/pie-lib/commit/f040d777e35bb9e917a1f2bfd33ed5591ea1aa51))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## [11.5.6](https://github.com/pie-framework/pie-lib/compare/@pie-lib/config-ui@11.5.5...@pie-lib/config-ui@11.5.6) (2023-03-27)
|
|
18
|
+
|
|
19
|
+
**Note:** Version bump only for package @pie-lib/config-ui
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
## [11.5.5](https://github.com/pie-framework/pie-lib/compare/@pie-lib/config-ui@11.5.4...@pie-lib/config-ui@11.5.5) (2023-03-20)
|
|
7
26
|
|
|
8
27
|
**Note:** Version bump only for package @pie-lib/config-ui
|
|
@@ -53,8 +53,14 @@ var MeasuredConfigLayout = /*#__PURE__*/function (_React$Component) {
|
|
|
53
53
|
_this = _super.call(this, props);
|
|
54
54
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onResize", function (contentRect) {
|
|
55
55
|
var bounds = contentRect.bounds;
|
|
56
|
-
var
|
|
57
|
-
|
|
56
|
+
var _this$props = _this.props,
|
|
57
|
+
sidePanelMinWidth = _this$props.sidePanelMinWidth,
|
|
58
|
+
dimensions = _this$props.dimensions;
|
|
59
|
+
|
|
60
|
+
var _ref = dimensions || {},
|
|
61
|
+
maxWidth = _ref.maxWidth;
|
|
62
|
+
|
|
63
|
+
var layoutMode = bounds.width >= sidePanelMinWidth && (maxWidth ? maxWidth >= sidePanelMinWidth : true) ? 'inline' : 'tabbed';
|
|
58
64
|
|
|
59
65
|
_this.setState({
|
|
60
66
|
layoutMode: layoutMode
|
|
@@ -74,12 +80,13 @@ var MeasuredConfigLayout = /*#__PURE__*/function (_React$Component) {
|
|
|
74
80
|
return /*#__PURE__*/_react["default"].createElement(_reactMeasure["default"], {
|
|
75
81
|
bounds: true,
|
|
76
82
|
onResize: this.onResize
|
|
77
|
-
}, function (
|
|
78
|
-
var measureRef =
|
|
83
|
+
}, function (_ref2) {
|
|
84
|
+
var measureRef = _ref2.measureRef;
|
|
79
85
|
var _this2$props = _this2.props,
|
|
80
86
|
children = _this2$props.children,
|
|
81
87
|
settings = _this2$props.settings,
|
|
82
|
-
hideSettings = _this2$props.hideSettings
|
|
88
|
+
hideSettings = _this2$props.hideSettings,
|
|
89
|
+
dimensions = _this2$props.dimensions;
|
|
83
90
|
var layoutMode = _this2.state.layoutMode;
|
|
84
91
|
var settingsPanel = layoutMode === 'inline' ? /*#__PURE__*/_react["default"].createElement(_settingsBox["default"], {
|
|
85
92
|
className: "settings-box"
|
|
@@ -90,7 +97,8 @@ var MeasuredConfigLayout = /*#__PURE__*/function (_React$Component) {
|
|
|
90
97
|
className: "main-container"
|
|
91
98
|
}, /*#__PURE__*/_react["default"].createElement(_layoutContents["default"], {
|
|
92
99
|
mode: layoutMode,
|
|
93
|
-
secondary: secondaryContent
|
|
100
|
+
secondary: secondaryContent,
|
|
101
|
+
dimensions: dimensions
|
|
94
102
|
}, children));
|
|
95
103
|
});
|
|
96
104
|
}
|
|
@@ -102,13 +110,15 @@ var MeasuredConfigLayout = /*#__PURE__*/function (_React$Component) {
|
|
|
102
110
|
children: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].element), _propTypes["default"].element]),
|
|
103
111
|
className: _propTypes["default"].string,
|
|
104
112
|
classes: _propTypes["default"].object,
|
|
113
|
+
dimensions: _propTypes["default"].object,
|
|
105
114
|
settings: _propTypes["default"].element,
|
|
106
115
|
sidePanelMinWidth: _propTypes["default"].number,
|
|
107
116
|
hideSettings: _propTypes["default"].bool
|
|
108
117
|
});
|
|
109
118
|
(0, _defineProperty2["default"])(MeasuredConfigLayout, "defaultProps", {
|
|
110
119
|
sidePanelMinWidth: 950,
|
|
111
|
-
hideSettings: false
|
|
120
|
+
hideSettings: false,
|
|
121
|
+
dimensions: {}
|
|
112
122
|
});
|
|
113
123
|
var ConfigLayout = (0, _reactMeasure.withContentRect)('bounds')(MeasuredConfigLayout);
|
|
114
124
|
var _default = ConfigLayout;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/layout/config-layout.jsx"],"names":["MeasuredConfigLayout","props","contentRect","bounds","sidePanelMinWidth","layoutMode","width","setState","state","undefined","onResize","measureRef","children","settings","hideSettings","settingsPanel","secondaryContent","React","Component","PropTypes","oneOfType","string","arrayOf","element","className","classes","object","number","bool","ConfigLayout"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;IAEMA,oB;;;;;
|
|
1
|
+
{"version":3,"sources":["../../src/layout/config-layout.jsx"],"names":["MeasuredConfigLayout","props","contentRect","bounds","sidePanelMinWidth","dimensions","maxWidth","layoutMode","width","setState","state","undefined","onResize","measureRef","children","settings","hideSettings","settingsPanel","secondaryContent","React","Component","PropTypes","oneOfType","string","arrayOf","element","className","classes","object","number","bool","ConfigLayout"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;IAEMA,oB;;;;;AAiBJ,gCAAYC,KAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,KAAN;AADiB,iGAKR,UAACC,WAAD,EAAiB;AAC1B,UAAQC,MAAR,GAAmBD,WAAnB,CAAQC,MAAR;AACA,wBAA0C,MAAKF,KAA/C;AAAA,UAAQG,iBAAR,eAAQA,iBAAR;AAAA,UAA2BC,UAA3B,eAA2BA,UAA3B;;AACA,iBAAqBA,UAAU,IAAI,EAAnC;AAAA,UAAQC,QAAR,QAAQA,QAAR;;AAEA,UAAMC,UAAU,GACdJ,MAAM,CAACK,KAAP,IAAgBJ,iBAAhB,KAAsCE,QAAQ,GAAGA,QAAQ,IAAIF,iBAAf,GAAmC,IAAjF,IAAyF,QAAzF,GAAoG,QADtG;;AAGA,YAAKK,QAAL,CAAc;AAAEF,QAAAA,UAAU,EAAVA;AAAF,OAAd;AACD,KAdkB;AAEjB,UAAKG,KAAL,GAAa;AAAEH,MAAAA,UAAU,EAAEI;AAAd,KAAb;AAFiB;AAGlB;;;;WAaD,kBAAS;AAAA;;AACP,0BACE,gCAAC,wBAAD;AAAS,QAAA,MAAM,MAAf;AAAgB,QAAA,QAAQ,EAAE,KAAKC;AAA/B,SACG,iBAAoB;AAAA,YAAjBC,UAAiB,SAAjBA,UAAiB;AACnB,2BAAyD,MAAI,CAACZ,KAA9D;AAAA,YAAQa,QAAR,gBAAQA,QAAR;AAAA,YAAkBC,QAAlB,gBAAkBA,QAAlB;AAAA,YAA4BC,YAA5B,gBAA4BA,YAA5B;AAAA,YAA0CX,UAA1C,gBAA0CA,UAA1C;AACA,YAAQE,UAAR,GAAuB,MAAI,CAACG,KAA5B,CAAQH,UAAR;AAEA,YAAMU,aAAa,GACjBV,UAAU,KAAK,QAAf,gBAA0B,gCAAC,uBAAD;AAAa,UAAA,SAAS,EAAC;AAAvB,WAAuCQ,QAAvC,CAA1B,GAA2FA,QAD7F;AAEA,YAAMG,gBAAgB,GAAGF,YAAY,GAAG,IAAH,GAAUC,aAA/C;AAEA,4BACE;AAAK,UAAA,GAAG,EAAEJ,UAAV;AAAsB,UAAA,SAAS,EAAC;AAAhC,wBACE,gCAAC,0BAAD;AAAgB,UAAA,IAAI,EAAEN,UAAtB;AAAkC,UAAA,SAAS,EAAEW,gBAA7C;AAA+D,UAAA,UAAU,EAAEb;AAA3E,WACGS,QADH,CADF,CADF;AAOD,OAhBH,CADF;AAoBD;;;EAtDgCK,kBAAMC,S;;iCAAnCpB,oB,eACe;AACjBc,EAAAA,QAAQ,EAAEO,sBAAUC,SAAV,CAAoB,CAACD,sBAAUE,MAAX,EAAmBF,sBAAUG,OAAV,CAAkBH,sBAAUI,OAA5B,CAAnB,EAAyDJ,sBAAUI,OAAnE,CAApB,CADO;AAEjBC,EAAAA,SAAS,EAAEL,sBAAUE,MAFJ;AAGjBI,EAAAA,OAAO,EAAEN,sBAAUO,MAHF;AAIjBvB,EAAAA,UAAU,EAAEgB,sBAAUO,MAJL;AAKjBb,EAAAA,QAAQ,EAAEM,sBAAUI,OALH;AAMjBrB,EAAAA,iBAAiB,EAAEiB,sBAAUQ,MANZ;AAOjBb,EAAAA,YAAY,EAAEK,sBAAUS;AAPP,C;iCADf9B,oB,kBAWkB;AACpBI,EAAAA,iBAAiB,EAAE,GADC;AAEpBY,EAAAA,YAAY,EAAE,KAFM;AAGpBX,EAAAA,UAAU,EAAE;AAHQ,C;AA8CxB,IAAM0B,YAAY,GAAG,mCAAgB,QAAhB,EAA0B/B,oBAA1B,CAArB;eAEe+B,Y","sourcesContent":["import React from 'react';\nimport Measure from 'react-measure';\nimport { withContentRect } from 'react-measure';\nimport PropTypes from 'prop-types';\nimport LayoutContents from './layout-contents';\nimport SettingsBox from './settings-box';\n\nclass MeasuredConfigLayout extends React.Component {\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: 950,\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 this.setState({ layoutMode });\n };\n\n render() {\n return (\n <Measure bounds onResize={this.onResize}>\n {({ measureRef }) => {\n const { children, settings, hideSettings, dimensions } = 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\n return (\n <div ref={measureRef} className=\"main-container\">\n <LayoutContents mode={layoutMode} secondary={secondaryContent} dimensions={dimensions}>\n {children}\n </LayoutContents>\n </div>\n );\n }}\n </Measure>\n );\n }\n}\n\nconst ConfigLayout = withContentRect('bounds')(MeasuredConfigLayout);\n\nexport default ConfigLayout;\n"],"file":"config-layout.js"}
|
|
@@ -93,12 +93,20 @@ var RawLayoutContents = /*#__PURE__*/function (_React$Component) {
|
|
|
93
93
|
mode = _this$props.mode,
|
|
94
94
|
secondary = _this$props.secondary,
|
|
95
95
|
children = _this$props.children,
|
|
96
|
-
classes = _this$props.classes
|
|
96
|
+
classes = _this$props.classes,
|
|
97
|
+
dimensions = _this$props.dimensions;
|
|
98
|
+
|
|
99
|
+
var _ref = dimensions || {},
|
|
100
|
+
minHeight = _ref.minHeight,
|
|
101
|
+
minWidth = _ref.minWidth,
|
|
102
|
+
maxHeight = _ref.maxHeight,
|
|
103
|
+
maxWidth = _ref.maxWidth;
|
|
104
|
+
|
|
97
105
|
var configuration = this.getConfiguration();
|
|
98
|
-
var hasSettingsPanel = Object.entries(configuration || {}).some(function (
|
|
99
|
-
var
|
|
100
|
-
propName =
|
|
101
|
-
obj =
|
|
106
|
+
var hasSettingsPanel = Object.entries(configuration || {}).some(function (_ref2) {
|
|
107
|
+
var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
|
|
108
|
+
propName = _ref3[0],
|
|
109
|
+
obj = _ref3[1];
|
|
102
110
|
|
|
103
111
|
return !!(obj !== null && obj !== void 0 && obj.settings);
|
|
104
112
|
}); // ebsr has configuration.partA and configuration.partB
|
|
@@ -115,7 +123,13 @@ var RawLayoutContents = /*#__PURE__*/function (_React$Component) {
|
|
|
115
123
|
}
|
|
116
124
|
|
|
117
125
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
118
|
-
className: classes.container
|
|
126
|
+
className: classes.container,
|
|
127
|
+
style: {
|
|
128
|
+
minHeight: minHeight,
|
|
129
|
+
minWidth: minWidth,
|
|
130
|
+
maxHeight: maxHeight,
|
|
131
|
+
maxWidth: maxWidth
|
|
132
|
+
}
|
|
119
133
|
}, mode === 'inline' && /*#__PURE__*/_react["default"].createElement("div", {
|
|
120
134
|
className: (0, _classnames["default"])(classes.flow, classes.contentContainer)
|
|
121
135
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
@@ -144,7 +158,8 @@ var RawLayoutContents = /*#__PURE__*/function (_React$Component) {
|
|
|
144
158
|
mode: _propTypes["default"].oneOf(['tabbed', 'inline']),
|
|
145
159
|
secondary: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]),
|
|
146
160
|
children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]),
|
|
147
|
-
classes: _propTypes["default"].object
|
|
161
|
+
classes: _propTypes["default"].object,
|
|
162
|
+
dimensions: _propTypes["default"].object
|
|
148
163
|
});
|
|
149
164
|
|
|
150
165
|
var styles = function styles(theme) {
|
|
@@ -156,7 +171,8 @@ var styles = function styles(theme) {
|
|
|
156
171
|
container: {
|
|
157
172
|
display: 'flex',
|
|
158
173
|
flexDirection: 'column',
|
|
159
|
-
position: 'relative'
|
|
174
|
+
position: 'relative',
|
|
175
|
+
overflow: 'auto'
|
|
160
176
|
},
|
|
161
177
|
contentContainer: {
|
|
162
178
|
padding: "".concat(theme.spacing.unit * 2, "px 0")
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/layout/layout-contents.jsx"],"names":["RawLayoutContents","secondary","props","configuration","children","undefined","mode","classes","getConfiguration","hasSettingsPanel","Object","entries","some","propName","obj","settings","JSON","stringify","match","length","e","console","log","toString","container","flow","contentContainer","configContainer","settingsContainer","onTabsChange","React","Component","PropTypes","oneOf","oneOfType","arrayOf","node","object","styles","theme","display","justifyContent","flexDirection","position","padding","spacing","unit","flex","marginLeft"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;IAEMA,iB;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../src/layout/layout-contents.jsx"],"names":["RawLayoutContents","secondary","props","configuration","children","undefined","mode","classes","dimensions","minHeight","minWidth","maxHeight","maxWidth","getConfiguration","hasSettingsPanel","Object","entries","some","propName","obj","settings","JSON","stringify","match","length","e","console","log","toString","container","flow","contentContainer","configContainer","settingsContainer","onTabsChange","React","Component","PropTypes","oneOf","oneOfType","arrayOf","node","object","styles","theme","display","justifyContent","flexDirection","position","overflow","padding","spacing","unit","flex","marginLeft"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;IAEMA,iB;;;;;;;;;;;;;;;yGASe,YAAM;AAAA;;AACvB,UAAQC,SAAR,GAAsB,MAAKC,KAA3B,CAAQD,SAAR,CADuB,CAEvB;;AAEA,aAAO,CAAAA,SAAS,SAAT,IAAAA,SAAS,WAAT,gCAAAA,SAAS,CAAEC,KAAX,sEAAkBC,aAAlB,MAAmCF,SAAnC,aAAmCA,SAAnC,4CAAmCA,SAAS,CAAEC,KAA9C,+EAAmC,kBAAkBE,QAArD,oFAAmC,sBAA4BF,KAA/D,2DAAmC,uBAAmCC,aAAtE,KAAuFE,SAA9F;AACD,K;;;;;;WAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,sBAAS;AACP,wBAA2D,KAAKH,KAAhE;AAAA,UAAQI,IAAR,eAAQA,IAAR;AAAA,UAAcL,SAAd,eAAcA,SAAd;AAAA,UAAyBG,QAAzB,eAAyBA,QAAzB;AAAA,UAAmCG,OAAnC,eAAmCA,OAAnC;AAAA,UAA4CC,UAA5C,eAA4CA,UAA5C;;AACA,iBAAqDA,UAAU,IAAI,EAAnE;AAAA,UAAQC,SAAR,QAAQA,SAAR;AAAA,UAAmBC,QAAnB,QAAmBA,QAAnB;AAAA,UAA6BC,SAA7B,QAA6BA,SAA7B;AAAA,UAAwCC,QAAxC,QAAwCA,QAAxC;;AACA,UAAMT,aAAa,GAAG,KAAKU,gBAAL,EAAtB;AAEA,UAAIC,gBAAgB,GAAGC,MAAM,CAACC,OAAP,CAAeb,aAAa,IAAI,EAAhC,EAAoCc,IAApC,CAAyC;AAAA;AAAA,YAAEC,QAAF;AAAA,YAAYC,GAAZ;;AAAA,eAAqB,CAAC,EAACA,GAAD,aAACA,GAAD,eAACA,GAAG,CAAEC,QAAN,CAAtB;AAAA,OAAzC,CAAvB,CALO,CAMP;AACA;;AAEA,UAAI,CAACN,gBAAL,EAAuB;AACrB,YAAI;AAAA;;AACFA,UAAAA,gBAAgB,sBAAGO,IAAI,CAACC,SAAL,CAAenB,aAAf,CAAH,6EAAG,gBAA+BoB,KAA/B,CAAqC,gBAArC,CAAH,0DAAG,sBAAwDC,MAA3E;AACD,SAFD,CAEE,OAAOC,CAAP,EAAU;AACVC,UAAAA,OAAO,CAACC,GAAR,CAAYF,CAAC,CAACG,QAAF,EAAZ;AACD;AACF;;AAED,0BACE;AAAK,QAAA,SAAS,EAAErB,OAAO,CAACsB,SAAxB;AAAmC,QAAA,KAAK,EAAE;AAAEpB,UAAAA,SAAS,EAATA,SAAF;AAAaC,UAAAA,QAAQ,EAARA,QAAb;AAAuBC,UAAAA,SAAS,EAATA,SAAvB;AAAkCC,UAAAA,QAAQ,EAARA;AAAlC;AAA1C,SACGN,IAAI,KAAK,QAAT,iBACC;AAAK,QAAA,SAAS,EAAE,4BAAWC,OAAO,CAACuB,IAAnB,EAAyBvB,OAAO,CAACwB,gBAAjC;AAAhB,sBACE;AAAK,QAAA,SAAS,EAAE,4BAAWxB,OAAO,CAACyB,eAAnB,EAAoC,kBAApC;AAAhB,SAA0E5B,QAA1E,CADF,EAEGU,gBAAgB,iBACf;AAAK,QAAA,SAAS,EAAE,4BAAWP,OAAO,CAAC0B,iBAAnB,EAAsC,oBAAtC;AAAhB,SAA8EhC,SAA9E,CAHJ,CAFJ,EAUGK,IAAI,KAAK,QAAT,IAAqBQ,gBAArB,iBACC,gCAAC,gBAAD;AAAM,QAAA,QAAQ,EAAE,KAAKoB,YAArB;AAAmC,QAAA,gBAAgB,EAAE3B,OAAO,CAACwB,gBAA7D;AAA+E,QAAA,cAAc,EAAC;AAA9F,sBACE;AAAK,QAAA,KAAK,EAAC,QAAX;AAAoB,QAAA,SAAS,EAAC;AAA9B,SACG3B,QADH,CADF,eAIE;AAAK,QAAA,KAAK,EAAC,UAAX;AAAsB,QAAA,SAAS,EAAC;AAAhC,SACGH,SADH,CAJF,CAXJ,EAqBGK,IAAI,KAAK,QAAT,IAAqB,CAACQ,gBAAtB,iBACC;AAAK,QAAA,SAAS,EAAEP,OAAO,CAACwB;AAAxB,sBAAoD,kBAApD,GACG3B,QADH,CAtBJ,CADF;AA6BD;;;EAvF6B+B,kBAAMC,S;;iCAAhCpC,iB,eACe;AACjBM,EAAAA,IAAI,EAAE+B,sBAAUC,KAAV,CAAgB,CAAC,QAAD,EAAW,QAAX,CAAhB,CADW;AAEjBrC,EAAAA,SAAS,EAAEoC,sBAAUE,SAAV,CAAoB,CAACF,sBAAUG,OAAV,CAAkBH,sBAAUI,IAA5B,CAAD,EAAoCJ,sBAAUI,IAA9C,CAApB,CAFM;AAGjBrC,EAAAA,QAAQ,EAAEiC,sBAAUE,SAAV,CAAoB,CAACF,sBAAUG,OAAV,CAAkBH,sBAAUI,IAA5B,CAAD,EAAoCJ,sBAAUI,IAA9C,CAApB,CAHO;AAIjBlC,EAAAA,OAAO,EAAE8B,sBAAUK,MAJF;AAKjBlC,EAAAA,UAAU,EAAE6B,sBAAUK;AALL,C;;AAyFrB,IAAMC,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBd,IAAAA,IAAI,EAAE;AACJe,MAAAA,OAAO,EAAE,MADL;AAEJC,MAAAA,cAAc,EAAE;AAFZ,KADmB;AAKzBjB,IAAAA,SAAS,EAAE;AACTgB,MAAAA,OAAO,EAAE,MADA;AAETE,MAAAA,aAAa,EAAE,QAFN;AAGTC,MAAAA,QAAQ,EAAE,UAHD;AAITC,MAAAA,QAAQ,EAAE;AAJD,KALc;AAWzBlB,IAAAA,gBAAgB,EAAE;AAChBmB,MAAAA,OAAO,YAAKN,KAAK,CAACO,OAAN,CAAcC,IAAd,GAAqB,CAA1B;AADS,KAXO;AAczBpB,IAAAA,eAAe,EAAE;AACfqB,MAAAA,IAAI,EAAE;AADS,KAdQ;AAiBzBpB,IAAAA,iBAAiB,EAAE;AACjBqB,MAAAA,UAAU,EAAEV,KAAK,CAACO,OAAN,CAAcC,IAAd,GAAqB;AADhB;AAjBM,GAAZ;AAAA,CAAf;;eAsBe,sBAAWT,MAAX,EAAmB3C,iBAAnB,C","sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core';\nimport Tabs from '../tabs';\n\nclass RawLayoutContents extends React.Component {\n static propTypes = {\n mode: PropTypes.oneOf(['tabbed', 'inline']),\n secondary: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),\n children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),\n classes: PropTypes.object,\n dimensions: PropTypes.object,\n };\n\n getConfiguration = () => {\n const { secondary } = this.props;\n // in config-layout, secondary can be: <SettingsBox>{settings}</SettingsBox>, settings, null\n\n return secondary?.props?.configuration || secondary?.props?.children?.props?.configuration || undefined;\n };\n\n // // eslint-disable-next-line no-unused-vars\n // componentDidUpdate(prevProps, prevState, snapshot) {\n // const configuration = this.getConfiguration();\n // const { mode } = this.props;\n //\n // // promptHolder class is used to wrap up inputs:\n // // we don't want inputs to fill the entire scrollable container,\n // // but instead we want inputs to fit in the first view,\n // // so we calculate the maximum space inputs need\n // try {\n // if (\n // configuration?.maxWidth &&\n // getComputedStyle(document.documentElement).getPropertyValue('--pie-prompt-holder-max-width') !==\n // configuration?.maxWidth\n // ) {\n // document.documentElement.style.setProperty(\n // '--pie-prompt-holder-max-width',\n // mode === 'inline' ? `calc(${configuration.maxWidth} - 340px)` : configuration.maxWidth,\n // );\n // }\n // } catch (e) {\n // console.log(e.toString());\n // }\n // }\n\n render() {\n const { mode, secondary, children, classes, dimensions } = this.props;\n const { minHeight, minWidth, maxHeight, maxWidth } = dimensions || {};\n const configuration = this.getConfiguration();\n\n let hasSettingsPanel = Object.entries(configuration || {}).some(([propName, obj]) => !!obj?.settings);\n // ebsr has configuration.partA and configuration.partB\n // because we might have nested configuration for other item types as well, let's add this simple regex to check values for settings\n\n if (!hasSettingsPanel) {\n try {\n hasSettingsPanel = JSON.stringify(configuration)?.match(/settings\":true/)?.length;\n } catch (e) {\n console.log(e.toString());\n }\n }\n\n return (\n <div className={classes.container} style={{ minHeight, minWidth, maxHeight, maxWidth }}>\n {mode === 'inline' && (\n <div className={classnames(classes.flow, classes.contentContainer)}>\n <div className={classnames(classes.configContainer, 'design-container')}>{children}</div>\n {hasSettingsPanel && (\n <div className={classnames(classes.settingsContainer, 'settings-container')}>{secondary}</div>\n )}\n </div>\n )}\n\n {mode === 'tabbed' && hasSettingsPanel && (\n <Tabs onChange={this.onTabsChange} contentClassName={classes.contentContainer} indicatorColor=\"primary\">\n <div title=\"Design\" className=\"design-container\">\n {children}\n </div>\n <div title=\"Settings\" className=\"settings-container\">\n {secondary}\n </div>\n </Tabs>\n )}\n\n {mode === 'tabbed' && !hasSettingsPanel && (\n <div className={classes.contentContainer} className=\"design-container\">\n {children}\n </div>\n )}\n </div>\n );\n }\n}\n\nconst styles = (theme) => ({\n flow: {\n display: 'flex',\n justifyContent: 'space-between',\n },\n container: {\n display: 'flex',\n flexDirection: 'column',\n position: 'relative',\n overflow: 'auto',\n },\n contentContainer: {\n padding: `${theme.spacing.unit * 2}px 0`,\n },\n configContainer: {\n flex: '1',\n },\n settingsContainer: {\n marginLeft: theme.spacing.unit * 2,\n },\n});\n\nexport default withStyles(styles)(RawLayoutContents);\n"],"file":"layout-contents.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pie-lib/config-ui",
|
|
3
|
-
"version": "11.
|
|
3
|
+
"version": "11.6.0",
|
|
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": "^9.5.
|
|
13
|
+
"@pie-lib/editable-html": "^9.5.19",
|
|
14
14
|
"@pie-lib/icons": "^2.4.42",
|
|
15
|
-
"@pie-lib/render-ui": "^4.14.
|
|
15
|
+
"@pie-lib/render-ui": "^4.14.19",
|
|
16
16
|
"classnames": "^2.2.6",
|
|
17
17
|
"debug": "^4.1.1",
|
|
18
18
|
"lodash": "^4.17.11",
|
|
@@ -26,5 +26,5 @@
|
|
|
26
26
|
"peerDependencies": {
|
|
27
27
|
"react": "^16.8.1"
|
|
28
28
|
},
|
|
29
|
-
"gitHead": "
|
|
29
|
+
"gitHead": "3f110210f353087c163e7b1c8efec3e7bdaa380e"
|
|
30
30
|
}
|
|
@@ -10,6 +10,7 @@ class MeasuredConfigLayout extends React.Component {
|
|
|
10
10
|
children: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.element), PropTypes.element]),
|
|
11
11
|
className: PropTypes.string,
|
|
12
12
|
classes: PropTypes.object,
|
|
13
|
+
dimensions: PropTypes.object,
|
|
13
14
|
settings: PropTypes.element,
|
|
14
15
|
sidePanelMinWidth: PropTypes.number,
|
|
15
16
|
hideSettings: PropTypes.bool,
|
|
@@ -18,6 +19,7 @@ class MeasuredConfigLayout extends React.Component {
|
|
|
18
19
|
static defaultProps = {
|
|
19
20
|
sidePanelMinWidth: 950,
|
|
20
21
|
hideSettings: false,
|
|
22
|
+
dimensions: {},
|
|
21
23
|
};
|
|
22
24
|
|
|
23
25
|
constructor(props) {
|
|
@@ -27,8 +29,11 @@ class MeasuredConfigLayout extends React.Component {
|
|
|
27
29
|
|
|
28
30
|
onResize = (contentRect) => {
|
|
29
31
|
const { bounds } = contentRect;
|
|
30
|
-
const { sidePanelMinWidth } = this.props;
|
|
31
|
-
const
|
|
32
|
+
const { sidePanelMinWidth, dimensions } = this.props;
|
|
33
|
+
const { maxWidth } = dimensions || {};
|
|
34
|
+
|
|
35
|
+
const layoutMode =
|
|
36
|
+
bounds.width >= sidePanelMinWidth && (maxWidth ? maxWidth >= sidePanelMinWidth : true) ? 'inline' : 'tabbed';
|
|
32
37
|
|
|
33
38
|
this.setState({ layoutMode });
|
|
34
39
|
};
|
|
@@ -37,7 +42,7 @@ class MeasuredConfigLayout extends React.Component {
|
|
|
37
42
|
return (
|
|
38
43
|
<Measure bounds onResize={this.onResize}>
|
|
39
44
|
{({ measureRef }) => {
|
|
40
|
-
const { children, settings, hideSettings } = this.props;
|
|
45
|
+
const { children, settings, hideSettings, dimensions } = this.props;
|
|
41
46
|
const { layoutMode } = this.state;
|
|
42
47
|
|
|
43
48
|
const settingsPanel =
|
|
@@ -46,7 +51,7 @@ class MeasuredConfigLayout extends React.Component {
|
|
|
46
51
|
|
|
47
52
|
return (
|
|
48
53
|
<div ref={measureRef} className="main-container">
|
|
49
|
-
<LayoutContents mode={layoutMode} secondary={secondaryContent}>
|
|
54
|
+
<LayoutContents mode={layoutMode} secondary={secondaryContent} dimensions={dimensions}>
|
|
50
55
|
{children}
|
|
51
56
|
</LayoutContents>
|
|
52
57
|
</div>
|
|
@@ -10,6 +10,7 @@ class RawLayoutContents extends React.Component {
|
|
|
10
10
|
secondary: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
|
|
11
11
|
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
|
|
12
12
|
classes: PropTypes.object,
|
|
13
|
+
dimensions: PropTypes.object,
|
|
13
14
|
};
|
|
14
15
|
|
|
15
16
|
getConfiguration = () => {
|
|
@@ -45,7 +46,8 @@ class RawLayoutContents extends React.Component {
|
|
|
45
46
|
// }
|
|
46
47
|
|
|
47
48
|
render() {
|
|
48
|
-
const { mode, secondary, children, classes } = this.props;
|
|
49
|
+
const { mode, secondary, children, classes, dimensions } = this.props;
|
|
50
|
+
const { minHeight, minWidth, maxHeight, maxWidth } = dimensions || {};
|
|
49
51
|
const configuration = this.getConfiguration();
|
|
50
52
|
|
|
51
53
|
let hasSettingsPanel = Object.entries(configuration || {}).some(([propName, obj]) => !!obj?.settings);
|
|
@@ -61,7 +63,7 @@ class RawLayoutContents extends React.Component {
|
|
|
61
63
|
}
|
|
62
64
|
|
|
63
65
|
return (
|
|
64
|
-
<div className={classes.container}>
|
|
66
|
+
<div className={classes.container} style={{ minHeight, minWidth, maxHeight, maxWidth }}>
|
|
65
67
|
{mode === 'inline' && (
|
|
66
68
|
<div className={classnames(classes.flow, classes.contentContainer)}>
|
|
67
69
|
<div className={classnames(classes.configContainer, 'design-container')}>{children}</div>
|
|
@@ -101,6 +103,7 @@ const styles = (theme) => ({
|
|
|
101
103
|
display: 'flex',
|
|
102
104
|
flexDirection: 'column',
|
|
103
105
|
position: 'relative',
|
|
106
|
+
overflow: 'auto',
|
|
104
107
|
},
|
|
105
108
|
contentContainer: {
|
|
106
109
|
padding: `${theme.spacing.unit * 2}px 0`,
|