@pie-lib/config-ui 11.1.5-next.6 → 11.2.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 +24 -0
- package/lib/layout/config-layout.js +10 -5
- package/lib/layout/config-layout.js.map +1 -1
- package/lib/layout/layout-contents.js +48 -28
- package/lib/layout/layout-contents.js.map +1 -1
- package/lib/tabs/index.js +2 -1
- package/lib/tabs/index.js.map +1 -1
- package/package.json +3 -3
- package/src/layout/config-layout.jsx +9 -9
- package/src/layout/layout-contents.jsx +38 -33
- package/src/tabs/index.jsx +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,30 @@
|
|
|
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.2.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/config-ui@11.1.4...@pie-lib/config-ui@11.2.0) (2023-01-03)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* if Settings Panel disabled, do not remove the extra space PD-2425 ([de342d4](https://github.com/pie-framework/pie-lib/commit/de342d428ab9cf66f7cf8a60fbf34f4e5fc88324))
|
|
12
|
+
* revert changes for PD-2425 ([f032823](https://github.com/pie-framework/pie-lib/commit/f0328231bc0673607a0a157fc71fefe0e48f8a7f))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### Features
|
|
16
|
+
|
|
17
|
+
* add maxWidth (overflow scroll) when there's no Settings Panel PD-2425 ([66f1f78](https://github.com/pie-framework/pie-lib/commit/66f1f7890dfa113d8e753fc0f89bd9b10d39ea7c))
|
|
18
|
+
* add maxWidth when there's no Settings Panel PD-2425 ([8fbd0e5](https://github.com/pie-framework/pie-lib/commit/8fbd0e5c0f4064f8b06fb1606171ffe22a30f5c5))
|
|
19
|
+
* **config-ui:** added support to hide the settings pannel PD-1999 ([7ae0140](https://github.com/pie-framework/pie-lib/commit/7ae0140b99fc65d116c1bcb926eb26c17bae42f8))
|
|
20
|
+
* Ability to set max width - make inputs fit PD-2425 ([0621e5e](https://github.com/pie-framework/pie-lib/commit/0621e5e13de530901a4e4a3d0857010413b2f407))
|
|
21
|
+
* Ability to set max width PD-2425 ([fb29ca6](https://github.com/pie-framework/pie-lib/commit/fb29ca6b12f1e4a782787354d0f09f07fd58ef2f))
|
|
22
|
+
* Ability to set max width PD-2425 ([1c047e7](https://github.com/pie-framework/pie-lib/commit/1c047e79b2aead911e316482852a785ffd562f9e))
|
|
23
|
+
* Ability to set max width PD-2425 ([cf569bc](https://github.com/pie-framework/pie-lib/commit/cf569bcc2b0da51f295017a8c7588d0fbebbe803))
|
|
24
|
+
* Ability to set maxWidth to an item PD-2425 ([703b5a8](https://github.com/pie-framework/pie-lib/commit/703b5a8dc5ecd80a71fbe3f40897006bb6dd7246))
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
6
30
|
## [11.1.4](https://github.com/pie-framework/pie-lib/compare/@pie-lib/config-ui@11.1.3...@pie-lib/config-ui@11.1.4) (2022-12-21)
|
|
7
31
|
|
|
8
32
|
|
|
@@ -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,58 @@ 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, [{
|
|
49
66
|
key: "render",
|
|
50
|
-
value:
|
|
51
|
-
|
|
52
|
-
|
|
67
|
+
value: // // eslint-disable-next-line no-unused-vars
|
|
68
|
+
// componentDidUpdate(prevProps, prevState, snapshot) {
|
|
69
|
+
// const configuration = this.getConfiguration();
|
|
70
|
+
// const { mode } = this.props;
|
|
71
|
+
//
|
|
72
|
+
// // promptHolder class is used to wrap up inputs:
|
|
73
|
+
// // we don't want inputs to fill the entire scrollable container,
|
|
74
|
+
// // but instead we want inputs to fit in the first view,
|
|
75
|
+
// // so we calculate the maximum space inputs need
|
|
76
|
+
// try {
|
|
77
|
+
// if (
|
|
78
|
+
// configuration?.maxWidth &&
|
|
79
|
+
// getComputedStyle(document.documentElement).getPropertyValue('--pie-prompt-holder-max-width') !==
|
|
80
|
+
// configuration?.maxWidth
|
|
81
|
+
// ) {
|
|
82
|
+
// document.documentElement.style.setProperty(
|
|
83
|
+
// '--pie-prompt-holder-max-width',
|
|
84
|
+
// mode === 'inline' ? `calc(${configuration.maxWidth} - 340px)` : configuration.maxWidth,
|
|
85
|
+
// );
|
|
86
|
+
// }
|
|
87
|
+
// } catch (e) {
|
|
88
|
+
// console.log(e.toString());
|
|
89
|
+
// }
|
|
90
|
+
// }
|
|
91
|
+
function render() {
|
|
53
92
|
var _this$props = this.props,
|
|
54
93
|
mode = _this$props.mode,
|
|
55
94
|
secondary = _this$props.secondary,
|
|
56
95
|
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;
|
|
96
|
+
classes = _this$props.classes;
|
|
97
|
+
var configuration = this.getConfiguration();
|
|
61
98
|
var hasSettingsPanel = Object.entries(configuration || {}).some(function (_ref) {
|
|
62
99
|
var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
|
|
63
100
|
propName = _ref2[0],
|
|
@@ -78,24 +115,14 @@ var RawLayoutContents = /*#__PURE__*/function (_React$Component) {
|
|
|
78
115
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
79
116
|
className: (0, _classnames["default"])(classes.container)
|
|
80
117
|
}, mode === 'inline' && /*#__PURE__*/_react["default"].createElement("div", {
|
|
81
|
-
className: classes.flow
|
|
82
|
-
style: {
|
|
83
|
-
maxWidth: configuration.maxWidth || 'unset'
|
|
84
|
-
}
|
|
118
|
+
className: classes.flow
|
|
85
119
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
86
|
-
className:
|
|
87
|
-
style: {
|
|
88
|
-
maxWidth: configuration.maxWidth ? "calc(".concat(configuration.maxWidth, " - 330px)") : 'unset'
|
|
89
|
-
}
|
|
120
|
+
className: classes.configContainer
|
|
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:
|
|
93
|
-
contentStyle: {
|
|
94
|
-
maxWidth: configuration.maxWidth || 'unset'
|
|
95
|
-
},
|
|
123
|
+
contentClassName: classes.contentContainer,
|
|
96
124
|
indicatorColor: "primary"
|
|
97
125
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
98
|
-
className: classes.contentContainerDesign,
|
|
99
126
|
title: "Design"
|
|
100
127
|
}, children), /*#__PURE__*/_react["default"].createElement("div", {
|
|
101
128
|
title: "settings"
|
|
@@ -126,16 +153,9 @@ var styles = function styles() {
|
|
|
126
153
|
contentContainer: {
|
|
127
154
|
padding: '32px 16px 0 16px'
|
|
128
155
|
},
|
|
129
|
-
contentContainerMaxWidth: {
|
|
130
|
-
display: 'flex',
|
|
131
|
-
overflow: 'scroll'
|
|
132
|
-
},
|
|
133
156
|
configContainer: {
|
|
134
157
|
flex: '1',
|
|
135
158
|
marginRight: '20px'
|
|
136
|
-
},
|
|
137
|
-
contentContainerDesign: {
|
|
138
|
-
width: '100%'
|
|
139
159
|
}
|
|
140
160
|
};
|
|
141
161
|
};
|
|
@@ -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","mode","classes","getConfiguration","hasSettingsPanel","Object","entries","some","propName","obj","settings","JSON","stringify","match","length","e","console","log","toString","container","flow","configContainer","onTabsChange","contentContainer","React","Component","PropTypes","oneOf","oneOfType","arrayOf","node","object","styles","display","justifyContent","flexDirection","position","padding","flex","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}>\n <div className={classes.configContainer}>{children}</div>\n {hasSettingsPanel && <div>{secondary}</div>}\n </div>\n )}\n {mode === 'tabbed' && hasSettingsPanel && (\n <Tabs onChange={this.onTabsChange} contentClassName={classes.contentContainer} indicatorColor=\"primary\">\n <div title=\"Design\">{children}</div>\n <div title=\"settings\">{secondary}</div>\n </Tabs>\n )}\n {mode === 'tabbed' && !hasSettingsPanel && <div>{children}</div>}\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 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,7 +64,8 @@ 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
|
-
|
|
67
|
+
_this$props$contentSt = _this$props.contentStyle,
|
|
68
|
+
contentStyle = _this$props$contentSt === void 0 ? {} : _this$props$contentSt,
|
|
68
69
|
classes = _this$props.classes;
|
|
69
70
|
var tabClasses = {
|
|
70
71
|
root: classes.tabRoot
|
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","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,
|
|
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,wBAA8E,KAAKF,KAAnF;AAAA,UAAQK,QAAR,eAAQA,QAAR;AAAA,UAAkBC,SAAlB,eAAkBA,SAAlB;AAAA,UAA6BC,gBAA7B,eAA6BA,gBAA7B;AAAA,8CAA+CC,YAA/C;AAAA,UAA+CA,YAA/C,sCAA8D,EAA9D;AAAA,UAAkEC,OAAlE,eAAkEA,OAAlE;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.
|
|
3
|
+
"version": "11.2.0",
|
|
4
4
|
"main": "lib/index.js",
|
|
5
5
|
"module": "src/index.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -10,7 +10,7 @@
|
|
|
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.
|
|
13
|
+
"@pie-lib/editable-html": "^9.4.0",
|
|
14
14
|
"@pie-lib/icons": "^2.4.26",
|
|
15
15
|
"@pie-lib/render-ui": "^4.13.7",
|
|
16
16
|
"classnames": "^2.2.6",
|
|
@@ -26,5 +26,5 @@
|
|
|
26
26
|
"peerDependencies": {
|
|
27
27
|
"react": "^16.8.1"
|
|
28
28
|
},
|
|
29
|
-
"gitHead": "
|
|
29
|
+
"gitHead": "252c387e845b7f3b5887d10ae458cefb76ad3fa5"
|
|
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,32 +63,14 @@ class RawLayoutContents extends React.Component {
|
|
|
33
63
|
return (
|
|
34
64
|
<div className={classnames(classes.container)}>
|
|
35
65
|
{mode === 'inline' && (
|
|
36
|
-
<div className={classes.flow}
|
|
37
|
-
<div
|
|
38
|
-
className={classnames(
|
|
39
|
-
classes.configContainer,
|
|
40
|
-
configuration.maxWidth && classes.contentContainerMaxWidth,
|
|
41
|
-
)}
|
|
42
|
-
style={{ maxWidth: configuration.maxWidth ? `calc(${configuration.maxWidth} - 330px)` : 'unset' }}
|
|
43
|
-
>
|
|
44
|
-
{children}
|
|
45
|
-
</div>
|
|
66
|
+
<div className={classes.flow}>
|
|
67
|
+
<div className={classes.configContainer}>{children}</div>
|
|
46
68
|
{hasSettingsPanel && <div>{secondary}</div>}
|
|
47
69
|
</div>
|
|
48
70
|
)}
|
|
49
71
|
{mode === 'tabbed' && hasSettingsPanel && (
|
|
50
|
-
<Tabs
|
|
51
|
-
|
|
52
|
-
contentClassName={classnames(
|
|
53
|
-
classes.contentContainer,
|
|
54
|
-
configuration.maxWidth && classes.contentContainerMaxWidth,
|
|
55
|
-
)}
|
|
56
|
-
contentStyle={{ maxWidth: configuration.maxWidth || 'unset' }}
|
|
57
|
-
indicatorColor="primary"
|
|
58
|
-
>
|
|
59
|
-
<div className={classes.contentContainerDesign} title="Design">
|
|
60
|
-
{children}
|
|
61
|
-
</div>
|
|
72
|
+
<Tabs onChange={this.onTabsChange} contentClassName={classes.contentContainer} indicatorColor="primary">
|
|
73
|
+
<div title="Design">{children}</div>
|
|
62
74
|
<div title="settings">{secondary}</div>
|
|
63
75
|
</Tabs>
|
|
64
76
|
)}
|
|
@@ -81,17 +93,10 @@ const styles = () => ({
|
|
|
81
93
|
contentContainer: {
|
|
82
94
|
padding: '32px 16px 0 16px',
|
|
83
95
|
},
|
|
84
|
-
contentContainerMaxWidth: {
|
|
85
|
-
display: 'flex',
|
|
86
|
-
overflow: 'scroll',
|
|
87
|
-
},
|
|
88
96
|
configContainer: {
|
|
89
97
|
flex: '1',
|
|
90
98
|
marginRight: '20px',
|
|
91
99
|
},
|
|
92
|
-
contentContainerDesign: {
|
|
93
|
-
width: '100%',
|
|
94
|
-
},
|
|
95
100
|
});
|
|
96
101
|
|
|
97
102
|
export default withStyles(styles)(RawLayoutContents);
|
package/src/tabs/index.jsx
CHANGED
|
@@ -27,7 +27,7 @@ export class Tabs extends React.Component {
|
|
|
27
27
|
|
|
28
28
|
render() {
|
|
29
29
|
const { value } = this.state;
|
|
30
|
-
const { children, className, contentClassName, contentStyle, classes } = this.props;
|
|
30
|
+
const { children, className, contentClassName, contentStyle = {}, classes } = this.props;
|
|
31
31
|
|
|
32
32
|
const tabClasses = {
|
|
33
33
|
root: classes.tabRoot,
|