@pie-lib/config-ui 11.1.5-next.0 → 11.1.5-next.4
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.
|
@@ -78,14 +78,24 @@ var RawLayoutContents = /*#__PURE__*/function (_React$Component) {
|
|
|
78
78
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
79
79
|
className: (0, _classnames["default"])(classes.container)
|
|
80
80
|
}, mode === 'inline' && /*#__PURE__*/_react["default"].createElement("div", {
|
|
81
|
-
className: classes.flow
|
|
81
|
+
className: classes.flow,
|
|
82
|
+
style: {
|
|
83
|
+
maxWidth: configuration.maxWidth || 'unset'
|
|
84
|
+
}
|
|
82
85
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
83
|
-
className: classes.configContainer
|
|
86
|
+
className: (0, _classnames["default"])(classes.configContainer, configuration.maxWidth && classes.contentContainerMaxWidth),
|
|
87
|
+
style: {
|
|
88
|
+
maxWidth: configuration.maxWidth ? "calc(".concat(configuration.maxWidth, " - 330px)") : 'unset'
|
|
89
|
+
}
|
|
84
90
|
}, children), hasSettingsPanel && /*#__PURE__*/_react["default"].createElement("div", null, secondary)), mode === 'tabbed' && hasSettingsPanel && /*#__PURE__*/_react["default"].createElement(_tabs["default"], {
|
|
85
91
|
onChange: this.onTabsChange,
|
|
86
|
-
contentClassName: classes.contentContainer,
|
|
92
|
+
contentClassName: (0, _classnames["default"])(classes.contentContainer, configuration.maxWidth && classes.contentContainerMaxWidth),
|
|
93
|
+
contentStyle: {
|
|
94
|
+
maxWidth: configuration.maxWidth || 'unset'
|
|
95
|
+
},
|
|
87
96
|
indicatorColor: "primary"
|
|
88
97
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
98
|
+
className: configuration.contentContainerDesign,
|
|
89
99
|
title: "Design"
|
|
90
100
|
}, children), /*#__PURE__*/_react["default"].createElement("div", {
|
|
91
101
|
title: "settings"
|
|
@@ -116,9 +126,16 @@ var styles = function styles() {
|
|
|
116
126
|
contentContainer: {
|
|
117
127
|
padding: '32px 16px 0 16px'
|
|
118
128
|
},
|
|
129
|
+
contentContainerMaxWidth: {
|
|
130
|
+
display: 'flex',
|
|
131
|
+
overflow: 'scroll'
|
|
132
|
+
},
|
|
119
133
|
configContainer: {
|
|
120
134
|
flex: '1',
|
|
121
135
|
marginRight: '20px'
|
|
136
|
+
},
|
|
137
|
+
contentContainerDesign: {
|
|
138
|
+
width: '100%'
|
|
122
139
|
}
|
|
123
140
|
};
|
|
124
141
|
};
|
|
@@ -1 +1 @@
|
|
|
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","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":";;;;;;;;;;;;;;;;;;;;;;;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,UAAMC,aAAa,GACjB,CAAAH,SAAS,SAAT,IAAAA,SAAS,WAAT,gCAAAA,SAAS,CAAEF,KAAX,sEAAkBK,aAAlB,MAAmCH,SAAnC,aAAmCA,SAAnC,4CAAmCA,SAAS,CAAEF,KAA9C,+EAAmC,kBAAkBG,QAArD,oFAAmC,sBAA4BH,KAA/D,2DAAmC,uBAAmCK,aAAtE,KAAuFC,SADzF;AAEA,UAAIC,gBAAgB,GAAGC,MAAM,CAACC,OAAP,CAAeJ,aAAa,IAAI,EAAhC,EAAoCK,IAApC,CAAyC;AAAA;AAAA,YAAEC,QAAF;AAAA,YAAYC,GAAZ;;AAAA,eAAqB,CAAC,EAACA,GAAD,aAACA,GAAD,eAACA,GAAG,CAAEC,QAAN,CAAtB;AAAA,OAAzC,CAAvB,CANO,CAOP;AACA;;AAEA,UAAI,CAACN,gBAAL,EAAuB;AACrB,YAAI;AACFA,UAAAA,gBAAgB,GAAGO,IAAI,CAACC,SAAL,CAAeV,aAAf,EAA8BW,KAA9B,CAAoC,gBAApC,EAAsDC,MAAzE;AACD,SAFD,CAEE,OAAOC,CAAP,EAAU;AACVC,UAAAA,OAAO,CAACC,GAAR,CAAYF,CAAC,CAACG,QAAF,EAAZ;AACD;AACF;;AAED,0BACE;AAAK,QAAA,SAAS,EAAE,4BAAWjB,OAAO,CAACkB,SAAnB;AAAhB,SACGrB,IAAI,KAAK,QAAT,iBACC;AAAK,QAAA,SAAS,EAAEG,OAAO,CAACmB;
|
|
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","JSON","stringify","match","length","e","console","log","toString","container","flow","maxWidth","configContainer","contentContainerMaxWidth","onTabsChange","contentContainer","contentContainerDesign","React","Component","PropTypes","oneOf","oneOfType","arrayOf","node","object","styles","display","justifyContent","flexDirection","position","padding","overflow","flex","marginRight","width"],"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 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} style={{ maxWidth: configuration.maxWidth || 'unset' }}>\n <div\n className={classnames(\n classes.configContainer,\n configuration.maxWidth && classes.contentContainerMaxWidth,\n )}\n style={{ maxWidth: configuration.maxWidth ? `calc(${configuration.maxWidth} - 330px)` : 'unset' }}\n >\n {children}\n </div>\n {hasSettingsPanel && <div>{secondary}</div>}\n </div>\n )}\n {mode === 'tabbed' && hasSettingsPanel && (\n <Tabs\n onChange={this.onTabsChange}\n contentClassName={classnames(\n classes.contentContainer,\n configuration.maxWidth && classes.contentContainerMaxWidth,\n )}\n contentStyle={{ maxWidth: configuration.maxWidth || 'unset' }}\n indicatorColor=\"primary\"\n >\n <div className={configuration.contentContainerDesign} title=\"Design\">\n {children}\n </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 contentContainerMaxWidth: {\n display: 'flex',\n overflow: 'scroll',\n },\n configContainer: {\n flex: '1',\n marginRight: '20px',\n },\n contentContainerDesign: {\n width: '100%',\n },\n});\n\nexport default withStyles(styles)(RawLayoutContents);\n"],"file":"layout-contents.js"}
|
package/lib/tabs/index.js
CHANGED
|
@@ -64,6 +64,7 @@ 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
|
+
contentStyle = _this$props.contentStyle,
|
|
67
68
|
classes = _this$props.classes;
|
|
68
69
|
var tabClasses = {
|
|
69
70
|
root: classes.tabRoot
|
|
@@ -81,7 +82,8 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
|
|
|
81
82
|
label: c.props.title
|
|
82
83
|
}) : null;
|
|
83
84
|
})), /*#__PURE__*/_react["default"].createElement("div", {
|
|
84
|
-
className: contentClassName
|
|
85
|
+
className: contentClassName,
|
|
86
|
+
style: contentStyle
|
|
85
87
|
}, children[value]));
|
|
86
88
|
}
|
|
87
89
|
}]);
|
|
@@ -93,6 +95,7 @@ exports.Tabs = Tabs;
|
|
|
93
95
|
classes: _propTypes["default"].object,
|
|
94
96
|
className: _propTypes["default"].string,
|
|
95
97
|
contentClassName: _propTypes["default"].string,
|
|
98
|
+
contentStyle: _propTypes["default"].object,
|
|
96
99
|
children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired
|
|
97
100
|
});
|
|
98
101
|
|
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","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;;;;;
|
|
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,wBAAyE,KAAKF,KAA9E;AAAA,UAAQK,QAAR,eAAQA,QAAR;AAAA,UAAkBC,SAAlB,eAAkBA,SAAlB;AAAA,UAA6BC,gBAA7B,eAA6BA,gBAA7B;AAAA,UAA+CC,YAA/C,eAA+CA,YAA/C;AAAA,UAA6DC,OAA7D,eAA6DA,OAA7D;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.4+19db4f8b",
|
|
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": "19db4f8b84587d9d3a1542d8c06c5cb86458b1f3"
|
|
30
30
|
}
|
|
@@ -33,14 +33,32 @@ class RawLayoutContents extends React.Component {
|
|
|
33
33
|
return (
|
|
34
34
|
<div className={classnames(classes.container)}>
|
|
35
35
|
{mode === 'inline' && (
|
|
36
|
-
<div className={classes.flow}>
|
|
37
|
-
<div
|
|
36
|
+
<div className={classes.flow} style={{ maxWidth: configuration.maxWidth || 'unset' }}>
|
|
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>
|
|
38
46
|
{hasSettingsPanel && <div>{secondary}</div>}
|
|
39
47
|
</div>
|
|
40
48
|
)}
|
|
41
49
|
{mode === 'tabbed' && hasSettingsPanel && (
|
|
42
|
-
<Tabs
|
|
43
|
-
|
|
50
|
+
<Tabs
|
|
51
|
+
onChange={this.onTabsChange}
|
|
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={configuration.contentContainerDesign} title="Design">
|
|
60
|
+
{children}
|
|
61
|
+
</div>
|
|
44
62
|
<div title="settings">{secondary}</div>
|
|
45
63
|
</Tabs>
|
|
46
64
|
)}
|
|
@@ -63,10 +81,17 @@ const styles = () => ({
|
|
|
63
81
|
contentContainer: {
|
|
64
82
|
padding: '32px 16px 0 16px',
|
|
65
83
|
},
|
|
84
|
+
contentContainerMaxWidth: {
|
|
85
|
+
display: 'flex',
|
|
86
|
+
overflow: 'scroll',
|
|
87
|
+
},
|
|
66
88
|
configContainer: {
|
|
67
89
|
flex: '1',
|
|
68
90
|
marginRight: '20px',
|
|
69
91
|
},
|
|
92
|
+
contentContainerDesign: {
|
|
93
|
+
width: '100%',
|
|
94
|
+
},
|
|
70
95
|
});
|
|
71
96
|
|
|
72
97
|
export default withStyles(styles)(RawLayoutContents);
|
package/src/tabs/index.jsx
CHANGED
|
@@ -10,6 +10,7 @@ export class Tabs extends React.Component {
|
|
|
10
10
|
classes: PropTypes.object,
|
|
11
11
|
className: PropTypes.string,
|
|
12
12
|
contentClassName: PropTypes.string,
|
|
13
|
+
contentStyle: PropTypes.object,
|
|
13
14
|
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
|
|
14
15
|
};
|
|
15
16
|
|
|
@@ -26,7 +27,7 @@ export class Tabs extends React.Component {
|
|
|
26
27
|
|
|
27
28
|
render() {
|
|
28
29
|
const { value } = this.state;
|
|
29
|
-
const { children, className, contentClassName, classes } = this.props;
|
|
30
|
+
const { children, className, contentClassName, contentStyle, classes } = this.props;
|
|
30
31
|
|
|
31
32
|
const tabClasses = {
|
|
32
33
|
root: classes.tabRoot,
|
|
@@ -38,7 +39,9 @@ export class Tabs extends React.Component {
|
|
|
38
39
|
c && c.props.title ? <MuiTab classes={tabClasses} key={index} label={c.props.title} /> : null,
|
|
39
40
|
)}
|
|
40
41
|
</MuiTabs>
|
|
41
|
-
<div className={contentClassName}
|
|
42
|
+
<div className={contentClassName} style={contentStyle}>
|
|
43
|
+
{children[value]}
|
|
44
|
+
</div>
|
|
42
45
|
</div>
|
|
43
46
|
);
|
|
44
47
|
}
|