@elliemae/ds-side-panel 1.60.0 → 2.0.0-alpha.12
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/cjs/SidePanel.js +40 -45
- package/cjs/SidePanelHeader.js +35 -45
- package/cjs/TemplateBasicPageWithSidePanel.js +27 -33
- package/cjs/defaultProps.js +1 -2
- package/cjs/index.js +1 -12
- package/cjs/props.js +1 -2
- package/esm/SidePanel.js +38 -43
- package/esm/SidePanelHeader.js +34 -44
- package/esm/TemplateBasicPageWithSidePanel.js +25 -31
- package/esm/defaultProps.js +1 -2
- package/esm/index.js +0 -11
- package/esm/props.js +1 -2
- package/package.json +52 -15
- package/types/SidePanel.d.ts +107 -0
- package/types/SidePanelHeader.d.ts +51 -0
- package/types/TemplateBasicPageWithSidePanel.d.ts +120 -0
- package/types/defaultProps.d.ts +8 -0
- package/types/index.d.ts +4 -0
- package/types/props.d.ts +102 -0
- package/SidePanel/package.json +0 -10
- package/SidePanelHeader/package.json +0 -10
- package/TemplateBasicPageWithSidePanel/package.json +0 -10
- package/cjs/SidePanel.js.map +0 -1
- package/cjs/SidePanelHeader.js.map +0 -1
- package/cjs/TemplateBasicPageWithSidePanel.js.map +0 -1
- package/cjs/defaultProps.js.map +0 -1
- package/cjs/index.js.map +0 -1
- package/cjs/props.js.map +0 -1
- package/defaultProps/package.json +0 -10
- package/esm/SidePanel.js.map +0 -1
- package/esm/SidePanelHeader.js.map +0 -1
- package/esm/TemplateBasicPageWithSidePanel.js.map +0 -1
- package/esm/defaultProps.js.map +0 -1
- package/esm/index.js.map +0 -1
- package/esm/props.js.map +0 -1
- package/props/package.json +0 -10
package/cjs/SidePanel.js
CHANGED
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
6
|
+
require('react');
|
|
6
7
|
var reactDesc = require('react-desc');
|
|
7
8
|
var styled = require('styled-components');
|
|
8
9
|
var dsSystem = require('@elliemae/ds-system');
|
|
@@ -12,54 +13,50 @@ var defaultProps = require('./defaultProps.js');
|
|
|
12
13
|
|
|
13
14
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
14
15
|
|
|
15
|
-
var
|
|
16
|
+
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
16
17
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
17
18
|
|
|
18
|
-
|
|
19
|
+
const Container = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
19
20
|
componentId: "sc-71f9h4-0"
|
|
20
|
-
})(["display:flex;height:100%;flex-direction:row;max-height:100%;overflow:hidden;", ""],
|
|
21
|
-
|
|
21
|
+
})(["display:flex;height:100%;flex-direction:row;max-height:100%;overflow:hidden;", ""], _ref => {
|
|
22
|
+
let {
|
|
23
|
+
noGridInfluencer
|
|
24
|
+
} = _ref;
|
|
22
25
|
return noGridInfluencer ? 'position: relative;' : '';
|
|
23
26
|
});
|
|
24
|
-
|
|
27
|
+
const TransGrid = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
|
|
25
28
|
componentId: "sc-71f9h4-1"
|
|
26
|
-
})(["box-shadow:", ";transition:300ms;border-left:", ";", " background:", ";"],
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
}, function (_ref2) {
|
|
31
|
-
var noGridInfluencer = _ref2.noGridInfluencer;
|
|
29
|
+
})(["box-shadow:", ";transition:300ms;border-left:", ";", " background:", ";"], props => props.withBoxShadow ? '0 2px 5px 0 rgba(53, 60, 70, 0.5)' : 'none', props => props.withBorder ? dsSystem.border(props.theme.colors.neutral['300'], '1px') : 'none', _ref2 => {
|
|
30
|
+
let {
|
|
31
|
+
noGridInfluencer
|
|
32
|
+
} = _ref2;
|
|
32
33
|
return noGridInfluencer ? "\n position: absolute;\n top:0;\n right:0;\n height: 100%;\n " : '';
|
|
33
|
-
},
|
|
34
|
-
|
|
35
|
-
});
|
|
36
|
-
var FooterContainer = /*#__PURE__*/styled__default['default'](dsGrid.Grid).withConfig({
|
|
34
|
+
}, props => props.theme.colors.neutral['000']);
|
|
35
|
+
const FooterContainer = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
|
|
37
36
|
componentId: "sc-71f9h4-2"
|
|
38
|
-
})(["border-top:", ";"],
|
|
39
|
-
return dsSystem.border(props.theme.colors.neutral['300']);
|
|
40
|
-
});
|
|
37
|
+
})(["border-top:", ";"], props => dsSystem.border(props.theme.colors.neutral['300']));
|
|
41
38
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
return /*#__PURE__*/
|
|
39
|
+
const SidePanel = _ref3 => {
|
|
40
|
+
let {
|
|
41
|
+
children,
|
|
42
|
+
isOpen,
|
|
43
|
+
footer,
|
|
44
|
+
header,
|
|
45
|
+
panelContent,
|
|
46
|
+
panelWidth,
|
|
47
|
+
panelContentOverflow,
|
|
48
|
+
widthWhenIsClosed,
|
|
49
|
+
noGridInfluencer,
|
|
50
|
+
withBorder = true,
|
|
51
|
+
withBoxShadow = false
|
|
52
|
+
} = _ref3;
|
|
53
|
+
return /*#__PURE__*/_jsx__default["default"](Container, {
|
|
57
54
|
noGridInfluencer: noGridInfluencer
|
|
58
|
-
}, /*#__PURE__*/
|
|
55
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](TransGrid, {
|
|
59
56
|
height: "100%",
|
|
60
57
|
flex: "1",
|
|
61
58
|
mr: noGridInfluencer ? "".concat(widthWhenIsClosed, "px") : 0
|
|
62
|
-
}, children), /*#__PURE__*/
|
|
59
|
+
}, void 0, children), /*#__PURE__*/_jsx__default["default"](TransGrid, {
|
|
63
60
|
style: {
|
|
64
61
|
overflow: 'hidden'
|
|
65
62
|
},
|
|
@@ -71,32 +68,30 @@ var SidePanel = function SidePanel(_ref3) {
|
|
|
71
68
|
isOpen: isOpen,
|
|
72
69
|
cols: [1],
|
|
73
70
|
noGridInfluencer: noGridInfluencer
|
|
74
|
-
}, /*#__PURE__*/
|
|
71
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
|
|
75
72
|
rows: footer ? [header ? '48px' : '0px', 'minmax(0px, 1fr)', '48px'] : [header ? '48px' : '0px', 'minmax(0px, 1fr)'],
|
|
76
73
|
style: {
|
|
77
74
|
overflow: 'hidden'
|
|
78
75
|
}
|
|
79
|
-
}, /*#__PURE__*/
|
|
76
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, header), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
|
|
80
77
|
style: {
|
|
81
78
|
overflow: 'hidden'
|
|
82
79
|
}
|
|
83
|
-
}, /*#__PURE__*/
|
|
80
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
|
|
84
81
|
style: {
|
|
85
82
|
overflow: panelContentOverflow
|
|
86
83
|
}
|
|
87
|
-
}, panelContent)), footer ? /*#__PURE__*/
|
|
84
|
+
}, void 0, panelContent)), footer ? /*#__PURE__*/_jsx__default["default"](FooterContainer, {
|
|
88
85
|
alignItems: "center",
|
|
89
86
|
pl: "xs",
|
|
90
87
|
pr: "xs"
|
|
91
|
-
}, footer) : null)));
|
|
88
|
+
}, void 0, footer) : null)));
|
|
92
89
|
};
|
|
93
90
|
|
|
94
|
-
SidePanel.propTypes = props.props;
|
|
95
91
|
SidePanel.defaultProps = defaultProps.defaultProps;
|
|
96
|
-
|
|
92
|
+
const DSSidePanelWithSchema = reactDesc.describe(SidePanel);
|
|
97
93
|
DSSidePanelWithSchema.propTypes = props.props;
|
|
98
94
|
|
|
99
95
|
exports.DSSidePanelWithSchema = DSSidePanelWithSchema;
|
|
100
96
|
exports.SidePanel = SidePanel;
|
|
101
|
-
exports[
|
|
102
|
-
//# sourceMappingURL=SidePanel.js.map
|
|
97
|
+
exports["default"] = SidePanel;
|
package/cjs/SidePanelHeader.js
CHANGED
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
6
|
+
require('react');
|
|
6
7
|
var reactDesc = require('react-desc');
|
|
7
8
|
var styled = require('styled-components');
|
|
8
9
|
var lodash = require('lodash');
|
|
@@ -13,82 +14,73 @@ var dsGrid = require('@elliemae/ds-grid');
|
|
|
13
14
|
|
|
14
15
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
15
16
|
|
|
16
|
-
var
|
|
17
|
+
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
17
18
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
18
19
|
var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
|
|
19
20
|
|
|
20
|
-
var
|
|
21
|
+
var _Grid, _CloseSmall;
|
|
22
|
+
const StyledSeparator = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
21
23
|
componentId: "sc-1xdsdq5-0"
|
|
22
|
-
})(["width:0;height:100%;margin:0 ", ";border-left:", ";"],
|
|
23
|
-
|
|
24
|
-
}, function (props) {
|
|
25
|
-
return "".concat(props.theme.colors.neutral[300], " 1px solid");
|
|
26
|
-
});
|
|
27
|
-
var StyledTitle = /*#__PURE__*/styled__default['default'].div.withConfig({
|
|
24
|
+
})(["width:0;height:100%;margin:0 ", ";border-left:", ";"], props => props.theme.space.xxs, props => "".concat(props.theme.colors.neutral[300], " 1px solid"));
|
|
25
|
+
const StyledTitle = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
28
26
|
componentId: "sc-1xdsdq5-1"
|
|
29
|
-
})(["font-size:18px;font-weight:", ";color:", ";", ""],
|
|
30
|
-
|
|
31
|
-
}, function (props) {
|
|
32
|
-
return props.theme.colors.neutral['700'];
|
|
33
|
-
}, dsSystem.truncate());
|
|
34
|
-
var Wrapper = /*#__PURE__*/styled__default['default'](dsGrid.Grid).withConfig({
|
|
27
|
+
})(["font-size:18px;font-weight:", ";color:", ";", ""], props => props.theme.fontWeights.regular, props => props.theme.colors.neutral['700'], dsSystem.truncate());
|
|
28
|
+
const Wrapper = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
|
|
35
29
|
componentId: "sc-1xdsdq5-2"
|
|
36
|
-
})(["border-bottom:", ";"],
|
|
37
|
-
return dsSystem.border(props.theme.colors.neutral['300']);
|
|
38
|
-
});
|
|
30
|
+
})(["border-bottom:", ";"], props => dsSystem.border(props.theme.colors.neutral['300']));
|
|
39
31
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
var separator = /*#__PURE__*/React__default['default'].createElement(dsGrid.Grid, {
|
|
32
|
+
const SidePanelHeader = _ref => {
|
|
33
|
+
let {
|
|
34
|
+
title = null,
|
|
35
|
+
additionalAction = null,
|
|
36
|
+
onClose = lodash.noop,
|
|
37
|
+
showClose = true
|
|
38
|
+
} = _ref;
|
|
39
|
+
const theme = dsSystem.useTheme();
|
|
40
|
+
|
|
41
|
+
const separator = _Grid || (_Grid = /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
|
|
51
42
|
height: "24px"
|
|
52
|
-
}, /*#__PURE__*/
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
43
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](StyledSeparator, {})));
|
|
44
|
+
|
|
45
|
+
const cols = [1, 'auto', 'auto'];
|
|
46
|
+
const cols2 = ['auto'];
|
|
47
|
+
return /*#__PURE__*/_jsx__default["default"](Wrapper, {
|
|
56
48
|
cols: cols,
|
|
57
49
|
height: theme.space.m,
|
|
58
50
|
pl: theme.space.xs,
|
|
59
51
|
pr: theme.space.xs,
|
|
60
52
|
alignItems: "center",
|
|
61
53
|
width: "100%"
|
|
62
|
-
}, /*#__PURE__*/
|
|
54
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
|
|
63
55
|
alignItems: "center",
|
|
64
56
|
justifyContent: "flex-start",
|
|
65
57
|
cols: cols2
|
|
66
|
-
}, /*#__PURE__*/
|
|
58
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
|
|
67
59
|
cols: [1],
|
|
68
60
|
alignItems: "center",
|
|
69
61
|
pr: theme.space.xs
|
|
70
|
-
}, /*#__PURE__*/
|
|
62
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
|
|
71
63
|
flexGrow: 0
|
|
72
|
-
}, /*#__PURE__*/
|
|
64
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
|
|
73
65
|
cols: ['auto', 'auto'],
|
|
74
66
|
alignItems: "center"
|
|
75
|
-
}, /*#__PURE__*/
|
|
67
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](StyledTitle, {
|
|
76
68
|
maxWidth: "100%",
|
|
77
69
|
alignItems: "center"
|
|
78
|
-
}, title))))), /*#__PURE__*/
|
|
70
|
+
}, void 0, title))))), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
|
|
79
71
|
ml: "xxs",
|
|
80
72
|
alignItems: "center",
|
|
81
73
|
cols: additionalAction ? ['auto', 'auto', 'auto'] : ['auto']
|
|
82
|
-
}, additionalAction && /*#__PURE__*/
|
|
74
|
+
}, void 0, additionalAction && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, additionalAction), additionalAction && showClose && separator, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, showClose && /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
|
|
83
75
|
buttonType: "text",
|
|
84
|
-
icon: /*#__PURE__*/
|
|
76
|
+
icon: _CloseSmall || (_CloseSmall = /*#__PURE__*/_jsx__default["default"](dsIcons.CloseSmall, {})),
|
|
85
77
|
size: "m",
|
|
86
78
|
onClick: onClose,
|
|
87
79
|
"data-testid": "btn-close-slide-panel"
|
|
88
80
|
}))));
|
|
89
81
|
};
|
|
90
82
|
|
|
91
|
-
|
|
83
|
+
const props = {
|
|
92
84
|
/** Page title */
|
|
93
85
|
title: reactDesc.PropTypes.string.description('Page title'),
|
|
94
86
|
|
|
@@ -101,10 +93,8 @@ var props = {
|
|
|
101
93
|
/** Show/Hide close button */
|
|
102
94
|
showClose: reactDesc.PropTypes.bool.description('Show/Hide close button')
|
|
103
95
|
};
|
|
104
|
-
|
|
105
|
-
var DSSidePanelHeaderWithSchema = reactDesc.describe(SidePanelHeader);
|
|
96
|
+
const DSSidePanelHeaderWithSchema = reactDesc.describe(SidePanelHeader);
|
|
106
97
|
DSSidePanelHeaderWithSchema.propTypes = props;
|
|
107
98
|
|
|
108
99
|
exports.DSSidePanelHeaderWithSchema = DSSidePanelHeaderWithSchema;
|
|
109
100
|
exports.SidePanelHeader = SidePanelHeader;
|
|
110
|
-
//# sourceMappingURL=SidePanelHeader.js.map
|
|
@@ -2,34 +2,30 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
6
|
+
require('react');
|
|
6
7
|
var reactDesc = require('react-desc');
|
|
7
8
|
var dsGrid = require('@elliemae/ds-grid');
|
|
8
9
|
var SidePanel = require('./SidePanel.js');
|
|
9
|
-
require('styled-components');
|
|
10
|
-
require('@elliemae/ds-system');
|
|
11
|
-
require('./props.js');
|
|
12
|
-
require('./defaultProps.js');
|
|
13
10
|
|
|
14
11
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
15
12
|
|
|
16
|
-
var
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
return /*#__PURE__*/React__default['default'].createElement(dsGrid.Grid, {
|
|
13
|
+
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
14
|
+
|
|
15
|
+
const TemplateBasicPageWithSidePanel = _ref => {
|
|
16
|
+
let {
|
|
17
|
+
globalHeader = null,
|
|
18
|
+
mainHeader = null,
|
|
19
|
+
mainContent,
|
|
20
|
+
mainFooter,
|
|
21
|
+
isOpen = false,
|
|
22
|
+
onClose,
|
|
23
|
+
panelFooter,
|
|
24
|
+
panelHeader,
|
|
25
|
+
panelContent,
|
|
26
|
+
panelWidth
|
|
27
|
+
} = _ref;
|
|
28
|
+
return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
|
|
33
29
|
style: {
|
|
34
30
|
overflow: 'hidden',
|
|
35
31
|
width: '100%'
|
|
@@ -37,38 +33,38 @@ var TemplateBasicPageWithSidePanel = function TemplateBasicPageWithSidePanel(_re
|
|
|
37
33
|
height: "100%",
|
|
38
34
|
maxHeight: "100%",
|
|
39
35
|
rows: ['auto', '1fr']
|
|
40
|
-
}, /*#__PURE__*/
|
|
36
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, globalHeader), /*#__PURE__*/_jsx__default["default"](SidePanel.SidePanel, {
|
|
41
37
|
footer: panelFooter,
|
|
42
38
|
header: panelHeader,
|
|
43
39
|
panelWidth: panelWidth,
|
|
44
40
|
onClose: onClose,
|
|
45
41
|
panelContent: panelContent,
|
|
46
42
|
isOpen: isOpen
|
|
47
|
-
}, /*#__PURE__*/
|
|
43
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
|
|
48
44
|
style: {
|
|
49
45
|
overflow: 'hidden'
|
|
50
46
|
},
|
|
51
47
|
height: "100%",
|
|
52
48
|
maxHeight: "100%"
|
|
53
|
-
}, /*#__PURE__*/
|
|
49
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
|
|
54
50
|
rows: mainFooter ? [mainHeader ? 'auto' : '0px', 'minmax(0px, 1fr)', '48px'] : [mainHeader ? 'auto' : '0px', 'minmax(0px, 1fr)'],
|
|
55
51
|
style: {
|
|
56
52
|
overflow: 'hidden'
|
|
57
53
|
}
|
|
58
|
-
}, /*#__PURE__*/
|
|
54
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, mainHeader), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
|
|
59
55
|
style: {
|
|
60
56
|
overflow: 'hidden'
|
|
61
57
|
}
|
|
62
|
-
}, /*#__PURE__*/
|
|
58
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
|
|
63
59
|
style: {
|
|
64
60
|
overflow: 'auto'
|
|
65
61
|
}
|
|
66
|
-
}, mainContent)), mainFooter && /*#__PURE__*/
|
|
62
|
+
}, void 0, mainContent)), mainFooter && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
|
|
67
63
|
alignItems: "center"
|
|
68
|
-
}, mainFooter)))));
|
|
64
|
+
}, void 0, mainFooter)))));
|
|
69
65
|
};
|
|
70
66
|
|
|
71
|
-
|
|
67
|
+
const props = {
|
|
72
68
|
/**
|
|
73
69
|
* Global Header
|
|
74
70
|
*/
|
|
@@ -119,10 +115,8 @@ var props = {
|
|
|
119
115
|
*/
|
|
120
116
|
onClose: reactDesc.PropTypes.func.description('callback')
|
|
121
117
|
};
|
|
122
|
-
|
|
123
|
-
var DSTemplateBasicPageWithSidePanel = reactDesc.describe(TemplateBasicPageWithSidePanel);
|
|
118
|
+
const DSTemplateBasicPageWithSidePanel = reactDesc.describe(TemplateBasicPageWithSidePanel);
|
|
124
119
|
DSTemplateBasicPageWithSidePanel.propTypes = props;
|
|
125
120
|
|
|
126
121
|
exports.DSTemplateBasicPageWithSidePanel = DSTemplateBasicPageWithSidePanel;
|
|
127
122
|
exports.TemplateBasicPageWithSidePanel = TemplateBasicPageWithSidePanel;
|
|
128
|
-
//# sourceMappingURL=TemplateBasicPageWithSidePanel.js.map
|
package/cjs/defaultProps.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
const defaultProps = {
|
|
6
6
|
isOpen: false,
|
|
7
7
|
panelWidth: 300,
|
|
8
8
|
widthWhenIsClosed: 0,
|
|
@@ -12,4 +12,3 @@ var defaultProps = {
|
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
exports.defaultProps = defaultProps;
|
|
15
|
-
//# sourceMappingURL=defaultProps.js.map
|
package/cjs/index.js
CHANGED
|
@@ -5,24 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var SidePanel = require('./SidePanel.js');
|
|
6
6
|
var SidePanelHeader = require('./SidePanelHeader.js');
|
|
7
7
|
var TemplateBasicPageWithSidePanel = require('./TemplateBasicPageWithSidePanel.js');
|
|
8
|
-
require('react');
|
|
9
|
-
require('react-desc');
|
|
10
|
-
require('styled-components');
|
|
11
|
-
require('@elliemae/ds-system');
|
|
12
|
-
require('@elliemae/ds-grid');
|
|
13
|
-
require('./props.js');
|
|
14
|
-
require('./defaultProps.js');
|
|
15
|
-
require('lodash');
|
|
16
|
-
require('@elliemae/ds-icons');
|
|
17
|
-
require('@elliemae/ds-button');
|
|
18
8
|
|
|
19
9
|
|
|
20
10
|
|
|
21
11
|
exports.DSSidePanelWithSchema = SidePanel.DSSidePanelWithSchema;
|
|
22
12
|
exports.SidePanel = SidePanel.SidePanel;
|
|
23
|
-
exports
|
|
13
|
+
exports["default"] = SidePanel.SidePanel;
|
|
24
14
|
exports.DSSidePanelHeaderWithSchema = SidePanelHeader.DSSidePanelHeaderWithSchema;
|
|
25
15
|
exports.SidePanelHeader = SidePanelHeader.SidePanelHeader;
|
|
26
16
|
exports.DSTemplateBasicPageWithSidePanel = TemplateBasicPageWithSidePanel.DSTemplateBasicPageWithSidePanel;
|
|
27
17
|
exports.TemplateBasicPageWithSidePanel = TemplateBasicPageWithSidePanel.TemplateBasicPageWithSidePanel;
|
|
28
|
-
//# sourceMappingURL=index.js.map
|
package/cjs/props.js
CHANGED
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var reactDesc = require('react-desc');
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
const props = {
|
|
8
8
|
/**
|
|
9
9
|
* Main content
|
|
10
10
|
*/
|
|
@@ -42,4 +42,3 @@ var props = {
|
|
|
42
42
|
};
|
|
43
43
|
|
|
44
44
|
exports.props = props;
|
|
45
|
-
//# sourceMappingURL=props.js.map
|
package/esm/SidePanel.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
2
|
+
import 'react';
|
|
2
3
|
import { describe } from 'react-desc';
|
|
3
4
|
import styled from 'styled-components';
|
|
4
5
|
import { border } from '@elliemae/ds-system';
|
|
@@ -6,51 +7,47 @@ import { Grid } from '@elliemae/ds-grid';
|
|
|
6
7
|
import { props } from './props.js';
|
|
7
8
|
import { defaultProps } from './defaultProps.js';
|
|
8
9
|
|
|
9
|
-
|
|
10
|
+
const Container = /*#__PURE__*/styled.div.withConfig({
|
|
10
11
|
componentId: "sc-71f9h4-0"
|
|
11
|
-
})(["display:flex;height:100%;flex-direction:row;max-height:100%;overflow:hidden;", ""],
|
|
12
|
-
|
|
12
|
+
})(["display:flex;height:100%;flex-direction:row;max-height:100%;overflow:hidden;", ""], _ref => {
|
|
13
|
+
let {
|
|
14
|
+
noGridInfluencer
|
|
15
|
+
} = _ref;
|
|
13
16
|
return noGridInfluencer ? 'position: relative;' : '';
|
|
14
17
|
});
|
|
15
|
-
|
|
18
|
+
const TransGrid = /*#__PURE__*/styled(Grid).withConfig({
|
|
16
19
|
componentId: "sc-71f9h4-1"
|
|
17
|
-
})(["box-shadow:", ";transition:300ms;border-left:", ";", " background:", ";"],
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}, function (_ref2) {
|
|
22
|
-
var noGridInfluencer = _ref2.noGridInfluencer;
|
|
20
|
+
})(["box-shadow:", ";transition:300ms;border-left:", ";", " background:", ";"], props => props.withBoxShadow ? '0 2px 5px 0 rgba(53, 60, 70, 0.5)' : 'none', props => props.withBorder ? border(props.theme.colors.neutral['300'], '1px') : 'none', _ref2 => {
|
|
21
|
+
let {
|
|
22
|
+
noGridInfluencer
|
|
23
|
+
} = _ref2;
|
|
23
24
|
return noGridInfluencer ? "\n position: absolute;\n top:0;\n right:0;\n height: 100%;\n " : '';
|
|
24
|
-
},
|
|
25
|
-
|
|
26
|
-
});
|
|
27
|
-
var FooterContainer = /*#__PURE__*/styled(Grid).withConfig({
|
|
25
|
+
}, props => props.theme.colors.neutral['000']);
|
|
26
|
+
const FooterContainer = /*#__PURE__*/styled(Grid).withConfig({
|
|
28
27
|
componentId: "sc-71f9h4-2"
|
|
29
|
-
})(["border-top:", ";"],
|
|
30
|
-
return border(props.theme.colors.neutral['300']);
|
|
31
|
-
});
|
|
28
|
+
})(["border-top:", ";"], props => border(props.theme.colors.neutral['300']));
|
|
32
29
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
return /*#__PURE__*/
|
|
30
|
+
const SidePanel = _ref3 => {
|
|
31
|
+
let {
|
|
32
|
+
children,
|
|
33
|
+
isOpen,
|
|
34
|
+
footer,
|
|
35
|
+
header,
|
|
36
|
+
panelContent,
|
|
37
|
+
panelWidth,
|
|
38
|
+
panelContentOverflow,
|
|
39
|
+
widthWhenIsClosed,
|
|
40
|
+
noGridInfluencer,
|
|
41
|
+
withBorder = true,
|
|
42
|
+
withBoxShadow = false
|
|
43
|
+
} = _ref3;
|
|
44
|
+
return /*#__PURE__*/_jsx(Container, {
|
|
48
45
|
noGridInfluencer: noGridInfluencer
|
|
49
|
-
}, /*#__PURE__*/
|
|
46
|
+
}, void 0, /*#__PURE__*/_jsx(TransGrid, {
|
|
50
47
|
height: "100%",
|
|
51
48
|
flex: "1",
|
|
52
49
|
mr: noGridInfluencer ? "".concat(widthWhenIsClosed, "px") : 0
|
|
53
|
-
}, children), /*#__PURE__*/
|
|
50
|
+
}, void 0, children), /*#__PURE__*/_jsx(TransGrid, {
|
|
54
51
|
style: {
|
|
55
52
|
overflow: 'hidden'
|
|
56
53
|
},
|
|
@@ -62,30 +59,28 @@ var SidePanel = function SidePanel(_ref3) {
|
|
|
62
59
|
isOpen: isOpen,
|
|
63
60
|
cols: [1],
|
|
64
61
|
noGridInfluencer: noGridInfluencer
|
|
65
|
-
}, /*#__PURE__*/
|
|
62
|
+
}, void 0, /*#__PURE__*/_jsx(Grid, {
|
|
66
63
|
rows: footer ? [header ? '48px' : '0px', 'minmax(0px, 1fr)', '48px'] : [header ? '48px' : '0px', 'minmax(0px, 1fr)'],
|
|
67
64
|
style: {
|
|
68
65
|
overflow: 'hidden'
|
|
69
66
|
}
|
|
70
|
-
}, /*#__PURE__*/
|
|
67
|
+
}, void 0, /*#__PURE__*/_jsx(Grid, {}, void 0, header), /*#__PURE__*/_jsx(Grid, {
|
|
71
68
|
style: {
|
|
72
69
|
overflow: 'hidden'
|
|
73
70
|
}
|
|
74
|
-
}, /*#__PURE__*/
|
|
71
|
+
}, void 0, /*#__PURE__*/_jsx(Grid, {
|
|
75
72
|
style: {
|
|
76
73
|
overflow: panelContentOverflow
|
|
77
74
|
}
|
|
78
|
-
}, panelContent)), footer ? /*#__PURE__*/
|
|
75
|
+
}, void 0, panelContent)), footer ? /*#__PURE__*/_jsx(FooterContainer, {
|
|
79
76
|
alignItems: "center",
|
|
80
77
|
pl: "xs",
|
|
81
78
|
pr: "xs"
|
|
82
|
-
}, footer) : null)));
|
|
79
|
+
}, void 0, footer) : null)));
|
|
83
80
|
};
|
|
84
81
|
|
|
85
|
-
SidePanel.propTypes = props;
|
|
86
82
|
SidePanel.defaultProps = defaultProps;
|
|
87
|
-
|
|
83
|
+
const DSSidePanelWithSchema = describe(SidePanel);
|
|
88
84
|
DSSidePanelWithSchema.propTypes = props;
|
|
89
85
|
|
|
90
86
|
export { DSSidePanelWithSchema, SidePanel, SidePanel as default };
|
|
91
|
-
//# sourceMappingURL=SidePanel.js.map
|