@elliemae/ds-side-panel 3.6.0-next.3 → 3.6.0-rc.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.
- package/dist/cjs/SidePanel.js +54 -51
- package/dist/cjs/SidePanel.js.map +3 -3
- package/dist/cjs/{props.js → react-desc-prop-types.js} +15 -6
- package/dist/cjs/react-desc-prop-types.js.map +7 -0
- package/dist/cjs/{defaultProps.js → useDelayedOpen.js} +16 -12
- package/dist/cjs/useDelayedOpen.js.map +7 -0
- package/dist/esm/SidePanel.js +53 -50
- package/dist/esm/SidePanel.js.map +2 -2
- package/dist/esm/{props.js → react-desc-prop-types.js} +12 -3
- package/dist/esm/react-desc-prop-types.js.map +7 -0
- package/dist/esm/useDelayedOpen.js +17 -0
- package/dist/esm/useDelayedOpen.js.map +7 -0
- package/package.json +6 -6
- package/dist/cjs/defaultProps.js.map +0 -7
- package/dist/cjs/props.js.map +0 -7
- package/dist/esm/defaultProps.js +0 -13
- package/dist/esm/defaultProps.js.map +0 -7
- package/dist/esm/props.js.map +0 -7
package/dist/cjs/SidePanel.js
CHANGED
|
@@ -33,10 +33,9 @@ var React = __toESM(require("react"));
|
|
|
33
33
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
34
34
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
35
35
|
var import_ds_system = require("@elliemae/ds-system");
|
|
36
|
-
var import_ds_system2 = require("@elliemae/ds-system");
|
|
37
36
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
38
|
-
var
|
|
39
|
-
var
|
|
37
|
+
var import_react_desc_prop_types = require("./react-desc-prop-types");
|
|
38
|
+
var import_useDelayedOpen = require("./useDelayedOpen");
|
|
40
39
|
const Container = import_ds_system.styled.div`
|
|
41
40
|
display: flex;
|
|
42
41
|
height: 100%;
|
|
@@ -48,7 +47,7 @@ const Container = import_ds_system.styled.div`
|
|
|
48
47
|
const TransGrid = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
49
48
|
box-shadow: ${(props) => props.withBoxShadow ? "0 2px 5px 0 rgba(53, 60, 70, 0.5)" : "none"};
|
|
50
49
|
transition: 300ms;
|
|
51
|
-
border-left: ${(props) => props.withBorder ? (0,
|
|
50
|
+
border-left: ${(props) => props.withBorder ? (0, import_ds_system.border)(props.theme.colors.neutral["300"], "1px") : "none"};
|
|
52
51
|
${({ noGridInfluencer }) => noGridInfluencer ? `
|
|
53
52
|
position: absolute;
|
|
54
53
|
top:0;
|
|
@@ -58,7 +57,7 @@ const TransGrid = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
|
58
57
|
background: ${(props) => props.theme.colors.neutral["000"]};
|
|
59
58
|
`;
|
|
60
59
|
const FooterContainer = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
61
|
-
border-top: ${(props) => (0,
|
|
60
|
+
border-top: ${(props) => (0, import_ds_system.border)(props.theme.colors.neutral["300"])};
|
|
62
61
|
`;
|
|
63
62
|
const SidePanel = ({
|
|
64
63
|
children,
|
|
@@ -69,57 +68,61 @@ const SidePanel = ({
|
|
|
69
68
|
panelWidth,
|
|
70
69
|
panelContentOverflow,
|
|
71
70
|
widthWhenIsClosed,
|
|
72
|
-
noGridInfluencer,
|
|
71
|
+
noGridInfluencer = false,
|
|
73
72
|
withBorder = true,
|
|
74
73
|
withBoxShadow = false
|
|
75
|
-
}) =>
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
maxHeight: "100%",
|
|
88
|
-
width: isOpen ? `${panelWidth}px` : `${widthWhenIsClosed}px`,
|
|
89
|
-
withBorder,
|
|
90
|
-
withBoxShadow,
|
|
91
|
-
isOpen,
|
|
92
|
-
cols: [1],
|
|
93
|
-
noGridInfluencer,
|
|
94
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, {
|
|
95
|
-
rows: footer ? [header ? "48px" : "0px", "minmax(0px, 1fr)", "48px"] : [header ? "48px" : "0px", "minmax(0px, 1fr)"],
|
|
74
|
+
}) => {
|
|
75
|
+
const isOpenAnimated = (0, import_useDelayedOpen.useDelayedOpen)(isOpen);
|
|
76
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Container, {
|
|
77
|
+
noGridInfluencer,
|
|
78
|
+
children: [
|
|
79
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TransGrid, {
|
|
80
|
+
height: "100%",
|
|
81
|
+
flex: "1",
|
|
82
|
+
mr: noGridInfluencer ? `${widthWhenIsClosed}px` : 0,
|
|
83
|
+
children
|
|
84
|
+
}),
|
|
85
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TransGrid, {
|
|
96
86
|
style: { overflow: "hidden" },
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
87
|
+
height: "100%",
|
|
88
|
+
maxHeight: "100%",
|
|
89
|
+
width: isOpen ? `${panelWidth}px` : `${widthWhenIsClosed}px`,
|
|
90
|
+
withBorder,
|
|
91
|
+
withBoxShadow,
|
|
92
|
+
cols: [1],
|
|
93
|
+
noGridInfluencer,
|
|
94
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
|
|
95
|
+
rows: footer ? [header ? "48px" : "0px", "minmax(0px, 1fr)", "48px"] : [header ? "48px" : "0px", "minmax(0px, 1fr)"],
|
|
96
|
+
style: { overflow: "hidden" },
|
|
97
|
+
children: isOpenAnimated && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
98
|
+
children: [
|
|
99
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
|
|
100
|
+
children: header
|
|
101
|
+
}),
|
|
102
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
|
|
103
|
+
style: { overflow: "hidden" },
|
|
104
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
|
|
105
|
+
style: { overflow: panelContentOverflow },
|
|
106
|
+
children: panelContent
|
|
107
|
+
})
|
|
108
|
+
}),
|
|
109
|
+
footer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FooterContainer, {
|
|
110
|
+
alignItems: "center",
|
|
111
|
+
pl: "xs",
|
|
112
|
+
pr: "xs",
|
|
113
|
+
children: footer
|
|
114
|
+
})
|
|
115
|
+
]
|
|
116
|
+
})
|
|
117
|
+
})
|
|
115
118
|
})
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
}
|
|
119
|
-
SidePanel.propTypes =
|
|
120
|
-
SidePanel.defaultProps =
|
|
119
|
+
]
|
|
120
|
+
});
|
|
121
|
+
};
|
|
122
|
+
SidePanel.propTypes = import_react_desc_prop_types.DSInputTextPropTypes;
|
|
123
|
+
SidePanel.defaultProps = import_react_desc_prop_types.defaultProps;
|
|
121
124
|
SidePanel.displayName = "SidePanel";
|
|
122
125
|
const DSSidePanelWithSchema = (0, import_ds_utilities.describe)(SidePanel);
|
|
123
|
-
DSSidePanelWithSchema.propTypes =
|
|
126
|
+
DSSidePanelWithSchema.propTypes = import_react_desc_prop_types.DSInputTextPropTypes;
|
|
124
127
|
var SidePanel_default = SidePanel;
|
|
125
128
|
//# sourceMappingURL=SidePanel.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SidePanel.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { styled
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,0BAAyB;AACzB,
|
|
6
|
-
"names": [
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { styled, border } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputTextPropTypes, defaultProps, DSSidePanelT } from './react-desc-prop-types';\nimport { useDelayedOpen } from './useDelayedOpen';\n\nconst Container = styled.div<{ noGridInfluencer: boolean }>`\n display: flex;\n height: 100%;\n flex-direction: row;\n max-height: 100%;\n overflow: hidden;\n ${({ noGridInfluencer }) => (noGridInfluencer ? 'position: relative;' : '')}\n`;\n\nconst TransGrid = styled(Grid)<{ withBoxShadow: boolean; withBorder: boolean; noGridInfluencer: boolean }>`\n box-shadow: ${(props) => (props.withBoxShadow ? '0 2px 5px 0 rgba(53, 60, 70, 0.5)' : 'none')};\n transition: 300ms;\n border-left: ${(props) => (props.withBorder ? border(props.theme.colors.neutral['300'], '1px') : 'none')};\n ${({ noGridInfluencer }) =>\n noGridInfluencer\n ? `\n position: absolute;\n top:0;\n right:0;\n height: 100%;\n `\n : ''}\n background: ${(props) => props.theme.colors.neutral['000']};\n`;\n\nconst FooterContainer = styled(Grid)`\n border-top: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nconst SidePanel: React.ComponentType<DSSidePanelT.Props> = ({\n children,\n isOpen,\n footer,\n header,\n panelContent,\n panelWidth,\n panelContentOverflow,\n widthWhenIsClosed,\n noGridInfluencer = false,\n withBorder = true,\n withBoxShadow = false,\n}) => {\n const isOpenAnimated = useDelayedOpen(isOpen);\n\n return (\n <Container noGridInfluencer={noGridInfluencer}>\n <TransGrid height=\"100%\" flex=\"1\" mr={noGridInfluencer ? `${widthWhenIsClosed}px` : 0}>\n {children}\n </TransGrid>\n <TransGrid\n style={{ overflow: 'hidden' }}\n height=\"100%\"\n maxHeight=\"100%\"\n width={isOpen ? `${panelWidth}px` : `${widthWhenIsClosed}px`}\n withBorder={withBorder}\n withBoxShadow={withBoxShadow}\n cols={[1]}\n noGridInfluencer={noGridInfluencer}\n >\n <Grid\n rows={\n footer\n ? [header ? '48px' : '0px', 'minmax(0px, 1fr)', '48px']\n : [header ? '48px' : '0px', 'minmax(0px, 1fr)']\n }\n style={{ overflow: 'hidden' }}\n >\n {isOpenAnimated && (\n <>\n <Grid>{header}</Grid>\n <Grid style={{ overflow: 'hidden' }}>\n <Grid style={{ overflow: panelContentOverflow }}>{panelContent}</Grid>\n </Grid>\n {footer && (\n <FooterContainer alignItems=\"center\" pl=\"xs\" pr=\"xs\">\n {footer}\n </FooterContainer>\n )}\n </>\n )}\n </Grid>\n </TransGrid>\n </Container>\n );\n};\n\nSidePanel.propTypes = DSInputTextPropTypes;\nSidePanel.defaultProps = defaultProps;\nSidePanel.displayName = 'SidePanel';\nconst DSSidePanelWithSchema = describe(SidePanel);\nDSSidePanelWithSchema.propTypes = DSInputTextPropTypes;\n\nexport { SidePanel, DSSidePanelWithSchema };\nexport default SidePanel;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,0BAAyB;AACzB,uBAA+B;AAC/B,qBAAqB;AACrB,mCAAiE;AACjE,4BAA+B;AAE/B,MAAM,YAAY,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrB,CAAC,EAAE,iBAAiB,MAAO,mBAAmB,wBAAwB;AAAA;AAG1E,MAAM,gBAAY,yBAAO,mBAAI;AAAA,gBACb,CAAC,UAAW,MAAM,gBAAgB,sCAAsC;AAAA;AAAA,iBAEvE,CAAC,UAAW,MAAM,iBAAa,yBAAO,MAAM,MAAM,OAAO,QAAQ,QAAQ,KAAK,IAAI;AAAA,IAC/F,CAAC,EAAE,iBAAiB,MACpB,mBACI;AAAA;AAAA;AAAA;AAAA;AAAA,OAMA;AAAA,gBACQ,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGtD,MAAM,sBAAkB,yBAAO,mBAAI;AAAA,gBACnB,CAAC,cAAU,yBAAO,MAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAGnE,MAAM,YAAqD,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb,gBAAgB;AAClB,MAAM;AACJ,QAAM,qBAAiB,sCAAe,MAAM;AAE5C,SACE,6CAAC;AAAA,IAAU;AAAA,IACT;AAAA,kDAAC;AAAA,QAAU,QAAO;AAAA,QAAO,MAAK;AAAA,QAAI,IAAI,mBAAmB,GAAG,wBAAwB;AAAA,QACjF;AAAA,OACH;AAAA,MACA,4CAAC;AAAA,QACC,OAAO,EAAE,UAAU,SAAS;AAAA,QAC5B,QAAO;AAAA,QACP,WAAU;AAAA,QACV,OAAO,SAAS,GAAG,iBAAiB,GAAG;AAAA,QACvC;AAAA,QACA;AAAA,QACA,MAAM,CAAC,CAAC;AAAA,QACR;AAAA,QAEA,sDAAC;AAAA,UACC,MACE,SACI,CAAC,SAAS,SAAS,OAAO,oBAAoB,MAAM,IACpD,CAAC,SAAS,SAAS,OAAO,kBAAkB;AAAA,UAElD,OAAO,EAAE,UAAU,SAAS;AAAA,UAE3B,4BACC;AAAA,YACE;AAAA,0DAAC;AAAA,gBAAM;AAAA,eAAO;AAAA,cACd,4CAAC;AAAA,gBAAK,OAAO,EAAE,UAAU,SAAS;AAAA,gBAChC,sDAAC;AAAA,kBAAK,OAAO,EAAE,UAAU,qBAAqB;AAAA,kBAAI;AAAA,iBAAa;AAAA,eACjE;AAAA,cACC,UACC,4CAAC;AAAA,gBAAgB,YAAW;AAAA,gBAAS,IAAG;AAAA,gBAAK,IAAG;AAAA,gBAC7C;AAAA,eACH;AAAA;AAAA,WAEJ;AAAA,SAEJ;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;AAEA,UAAU,YAAY;AACtB,UAAU,eAAe;AACzB,UAAU,cAAc;AACxB,MAAM,4BAAwB,8BAAS,SAAS;AAChD,sBAAsB,YAAY;AAGlC,IAAO,oBAAQ;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -22,14 +22,23 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
22
22
|
mod
|
|
23
23
|
));
|
|
24
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
25
|
-
var
|
|
26
|
-
__export(
|
|
27
|
-
|
|
25
|
+
var react_desc_prop_types_exports = {};
|
|
26
|
+
__export(react_desc_prop_types_exports, {
|
|
27
|
+
DSInputTextPropTypes: () => DSInputTextPropTypes,
|
|
28
|
+
defaultProps: () => defaultProps
|
|
28
29
|
});
|
|
29
|
-
module.exports = __toCommonJS(
|
|
30
|
+
module.exports = __toCommonJS(react_desc_prop_types_exports);
|
|
30
31
|
var React = __toESM(require("react"));
|
|
31
32
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
32
|
-
const
|
|
33
|
+
const defaultProps = {
|
|
34
|
+
isOpen: false,
|
|
35
|
+
panelWidth: 300,
|
|
36
|
+
widthWhenIsClosed: 0,
|
|
37
|
+
panelContentOverflow: "auto",
|
|
38
|
+
withBorder: true,
|
|
39
|
+
withBoxShadow: false
|
|
40
|
+
};
|
|
41
|
+
const DSInputTextPropTypes = {
|
|
33
42
|
children: import_ds_utilities.PropTypes.element.isRequired.description("Main content"),
|
|
34
43
|
isOpen: import_ds_utilities.PropTypes.bool.description("Should show the slide panel or not"),
|
|
35
44
|
footer: import_ds_utilities.PropTypes.element.description("Footer for Slide Panel"),
|
|
@@ -42,4 +51,4 @@ const props = {
|
|
|
42
51
|
withBoxShadow: import_ds_utilities.PropTypes.bool.description("Whether the sidepanel has box shadow or not"),
|
|
43
52
|
noGridInfluencer: import_ds_utilities.PropTypes.bool.description("Whether the sidepanel is grid-influencer or not")
|
|
44
53
|
};
|
|
45
|
-
//# sourceMappingURL=
|
|
54
|
+
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/react-desc-prop-types.ts", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import React, { WeakValidationMap } from 'react';\nimport { PropTypes, GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\n\nexport declare namespace DSSidePanelT {\n export interface IProps {\n children?: React.ReactNode;\n isOpen: boolean;\n footer?: React.ReactNode;\n header?: React.ReactNode;\n panelContent?: React.ReactNode;\n panelWidth: number;\n widthWhenIsClosed: number;\n panelContentOverflow: 'auto' | 'hidden';\n withBorder: boolean;\n withBoxShadow: boolean;\n noGridInfluencer?: boolean;\n }\n\n export interface Props extends IProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof IProps>, XstyledProps {}\n}\n\nexport const defaultProps: DSSidePanelT.Props = {\n isOpen: false,\n panelWidth: 300,\n widthWhenIsClosed: 0,\n panelContentOverflow: 'auto',\n withBorder: true,\n withBoxShadow: false,\n};\n\nexport const DSInputTextPropTypes = {\n /**\n * Main content\n */\n children: PropTypes.element.isRequired.description('Main content'),\n /**\n * Should show the slide panel or not\n */\n isOpen: PropTypes.bool.description('Should show the slide panel or not'),\n /**\n * Footer for Slide Panel\n */\n footer: PropTypes.element.description('Footer for Slide Panel'),\n /**\n * Header for Slide Panel instance of SlidePanelHeader\n */\n header: PropTypes.element.description('Header for Slide Panel instance of SlidePanelHeader'),\n /**\n * Content for Slide Panel\n */\n panelContent: PropTypes.element.description('Content for Slide Panel'),\n /**\n * Width of the panel open. eg: 300\n */\n panelWidth: PropTypes.number.description('Width of the panel open. eg: 300'),\n\n widthWhenIsClosed: PropTypes.number.description('Width of the panel closed. eg: 0'),\n panelContentOverflow: PropTypes.oneOf(['auto', 'hidden']).description('Overflow on SidePanel content'),\n withBorder: PropTypes.bool.description('Whether the sidepanel has border or not'),\n withBoxShadow: PropTypes.bool.description('Whether the sidepanel has box shadow or not'),\n noGridInfluencer: PropTypes.bool.description('Whether the sidepanel is grid-influencer or not'),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAA2D;AAoBpD,MAAM,eAAmC;AAAA,EAC9C,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,YAAY;AAAA,EACZ,eAAe;AACjB;AAEO,MAAM,uBAAuB;AAAA,EAIlC,UAAU,8BAAU,QAAQ,WAAW,YAAY,cAAc;AAAA,EAIjE,QAAQ,8BAAU,KAAK,YAAY,oCAAoC;AAAA,EAIvE,QAAQ,8BAAU,QAAQ,YAAY,wBAAwB;AAAA,EAI9D,QAAQ,8BAAU,QAAQ,YAAY,qDAAqD;AAAA,EAI3F,cAAc,8BAAU,QAAQ,YAAY,yBAAyB;AAAA,EAIrE,YAAY,8BAAU,OAAO,YAAY,kCAAkC;AAAA,EAE3E,mBAAmB,8BAAU,OAAO,YAAY,kCAAkC;AAAA,EAClF,sBAAsB,8BAAU,MAAM,CAAC,QAAQ,QAAQ,CAAC,EAAE,YAAY,+BAA+B;AAAA,EACrG,YAAY,8BAAU,KAAK,YAAY,yCAAyC;AAAA,EAChF,eAAe,8BAAU,KAAK,YAAY,6CAA6C;AAAA,EACvF,kBAAkB,8BAAU,KAAK,YAAY,iDAAiD;AAChG;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -22,18 +22,22 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
22
22
|
mod
|
|
23
23
|
));
|
|
24
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
25
|
-
var
|
|
26
|
-
__export(
|
|
27
|
-
|
|
25
|
+
var useDelayedOpen_exports = {};
|
|
26
|
+
__export(useDelayedOpen_exports, {
|
|
27
|
+
useDelayedOpen: () => useDelayedOpen
|
|
28
28
|
});
|
|
29
|
-
module.exports = __toCommonJS(
|
|
29
|
+
module.exports = __toCommonJS(useDelayedOpen_exports);
|
|
30
30
|
var React = __toESM(require("react"));
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
31
|
+
var import_react = require("react");
|
|
32
|
+
const useDelayedOpen = (isOpen) => {
|
|
33
|
+
const [isOpenAnimated, setIsOpenAnimated] = (0, import_react.useState)(isOpen);
|
|
34
|
+
(0, import_react.useEffect)(() => {
|
|
35
|
+
if (isOpen) {
|
|
36
|
+
setIsOpenAnimated(true);
|
|
37
|
+
} else {
|
|
38
|
+
setTimeout(() => setIsOpenAnimated(false), 300);
|
|
39
|
+
}
|
|
40
|
+
}, [isOpen]);
|
|
41
|
+
return isOpenAnimated;
|
|
38
42
|
};
|
|
39
|
-
//# sourceMappingURL=
|
|
43
|
+
//# sourceMappingURL=useDelayedOpen.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/useDelayedOpen.ts", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import { useEffect, useState } from 'react';\n\nexport const useDelayedOpen = (isOpen: boolean) => {\n const [isOpenAnimated, setIsOpenAnimated] = useState(isOpen);\n\n useEffect(() => {\n if (isOpen) {\n // We are opening the side panel, render the content right now\n setIsOpenAnimated(true);\n } else {\n // We are closing the side panel, wait for 300ms to unmount the content\n setTimeout(() => setIsOpenAnimated(false), 300);\n }\n }, [isOpen]);\n\n return isOpenAnimated;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAoC;AAE7B,MAAM,iBAAiB,CAAC,WAAoB;AACjD,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,MAAM;AAE3D,8BAAU,MAAM;AACd,QAAI,QAAQ;AAEV,wBAAkB,IAAI;AAAA,IACxB,OAAO;AAEL,iBAAW,MAAM,kBAAkB,KAAK,GAAG,GAAG;AAAA,IAChD;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,SAAO;AACT;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/esm/SidePanel.js
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { describe } from "@elliemae/ds-utilities";
|
|
4
|
-
import { styled } from "@elliemae/ds-system";
|
|
5
|
-
import { border } from "@elliemae/ds-system";
|
|
4
|
+
import { styled, border } from "@elliemae/ds-system";
|
|
6
5
|
import { Grid } from "@elliemae/ds-grid";
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
6
|
+
import { DSInputTextPropTypes, defaultProps } from "./react-desc-prop-types";
|
|
7
|
+
import { useDelayedOpen } from "./useDelayedOpen";
|
|
9
8
|
const Container = styled.div`
|
|
10
9
|
display: flex;
|
|
11
10
|
height: 100%;
|
|
@@ -38,58 +37,62 @@ const SidePanel = ({
|
|
|
38
37
|
panelWidth,
|
|
39
38
|
panelContentOverflow,
|
|
40
39
|
widthWhenIsClosed,
|
|
41
|
-
noGridInfluencer,
|
|
40
|
+
noGridInfluencer = false,
|
|
42
41
|
withBorder = true,
|
|
43
42
|
withBoxShadow = false
|
|
44
|
-
}) =>
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
maxHeight: "100%",
|
|
57
|
-
width: isOpen ? `${panelWidth}px` : `${widthWhenIsClosed}px`,
|
|
58
|
-
withBorder,
|
|
59
|
-
withBoxShadow,
|
|
60
|
-
isOpen,
|
|
61
|
-
cols: [1],
|
|
62
|
-
noGridInfluencer,
|
|
63
|
-
children: /* @__PURE__ */ jsxs(Grid, {
|
|
64
|
-
rows: footer ? [header ? "48px" : "0px", "minmax(0px, 1fr)", "48px"] : [header ? "48px" : "0px", "minmax(0px, 1fr)"],
|
|
43
|
+
}) => {
|
|
44
|
+
const isOpenAnimated = useDelayedOpen(isOpen);
|
|
45
|
+
return /* @__PURE__ */ jsxs(Container, {
|
|
46
|
+
noGridInfluencer,
|
|
47
|
+
children: [
|
|
48
|
+
/* @__PURE__ */ jsx(TransGrid, {
|
|
49
|
+
height: "100%",
|
|
50
|
+
flex: "1",
|
|
51
|
+
mr: noGridInfluencer ? `${widthWhenIsClosed}px` : 0,
|
|
52
|
+
children
|
|
53
|
+
}),
|
|
54
|
+
/* @__PURE__ */ jsx(TransGrid, {
|
|
65
55
|
style: { overflow: "hidden" },
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
56
|
+
height: "100%",
|
|
57
|
+
maxHeight: "100%",
|
|
58
|
+
width: isOpen ? `${panelWidth}px` : `${widthWhenIsClosed}px`,
|
|
59
|
+
withBorder,
|
|
60
|
+
withBoxShadow,
|
|
61
|
+
cols: [1],
|
|
62
|
+
noGridInfluencer,
|
|
63
|
+
children: /* @__PURE__ */ jsx(Grid, {
|
|
64
|
+
rows: footer ? [header ? "48px" : "0px", "minmax(0px, 1fr)", "48px"] : [header ? "48px" : "0px", "minmax(0px, 1fr)"],
|
|
65
|
+
style: { overflow: "hidden" },
|
|
66
|
+
children: isOpenAnimated && /* @__PURE__ */ jsxs(Fragment, {
|
|
67
|
+
children: [
|
|
68
|
+
/* @__PURE__ */ jsx(Grid, {
|
|
69
|
+
children: header
|
|
70
|
+
}),
|
|
71
|
+
/* @__PURE__ */ jsx(Grid, {
|
|
72
|
+
style: { overflow: "hidden" },
|
|
73
|
+
children: /* @__PURE__ */ jsx(Grid, {
|
|
74
|
+
style: { overflow: panelContentOverflow },
|
|
75
|
+
children: panelContent
|
|
76
|
+
})
|
|
77
|
+
}),
|
|
78
|
+
footer && /* @__PURE__ */ jsx(FooterContainer, {
|
|
79
|
+
alignItems: "center",
|
|
80
|
+
pl: "xs",
|
|
81
|
+
pr: "xs",
|
|
82
|
+
children: footer
|
|
83
|
+
})
|
|
84
|
+
]
|
|
85
|
+
})
|
|
86
|
+
})
|
|
84
87
|
})
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
}
|
|
88
|
-
SidePanel.propTypes =
|
|
88
|
+
]
|
|
89
|
+
});
|
|
90
|
+
};
|
|
91
|
+
SidePanel.propTypes = DSInputTextPropTypes;
|
|
89
92
|
SidePanel.defaultProps = defaultProps;
|
|
90
93
|
SidePanel.displayName = "SidePanel";
|
|
91
94
|
const DSSidePanelWithSchema = describe(SidePanel);
|
|
92
|
-
DSSidePanelWithSchema.propTypes =
|
|
95
|
+
DSSidePanelWithSchema.propTypes = DSInputTextPropTypes;
|
|
93
96
|
var SidePanel_default = SidePanel;
|
|
94
97
|
export {
|
|
95
98
|
DSSidePanelWithSchema,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/SidePanel.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { styled
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,gBAAgB;AACzB,SAAS,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { styled, border } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputTextPropTypes, defaultProps, DSSidePanelT } from './react-desc-prop-types';\nimport { useDelayedOpen } from './useDelayedOpen';\n\nconst Container = styled.div<{ noGridInfluencer: boolean }>`\n display: flex;\n height: 100%;\n flex-direction: row;\n max-height: 100%;\n overflow: hidden;\n ${({ noGridInfluencer }) => (noGridInfluencer ? 'position: relative;' : '')}\n`;\n\nconst TransGrid = styled(Grid)<{ withBoxShadow: boolean; withBorder: boolean; noGridInfluencer: boolean }>`\n box-shadow: ${(props) => (props.withBoxShadow ? '0 2px 5px 0 rgba(53, 60, 70, 0.5)' : 'none')};\n transition: 300ms;\n border-left: ${(props) => (props.withBorder ? border(props.theme.colors.neutral['300'], '1px') : 'none')};\n ${({ noGridInfluencer }) =>\n noGridInfluencer\n ? `\n position: absolute;\n top:0;\n right:0;\n height: 100%;\n `\n : ''}\n background: ${(props) => props.theme.colors.neutral['000']};\n`;\n\nconst FooterContainer = styled(Grid)`\n border-top: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nconst SidePanel: React.ComponentType<DSSidePanelT.Props> = ({\n children,\n isOpen,\n footer,\n header,\n panelContent,\n panelWidth,\n panelContentOverflow,\n widthWhenIsClosed,\n noGridInfluencer = false,\n withBorder = true,\n withBoxShadow = false,\n}) => {\n const isOpenAnimated = useDelayedOpen(isOpen);\n\n return (\n <Container noGridInfluencer={noGridInfluencer}>\n <TransGrid height=\"100%\" flex=\"1\" mr={noGridInfluencer ? `${widthWhenIsClosed}px` : 0}>\n {children}\n </TransGrid>\n <TransGrid\n style={{ overflow: 'hidden' }}\n height=\"100%\"\n maxHeight=\"100%\"\n width={isOpen ? `${panelWidth}px` : `${widthWhenIsClosed}px`}\n withBorder={withBorder}\n withBoxShadow={withBoxShadow}\n cols={[1]}\n noGridInfluencer={noGridInfluencer}\n >\n <Grid\n rows={\n footer\n ? [header ? '48px' : '0px', 'minmax(0px, 1fr)', '48px']\n : [header ? '48px' : '0px', 'minmax(0px, 1fr)']\n }\n style={{ overflow: 'hidden' }}\n >\n {isOpenAnimated && (\n <>\n <Grid>{header}</Grid>\n <Grid style={{ overflow: 'hidden' }}>\n <Grid style={{ overflow: panelContentOverflow }}>{panelContent}</Grid>\n </Grid>\n {footer && (\n <FooterContainer alignItems=\"center\" pl=\"xs\" pr=\"xs\">\n {footer}\n </FooterContainer>\n )}\n </>\n )}\n </Grid>\n </TransGrid>\n </Container>\n );\n};\n\nSidePanel.propTypes = DSInputTextPropTypes;\nSidePanel.defaultProps = defaultProps;\nSidePanel.displayName = 'SidePanel';\nconst DSSidePanelWithSchema = describe(SidePanel);\nDSSidePanelWithSchema.propTypes = DSInputTextPropTypes;\n\nexport { SidePanel, DSSidePanelWithSchema };\nexport default SidePanel;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,gBAAgB;AACzB,SAAS,QAAQ,cAAc;AAC/B,SAAS,YAAY;AACrB,SAAS,sBAAsB,oBAAkC;AACjE,SAAS,sBAAsB;AAE/B,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrB,CAAC,EAAE,iBAAiB,MAAO,mBAAmB,wBAAwB;AAAA;AAG1E,MAAM,YAAY,OAAO,IAAI;AAAA,gBACb,CAAC,UAAW,MAAM,gBAAgB,sCAAsC;AAAA;AAAA,iBAEvE,CAAC,UAAW,MAAM,aAAa,OAAO,MAAM,MAAM,OAAO,QAAQ,QAAQ,KAAK,IAAI;AAAA,IAC/F,CAAC,EAAE,iBAAiB,MACpB,mBACI;AAAA;AAAA;AAAA;AAAA;AAAA,OAMA;AAAA,gBACQ,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGtD,MAAM,kBAAkB,OAAO,IAAI;AAAA,gBACnB,CAAC,UAAU,OAAO,MAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAGnE,MAAM,YAAqD,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb,gBAAgB;AAClB,MAAM;AACJ,QAAM,iBAAiB,eAAe,MAAM;AAE5C,SACE,qBAAC;AAAA,IAAU;AAAA,IACT;AAAA,0BAAC;AAAA,QAAU,QAAO;AAAA,QAAO,MAAK;AAAA,QAAI,IAAI,mBAAmB,GAAG,wBAAwB;AAAA,QACjF;AAAA,OACH;AAAA,MACA,oBAAC;AAAA,QACC,OAAO,EAAE,UAAU,SAAS;AAAA,QAC5B,QAAO;AAAA,QACP,WAAU;AAAA,QACV,OAAO,SAAS,GAAG,iBAAiB,GAAG;AAAA,QACvC;AAAA,QACA;AAAA,QACA,MAAM,CAAC,CAAC;AAAA,QACR;AAAA,QAEA,8BAAC;AAAA,UACC,MACE,SACI,CAAC,SAAS,SAAS,OAAO,oBAAoB,MAAM,IACpD,CAAC,SAAS,SAAS,OAAO,kBAAkB;AAAA,UAElD,OAAO,EAAE,UAAU,SAAS;AAAA,UAE3B,4BACC;AAAA,YACE;AAAA,kCAAC;AAAA,gBAAM;AAAA,eAAO;AAAA,cACd,oBAAC;AAAA,gBAAK,OAAO,EAAE,UAAU,SAAS;AAAA,gBAChC,8BAAC;AAAA,kBAAK,OAAO,EAAE,UAAU,qBAAqB;AAAA,kBAAI;AAAA,iBAAa;AAAA,eACjE;AAAA,cACC,UACC,oBAAC;AAAA,gBAAgB,YAAW;AAAA,gBAAS,IAAG;AAAA,gBAAK,IAAG;AAAA,gBAC7C;AAAA,eACH;AAAA;AAAA,WAEJ;AAAA,SAEJ;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;AAEA,UAAU,YAAY;AACtB,UAAU,eAAe;AACzB,UAAU,cAAc;AACxB,MAAM,wBAAwB,SAAS,SAAS;AAChD,sBAAsB,YAAY;AAGlC,IAAO,oBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,14 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { PropTypes } from "@elliemae/ds-utilities";
|
|
3
|
-
const
|
|
3
|
+
const defaultProps = {
|
|
4
|
+
isOpen: false,
|
|
5
|
+
panelWidth: 300,
|
|
6
|
+
widthWhenIsClosed: 0,
|
|
7
|
+
panelContentOverflow: "auto",
|
|
8
|
+
withBorder: true,
|
|
9
|
+
withBoxShadow: false
|
|
10
|
+
};
|
|
11
|
+
const DSInputTextPropTypes = {
|
|
4
12
|
children: PropTypes.element.isRequired.description("Main content"),
|
|
5
13
|
isOpen: PropTypes.bool.description("Should show the slide panel or not"),
|
|
6
14
|
footer: PropTypes.element.description("Footer for Slide Panel"),
|
|
@@ -14,6 +22,7 @@ const props = {
|
|
|
14
22
|
noGridInfluencer: PropTypes.bool.description("Whether the sidepanel is grid-influencer or not")
|
|
15
23
|
};
|
|
16
24
|
export {
|
|
17
|
-
|
|
25
|
+
DSInputTextPropTypes,
|
|
26
|
+
defaultProps
|
|
18
27
|
};
|
|
19
|
-
//# sourceMappingURL=
|
|
28
|
+
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { WeakValidationMap } from 'react';\nimport { PropTypes, GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\n\nexport declare namespace DSSidePanelT {\n export interface IProps {\n children?: React.ReactNode;\n isOpen: boolean;\n footer?: React.ReactNode;\n header?: React.ReactNode;\n panelContent?: React.ReactNode;\n panelWidth: number;\n widthWhenIsClosed: number;\n panelContentOverflow: 'auto' | 'hidden';\n withBorder: boolean;\n withBoxShadow: boolean;\n noGridInfluencer?: boolean;\n }\n\n export interface Props extends IProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof IProps>, XstyledProps {}\n}\n\nexport const defaultProps: DSSidePanelT.Props = {\n isOpen: false,\n panelWidth: 300,\n widthWhenIsClosed: 0,\n panelContentOverflow: 'auto',\n withBorder: true,\n withBoxShadow: false,\n};\n\nexport const DSInputTextPropTypes = {\n /**\n * Main content\n */\n children: PropTypes.element.isRequired.description('Main content'),\n /**\n * Should show the slide panel or not\n */\n isOpen: PropTypes.bool.description('Should show the slide panel or not'),\n /**\n * Footer for Slide Panel\n */\n footer: PropTypes.element.description('Footer for Slide Panel'),\n /**\n * Header for Slide Panel instance of SlidePanelHeader\n */\n header: PropTypes.element.description('Header for Slide Panel instance of SlidePanelHeader'),\n /**\n * Content for Slide Panel\n */\n panelContent: PropTypes.element.description('Content for Slide Panel'),\n /**\n * Width of the panel open. eg: 300\n */\n panelWidth: PropTypes.number.description('Width of the panel open. eg: 300'),\n\n widthWhenIsClosed: PropTypes.number.description('Width of the panel closed. eg: 0'),\n panelContentOverflow: PropTypes.oneOf(['auto', 'hidden']).description('Overflow on SidePanel content'),\n withBorder: PropTypes.bool.description('Whether the sidepanel has border or not'),\n withBoxShadow: PropTypes.bool.description('Whether the sidepanel has box shadow or not'),\n noGridInfluencer: PropTypes.bool.description('Whether the sidepanel is grid-influencer or not'),\n} as WeakValidationMap<unknown>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,iBAAkD;AAoBpD,MAAM,eAAmC;AAAA,EAC9C,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,YAAY;AAAA,EACZ,eAAe;AACjB;AAEO,MAAM,uBAAuB;AAAA,EAIlC,UAAU,UAAU,QAAQ,WAAW,YAAY,cAAc;AAAA,EAIjE,QAAQ,UAAU,KAAK,YAAY,oCAAoC;AAAA,EAIvE,QAAQ,UAAU,QAAQ,YAAY,wBAAwB;AAAA,EAI9D,QAAQ,UAAU,QAAQ,YAAY,qDAAqD;AAAA,EAI3F,cAAc,UAAU,QAAQ,YAAY,yBAAyB;AAAA,EAIrE,YAAY,UAAU,OAAO,YAAY,kCAAkC;AAAA,EAE3E,mBAAmB,UAAU,OAAO,YAAY,kCAAkC;AAAA,EAClF,sBAAsB,UAAU,MAAM,CAAC,QAAQ,QAAQ,CAAC,EAAE,YAAY,+BAA+B;AAAA,EACrG,YAAY,UAAU,KAAK,YAAY,yCAAyC;AAAA,EAChF,eAAe,UAAU,KAAK,YAAY,6CAA6C;AAAA,EACvF,kBAAkB,UAAU,KAAK,YAAY,iDAAiD;AAChG;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { useEffect, useState } from "react";
|
|
3
|
+
const useDelayedOpen = (isOpen) => {
|
|
4
|
+
const [isOpenAnimated, setIsOpenAnimated] = useState(isOpen);
|
|
5
|
+
useEffect(() => {
|
|
6
|
+
if (isOpen) {
|
|
7
|
+
setIsOpenAnimated(true);
|
|
8
|
+
} else {
|
|
9
|
+
setTimeout(() => setIsOpenAnimated(false), 300);
|
|
10
|
+
}
|
|
11
|
+
}, [isOpen]);
|
|
12
|
+
return isOpenAnimated;
|
|
13
|
+
};
|
|
14
|
+
export {
|
|
15
|
+
useDelayedOpen
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=useDelayedOpen.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/useDelayedOpen.ts"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useState } from 'react';\n\nexport const useDelayedOpen = (isOpen: boolean) => {\n const [isOpenAnimated, setIsOpenAnimated] = useState(isOpen);\n\n useEffect(() => {\n if (isOpen) {\n // We are opening the side panel, render the content right now\n setIsOpenAnimated(true);\n } else {\n // We are closing the side panel, wait for 300ms to unmount the content\n setTimeout(() => setIsOpenAnimated(false), 300);\n }\n }, [isOpen]);\n\n return isOpenAnimated;\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,gBAAgB;AAE7B,MAAM,iBAAiB,CAAC,WAAoB;AACjD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,MAAM;AAE3D,YAAU,MAAM;AACd,QAAI,QAAQ;AAEV,wBAAkB,IAAI;AAAA,IACxB,OAAO;AAEL,iBAAW,MAAM,kBAAkB,KAAK,GAAG,GAAG;AAAA,IAChD;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,SAAO;AACT;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-side-panel",
|
|
3
|
-
"version": "3.6.0-
|
|
3
|
+
"version": "3.6.0-rc.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Side Panel",
|
|
6
6
|
"files": [
|
|
@@ -55,11 +55,11 @@
|
|
|
55
55
|
"indent": 4
|
|
56
56
|
},
|
|
57
57
|
"dependencies": {
|
|
58
|
-
"@elliemae/ds-button": "3.6.0-
|
|
59
|
-
"@elliemae/ds-grid": "3.6.0-
|
|
60
|
-
"@elliemae/ds-icons": "3.6.0-
|
|
61
|
-
"@elliemae/ds-system": "3.6.0-
|
|
62
|
-
"@elliemae/ds-utilities": "3.6.0-
|
|
58
|
+
"@elliemae/ds-button": "3.6.0-rc.1",
|
|
59
|
+
"@elliemae/ds-grid": "3.6.0-rc.1",
|
|
60
|
+
"@elliemae/ds-icons": "3.6.0-rc.1",
|
|
61
|
+
"@elliemae/ds-system": "3.6.0-rc.1",
|
|
62
|
+
"@elliemae/ds-utilities": "3.6.0-rc.1"
|
|
63
63
|
},
|
|
64
64
|
"devDependencies": {
|
|
65
65
|
"styled-components": "~5.3.5"
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/defaultProps.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export const defaultProps = {\n isOpen: false,\n panelWidth: 300,\n widthWhenIsClosed: 0,\n panelContentOverflow: 'auto',\n withBorder: true,\n withBoxShadow: false,\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,YAAY;AAAA,EACZ,eAAe;AACjB;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/dist/cjs/props.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/props.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { PropTypes } from '@elliemae/ds-utilities';\n\nexport const props = {\n /**\n * Main content\n */\n children: PropTypes.element.isRequired.description('Main content'),\n /**\n * Should show the slide panel or not\n */\n isOpen: PropTypes.bool.description('Should show the slide panel or not'),\n /**\n * Footer for Slide Panel\n */\n footer: PropTypes.element.description('Footer for Slide Panel'),\n /**\n * Header for Slide Panel instance of SlidePanelHeader\n */\n header: PropTypes.element.description('Header for Slide Panel instance of SlidePanelHeader'),\n /**\n * Content for Slide Panel\n */\n panelContent: PropTypes.element.description('Content for Slide Panel'),\n /**\n * Width of the panel open. eg: 300\n */\n panelWidth: PropTypes.number.description('Width of the panel open. eg: 300'),\n\n widthWhenIsClosed: PropTypes.number.description('Width of the panel closed. eg: 0'),\n panelContentOverflow: PropTypes.oneOf(['auto', 'hidden']).description('Overflow on SidePanel content'),\n withBorder: PropTypes.bool.description('Whether the sidepanel has border or not'),\n withBoxShadow: PropTypes.bool.description('Whether the sidepanel has box shadow or not'),\n noGridInfluencer: PropTypes.bool.description('Whether the sidepanel is grid-influencer or not'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA0B;AAEnB,MAAM,QAAQ;AAAA,EAInB,UAAU,8BAAU,QAAQ,WAAW,YAAY,cAAc;AAAA,EAIjE,QAAQ,8BAAU,KAAK,YAAY,oCAAoC;AAAA,EAIvE,QAAQ,8BAAU,QAAQ,YAAY,wBAAwB;AAAA,EAI9D,QAAQ,8BAAU,QAAQ,YAAY,qDAAqD;AAAA,EAI3F,cAAc,8BAAU,QAAQ,YAAY,yBAAyB;AAAA,EAIrE,YAAY,8BAAU,OAAO,YAAY,kCAAkC;AAAA,EAE3E,mBAAmB,8BAAU,OAAO,YAAY,kCAAkC;AAAA,EAClF,sBAAsB,8BAAU,MAAM,CAAC,QAAQ,QAAQ,CAAC,EAAE,YAAY,+BAA+B;AAAA,EACrG,YAAY,8BAAU,KAAK,YAAY,yCAAyC;AAAA,EAChF,eAAe,8BAAU,KAAK,YAAY,6CAA6C;AAAA,EACvF,kBAAkB,8BAAU,KAAK,YAAY,iDAAiD;AAChG;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/dist/esm/defaultProps.js
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
const defaultProps = {
|
|
3
|
-
isOpen: false,
|
|
4
|
-
panelWidth: 300,
|
|
5
|
-
widthWhenIsClosed: 0,
|
|
6
|
-
panelContentOverflow: "auto",
|
|
7
|
-
withBorder: true,
|
|
8
|
-
withBoxShadow: false
|
|
9
|
-
};
|
|
10
|
-
export {
|
|
11
|
-
defaultProps
|
|
12
|
-
};
|
|
13
|
-
//# sourceMappingURL=defaultProps.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/defaultProps.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const defaultProps = {\n isOpen: false,\n panelWidth: 300,\n widthWhenIsClosed: 0,\n panelContentOverflow: 'auto',\n withBorder: true,\n withBoxShadow: false,\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,YAAY;AAAA,EACZ,eAAe;AACjB;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/dist/esm/props.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/props.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-utilities';\n\nexport const props = {\n /**\n * Main content\n */\n children: PropTypes.element.isRequired.description('Main content'),\n /**\n * Should show the slide panel or not\n */\n isOpen: PropTypes.bool.description('Should show the slide panel or not'),\n /**\n * Footer for Slide Panel\n */\n footer: PropTypes.element.description('Footer for Slide Panel'),\n /**\n * Header for Slide Panel instance of SlidePanelHeader\n */\n header: PropTypes.element.description('Header for Slide Panel instance of SlidePanelHeader'),\n /**\n * Content for Slide Panel\n */\n panelContent: PropTypes.element.description('Content for Slide Panel'),\n /**\n * Width of the panel open. eg: 300\n */\n panelWidth: PropTypes.number.description('Width of the panel open. eg: 300'),\n\n widthWhenIsClosed: PropTypes.number.description('Width of the panel closed. eg: 0'),\n panelContentOverflow: PropTypes.oneOf(['auto', 'hidden']).description('Overflow on SidePanel content'),\n withBorder: PropTypes.bool.description('Whether the sidepanel has border or not'),\n withBoxShadow: PropTypes.bool.description('Whether the sidepanel has box shadow or not'),\n noGridInfluencer: PropTypes.bool.description('Whether the sidepanel is grid-influencer or not'),\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAEnB,MAAM,QAAQ;AAAA,EAInB,UAAU,UAAU,QAAQ,WAAW,YAAY,cAAc;AAAA,EAIjE,QAAQ,UAAU,KAAK,YAAY,oCAAoC;AAAA,EAIvE,QAAQ,UAAU,QAAQ,YAAY,wBAAwB;AAAA,EAI9D,QAAQ,UAAU,QAAQ,YAAY,qDAAqD;AAAA,EAI3F,cAAc,UAAU,QAAQ,YAAY,yBAAyB;AAAA,EAIrE,YAAY,UAAU,OAAO,YAAY,kCAAkC;AAAA,EAE3E,mBAAmB,UAAU,OAAO,YAAY,kCAAkC;AAAA,EAClF,sBAAsB,UAAU,MAAM,CAAC,QAAQ,QAAQ,CAAC,EAAE,YAAY,+BAA+B;AAAA,EACrG,YAAY,UAAU,KAAK,YAAY,yCAAyC;AAAA,EAChF,eAAe,UAAU,KAAK,YAAY,6CAA6C;AAAA,EACvF,kBAAkB,UAAU,KAAK,YAAY,iDAAiD;AAChG;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|