@pie-lib/config-ui 11.1.5-next.0 → 11.1.5-next.13
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.
|
@@ -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,53 @@ 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, layout content gets called like this:
|
|
59
|
+
// <LayoutContents secondary={layoutMode === 'inline' ? <SettingsBox>{settings}</SettingsBox> : settings}>
|
|
60
|
+
|
|
61
|
+
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;
|
|
62
|
+
});
|
|
63
|
+
return _this;
|
|
46
64
|
}
|
|
47
65
|
|
|
48
66
|
(0, _createClass2["default"])(RawLayoutContents, [{
|
|
67
|
+
key: "componentDidUpdate",
|
|
68
|
+
value: // eslint-disable-next-line no-unused-vars
|
|
69
|
+
function componentDidUpdate(prevProps, prevState, snapshot) {
|
|
70
|
+
var configuration = this.getConfiguration();
|
|
71
|
+
var mode = this.props.mode; // promptHolder class is used to wrap up inputs:
|
|
72
|
+
// we don't want inputs to fill the entire scrollable container,
|
|
73
|
+
// but instead we want inputs to fit in the first view,
|
|
74
|
+
// so we calculate the maximum space inputs need
|
|
75
|
+
|
|
76
|
+
try {
|
|
77
|
+
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)) {
|
|
78
|
+
document.documentElement.style.setProperty('--pie-prompt-holder-max-width', mode === 'inline' ? "calc(".concat(configuration.maxWidth, " - 340px)") : configuration.maxWidth);
|
|
79
|
+
}
|
|
80
|
+
} catch (e) {
|
|
81
|
+
console.log(e.toString());
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}, {
|
|
49
85
|
key: "render",
|
|
50
86
|
value: function render() {
|
|
51
|
-
var _secondary$props, _secondary$props2, _secondary$props2$chi, _secondary$props2$chi2;
|
|
52
|
-
|
|
53
87
|
var _this$props = this.props,
|
|
54
88
|
mode = _this$props.mode,
|
|
55
89
|
secondary = _this$props.secondary,
|
|
56
90
|
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;
|
|
91
|
+
classes = _this$props.classes;
|
|
92
|
+
var configuration = this.getConfiguration();
|
|
61
93
|
var hasSettingsPanel = Object.entries(configuration || {}).some(function (_ref) {
|
|
62
94
|
var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
|
|
63
95
|
propName = _ref2[0],
|
|
@@ -78,18 +110,34 @@ var RawLayoutContents = /*#__PURE__*/function (_React$Component) {
|
|
|
78
110
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
79
111
|
className: (0, _classnames["default"])(classes.container)
|
|
80
112
|
}, mode === 'inline' && /*#__PURE__*/_react["default"].createElement("div", {
|
|
81
|
-
className: classes.flow
|
|
113
|
+
className: classes.flow,
|
|
114
|
+
style: {
|
|
115
|
+
maxWidth: (configuration === null || configuration === void 0 ? void 0 : configuration.maxWidth) || 'unset'
|
|
116
|
+
}
|
|
82
117
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
83
|
-
className: classes.configContainer
|
|
118
|
+
className: (0, _classnames["default"])(classes.configContainer, (configuration === null || configuration === void 0 ? void 0 : configuration.maxWidth) && classes.contentContainerMaxWidth),
|
|
119
|
+
style: configuration !== null && configuration !== void 0 && configuration.maxWidth ? {
|
|
120
|
+
maxWidth: "calc(".concat(configuration === null || configuration === void 0 ? void 0 : configuration.maxWidth, " - 330px)")
|
|
121
|
+
} : {}
|
|
84
122
|
}, children), hasSettingsPanel && /*#__PURE__*/_react["default"].createElement("div", null, secondary)), mode === 'tabbed' && hasSettingsPanel && /*#__PURE__*/_react["default"].createElement(_tabs["default"], {
|
|
85
123
|
onChange: this.onTabsChange,
|
|
86
|
-
contentClassName: classes.contentContainer,
|
|
124
|
+
contentClassName: (0, _classnames["default"])(classes.contentContainer, (configuration === null || configuration === void 0 ? void 0 : configuration.maxWidth) && classes.contentContainerMaxWidth),
|
|
125
|
+
contentStyle: configuration !== null && configuration !== void 0 && configuration.maxWidth ? {
|
|
126
|
+
maxWidth: configuration === null || configuration === void 0 ? void 0 : configuration.maxWidth
|
|
127
|
+
} : {},
|
|
87
128
|
indicatorColor: "primary"
|
|
88
129
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
89
|
-
title: "Design"
|
|
130
|
+
title: "Design",
|
|
131
|
+
style: configuration !== null && configuration !== void 0 && configuration.maxWidth ? {
|
|
132
|
+
flex: 1
|
|
133
|
+
} : {}
|
|
90
134
|
}, children), /*#__PURE__*/_react["default"].createElement("div", {
|
|
91
135
|
title: "settings"
|
|
92
|
-
}, secondary)), mode === 'tabbed' && !hasSettingsPanel && /*#__PURE__*/_react["default"].createElement("div",
|
|
136
|
+
}, secondary)), mode === 'tabbed' && !hasSettingsPanel && /*#__PURE__*/_react["default"].createElement("div", {
|
|
137
|
+
style: configuration !== null && configuration !== void 0 && configuration.maxWidth ? {
|
|
138
|
+
maxWidth: configuration === null || configuration === void 0 ? void 0 : configuration.maxWidth
|
|
139
|
+
} : {}
|
|
140
|
+
}, children));
|
|
93
141
|
}
|
|
94
142
|
}]);
|
|
95
143
|
return RawLayoutContents;
|
|
@@ -116,6 +164,10 @@ var styles = function styles() {
|
|
|
116
164
|
contentContainer: {
|
|
117
165
|
padding: '32px 16px 0 16px'
|
|
118
166
|
},
|
|
167
|
+
contentContainerMaxWidth: {
|
|
168
|
+
display: 'flex',
|
|
169
|
+
overflow: 'scroll'
|
|
170
|
+
},
|
|
119
171
|
configContainer: {
|
|
120
172
|
flex: '1',
|
|
121
173
|
marginRight: '20px'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/layout/layout-contents.jsx"],"names":["RawLayoutContents","props","mode","
|
|
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, layout content gets called like this:\n // <LayoutContents secondary={layoutMode === 'inline' ? <SettingsBox>{settings}</SettingsBox> : settings}>\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} - 330px)` } : {}}\n >\n {children}\n </div>\n {hasSettingsPanel && <div>{secondary}</div>}\n </div>\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 {mode === 'tabbed' && !hasSettingsPanel && (\n <div style={configuration?.maxWidth ? { maxWidth: configuration?.maxWidth } : {}}>{children}</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/lib/tabs/index.js
CHANGED
|
@@ -64,6 +64,7 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
|
|
|
64
64
|
children = _this$props.children,
|
|
65
65
|
className = _this$props.className,
|
|
66
66
|
contentClassName = _this$props.contentClassName,
|
|
67
|
+
contentStyle = _this$props.contentStyle,
|
|
67
68
|
classes = _this$props.classes;
|
|
68
69
|
var tabClasses = {
|
|
69
70
|
root: classes.tabRoot
|
|
@@ -81,7 +82,8 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
|
|
|
81
82
|
label: c.props.title
|
|
82
83
|
}) : null;
|
|
83
84
|
})), /*#__PURE__*/_react["default"].createElement("div", {
|
|
84
|
-
className: contentClassName
|
|
85
|
+
className: contentClassName,
|
|
86
|
+
style: contentStyle
|
|
85
87
|
}, children[value]));
|
|
86
88
|
}
|
|
87
89
|
}]);
|
|
@@ -93,6 +95,7 @@ exports.Tabs = Tabs;
|
|
|
93
95
|
classes: _propTypes["default"].object,
|
|
94
96
|
className: _propTypes["default"].string,
|
|
95
97
|
contentClassName: _propTypes["default"].string,
|
|
98
|
+
contentStyle: _propTypes["default"].object,
|
|
96
99
|
children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired
|
|
97
100
|
});
|
|
98
101
|
|
package/lib/tabs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/tabs/index.jsx"],"names":["Tabs","props","event","value","setState","state","children","className","contentClassName","classes","tabClasses","root","tabRoot","handleChange","React","Children","map","c","index","title","Component","PropTypes","object","string","oneOfType","arrayOf","node","isRequired"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;;;;;IAEaA,I;;;;;
|
|
1
|
+
{"version":3,"sources":["../../src/tabs/index.jsx"],"names":["Tabs","props","event","value","setState","state","children","className","contentClassName","contentStyle","classes","tabClasses","root","tabRoot","handleChange","React","Children","map","c","index","title","Component","PropTypes","object","string","oneOfType","arrayOf","node","isRequired"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;;;;;IAEaA,I;;;;;AASX,gBAAYC,KAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,KAAN;AADiB,qGAOJ,UAACC,KAAD,EAAQC,KAAR,EAAkB;AAC/B,YAAKC,QAAL,CAAc;AAAED,QAAAA,KAAK,EAALA;AAAF,OAAd;AACD,KATkB;AAEjB,UAAKE,KAAL,GAAa;AACXF,MAAAA,KAAK,EAAE;AADI,KAAb;AAFiB;AAKlB;;;;WAMD,kBAAS;AACP,UAAQA,KAAR,GAAkB,KAAKE,KAAvB,CAAQF,KAAR;AACA,wBAAyE,KAAKF,KAA9E;AAAA,UAAQK,QAAR,eAAQA,QAAR;AAAA,UAAkBC,SAAlB,eAAkBA,SAAlB;AAAA,UAA6BC,gBAA7B,eAA6BA,gBAA7B;AAAA,UAA+CC,YAA/C,eAA+CA,YAA/C;AAAA,UAA6DC,OAA7D,eAA6DA,OAA7D;AAEA,UAAMC,UAAU,GAAG;AACjBC,QAAAA,IAAI,EAAEF,OAAO,CAACG;AADG,OAAnB;AAGA,0BACE;AAAK,QAAA,SAAS,EAAEN;AAAhB,sBACE,gCAAC,gBAAD;AAAS,QAAA,cAAc,EAAC,SAAxB;AAAkC,QAAA,KAAK,EAAEJ,KAAzC;AAAgD,QAAA,QAAQ,EAAE,KAAKW;AAA/D,SACGC,kBAAMC,QAAN,CAAeC,GAAf,CAAmBX,QAAnB,EAA6B,UAACY,CAAD,EAAIC,KAAJ;AAAA,eAC5BD,CAAC,IAAIA,CAAC,CAACjB,KAAF,CAAQmB,KAAb,gBAAqB,gCAAC,eAAD;AAAQ,UAAA,OAAO,EAAET,UAAjB;AAA6B,UAAA,GAAG,EAAEQ,KAAlC;AAAyC,UAAA,KAAK,EAAED,CAAC,CAACjB,KAAF,CAAQmB;AAAxD,UAArB,GAAyF,IAD7D;AAAA,OAA7B,CADH,CADF,eAME;AAAK,QAAA,SAAS,EAAEZ,gBAAhB;AAAkC,QAAA,KAAK,EAAEC;AAAzC,SACGH,QAAQ,CAACH,KAAD,CADX,CANF,CADF;AAYD;;;EAvCuBY,kBAAMM,S;;;iCAAnBrB,I,eACQ;AACjBU,EAAAA,OAAO,EAAEY,sBAAUC,MADF;AAEjBhB,EAAAA,SAAS,EAAEe,sBAAUE,MAFJ;AAGjBhB,EAAAA,gBAAgB,EAAEc,sBAAUE,MAHX;AAIjBf,EAAAA,YAAY,EAAEa,sBAAUC,MAJP;AAKjBjB,EAAAA,QAAQ,EAAEgB,sBAAUG,SAAV,CAAoB,CAACH,sBAAUI,OAAV,CAAkBJ,sBAAUK,IAA5B,CAAD,EAAoCL,sBAAUK,IAA9C,CAApB,EAAyEC;AALlE,C;;eAyCN,sBAAW;AAAA,SAAO;AAC/Bf,IAAAA,OAAO,EAAE;AADsB,GAAP;AAAA,CAAX,EAEXb,IAFW,C","sourcesContent":["import React from 'react';\n\nimport MuiTabs from '@material-ui/core/Tabs';\nimport MuiTab from '@material-ui/core/Tab';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core';\n\nexport class Tabs extends React.Component {\n static propTypes = {\n classes: PropTypes.object,\n className: PropTypes.string,\n contentClassName: PropTypes.string,\n contentStyle: PropTypes.object,\n children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n };\n\n constructor(props) {\n super(props);\n this.state = {\n value: 0,\n };\n }\n\n handleChange = (event, value) => {\n this.setState({ value });\n };\n\n render() {\n const { value } = this.state;\n const { children, className, contentClassName, contentStyle, classes } = this.props;\n\n const tabClasses = {\n root: classes.tabRoot,\n };\n return (\n <div className={className}>\n <MuiTabs indicatorColor=\"primary\" value={value} onChange={this.handleChange}>\n {React.Children.map(children, (c, index) =>\n c && c.props.title ? <MuiTab classes={tabClasses} key={index} label={c.props.title} /> : null,\n )}\n </MuiTabs>\n <div className={contentClassName} style={contentStyle}>\n {children[value]}\n </div>\n </div>\n );\n }\n}\n\nexport default withStyles(() => ({\n tabRoot: {},\n}))(Tabs);\n"],"file":"index.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.13+6071e065",
|
|
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": "6071e06578e26b006549147802193fa4a8632e49"
|
|
30
30
|
}
|
|
@@ -12,12 +12,43 @@ class RawLayoutContents extends React.Component {
|
|
|
12
12
|
classes: PropTypes.object,
|
|
13
13
|
};
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
const {
|
|
15
|
+
getConfiguration = () => {
|
|
16
|
+
const { secondary } = this.props;
|
|
17
17
|
// in config-layout, layout content gets called like this:
|
|
18
18
|
// <LayoutContents secondary={layoutMode === 'inline' ? <SettingsBox>{settings}</SettingsBox> : settings}>
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
|
|
20
|
+
return secondary?.props?.configuration || secondary?.props?.children?.props?.configuration || undefined;
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
// eslint-disable-next-line no-unused-vars
|
|
24
|
+
componentDidUpdate(prevProps, prevState, snapshot) {
|
|
25
|
+
const configuration = this.getConfiguration();
|
|
26
|
+
const { mode } = this.props;
|
|
27
|
+
|
|
28
|
+
// promptHolder class is used to wrap up inputs:
|
|
29
|
+
// we don't want inputs to fill the entire scrollable container,
|
|
30
|
+
// but instead we want inputs to fit in the first view,
|
|
31
|
+
// so we calculate the maximum space inputs need
|
|
32
|
+
try {
|
|
33
|
+
if (
|
|
34
|
+
configuration?.maxWidth &&
|
|
35
|
+
getComputedStyle(document.documentElement).getPropertyValue('--pie-prompt-holder-max-width') !==
|
|
36
|
+
configuration?.maxWidth
|
|
37
|
+
) {
|
|
38
|
+
document.documentElement.style.setProperty(
|
|
39
|
+
'--pie-prompt-holder-max-width',
|
|
40
|
+
mode === 'inline' ? `calc(${configuration.maxWidth} - 340px)` : configuration.maxWidth,
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
} catch (e) {
|
|
44
|
+
console.log(e.toString());
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
render() {
|
|
49
|
+
const { mode, secondary, children, classes } = this.props;
|
|
50
|
+
const configuration = this.getConfiguration();
|
|
51
|
+
|
|
21
52
|
let hasSettingsPanel = Object.entries(configuration || {}).some(([propName, obj]) => !!obj?.settings);
|
|
22
53
|
// ebsr has configuration.partA and configuration.partB
|
|
23
54
|
// because we might have nested configuration for other item types as well, let's add this simple regex to check values for settings
|
|
@@ -33,18 +64,38 @@ class RawLayoutContents extends React.Component {
|
|
|
33
64
|
return (
|
|
34
65
|
<div className={classnames(classes.container)}>
|
|
35
66
|
{mode === 'inline' && (
|
|
36
|
-
<div className={classes.flow}>
|
|
37
|
-
<div
|
|
67
|
+
<div className={classes.flow} style={{ maxWidth: configuration?.maxWidth || 'unset' }}>
|
|
68
|
+
<div
|
|
69
|
+
className={classnames(
|
|
70
|
+
classes.configContainer,
|
|
71
|
+
configuration?.maxWidth && classes.contentContainerMaxWidth,
|
|
72
|
+
)}
|
|
73
|
+
style={configuration?.maxWidth ? { maxWidth: `calc(${configuration?.maxWidth} - 330px)` } : {}}
|
|
74
|
+
>
|
|
75
|
+
{children}
|
|
76
|
+
</div>
|
|
38
77
|
{hasSettingsPanel && <div>{secondary}</div>}
|
|
39
78
|
</div>
|
|
40
79
|
)}
|
|
41
80
|
{mode === 'tabbed' && hasSettingsPanel && (
|
|
42
|
-
<Tabs
|
|
43
|
-
|
|
81
|
+
<Tabs
|
|
82
|
+
onChange={this.onTabsChange}
|
|
83
|
+
contentClassName={classnames(
|
|
84
|
+
classes.contentContainer,
|
|
85
|
+
configuration?.maxWidth && classes.contentContainerMaxWidth,
|
|
86
|
+
)}
|
|
87
|
+
contentStyle={configuration?.maxWidth ? { maxWidth: configuration?.maxWidth } : {}}
|
|
88
|
+
indicatorColor="primary"
|
|
89
|
+
>
|
|
90
|
+
<div title="Design" style={configuration?.maxWidth ? { flex: 1 } : {}}>
|
|
91
|
+
{children}
|
|
92
|
+
</div>
|
|
44
93
|
<div title="settings">{secondary}</div>
|
|
45
94
|
</Tabs>
|
|
46
95
|
)}
|
|
47
|
-
{mode === 'tabbed' && !hasSettingsPanel &&
|
|
96
|
+
{mode === 'tabbed' && !hasSettingsPanel && (
|
|
97
|
+
<div style={configuration?.maxWidth ? { maxWidth: configuration?.maxWidth } : {}}>{children}</div>
|
|
98
|
+
)}
|
|
48
99
|
</div>
|
|
49
100
|
);
|
|
50
101
|
}
|
|
@@ -63,6 +114,10 @@ const styles = () => ({
|
|
|
63
114
|
contentContainer: {
|
|
64
115
|
padding: '32px 16px 0 16px',
|
|
65
116
|
},
|
|
117
|
+
contentContainerMaxWidth: {
|
|
118
|
+
display: 'flex',
|
|
119
|
+
overflow: 'scroll',
|
|
120
|
+
},
|
|
66
121
|
configContainer: {
|
|
67
122
|
flex: '1',
|
|
68
123
|
marginRight: '20px',
|
package/src/tabs/index.jsx
CHANGED
|
@@ -10,6 +10,7 @@ export class Tabs extends React.Component {
|
|
|
10
10
|
classes: PropTypes.object,
|
|
11
11
|
className: PropTypes.string,
|
|
12
12
|
contentClassName: PropTypes.string,
|
|
13
|
+
contentStyle: PropTypes.object,
|
|
13
14
|
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
|
|
14
15
|
};
|
|
15
16
|
|
|
@@ -26,7 +27,7 @@ export class Tabs extends React.Component {
|
|
|
26
27
|
|
|
27
28
|
render() {
|
|
28
29
|
const { value } = this.state;
|
|
29
|
-
const { children, className, contentClassName, classes } = this.props;
|
|
30
|
+
const { children, className, contentClassName, contentStyle, classes } = this.props;
|
|
30
31
|
|
|
31
32
|
const tabClasses = {
|
|
32
33
|
root: classes.tabRoot,
|
|
@@ -38,7 +39,9 @@ export class Tabs extends React.Component {
|
|
|
38
39
|
c && c.props.title ? <MuiTab classes={tabClasses} key={index} label={c.props.title} /> : null,
|
|
39
40
|
)}
|
|
40
41
|
</MuiTabs>
|
|
41
|
-
<div className={contentClassName}
|
|
42
|
+
<div className={contentClassName} style={contentStyle}>
|
|
43
|
+
{children[value]}
|
|
44
|
+
</div>
|
|
42
45
|
</div>
|
|
43
46
|
);
|
|
44
47
|
}
|