@pie-lib/config-ui 11.1.5-next.21 → 11.1.5-next.29
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.
|
@@ -63,26 +63,32 @@ var RawLayoutContents = /*#__PURE__*/function (_React$Component) {
|
|
|
63
63
|
}
|
|
64
64
|
|
|
65
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
|
-
}, {
|
|
84
66
|
key: "render",
|
|
85
|
-
value:
|
|
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() {
|
|
86
92
|
var _this$props = this.props,
|
|
87
93
|
mode = _this$props.mode,
|
|
88
94
|
secondary = _this$props.secondary,
|
|
@@ -109,35 +115,18 @@ var RawLayoutContents = /*#__PURE__*/function (_React$Component) {
|
|
|
109
115
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
110
116
|
className: (0, _classnames["default"])(classes.container)
|
|
111
117
|
}, mode === 'inline' && /*#__PURE__*/_react["default"].createElement("div", {
|
|
112
|
-
className: classes.flow
|
|
113
|
-
style: {
|
|
114
|
-
maxWidth: (configuration === null || configuration === void 0 ? void 0 : configuration.maxWidth) || 'unset'
|
|
115
|
-
}
|
|
118
|
+
className: classes.flow
|
|
116
119
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
117
|
-
className:
|
|
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
|
-
} : {}
|
|
120
|
+
className: classes.configContainer
|
|
121
121
|
}, children), hasSettingsPanel && /*#__PURE__*/_react["default"].createElement("div", null, secondary)), mode === 'tabbed' && hasSettingsPanel && /*#__PURE__*/_react["default"].createElement(_tabs["default"], {
|
|
122
122
|
onChange: this.onTabsChange,
|
|
123
|
-
contentClassName:
|
|
124
|
-
contentStyle: configuration !== null && configuration !== void 0 && configuration.maxWidth ? {
|
|
125
|
-
maxWidth: configuration === null || configuration === void 0 ? void 0 : configuration.maxWidth
|
|
126
|
-
} : {},
|
|
123
|
+
contentClassName: classes.contentContainer,
|
|
127
124
|
indicatorColor: "primary"
|
|
128
125
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
129
|
-
title: "Design"
|
|
130
|
-
style: configuration !== null && configuration !== void 0 && configuration.maxWidth ? {
|
|
131
|
-
flex: 1
|
|
132
|
-
} : {}
|
|
126
|
+
title: "Design"
|
|
133
127
|
}, children), /*#__PURE__*/_react["default"].createElement("div", {
|
|
134
128
|
title: "settings"
|
|
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));
|
|
129
|
+
}, secondary)), mode === 'tabbed' && !hasSettingsPanel && /*#__PURE__*/_react["default"].createElement("div", null, children));
|
|
141
130
|
}
|
|
142
131
|
}]);
|
|
143
132
|
return RawLayoutContents;
|
|
@@ -164,10 +153,6 @@ var styles = function styles() {
|
|
|
164
153
|
contentContainer: {
|
|
165
154
|
padding: '32px 16px 0 16px'
|
|
166
155
|
},
|
|
167
|
-
contentContainerMaxWidth: {
|
|
168
|
-
display: 'flex',
|
|
169
|
-
overflow: 'scroll'
|
|
170
|
-
},
|
|
171
156
|
configContainer: {
|
|
172
157
|
flex: '1',
|
|
173
158
|
marginRight: '20px'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/layout/layout-contents.jsx"],"names":["RawLayoutContents","secondary","props","configuration","children","undefined","
|
|
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.1.5-next.
|
|
3
|
+
"version": "11.1.5-next.29+b73b6af7",
|
|
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.3.
|
|
13
|
+
"@pie-lib/editable-html": "^9.3.1-next.34+b73b6af7",
|
|
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": "b73b6af7a33de7283cfbbe62c6da66c462ba475f"
|
|
30
30
|
}
|
|
@@ -19,30 +19,30 @@ class RawLayoutContents extends React.Component {
|
|
|
19
19
|
return secondary?.props?.configuration || secondary?.props?.children?.props?.configuration || undefined;
|
|
20
20
|
};
|
|
21
21
|
|
|
22
|
-
// eslint-disable-next-line no-unused-vars
|
|
23
|
-
componentDidUpdate(prevProps, prevState, snapshot) {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
}
|
|
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
46
|
|
|
47
47
|
render() {
|
|
48
48
|
const { mode, secondary, children, classes } = this.props;
|
|
@@ -63,45 +63,18 @@ class RawLayoutContents extends React.Component {
|
|
|
63
63
|
return (
|
|
64
64
|
<div className={classnames(classes.container)}>
|
|
65
65
|
{mode === 'inline' && (
|
|
66
|
-
<div className={classes.flow}
|
|
67
|
-
<div
|
|
68
|
-
className={classnames(
|
|
69
|
-
classes.configContainer,
|
|
70
|
-
configuration?.maxWidth && classes.contentContainerMaxWidth,
|
|
71
|
-
)}
|
|
72
|
-
style={configuration?.maxWidth ? { maxWidth: `calc(${configuration?.maxWidth} - ${hasSettingsPanel ? '330px' : '0'})` } : {}}
|
|
73
|
-
>
|
|
74
|
-
{children}
|
|
75
|
-
</div>
|
|
66
|
+
<div className={classes.flow}>
|
|
67
|
+
<div className={classes.configContainer}>{children}</div>
|
|
76
68
|
{hasSettingsPanel && <div>{secondary}</div>}
|
|
77
69
|
</div>
|
|
78
70
|
)}
|
|
79
|
-
|
|
80
71
|
{mode === 'tabbed' && hasSettingsPanel && (
|
|
81
|
-
<Tabs
|
|
82
|
-
|
|
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>
|
|
72
|
+
<Tabs onChange={this.onTabsChange} contentClassName={classes.contentContainer} indicatorColor="primary">
|
|
73
|
+
<div title="Design">{children}</div>
|
|
93
74
|
<div title="settings">{secondary}</div>
|
|
94
75
|
</Tabs>
|
|
95
76
|
)}
|
|
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
|
-
)}
|
|
77
|
+
{mode === 'tabbed' && !hasSettingsPanel && <div>{children}</div>}
|
|
105
78
|
</div>
|
|
106
79
|
);
|
|
107
80
|
}
|
|
@@ -120,10 +93,6 @@ const styles = () => ({
|
|
|
120
93
|
contentContainer: {
|
|
121
94
|
padding: '32px 16px 0 16px',
|
|
122
95
|
},
|
|
123
|
-
contentContainerMaxWidth: {
|
|
124
|
-
display: 'flex',
|
|
125
|
-
overflow: 'scroll',
|
|
126
|
-
},
|
|
127
96
|
configContainer: {
|
|
128
97
|
flex: '1',
|
|
129
98
|
marginRight: '20px',
|
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,
|