@pie-lib/config-ui 11.1.1-next.0 → 11.1.1-next.1
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.
|
@@ -48,27 +48,32 @@ 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;
|
|
51
|
+
var _secondary$props, _secondary$props$chil;
|
|
52
52
|
|
|
53
53
|
var _this$props = this.props,
|
|
54
54
|
mode = _this$props.mode,
|
|
55
55
|
secondary = _this$props.secondary,
|
|
56
56
|
children = _this$props.children,
|
|
57
|
-
classes = _this$props.classes;
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
57
|
+
classes = _this$props.classes; // in config-layout, layout content gets called like this:
|
|
58
|
+
// <LayoutContents secondary={layoutMode === 'inline' ? <SettingsBox>{settings}</SettingsBox> : settings}>
|
|
59
|
+
|
|
60
|
+
var _ref = (secondary === null || secondary === void 0 ? void 0 : secondary.props) || (secondary === null || secondary === void 0 ? void 0 : (_secondary$props = secondary.props) === null || _secondary$props === void 0 ? void 0 : (_secondary$props$chil = _secondary$props.children) === null || _secondary$props$chil === void 0 ? void 0 : _secondary$props$chil.props) || {},
|
|
61
|
+
configuration = _ref.configuration;
|
|
62
|
+
|
|
63
|
+
var hasSettingsPanel = Object.entries(configuration || {}).some(function (_ref2) {
|
|
64
|
+
var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
|
|
65
|
+
propName = _ref3[0],
|
|
66
|
+
obj = _ref3[1];
|
|
62
67
|
|
|
63
68
|
return !!(obj !== null && obj !== void 0 && obj.settings);
|
|
64
69
|
});
|
|
65
70
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
66
71
|
className: (0, _classnames["default"])(classes.container)
|
|
67
|
-
}, mode ===
|
|
72
|
+
}, mode === "inline" && /*#__PURE__*/_react["default"].createElement("div", {
|
|
68
73
|
className: classes.flow
|
|
69
74
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
70
75
|
className: classes.configContainer
|
|
71
|
-
}, children), hasSettingsPanel && /*#__PURE__*/_react["default"].createElement("div", null, secondary)), mode ===
|
|
76
|
+
}, children), hasSettingsPanel && /*#__PURE__*/_react["default"].createElement("div", null, secondary)), mode === "tabbed" && hasSettingsPanel && /*#__PURE__*/_react["default"].createElement(_tabs["default"], {
|
|
72
77
|
onChange: this.onTabsChange,
|
|
73
78
|
contentClassName: classes.contentContainer,
|
|
74
79
|
indicatorColor: "primary"
|
|
@@ -76,14 +81,14 @@ var RawLayoutContents = /*#__PURE__*/function (_React$Component) {
|
|
|
76
81
|
title: "Design"
|
|
77
82
|
}, children), /*#__PURE__*/_react["default"].createElement("div", {
|
|
78
83
|
title: "settings"
|
|
79
|
-
}, secondary)), mode ===
|
|
84
|
+
}, secondary)), mode === "tabbed" && !hasSettingsPanel && /*#__PURE__*/_react["default"].createElement("div", null, children));
|
|
80
85
|
}
|
|
81
86
|
}]);
|
|
82
87
|
return RawLayoutContents;
|
|
83
88
|
}(_react["default"].Component);
|
|
84
89
|
|
|
85
90
|
(0, _defineProperty2["default"])(RawLayoutContents, "propTypes", {
|
|
86
|
-
mode: _propTypes["default"].oneOf([
|
|
91
|
+
mode: _propTypes["default"].oneOf(["tabbed", "inline"]),
|
|
87
92
|
secondary: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]),
|
|
88
93
|
children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]),
|
|
89
94
|
classes: _propTypes["default"].object
|
|
@@ -92,20 +97,20 @@ var RawLayoutContents = /*#__PURE__*/function (_React$Component) {
|
|
|
92
97
|
var styles = function styles() {
|
|
93
98
|
return {
|
|
94
99
|
flow: {
|
|
95
|
-
display:
|
|
96
|
-
justifyContent:
|
|
100
|
+
display: "flex",
|
|
101
|
+
justifyContent: "space-between"
|
|
97
102
|
},
|
|
98
103
|
container: {
|
|
99
|
-
display:
|
|
100
|
-
flexDirection:
|
|
101
|
-
position:
|
|
104
|
+
display: "flex",
|
|
105
|
+
flexDirection: "column",
|
|
106
|
+
position: "relative"
|
|
102
107
|
},
|
|
103
108
|
contentContainer: {
|
|
104
|
-
padding:
|
|
109
|
+
padding: "32px 16px 0 16px"
|
|
105
110
|
},
|
|
106
111
|
configContainer: {
|
|
107
|
-
flex:
|
|
108
|
-
marginRight:
|
|
112
|
+
flex: "1",
|
|
113
|
+
marginRight: "20px"
|
|
109
114
|
}
|
|
110
115
|
};
|
|
111
116
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/layout/layout-contents.jsx"],"names":["RawLayoutContents","props","mode","secondary","children","classes","hasSettingsPanel","Object","entries","
|
|
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":"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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 } = secondary?.props || secondary?.props?.children?.props || {};\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.1-next.
|
|
3
|
+
"version": "11.1.1-next.1+7b929564",
|
|
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.2.
|
|
13
|
+
"@pie-lib/editable-html": "^9.2.9",
|
|
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": "7b9295648d0a48c50a567c9ea1dc98bb30a358c0"
|
|
30
30
|
}
|
|
@@ -1,38 +1,39 @@
|
|
|
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
|
-
|
|
18
|
-
|
|
19
|
-
|
|
17
|
+
// in config-layout, layout content gets called like this:
|
|
18
|
+
// <LayoutContents secondary={layoutMode === 'inline' ? <SettingsBox>{settings}</SettingsBox> : settings}>
|
|
19
|
+
const { configuration } = secondary?.props || secondary?.props?.children?.props || {};
|
|
20
|
+
const hasSettingsPanel = Object.entries(configuration || {}).some(([propName, obj]) => !!obj?.settings);
|
|
20
21
|
|
|
21
22
|
return (
|
|
22
23
|
<div className={classnames(classes.container)}>
|
|
23
|
-
{mode ===
|
|
24
|
+
{mode === "inline" && (
|
|
24
25
|
<div className={classes.flow}>
|
|
25
26
|
<div className={classes.configContainer}>{children}</div>
|
|
26
27
|
{hasSettingsPanel && <div>{secondary}</div>}
|
|
27
28
|
</div>
|
|
28
29
|
)}
|
|
29
|
-
{mode ===
|
|
30
|
+
{mode === "tabbed" && hasSettingsPanel && (
|
|
30
31
|
<Tabs onChange={this.onTabsChange} contentClassName={classes.contentContainer} indicatorColor="primary">
|
|
31
32
|
<div title="Design">{children}</div>
|
|
32
33
|
<div title="settings">{secondary}</div>
|
|
33
34
|
</Tabs>
|
|
34
35
|
)}
|
|
35
|
-
{mode ===
|
|
36
|
+
{mode === "tabbed" && !hasSettingsPanel && <div>{children}</div>}
|
|
36
37
|
</div>
|
|
37
38
|
);
|
|
38
39
|
}
|
|
@@ -40,21 +41,21 @@ class RawLayoutContents extends React.Component {
|
|
|
40
41
|
|
|
41
42
|
const styles = () => ({
|
|
42
43
|
flow: {
|
|
43
|
-
display:
|
|
44
|
-
justifyContent:
|
|
44
|
+
display: "flex",
|
|
45
|
+
justifyContent: "space-between"
|
|
45
46
|
},
|
|
46
47
|
container: {
|
|
47
|
-
display:
|
|
48
|
-
flexDirection:
|
|
49
|
-
position:
|
|
48
|
+
display: "flex",
|
|
49
|
+
flexDirection: "column",
|
|
50
|
+
position: "relative"
|
|
50
51
|
},
|
|
51
52
|
contentContainer: {
|
|
52
|
-
padding:
|
|
53
|
+
padding: "32px 16px 0 16px"
|
|
53
54
|
},
|
|
54
55
|
configContainer: {
|
|
55
|
-
flex:
|
|
56
|
-
marginRight:
|
|
57
|
-
}
|
|
56
|
+
flex: "1",
|
|
57
|
+
marginRight: "20px"
|
|
58
|
+
}
|
|
58
59
|
});
|
|
59
60
|
|
|
60
61
|
export default withStyles(styles)(RawLayoutContents);
|