@pie-lib/config-ui 11.3.13-next.0 → 11.4.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 +11 -0
- package/lib/layout/config-layout.js +5 -2
- package/lib/layout/config-layout.js.map +1 -1
- package/lib/layout/layout-contents.js +8 -6
- package/lib/layout/layout-contents.js.map +1 -1
- package/package.json +5 -5
- package/src/layout/config-layout.jsx +3 -2
- package/src/layout/layout-contents.jsx +15 -5
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
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.4.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/config-ui@11.3.12...@pie-lib/config-ui@11.4.0) (2023-02-13)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **config-ui:** added default classnames for main components ([b07d821](https://github.com/pie-framework/pie-lib/commit/b07d821a84ad4a19bcebd3b245062d2edb0786ca))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## [11.3.12](https://github.com/pie-framework/pie-lib/compare/@pie-lib/config-ui@11.3.10...@pie-lib/config-ui@11.3.12) (2023-01-31)
|
|
7
18
|
|
|
8
19
|
**Note:** Version bump only for package @pie-lib/config-ui
|
|
@@ -81,10 +81,13 @@ var MeasuredConfigLayout = /*#__PURE__*/function (_React$Component) {
|
|
|
81
81
|
settings = _this2$props.settings,
|
|
82
82
|
hideSettings = _this2$props.hideSettings;
|
|
83
83
|
var layoutMode = _this2.state.layoutMode;
|
|
84
|
-
var settingsPanel = layoutMode === 'inline' ? /*#__PURE__*/_react["default"].createElement(_settingsBox["default"],
|
|
84
|
+
var settingsPanel = layoutMode === 'inline' ? /*#__PURE__*/_react["default"].createElement(_settingsBox["default"], {
|
|
85
|
+
className: "settings-box"
|
|
86
|
+
}, settings) : settings;
|
|
85
87
|
var secondaryContent = hideSettings ? null : settingsPanel;
|
|
86
88
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
87
|
-
ref: measureRef
|
|
89
|
+
ref: measureRef,
|
|
90
|
+
className: "main-container"
|
|
88
91
|
}, /*#__PURE__*/_react["default"].createElement(_layoutContents["default"], {
|
|
89
92
|
mode: layoutMode,
|
|
90
93
|
secondary: secondaryContent
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/layout/config-layout.jsx"],"names":["MeasuredConfigLayout","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","ConfigLayout"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;IAEMA,oB;;;;;AAeJ,gCAAYC,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,
|
|
1
|
+
{"version":3,"sources":["../../src/layout/config-layout.jsx"],"names":["MeasuredConfigLayout","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","ConfigLayout"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;IAEMA,oB;;;;;AAeJ,gCAAYC,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,GACjBV,UAAU,KAAK,QAAf,gBAA0B,gCAAC,uBAAD;AAAa,UAAA,SAAS,EAAC;AAAvB,WAAuCQ,QAAvC,CAA1B,GAA2FA,QAD7F;AAEA,YAAMG,gBAAgB,GAAGF,YAAY,GAAG,IAAH,GAAUC,aAA/C;AAEA,4BACE;AAAK,UAAA,GAAG,EAAEJ,UAAV;AAAsB,UAAA,SAAS,EAAC;AAAhC,wBACE,gCAAC,0BAAD;AAAgB,UAAA,IAAI,EAAEN,UAAtB;AAAkC,UAAA,SAAS,EAAEW;AAA7C,WACGJ,QADH,CADF,CADF;AAOD,OAhBH,CADF;AAoBD;;;EAjDgCK,kBAAMC,S;;iCAAnClB,oB,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,oB,kBAUkB;AACpBI,EAAAA,iBAAiB,EAAE,GADC;AAEpBU,EAAAA,YAAY,EAAE;AAFM,C;AA0CxB,IAAMe,YAAY,GAAG,mCAAgB,QAAhB,EAA0B7B,oBAA1B,CAArB;eAEe6B,Y","sourcesContent":["import React from 'react';\nimport Measure from 'react-measure';\nimport { withContentRect } from 'react-measure';\nimport PropTypes from 'prop-types';\nimport LayoutContents from './layout-contents';\nimport SettingsBox from './settings-box';\n\nclass MeasuredConfigLayout 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 =\n layoutMode === 'inline' ? <SettingsBox className=\"settings-box\">{settings}</SettingsBox> : settings;\n const secondaryContent = hideSettings ? null : settingsPanel;\n\n return (\n <div ref={measureRef} className=\"main-container\">\n <LayoutContents mode={layoutMode} secondary={secondaryContent}>\n {children}\n </LayoutContents>\n </div>\n );\n }}\n </Measure>\n );\n }\n}\n\nconst ConfigLayout = withContentRect('bounds')(MeasuredConfigLayout);\n\nexport default ConfigLayout;\n"],"file":"config-layout.js"}
|
|
@@ -119,20 +119,22 @@ var RawLayoutContents = /*#__PURE__*/function (_React$Component) {
|
|
|
119
119
|
}, mode === 'inline' && /*#__PURE__*/_react["default"].createElement("div", {
|
|
120
120
|
className: (0, _classnames["default"])(classes.flow, classes.contentContainer)
|
|
121
121
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
122
|
-
className: classes.configContainer
|
|
122
|
+
className: (0, _classnames["default"])(classes.configContainer, 'design-container')
|
|
123
123
|
}, children), hasSettingsPanel && /*#__PURE__*/_react["default"].createElement("div", {
|
|
124
|
-
className: classes.settingsContainer
|
|
124
|
+
className: (0, _classnames["default"])(classes.settingsContainer, 'settings-container')
|
|
125
125
|
}, secondary)), mode === 'tabbed' && hasSettingsPanel && /*#__PURE__*/_react["default"].createElement(_tabs["default"], {
|
|
126
126
|
onChange: this.onTabsChange,
|
|
127
127
|
contentClassName: classes.contentContainer,
|
|
128
128
|
indicatorColor: "primary"
|
|
129
129
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
130
|
-
title: "Design"
|
|
130
|
+
title: "Design",
|
|
131
|
+
className: "design-container"
|
|
131
132
|
}, children), /*#__PURE__*/_react["default"].createElement("div", {
|
|
132
|
-
title: "Settings"
|
|
133
|
-
|
|
133
|
+
title: "Settings",
|
|
134
|
+
className: "settings-container"
|
|
135
|
+
}, secondary)), mode === 'tabbed' && !hasSettingsPanel && /*#__PURE__*/_react["default"].createElement("div", (0, _defineProperty2["default"])({
|
|
134
136
|
className: classes.contentContainer
|
|
135
|
-
}, children));
|
|
137
|
+
}, "className", "design-container"), children));
|
|
136
138
|
}
|
|
137
139
|
}]);
|
|
138
140
|
return RawLayoutContents;
|
|
@@ -1 +1 @@
|
|
|
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","contentContainer","configContainer","settingsContainer","onTabsChange","React","Component","PropTypes","oneOf","oneOfType","arrayOf","node","object","styles","theme","display","justifyContent","flexDirection","position","padding","spacing","unit","flex","marginLeft"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;IAEMA,iB;;;;;;;;;;;;;;;yGAQe,YAAM;AAAA;;AACvB,UAAQC,SAAR,GAAsB,MAAKC,KAA3B,CAAQD,SAAR,CADuB,CAEvB;;AAEA,aAAO,CAAAA,SAAS,SAAT,IAAAA,SAAS,WAAT,gCAAAA,SAAS,CAAEC,KAAX,sEAAkBC,aAAlB,MAAmCF,SAAnC,aAAmCA,SAAnC,4CAAmCA,SAAS,CAAEC,KAA9C,+EAAmC,kBAAkBE,QAArD,oFAAmC,sBAA4BF,KAA/D,2DAAmC,uBAAmCC,aAAtE,KAAuFE,SAA9F;AACD,K;;;;;;WAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,sBAAS;AACP,wBAA+C,KAAKH,KAApD;AAAA,UAAQI,IAAR,eAAQA,IAAR;AAAA,UAAcL,SAAd,eAAcA,SAAd;AAAA,UAAyBG,QAAzB,eAAyBA,QAAzB;AAAA,UAAmCG,OAAnC,eAAmCA,OAAnC;AACA,UAAMJ,aAAa,GAAG,KAAKK,gBAAL,EAAtB;AAEA,UAAIC,gBAAgB,GAAGC,MAAM,CAACC,OAAP,CAAeR,aAAa,IAAI,EAAhC,EAAoCS,IAApC,CAAyC;AAAA;AAAA,YAAEC,QAAF;AAAA,YAAYC,GAAZ;;AAAA,eAAqB,CAAC,EAACA,GAAD,aAACA,GAAD,eAACA,GAAG,CAAEC,QAAN,CAAtB;AAAA,OAAzC,CAAvB,CAJO,CAKP;AACA;;AAEA,UAAI,CAACN,gBAAL,EAAuB;AACrB,YAAI;AAAA;;AACFA,UAAAA,gBAAgB,sBAAGO,IAAI,CAACC,SAAL,CAAed,aAAf,CAAH,6EAAG,gBAA+Be,KAA/B,CAAqC,gBAArC,CAAH,0DAAG,sBAAwDC,MAA3E;AACD,SAFD,CAEE,OAAOC,CAAP,EAAU;AACVC,UAAAA,OAAO,CAACC,GAAR,CAAYF,CAAC,CAACG,QAAF,EAAZ;AACD;AACF;;AAED,0BACE;AAAK,QAAA,SAAS,EAAEhB,OAAO,CAACiB;AAAxB,SACGlB,IAAI,KAAK,QAAT,iBACC;AAAK,QAAA,SAAS,EAAE,4BAAWC,OAAO,CAACkB,IAAnB,EAAyBlB,OAAO,CAACmB,gBAAjC;AAAhB,sBACE;AAAK,QAAA,SAAS,
|
|
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","contentContainer","configContainer","settingsContainer","onTabsChange","React","Component","PropTypes","oneOf","oneOfType","arrayOf","node","object","styles","theme","display","justifyContent","flexDirection","position","padding","spacing","unit","flex","marginLeft"],"mappings":"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","sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core';\nimport Tabs from '../tabs';\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={classes.container}>\n {mode === 'inline' && (\n <div className={classnames(classes.flow, classes.contentContainer)}>\n <div className={classnames(classes.configContainer, 'design-container')}>{children}</div>\n {hasSettingsPanel && (\n <div className={classnames(classes.settingsContainer, 'settings-container')}>{secondary}</div>\n )}\n </div>\n )}\n\n {mode === 'tabbed' && hasSettingsPanel && (\n <Tabs onChange={this.onTabsChange} contentClassName={classes.contentContainer} indicatorColor=\"primary\">\n <div title=\"Design\" className=\"design-container\">\n {children}\n </div>\n <div title=\"Settings\" className=\"settings-container\">\n {secondary}\n </div>\n </Tabs>\n )}\n\n {mode === 'tabbed' && !hasSettingsPanel && (\n <div className={classes.contentContainer} className=\"design-container\">\n {children}\n </div>\n )}\n </div>\n );\n }\n}\n\nconst styles = (theme) => ({\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: `${theme.spacing.unit * 2}px 0`,\n },\n configContainer: {\n flex: '1',\n },\n settingsContainer: {\n marginLeft: theme.spacing.unit * 2,\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.
|
|
3
|
+
"version": "11.4.0",
|
|
4
4
|
"main": "lib/index.js",
|
|
5
5
|
"module": "src/index.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -10,9 +10,9 @@
|
|
|
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.5.
|
|
14
|
-
"@pie-lib/icons": "^2.4.
|
|
15
|
-
"@pie-lib/render-ui": "^4.14.
|
|
13
|
+
"@pie-lib/editable-html": "^9.5.12",
|
|
14
|
+
"@pie-lib/icons": "^2.4.42",
|
|
15
|
+
"@pie-lib/render-ui": "^4.14.12",
|
|
16
16
|
"classnames": "^2.2.6",
|
|
17
17
|
"debug": "^4.1.1",
|
|
18
18
|
"lodash": "^4.17.11",
|
|
@@ -26,5 +26,5 @@
|
|
|
26
26
|
"peerDependencies": {
|
|
27
27
|
"react": "^16.8.1"
|
|
28
28
|
},
|
|
29
|
-
"gitHead": "
|
|
29
|
+
"gitHead": "8945aef9512874385f75fa7d54401de7e2ff6e40"
|
|
30
30
|
}
|
|
@@ -40,11 +40,12 @@ class MeasuredConfigLayout extends React.Component {
|
|
|
40
40
|
const { children, settings, hideSettings } = this.props;
|
|
41
41
|
const { layoutMode } = this.state;
|
|
42
42
|
|
|
43
|
-
const settingsPanel =
|
|
43
|
+
const settingsPanel =
|
|
44
|
+
layoutMode === 'inline' ? <SettingsBox className="settings-box">{settings}</SettingsBox> : settings;
|
|
44
45
|
const secondaryContent = hideSettings ? null : settingsPanel;
|
|
45
46
|
|
|
46
47
|
return (
|
|
47
|
-
<div ref={measureRef}>
|
|
48
|
+
<div ref={measureRef} className="main-container">
|
|
48
49
|
<LayoutContents mode={layoutMode} secondary={secondaryContent}>
|
|
49
50
|
{children}
|
|
50
51
|
</LayoutContents>
|
|
@@ -64,19 +64,29 @@ class RawLayoutContents extends React.Component {
|
|
|
64
64
|
<div className={classes.container}>
|
|
65
65
|
{mode === 'inline' && (
|
|
66
66
|
<div className={classnames(classes.flow, classes.contentContainer)}>
|
|
67
|
-
<div className={classes.configContainer}>{children}</div>
|
|
68
|
-
{hasSettingsPanel &&
|
|
67
|
+
<div className={classnames(classes.configContainer, 'design-container')}>{children}</div>
|
|
68
|
+
{hasSettingsPanel && (
|
|
69
|
+
<div className={classnames(classes.settingsContainer, 'settings-container')}>{secondary}</div>
|
|
70
|
+
)}
|
|
69
71
|
</div>
|
|
70
72
|
)}
|
|
71
73
|
|
|
72
74
|
{mode === 'tabbed' && hasSettingsPanel && (
|
|
73
75
|
<Tabs onChange={this.onTabsChange} contentClassName={classes.contentContainer} indicatorColor="primary">
|
|
74
|
-
<div title="Design">
|
|
75
|
-
|
|
76
|
+
<div title="Design" className="design-container">
|
|
77
|
+
{children}
|
|
78
|
+
</div>
|
|
79
|
+
<div title="Settings" className="settings-container">
|
|
80
|
+
{secondary}
|
|
81
|
+
</div>
|
|
76
82
|
</Tabs>
|
|
77
83
|
)}
|
|
78
84
|
|
|
79
|
-
{mode === 'tabbed' && !hasSettingsPanel &&
|
|
85
|
+
{mode === 'tabbed' && !hasSettingsPanel && (
|
|
86
|
+
<div className={classes.contentContainer} className="design-container">
|
|
87
|
+
{children}
|
|
88
|
+
</div>
|
|
89
|
+
)}
|
|
80
90
|
</div>
|
|
81
91
|
);
|
|
82
92
|
}
|