@pie-lib/config-ui 11.1.5-next.2 → 11.1.5-next.21
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.
|
@@ -71,14 +71,17 @@ var ConfigLayout = /*#__PURE__*/function (_React$Component) {
|
|
|
71
71
|
}, function (_ref) {
|
|
72
72
|
var measureRef = _ref.measureRef;
|
|
73
73
|
var _this2$props = _this2.props,
|
|
74
|
+
children = _this2$props.children,
|
|
74
75
|
settings = _this2$props.settings,
|
|
75
|
-
|
|
76
|
+
hideSettings = _this2$props.hideSettings;
|
|
76
77
|
var layoutMode = _this2.state.layoutMode;
|
|
78
|
+
var settingsPanel = layoutMode === 'inline' ? /*#__PURE__*/_react["default"].createElement(_settingsBox["default"], null, settings) : settings;
|
|
79
|
+
var secondaryContent = hideSettings ? null : settingsPanel;
|
|
77
80
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
78
81
|
ref: measureRef
|
|
79
82
|
}, /*#__PURE__*/_react["default"].createElement(_layoutContents["default"], {
|
|
80
83
|
mode: layoutMode,
|
|
81
|
-
secondary:
|
|
84
|
+
secondary: secondaryContent
|
|
82
85
|
}, children));
|
|
83
86
|
});
|
|
84
87
|
}
|
|
@@ -88,13 +91,15 @@ var ConfigLayout = /*#__PURE__*/function (_React$Component) {
|
|
|
88
91
|
|
|
89
92
|
(0, _defineProperty2["default"])(ConfigLayout, "propTypes", {
|
|
90
93
|
children: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].element), _propTypes["default"].element]),
|
|
91
|
-
settings: _propTypes["default"].element,
|
|
92
94
|
className: _propTypes["default"].string,
|
|
93
95
|
classes: _propTypes["default"].object,
|
|
94
|
-
|
|
96
|
+
settings: _propTypes["default"].element,
|
|
97
|
+
sidePanelMinWidth: _propTypes["default"].number,
|
|
98
|
+
hideSettings: _propTypes["default"].bool
|
|
95
99
|
});
|
|
96
100
|
(0, _defineProperty2["default"])(ConfigLayout, "defaultProps", {
|
|
97
|
-
sidePanelMinWidth: 950
|
|
101
|
+
sidePanelMinWidth: 950,
|
|
102
|
+
hideSettings: false
|
|
98
103
|
});
|
|
99
104
|
var _default = ConfigLayout;
|
|
100
105
|
exports["default"] = _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/layout/config-layout.jsx"],"names":["ConfigLayout","props","contentRect","bounds","sidePanelMinWidth","layoutMode","width","setState","state","undefined","onResize","measureRef","settings","
|
|
1
|
+
{"version":3,"sources":["../../src/layout/config-layout.jsx"],"names":["ConfigLayout","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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;IAEMA,Y;;;;;AAeJ,wBAAYC,KAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,KAAN;AADiB,iGAKR,UAACC,WAAD,EAAiB;AAC1B,UAAQC,MAAR,GAAmBD,WAAnB,CAAQC,MAAR;AACA,UAAQC,iBAAR,GAA8B,MAAKH,KAAnC,CAAQG,iBAAR;AACA,UAAMC,UAAU,GAAGF,MAAM,CAACG,KAAP,IAAgBF,iBAAhB,GAAoC,QAApC,GAA+C,QAAlE;;AAEA,YAAKG,QAAL,CAAc;AAAEF,QAAAA,UAAU,EAAVA;AAAF,OAAd;AACD,KAXkB;AAEjB,UAAKG,KAAL,GAAa;AAAEH,MAAAA,UAAU,EAAEI;AAAd,KAAb;AAFiB;AAGlB;;;;WAUD,kBAAS;AAAA;;AACP,0BACE,gCAAC,wBAAD;AAAS,QAAA,MAAM,MAAf;AAAgB,QAAA,QAAQ,EAAE,KAAKC;AAA/B,SACG,gBAAoB;AAAA,YAAjBC,UAAiB,QAAjBA,UAAiB;AACnB,2BAA6C,MAAI,CAACV,KAAlD;AAAA,YAAQW,QAAR,gBAAQA,QAAR;AAAA,YAAkBC,QAAlB,gBAAkBA,QAAlB;AAAA,YAA4BC,YAA5B,gBAA4BA,YAA5B;AACA,YAAQT,UAAR,GAAuB,MAAI,CAACG,KAA5B,CAAQH,UAAR;AAEA,YAAMU,aAAa,GAAGV,UAAU,KAAK,QAAf,gBAA0B,gCAAC,uBAAD,QAAcQ,QAAd,CAA1B,GAAkEA,QAAxF;AACA,YAAMG,gBAAgB,GAAGF,YAAY,GAAG,IAAH,GAAUC,aAA/C;AAEA,4BACE;AAAK,UAAA,GAAG,EAAEJ;AAAV,wBACE,gCAAC,0BAAD;AAAgB,UAAA,IAAI,EAAEN,UAAtB;AAAkC,UAAA,SAAS,EAAEW;AAA7C,WACGJ,QADH,CADF,CADF;AAOD,OAfH,CADF;AAmBD;;;EAhDwBK,kBAAMC,S;;iCAA3BlB,Y,eACe;AACjBY,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;AAIjBb,EAAAA,QAAQ,EAAEM,sBAAUI,OAJH;AAKjBnB,EAAAA,iBAAiB,EAAEe,sBAAUQ,MALZ;AAMjBb,EAAAA,YAAY,EAAEK,sBAAUS;AANP,C;iCADf5B,Y,kBAUkB;AACpBI,EAAAA,iBAAiB,EAAE,GADC;AAEpBU,EAAAA,YAAY,EAAE;AAFM,C;eAyCTd,Y","sourcesContent":["import React from 'react';\nimport Measure from 'react-measure';\nimport PropTypes from 'prop-types';\nimport LayoutContents from './layout-contents';\nimport SettingsBox from './settings-box';\n\nclass ConfigLayout 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 settings: PropTypes.element,\n sidePanelMinWidth: PropTypes.number,\n hideSettings: PropTypes.bool,\n };\n\n static defaultProps = {\n sidePanelMinWidth: 950,\n hideSettings: false,\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 } = this.props;\n const layoutMode = bounds.width >= sidePanelMinWidth ? '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 } = this.props;\n const { layoutMode } = this.state;\n\n const settingsPanel = layoutMode === 'inline' ? <SettingsBox>{settings}</SettingsBox> : settings;\n const secondaryContent = hideSettings ? null : settingsPanel;\n\n return (\n <div ref={measureRef}>\n <LayoutContents mode={layoutMode} secondary={secondaryContent}>\n {children}\n </LayoutContents>\n </div>\n );\n }}\n </Measure>\n );\n }\n}\n\nexport default ConfigLayout;\n"],"file":"config-layout.js"}
|
|
@@ -13,6 +13,8 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
|
|
|
13
13
|
|
|
14
14
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
15
15
|
|
|
16
|
+
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
|
17
|
+
|
|
16
18
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
17
19
|
|
|
18
20
|
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
@@ -41,23 +43,52 @@ var RawLayoutContents = /*#__PURE__*/function (_React$Component) {
|
|
|
41
43
|
var _super = _createSuper(RawLayoutContents);
|
|
42
44
|
|
|
43
45
|
function RawLayoutContents() {
|
|
46
|
+
var _this;
|
|
47
|
+
|
|
44
48
|
(0, _classCallCheck2["default"])(this, RawLayoutContents);
|
|
45
|
-
|
|
49
|
+
|
|
50
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
51
|
+
args[_key] = arguments[_key];
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
|
55
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getConfiguration", function () {
|
|
56
|
+
var _secondary$props, _secondary$props2, _secondary$props2$chi, _secondary$props2$chi2;
|
|
57
|
+
|
|
58
|
+
var secondary = _this.props.secondary; // in config-layout, secondary can be: <SettingsBox>{settings}</SettingsBox>, settings, null
|
|
59
|
+
|
|
60
|
+
return (secondary === null || secondary === void 0 ? void 0 : (_secondary$props = secondary.props) === null || _secondary$props === void 0 ? void 0 : _secondary$props.configuration) || (secondary === null || secondary === void 0 ? void 0 : (_secondary$props2 = secondary.props) === null || _secondary$props2 === void 0 ? void 0 : (_secondary$props2$chi = _secondary$props2.children) === null || _secondary$props2$chi === void 0 ? void 0 : (_secondary$props2$chi2 = _secondary$props2$chi.props) === null || _secondary$props2$chi2 === void 0 ? void 0 : _secondary$props2$chi2.configuration) || undefined;
|
|
61
|
+
});
|
|
62
|
+
return _this;
|
|
46
63
|
}
|
|
47
64
|
|
|
48
65
|
(0, _createClass2["default"])(RawLayoutContents, [{
|
|
66
|
+
key: "componentDidUpdate",
|
|
67
|
+
value: // eslint-disable-next-line no-unused-vars
|
|
68
|
+
function componentDidUpdate(prevProps, prevState, snapshot) {
|
|
69
|
+
var configuration = this.getConfiguration();
|
|
70
|
+
var mode = this.props.mode; // promptHolder class is used to wrap up inputs:
|
|
71
|
+
// we don't want inputs to fill the entire scrollable container,
|
|
72
|
+
// but instead we want inputs to fit in the first view,
|
|
73
|
+
// so we calculate the maximum space inputs need
|
|
74
|
+
|
|
75
|
+
try {
|
|
76
|
+
if (configuration !== null && configuration !== void 0 && configuration.maxWidth && getComputedStyle(document.documentElement).getPropertyValue('--pie-prompt-holder-max-width') !== (configuration === null || configuration === void 0 ? void 0 : configuration.maxWidth)) {
|
|
77
|
+
document.documentElement.style.setProperty('--pie-prompt-holder-max-width', mode === 'inline' ? "calc(".concat(configuration.maxWidth, " - 340px)") : configuration.maxWidth);
|
|
78
|
+
}
|
|
79
|
+
} catch (e) {
|
|
80
|
+
console.log(e.toString());
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}, {
|
|
49
84
|
key: "render",
|
|
50
85
|
value: function render() {
|
|
51
|
-
var _secondary$props, _secondary$props2, _secondary$props2$chi, _secondary$props2$chi2;
|
|
52
|
-
|
|
53
86
|
var _this$props = this.props,
|
|
54
87
|
mode = _this$props.mode,
|
|
55
88
|
secondary = _this$props.secondary,
|
|
56
89
|
children = _this$props.children,
|
|
57
|
-
classes = _this$props.classes;
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
var configuration = (secondary === null || secondary === void 0 ? void 0 : (_secondary$props = secondary.props) === null || _secondary$props === void 0 ? void 0 : _secondary$props.configuration) || (secondary === null || secondary === void 0 ? void 0 : (_secondary$props2 = secondary.props) === null || _secondary$props2 === void 0 ? void 0 : (_secondary$props2$chi = _secondary$props2.children) === null || _secondary$props2$chi === void 0 ? void 0 : (_secondary$props2$chi2 = _secondary$props2$chi.props) === null || _secondary$props2$chi2 === void 0 ? void 0 : _secondary$props2$chi2.configuration) || undefined;
|
|
90
|
+
classes = _this$props.classes;
|
|
91
|
+
var configuration = this.getConfiguration();
|
|
61
92
|
var hasSettingsPanel = Object.entries(configuration || {}).some(function (_ref) {
|
|
62
93
|
var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
|
|
63
94
|
propName = _ref2[0],
|
|
@@ -80,25 +111,33 @@ var RawLayoutContents = /*#__PURE__*/function (_React$Component) {
|
|
|
80
111
|
}, mode === 'inline' && /*#__PURE__*/_react["default"].createElement("div", {
|
|
81
112
|
className: classes.flow,
|
|
82
113
|
style: {
|
|
83
|
-
maxWidth: configuration.maxWidth || 'unset'
|
|
114
|
+
maxWidth: (configuration === null || configuration === void 0 ? void 0 : configuration.maxWidth) || 'unset'
|
|
84
115
|
}
|
|
85
116
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
86
|
-
className: (0, _classnames["default"])(classes.configContainer, configuration.maxWidth && classes.contentContainerMaxWidth),
|
|
87
|
-
style: {
|
|
88
|
-
maxWidth:
|
|
89
|
-
}
|
|
117
|
+
className: (0, _classnames["default"])(classes.configContainer, (configuration === null || configuration === void 0 ? void 0 : configuration.maxWidth) && classes.contentContainerMaxWidth),
|
|
118
|
+
style: configuration !== null && configuration !== void 0 && configuration.maxWidth ? {
|
|
119
|
+
maxWidth: "calc(".concat(configuration === null || configuration === void 0 ? void 0 : configuration.maxWidth, " - ").concat(hasSettingsPanel ? '330px' : '0', ")")
|
|
120
|
+
} : {}
|
|
90
121
|
}, children), hasSettingsPanel && /*#__PURE__*/_react["default"].createElement("div", null, secondary)), mode === 'tabbed' && hasSettingsPanel && /*#__PURE__*/_react["default"].createElement(_tabs["default"], {
|
|
91
122
|
onChange: this.onTabsChange,
|
|
92
|
-
contentClassName: (0, _classnames["default"])(classes.contentContainer, configuration.maxWidth && classes.contentContainerMaxWidth),
|
|
93
|
-
contentStyle: {
|
|
94
|
-
maxWidth: configuration
|
|
95
|
-
},
|
|
123
|
+
contentClassName: (0, _classnames["default"])(classes.contentContainer, (configuration === null || configuration === void 0 ? void 0 : configuration.maxWidth) && classes.contentContainerMaxWidth),
|
|
124
|
+
contentStyle: configuration !== null && configuration !== void 0 && configuration.maxWidth ? {
|
|
125
|
+
maxWidth: configuration === null || configuration === void 0 ? void 0 : configuration.maxWidth
|
|
126
|
+
} : {},
|
|
96
127
|
indicatorColor: "primary"
|
|
97
128
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
98
|
-
title: "Design"
|
|
129
|
+
title: "Design",
|
|
130
|
+
style: configuration !== null && configuration !== void 0 && configuration.maxWidth ? {
|
|
131
|
+
flex: 1
|
|
132
|
+
} : {}
|
|
99
133
|
}, children), /*#__PURE__*/_react["default"].createElement("div", {
|
|
100
134
|
title: "settings"
|
|
101
|
-
}, secondary)), mode === 'tabbed' && !hasSettingsPanel && /*#__PURE__*/_react["default"].createElement("div",
|
|
135
|
+
}, secondary)), mode === 'tabbed' && !hasSettingsPanel && /*#__PURE__*/_react["default"].createElement("div", {
|
|
136
|
+
className: (0, _classnames["default"])((configuration === null || configuration === void 0 ? void 0 : configuration.maxWidth) && classes.contentContainerMaxWidth),
|
|
137
|
+
style: configuration !== null && configuration !== void 0 && configuration.maxWidth ? {
|
|
138
|
+
maxWidth: configuration === null || configuration === void 0 ? void 0 : configuration.maxWidth
|
|
139
|
+
} : {}
|
|
140
|
+
}, children));
|
|
102
141
|
}
|
|
103
142
|
}]);
|
|
104
143
|
return RawLayoutContents;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/layout/layout-contents.jsx"],"names":["RawLayoutContents","
|
|
1
|
+
{"version":3,"sources":["../../src/layout/layout-contents.jsx"],"names":["RawLayoutContents","secondary","props","configuration","children","undefined","prevProps","prevState","snapshot","getConfiguration","mode","maxWidth","getComputedStyle","document","documentElement","getPropertyValue","style","setProperty","e","console","log","toString","classes","hasSettingsPanel","Object","entries","some","propName","obj","settings","JSON","stringify","match","length","container","flow","configContainer","contentContainerMaxWidth","onTabsChange","contentContainer","flex","React","Component","PropTypes","oneOf","oneOfType","arrayOf","node","object","styles","display","justifyContent","flexDirection","position","padding","overflow","marginRight"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { withStyles } from '@material-ui/core';\nimport Tabs from '../tabs';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\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 };\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 } = this.props;\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={classnames(classes.container)}>\n {mode === 'inline' && (\n <div className={classes.flow} style={{ maxWidth: configuration?.maxWidth || 'unset' }}>\n <div\n className={classnames(\n classes.configContainer,\n configuration?.maxWidth && classes.contentContainerMaxWidth,\n )}\n style={configuration?.maxWidth ? { maxWidth: `calc(${configuration?.maxWidth} - ${hasSettingsPanel ? '330px' : '0'})` } : {}}\n >\n {children}\n </div>\n {hasSettingsPanel && <div>{secondary}</div>}\n </div>\n )}\n\n {mode === 'tabbed' && hasSettingsPanel && (\n <Tabs\n onChange={this.onTabsChange}\n contentClassName={classnames(\n classes.contentContainer,\n configuration?.maxWidth && classes.contentContainerMaxWidth,\n )}\n contentStyle={configuration?.maxWidth ? { maxWidth: configuration?.maxWidth } : {}}\n indicatorColor=\"primary\"\n >\n <div title=\"Design\" style={configuration?.maxWidth ? { flex: 1 } : {}}>\n {children}\n </div>\n <div title=\"settings\">{secondary}</div>\n </Tabs>\n )}\n\n {mode === 'tabbed' && !hasSettingsPanel && (\n <div\n className={classnames(configuration?.maxWidth && classes.contentContainerMaxWidth)}\n style={configuration?.maxWidth ? { maxWidth: configuration?.maxWidth } : {}}\n >\n {children}\n </div>\n )}\n </div>\n );\n }\n}\n\nconst styles = () => ({\n flow: {\n display: 'flex',\n justifyContent: 'space-between',\n },\n container: {\n display: 'flex',\n flexDirection: 'column',\n position: 'relative',\n },\n contentContainer: {\n padding: '32px 16px 0 16px',\n },\n contentContainerMaxWidth: {\n display: 'flex',\n overflow: 'scroll',\n },\n configContainer: {\n flex: '1',\n marginRight: '20px',\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.1.5-next.
|
|
3
|
+
"version": "11.1.5-next.21+f5ad8612",
|
|
4
4
|
"main": "lib/index.js",
|
|
5
5
|
"module": "src/index.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -26,5 +26,5 @@
|
|
|
26
26
|
"peerDependencies": {
|
|
27
27
|
"react": "^16.8.1"
|
|
28
28
|
},
|
|
29
|
-
"gitHead": "
|
|
29
|
+
"gitHead": "f5ad86122759378b6123af5912fa278c7a3db421"
|
|
30
30
|
}
|
|
@@ -7,21 +7,21 @@ import SettingsBox from './settings-box';
|
|
|
7
7
|
class ConfigLayout extends React.Component {
|
|
8
8
|
static propTypes = {
|
|
9
9
|
children: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.element), PropTypes.element]),
|
|
10
|
-
settings: PropTypes.element,
|
|
11
10
|
className: PropTypes.string,
|
|
12
11
|
classes: PropTypes.object,
|
|
12
|
+
settings: PropTypes.element,
|
|
13
13
|
sidePanelMinWidth: PropTypes.number,
|
|
14
|
+
hideSettings: PropTypes.bool,
|
|
14
15
|
};
|
|
15
16
|
|
|
16
17
|
static defaultProps = {
|
|
17
18
|
sidePanelMinWidth: 950,
|
|
19
|
+
hideSettings: false,
|
|
18
20
|
};
|
|
19
21
|
|
|
20
22
|
constructor(props) {
|
|
21
23
|
super(props);
|
|
22
|
-
this.state = {
|
|
23
|
-
layoutMode: undefined,
|
|
24
|
-
};
|
|
24
|
+
this.state = { layoutMode: undefined };
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
onResize = (contentRect) => {
|
|
@@ -36,15 +36,15 @@ class ConfigLayout extends React.Component {
|
|
|
36
36
|
return (
|
|
37
37
|
<Measure bounds onResize={this.onResize}>
|
|
38
38
|
{({ measureRef }) => {
|
|
39
|
-
const { settings,
|
|
39
|
+
const { children, settings, hideSettings } = this.props;
|
|
40
40
|
const { layoutMode } = this.state;
|
|
41
41
|
|
|
42
|
+
const settingsPanel = layoutMode === 'inline' ? <SettingsBox>{settings}</SettingsBox> : settings;
|
|
43
|
+
const secondaryContent = hideSettings ? null : settingsPanel;
|
|
44
|
+
|
|
42
45
|
return (
|
|
43
46
|
<div ref={measureRef}>
|
|
44
|
-
<LayoutContents
|
|
45
|
-
mode={layoutMode}
|
|
46
|
-
secondary={layoutMode === 'inline' ? <SettingsBox>{settings}</SettingsBox> : settings}
|
|
47
|
-
>
|
|
47
|
+
<LayoutContents mode={layoutMode} secondary={secondaryContent}>
|
|
48
48
|
{children}
|
|
49
49
|
</LayoutContents>
|
|
50
50
|
</div>
|
|
@@ -12,12 +12,42 @@ class RawLayoutContents extends React.Component {
|
|
|
12
12
|
classes: PropTypes.object,
|
|
13
13
|
};
|
|
14
14
|
|
|
15
|
+
getConfiguration = () => {
|
|
16
|
+
const { secondary } = this.props;
|
|
17
|
+
// in config-layout, secondary can be: <SettingsBox>{settings}</SettingsBox>, settings, null
|
|
18
|
+
|
|
19
|
+
return secondary?.props?.configuration || secondary?.props?.children?.props?.configuration || undefined;
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
// eslint-disable-next-line no-unused-vars
|
|
23
|
+
componentDidUpdate(prevProps, prevState, snapshot) {
|
|
24
|
+
const configuration = this.getConfiguration();
|
|
25
|
+
const { mode } = this.props;
|
|
26
|
+
|
|
27
|
+
// promptHolder class is used to wrap up inputs:
|
|
28
|
+
// we don't want inputs to fill the entire scrollable container,
|
|
29
|
+
// but instead we want inputs to fit in the first view,
|
|
30
|
+
// so we calculate the maximum space inputs need
|
|
31
|
+
try {
|
|
32
|
+
if (
|
|
33
|
+
configuration?.maxWidth &&
|
|
34
|
+
getComputedStyle(document.documentElement).getPropertyValue('--pie-prompt-holder-max-width') !==
|
|
35
|
+
configuration?.maxWidth
|
|
36
|
+
) {
|
|
37
|
+
document.documentElement.style.setProperty(
|
|
38
|
+
'--pie-prompt-holder-max-width',
|
|
39
|
+
mode === 'inline' ? `calc(${configuration.maxWidth} - 340px)` : configuration.maxWidth,
|
|
40
|
+
);
|
|
41
|
+
}
|
|
42
|
+
} catch (e) {
|
|
43
|
+
console.log(e.toString());
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
15
47
|
render() {
|
|
16
48
|
const { mode, secondary, children, classes } = this.props;
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
const configuration =
|
|
20
|
-
secondary?.props?.configuration || secondary?.props?.children?.props?.configuration || undefined;
|
|
49
|
+
const configuration = this.getConfiguration();
|
|
50
|
+
|
|
21
51
|
let hasSettingsPanel = Object.entries(configuration || {}).some(([propName, obj]) => !!obj?.settings);
|
|
22
52
|
// ebsr has configuration.partA and configuration.partB
|
|
23
53
|
// because we might have nested configuration for other item types as well, let's add this simple regex to check values for settings
|
|
@@ -33,34 +63,45 @@ class RawLayoutContents extends React.Component {
|
|
|
33
63
|
return (
|
|
34
64
|
<div className={classnames(classes.container)}>
|
|
35
65
|
{mode === 'inline' && (
|
|
36
|
-
<div className={classes.flow} style={{ maxWidth: configuration
|
|
66
|
+
<div className={classes.flow} style={{ maxWidth: configuration?.maxWidth || 'unset' }}>
|
|
37
67
|
<div
|
|
38
68
|
className={classnames(
|
|
39
69
|
classes.configContainer,
|
|
40
|
-
configuration
|
|
70
|
+
configuration?.maxWidth && classes.contentContainerMaxWidth,
|
|
41
71
|
)}
|
|
42
|
-
style={{ maxWidth:
|
|
72
|
+
style={configuration?.maxWidth ? { maxWidth: `calc(${configuration?.maxWidth} - ${hasSettingsPanel ? '330px' : '0'})` } : {}}
|
|
43
73
|
>
|
|
44
74
|
{children}
|
|
45
75
|
</div>
|
|
46
76
|
{hasSettingsPanel && <div>{secondary}</div>}
|
|
47
77
|
</div>
|
|
48
78
|
)}
|
|
79
|
+
|
|
49
80
|
{mode === 'tabbed' && hasSettingsPanel && (
|
|
50
81
|
<Tabs
|
|
51
82
|
onChange={this.onTabsChange}
|
|
52
83
|
contentClassName={classnames(
|
|
53
84
|
classes.contentContainer,
|
|
54
|
-
configuration
|
|
85
|
+
configuration?.maxWidth && classes.contentContainerMaxWidth,
|
|
55
86
|
)}
|
|
56
|
-
contentStyle={{ maxWidth: configuration
|
|
87
|
+
contentStyle={configuration?.maxWidth ? { maxWidth: configuration?.maxWidth } : {}}
|
|
57
88
|
indicatorColor="primary"
|
|
58
89
|
>
|
|
59
|
-
<div title="Design"
|
|
90
|
+
<div title="Design" style={configuration?.maxWidth ? { flex: 1 } : {}}>
|
|
91
|
+
{children}
|
|
92
|
+
</div>
|
|
60
93
|
<div title="settings">{secondary}</div>
|
|
61
94
|
</Tabs>
|
|
62
95
|
)}
|
|
63
|
-
|
|
96
|
+
|
|
97
|
+
{mode === 'tabbed' && !hasSettingsPanel && (
|
|
98
|
+
<div
|
|
99
|
+
className={classnames(configuration?.maxWidth && classes.contentContainerMaxWidth)}
|
|
100
|
+
style={configuration?.maxWidth ? { maxWidth: configuration?.maxWidth } : {}}
|
|
101
|
+
>
|
|
102
|
+
{children}
|
|
103
|
+
</div>
|
|
104
|
+
)}
|
|
64
105
|
</div>
|
|
65
106
|
);
|
|
66
107
|
}
|