@pie-lib/config-ui 11.1.1 → 11.1.3-next.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 +12 -0
- package/lib/layout/layout-contents.js +18 -20
- package/lib/layout/layout-contents.js.map +1 -1
- package/package.json +2 -2
- package/src/layout/layout-contents.jsx +21 -20
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,18 @@
|
|
|
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.1.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/config-ui@11.1.1...@pie-lib/config-ui@11.1.2) (2022-12-07)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **config-ui:** need to specifically check whether configuration exists PD-2407 ([36bd8e7](https://github.com/pie-framework/pie-lib/commit/36bd8e715508ac9220f2263c1cc0283437197078))
|
|
12
|
+
* **config-ui:** prettier fixes PD-2407 ([36c182f](https://github.com/pie-framework/pie-lib/commit/36c182fad4fe2e2f416927b34eec90a5220d1ed2))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
6
18
|
## [11.1.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/config-ui@11.1.0...@pie-lib/config-ui@11.1.1) (2022-12-06)
|
|
7
19
|
|
|
8
20
|
|
|
@@ -48,7 +48,7 @@ var RawLayoutContents = /*#__PURE__*/function (_React$Component) {
|
|
|
48
48
|
(0, _createClass2["default"])(RawLayoutContents, [{
|
|
49
49
|
key: "render",
|
|
50
50
|
value: function render() {
|
|
51
|
-
var _secondary$props, _secondary$
|
|
51
|
+
var _secondary$props, _secondary$props2, _secondary$props2$chi, _secondary$props2$chi2;
|
|
52
52
|
|
|
53
53
|
var _this$props = this.props,
|
|
54
54
|
mode = _this$props.mode,
|
|
@@ -57,23 +57,21 @@ var RawLayoutContents = /*#__PURE__*/function (_React$Component) {
|
|
|
57
57
|
classes = _this$props.classes; // in config-layout, layout content gets called like this:
|
|
58
58
|
// <LayoutContents secondary={layoutMode === 'inline' ? <SettingsBox>{settings}</SettingsBox> : settings}>
|
|
59
59
|
|
|
60
|
-
var
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
propName = _ref3[0],
|
|
66
|
-
obj = _ref3[1];
|
|
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;
|
|
61
|
+
var hasSettingsPanel = Object.entries(configuration || {}).some(function (_ref) {
|
|
62
|
+
var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
|
|
63
|
+
propName = _ref2[0],
|
|
64
|
+
obj = _ref2[1];
|
|
67
65
|
|
|
68
66
|
return !!(obj !== null && obj !== void 0 && obj.settings);
|
|
69
67
|
});
|
|
70
68
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
71
69
|
className: (0, _classnames["default"])(classes.container)
|
|
72
|
-
}, mode ===
|
|
70
|
+
}, mode === 'inline' && /*#__PURE__*/_react["default"].createElement("div", {
|
|
73
71
|
className: classes.flow
|
|
74
72
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
75
73
|
className: classes.configContainer
|
|
76
|
-
}, children), hasSettingsPanel && /*#__PURE__*/_react["default"].createElement("div", null, secondary)), mode ===
|
|
74
|
+
}, children), hasSettingsPanel && /*#__PURE__*/_react["default"].createElement("div", null, secondary)), mode === 'tabbed' && hasSettingsPanel && /*#__PURE__*/_react["default"].createElement(_tabs["default"], {
|
|
77
75
|
onChange: this.onTabsChange,
|
|
78
76
|
contentClassName: classes.contentContainer,
|
|
79
77
|
indicatorColor: "primary"
|
|
@@ -81,14 +79,14 @@ var RawLayoutContents = /*#__PURE__*/function (_React$Component) {
|
|
|
81
79
|
title: "Design"
|
|
82
80
|
}, children), /*#__PURE__*/_react["default"].createElement("div", {
|
|
83
81
|
title: "settings"
|
|
84
|
-
}, secondary)), mode ===
|
|
82
|
+
}, secondary)), mode === 'tabbed' && !hasSettingsPanel && /*#__PURE__*/_react["default"].createElement("div", null, children));
|
|
85
83
|
}
|
|
86
84
|
}]);
|
|
87
85
|
return RawLayoutContents;
|
|
88
86
|
}(_react["default"].Component);
|
|
89
87
|
|
|
90
88
|
(0, _defineProperty2["default"])(RawLayoutContents, "propTypes", {
|
|
91
|
-
mode: _propTypes["default"].oneOf([
|
|
89
|
+
mode: _propTypes["default"].oneOf(['tabbed', 'inline']),
|
|
92
90
|
secondary: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]),
|
|
93
91
|
children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]),
|
|
94
92
|
classes: _propTypes["default"].object
|
|
@@ -97,20 +95,20 @@ var RawLayoutContents = /*#__PURE__*/function (_React$Component) {
|
|
|
97
95
|
var styles = function styles() {
|
|
98
96
|
return {
|
|
99
97
|
flow: {
|
|
100
|
-
display:
|
|
101
|
-
justifyContent:
|
|
98
|
+
display: 'flex',
|
|
99
|
+
justifyContent: 'space-between'
|
|
102
100
|
},
|
|
103
101
|
container: {
|
|
104
|
-
display:
|
|
105
|
-
flexDirection:
|
|
106
|
-
position:
|
|
102
|
+
display: 'flex',
|
|
103
|
+
flexDirection: 'column',
|
|
104
|
+
position: 'relative'
|
|
107
105
|
},
|
|
108
106
|
contentContainer: {
|
|
109
|
-
padding:
|
|
107
|
+
padding: '32px 16px 0 16px'
|
|
110
108
|
},
|
|
111
109
|
configContainer: {
|
|
112
|
-
flex:
|
|
113
|
-
marginRight:
|
|
110
|
+
flex: '1',
|
|
111
|
+
marginRight: '20px'
|
|
114
112
|
}
|
|
115
113
|
};
|
|
116
114
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/layout/layout-contents.jsx"],"names":["RawLayoutContents","props","mode","secondary","children","classes","configuration","hasSettingsPanel","Object","entries","some","propName","obj","settings","container","flow","configContainer","onTabsChange","contentContainer","React","Component","PropTypes","oneOf","oneOfType","arrayOf","node","object","styles","display","justifyContent","flexDirection","position","padding","flex","marginRight"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;IAEMA,iB;;;;;;;;;;;;WAQJ,kBAAS;AAAA;;AACP,wBAA+C,KAAKC,KAApD;AAAA,UAAQC,IAAR,eAAQA,IAAR;AAAA,UAAcC,SAAd,eAAcA,SAAd;AAAA,UAAyBC,QAAzB,eAAyBA,QAAzB;AAAA,UAAmCC,OAAnC,eAAmCA,OAAnC,CADO,CAEP;AACA;;AACA,
|
|
1
|
+
{"version":3,"sources":["../../src/layout/layout-contents.jsx"],"names":["RawLayoutContents","props","mode","secondary","children","classes","configuration","undefined","hasSettingsPanel","Object","entries","some","propName","obj","settings","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 render() {\n const { mode, secondary, children, classes } = this.props;\n // in config-layout, layout content gets called like this:\n // <LayoutContents secondary={layoutMode === 'inline' ? <SettingsBox>{settings}</SettingsBox> : settings}>\n const configuration =\n secondary?.props?.configuration || secondary?.props?.children?.props?.configuration || undefined;\n const hasSettingsPanel = Object.entries(configuration || {}).some(([propName, obj]) => !!obj?.settings);\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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pie-lib/config-ui",
|
|
3
|
-
"version": "11.1.
|
|
3
|
+
"version": "11.1.3-next.0+f5ef8b65",
|
|
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": "f5ef8b656c4d2cc81f061e32c4ff5362d3e4f23d"
|
|
30
30
|
}
|
|
@@ -1,39 +1,40 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { withStyles } from
|
|
3
|
-
import Tabs from
|
|
4
|
-
import classnames from
|
|
5
|
-
import PropTypes from
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { withStyles } from '@material-ui/core';
|
|
3
|
+
import Tabs from '../tabs';
|
|
4
|
+
import classnames from 'classnames';
|
|
5
|
+
import PropTypes from 'prop-types';
|
|
6
6
|
|
|
7
7
|
class RawLayoutContents extends React.Component {
|
|
8
8
|
static propTypes = {
|
|
9
|
-
mode: PropTypes.oneOf([
|
|
9
|
+
mode: PropTypes.oneOf(['tabbed', 'inline']),
|
|
10
10
|
secondary: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
|
|
11
11
|
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
|
|
12
|
-
classes: PropTypes.object
|
|
12
|
+
classes: PropTypes.object,
|
|
13
13
|
};
|
|
14
14
|
|
|
15
15
|
render() {
|
|
16
16
|
const { mode, secondary, children, classes } = this.props;
|
|
17
17
|
// in config-layout, layout content gets called like this:
|
|
18
18
|
// <LayoutContents secondary={layoutMode === 'inline' ? <SettingsBox>{settings}</SettingsBox> : settings}>
|
|
19
|
-
const
|
|
19
|
+
const configuration =
|
|
20
|
+
secondary?.props?.configuration || secondary?.props?.children?.props?.configuration || undefined;
|
|
20
21
|
const hasSettingsPanel = Object.entries(configuration || {}).some(([propName, obj]) => !!obj?.settings);
|
|
21
22
|
|
|
22
23
|
return (
|
|
23
24
|
<div className={classnames(classes.container)}>
|
|
24
|
-
{mode ===
|
|
25
|
+
{mode === 'inline' && (
|
|
25
26
|
<div className={classes.flow}>
|
|
26
27
|
<div className={classes.configContainer}>{children}</div>
|
|
27
28
|
{hasSettingsPanel && <div>{secondary}</div>}
|
|
28
29
|
</div>
|
|
29
30
|
)}
|
|
30
|
-
{mode ===
|
|
31
|
+
{mode === 'tabbed' && hasSettingsPanel && (
|
|
31
32
|
<Tabs onChange={this.onTabsChange} contentClassName={classes.contentContainer} indicatorColor="primary">
|
|
32
33
|
<div title="Design">{children}</div>
|
|
33
34
|
<div title="settings">{secondary}</div>
|
|
34
35
|
</Tabs>
|
|
35
36
|
)}
|
|
36
|
-
{mode ===
|
|
37
|
+
{mode === 'tabbed' && !hasSettingsPanel && <div>{children}</div>}
|
|
37
38
|
</div>
|
|
38
39
|
);
|
|
39
40
|
}
|
|
@@ -41,21 +42,21 @@ class RawLayoutContents extends React.Component {
|
|
|
41
42
|
|
|
42
43
|
const styles = () => ({
|
|
43
44
|
flow: {
|
|
44
|
-
display:
|
|
45
|
-
justifyContent:
|
|
45
|
+
display: 'flex',
|
|
46
|
+
justifyContent: 'space-between',
|
|
46
47
|
},
|
|
47
48
|
container: {
|
|
48
|
-
display:
|
|
49
|
-
flexDirection:
|
|
50
|
-
position:
|
|
49
|
+
display: 'flex',
|
|
50
|
+
flexDirection: 'column',
|
|
51
|
+
position: 'relative',
|
|
51
52
|
},
|
|
52
53
|
contentContainer: {
|
|
53
|
-
padding:
|
|
54
|
+
padding: '32px 16px 0 16px',
|
|
54
55
|
},
|
|
55
56
|
configContainer: {
|
|
56
|
-
flex:
|
|
57
|
-
marginRight:
|
|
58
|
-
}
|
|
57
|
+
flex: '1',
|
|
58
|
+
marginRight: '20px',
|
|
59
|
+
},
|
|
59
60
|
});
|
|
60
61
|
|
|
61
62
|
export default withStyles(styles)(RawLayoutContents);
|