@elliemae/ds-modal-slide 2.3.0-alpha.8 → 2.3.0-next.10

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.
Files changed (37) hide show
  1. package/cjs/DSModalSlide.js +176 -0
  2. package/cjs/components/Footer.js +101 -0
  3. package/cjs/components/Header.js +69 -0
  4. package/cjs/components/blocks.js +54 -0
  5. package/cjs/index.js +17 -0
  6. package/esm/DSModalSlide.js +161 -0
  7. package/esm/components/Footer.js +90 -0
  8. package/esm/components/Header.js +57 -0
  9. package/esm/components/blocks.js +41 -0
  10. package/esm/index.js +3 -0
  11. package/package.json +30 -32
  12. package/types/DSModalSlide.d.ts +94 -0
  13. package/types/components/Footer.d.ts +79 -0
  14. package/types/components/Header.d.ts +39 -0
  15. package/types/components/blocks.d.ts +11 -0
  16. package/types/index.d.ts +4 -0
  17. package/types/tests/DSModalSlide.test.d.ts +1 -0
  18. package/dist/cjs/DSModalSlide.js +0 -152
  19. package/dist/cjs/DSModalSlide.js.map +0 -7
  20. package/dist/cjs/components/Footer.js +0 -81
  21. package/dist/cjs/components/Footer.js.map +0 -7
  22. package/dist/cjs/components/Header.js +0 -78
  23. package/dist/cjs/components/Header.js.map +0 -7
  24. package/dist/cjs/components/blocks.js +0 -65
  25. package/dist/cjs/components/blocks.js.map +0 -7
  26. package/dist/cjs/index.js +0 -40
  27. package/dist/cjs/index.js.map +0 -7
  28. package/dist/esm/DSModalSlide.js +0 -123
  29. package/dist/esm/DSModalSlide.js.map +0 -7
  30. package/dist/esm/components/Footer.js +0 -52
  31. package/dist/esm/components/Footer.js.map +0 -7
  32. package/dist/esm/components/Header.js +0 -49
  33. package/dist/esm/components/Header.js.map +0 -7
  34. package/dist/esm/components/blocks.js +0 -36
  35. package/dist/esm/components/blocks.js.map +0 -7
  36. package/dist/esm/index.js +0 -11
  37. package/dist/esm/index.js.map +0 -7
@@ -0,0 +1,57 @@
1
+ import _jsx from '@babel/runtime/helpers/esm/jsx';
2
+ import 'react';
3
+ import { PropTypes, describe } from 'react-desc';
4
+ import styled from 'styled-components';
5
+ import DSSeparator from '@elliemae/ds-separator';
6
+ import { Close } from '@elliemae/ds-icons';
7
+ import DSButton from '@elliemae/ds-button';
8
+ import { HeaderLeftSide, Header, Title } from './blocks.js';
9
+
10
+ var _StyledSeparator, _Close;
11
+
12
+ const ModalHeader = _ref => {
13
+ let {
14
+ title: headerTitle = '',
15
+ onClose = () => null,
16
+ toolbar = null
17
+ } = _ref;
18
+ return /*#__PURE__*/_jsx(HeaderWrapper, {}, void 0, /*#__PURE__*/_jsx(HeaderLeftSide, {}, void 0, /*#__PURE__*/_jsx(Header, {}, void 0, /*#__PURE__*/_jsx(Title, {}, void 0, headerTitle))), toolbar, toolbar && (_StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx(StyledSeparator, {
19
+ position: "initial",
20
+ margin: "none",
21
+ orientation: "vertical",
22
+ type: "non-form"
23
+ }))), /*#__PURE__*/_jsx(StyledCloseButton, {
24
+ "data-testid": "modal-slider-header-close",
25
+ "aria-label": "Close modal slide",
26
+ buttonType: "text",
27
+ icon: _Close || (_Close = /*#__PURE__*/_jsx(Close, {
28
+ "aria-label": "Close modal slide",
29
+ size: "s"
30
+ })),
31
+ onClick: onClose
32
+ }));
33
+ };
34
+
35
+ const HeaderWrapper = /*#__PURE__*/styled.div.withConfig({
36
+ componentId: "sc-oxqqo8-0"
37
+ })(["display:flex;justify-content:space-between;width:100%;align-items:center;"]);
38
+ const StyledSeparator = /*#__PURE__*/styled(DSSeparator).withConfig({
39
+ componentId: "sc-oxqqo8-1"
40
+ })(["padding:", " 0;"], props => props.theme.space.xs);
41
+ const StyledCloseButton = /*#__PURE__*/styled(DSButton).withConfig({
42
+ componentId: "sc-oxqqo8-2"
43
+ })(["margin:", ";"], props => props.theme.space.xs);
44
+ const props = {
45
+ /** on modal close callback */
46
+ onClose: PropTypes.func.description('on modal close callback'),
47
+
48
+ /** modal toolbar component */
49
+ toolbar: PropTypes.node.description('modal toolbar comoponent'),
50
+
51
+ /** modal title */
52
+ title: PropTypes.string.description('modal title')
53
+ };
54
+ const DSModalSlideHeaderWithSchema = describe(ModalHeader);
55
+ DSModalSlideHeaderWithSchema.propTypes = props;
56
+
57
+ export { DSModalSlideHeaderWithSchema, ModalHeader as default };
@@ -0,0 +1,41 @@
1
+ import { aggregatedClasses } from '@elliemae/ds-classnames';
2
+
3
+ const blockName = 'modal-slide';
4
+ const Wrapper = aggregatedClasses('div')(blockName, 'wrapper', _ref => {
5
+ let {
6
+ show,
7
+ centered
8
+ } = _ref;
9
+ return {
10
+ showing: show,
11
+ disappearing: !show,
12
+ centered
13
+ };
14
+ });
15
+ const Overlay = aggregatedClasses('div')(blockName, 'overlay', _ref2 => {
16
+ let {
17
+ show
18
+ } = _ref2;
19
+ return {
20
+ showing: show,
21
+ disappearing: !show
22
+ };
23
+ });
24
+ const Content = aggregatedClasses('div')(blockName, 'content', _ref3 => {
25
+ let {
26
+ show
27
+ } = _ref3;
28
+ return {
29
+ showing: show,
30
+ disappearing: !show
31
+ };
32
+ });
33
+ const Title = aggregatedClasses('div')(blockName, 'title', () => ({}));
34
+ const BreadcrumTitle = aggregatedClasses('div')(blockName, 'breadcrum-title', () => ({}));
35
+ const HeaderLeftSide = aggregatedClasses('div')(blockName, 'header-left-side', () => ({}));
36
+ const ActualContent = aggregatedClasses('div')(blockName, 'actual-content', () => ({}));
37
+ const Header = aggregatedClasses('div')(blockName, 'header', () => ({}));
38
+ const Footer = aggregatedClasses('div')(blockName, 'footer', () => ({}));
39
+ const FooterWrapper = aggregatedClasses('div')(blockName, 'footer-wrapper', () => ({}));
40
+
41
+ export { ActualContent, BreadcrumTitle, Content, Footer, FooterWrapper, Header, HeaderLeftSide, Overlay, Title, Wrapper };
package/esm/index.js ADDED
@@ -0,0 +1,3 @@
1
+ export { DSModalSlide, DSModalSlideWithSchema, DSModalSlide as default } from './DSModalSlide.js';
2
+ export { DSModalSlideHeaderWithSchema, default as ModalHeader } from './components/Header.js';
3
+ export { DSModalSlideFooterWithSchema, default as ModalFooter } from './components/Footer.js';
package/package.json CHANGED
@@ -1,34 +1,31 @@
1
1
  {
2
2
  "name": "@elliemae/ds-modal-slide",
3
- "version": "2.3.0-alpha.8",
3
+ "version": "2.3.0-next.10",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Modal Slide",
6
- "files": [
7
- "dist"
8
- ],
9
- "module": "./dist/esm/index.js",
10
- "main": "./dist/cjs/index.js",
11
- "types": "./dist/types/index.d.ts",
6
+ "module": "./esm/index.js",
7
+ "main": "./cjs/index.js",
8
+ "types": "./types/index.d.ts",
12
9
  "exports": {
13
10
  ".": {
14
- "import": "./dist/esm/index.js",
15
- "require": "./dist/cjs/index.js"
11
+ "import": "./esm/index.js",
12
+ "require": "./cjs/index.js"
16
13
  },
17
14
  "./DSModalSlide": {
18
- "import": "./dist/esm/DSModalSlide.js",
19
- "require": "./dist/cjs/DSModalSlide.js"
15
+ "import": "./esm/DSModalSlide.js",
16
+ "require": "./cjs/DSModalSlide.js"
20
17
  },
21
18
  "./components/Header": {
22
- "import": "./dist/esm/components/Header.js",
23
- "require": "./dist/cjs/components/Header.js"
19
+ "import": "./esm/components/Header.js",
20
+ "require": "./cjs/components/Header.js"
24
21
  },
25
22
  "./components/Footer": {
26
- "import": "./dist/esm/components/Footer.js",
27
- "require": "./dist/cjs/components/Footer.js"
23
+ "import": "./esm/components/Footer.js",
24
+ "require": "./cjs/components/Footer.js"
28
25
  },
29
26
  "./components/blocks": {
30
- "import": "./dist/esm/components/blocks.js",
31
- "require": "./dist/cjs/components/blocks.js"
27
+ "import": "./esm/components/blocks.js",
28
+ "require": "./cjs/components/blocks.js"
32
29
  }
33
30
  },
34
31
  "sideEffects": [
@@ -40,17 +37,23 @@
40
37
  "url": "https://git.elliemae.io/platform-ui/dimsum.git"
41
38
  },
42
39
  "engines": {
43
- "pnpm": ">=6",
44
- "node": ">=16"
40
+ "npm": ">=7",
41
+ "node": ">=14"
45
42
  },
46
43
  "author": "ICE MT",
44
+ "scripts": {
45
+ "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
46
+ "prebuild": "exit 0",
47
+ "predev": "exit 0",
48
+ "build": "node ../../scripts/build/build.js"
49
+ },
47
50
  "dependencies": {
48
- "@elliemae/ds-button": "2.3.0-alpha.8",
49
- "@elliemae/ds-classnames": "2.3.0-alpha.8",
50
- "@elliemae/ds-grid": "2.3.0-alpha.8",
51
- "@elliemae/ds-icons": "2.3.0-alpha.8",
52
- "@elliemae/ds-separator": "2.3.0-alpha.8",
53
- "@elliemae/ds-system": "2.3.0-alpha.8",
51
+ "@elliemae/ds-button": "2.3.0-next.10",
52
+ "@elliemae/ds-classnames": "2.3.0-next.10",
53
+ "@elliemae/ds-grid": "2.3.0-next.10",
54
+ "@elliemae/ds-icons": "2.3.0-next.10",
55
+ "@elliemae/ds-separator": "2.3.0-next.10",
56
+ "@elliemae/ds-system": "2.3.0-next.10",
54
57
  "prop-types": "~15.7.2",
55
58
  "react-desc": "~4.1.3"
56
59
  },
@@ -66,12 +69,7 @@
66
69
  },
67
70
  "publishConfig": {
68
71
  "access": "public",
69
- "typeSafety": false
70
- },
71
- "scripts": {
72
- "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
73
- "prebuild": "exit 0",
74
- "predev": "exit 0",
75
- "build": "node ../../scripts/build/build.js"
72
+ "directory": "dist",
73
+ "generateSubmodules": true
76
74
  }
77
75
  }
@@ -0,0 +1,94 @@
1
+ /// <reference path="../../../../shared/typings/react-desc.d.ts" />
2
+ import React from 'react';
3
+ import ModalHeader from './components/Header';
4
+ import ModalFooter from './components/Footer';
5
+ declare const DSModalSlide: {
6
+ ({ isOpen, children, getContainer, centered, fullWidth, header, footer, fadeOut, fadeIn, overrideHeight, }: {
7
+ isOpen?: boolean | undefined;
8
+ children: any;
9
+ getContainer: any;
10
+ centered?: boolean | undefined;
11
+ fullWidth?: boolean | undefined;
12
+ header?: null | undefined;
13
+ footer?: null | undefined;
14
+ fadeOut?: number | undefined;
15
+ fadeIn?: number | undefined;
16
+ overrideHeight?: boolean | undefined;
17
+ }): React.ReactPortal | null;
18
+ propTypes: {
19
+ /**
20
+ * If the modal slide is centered or not
21
+ */
22
+ centered: {
23
+ defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
24
+ deprecated: import("react-desc").PropTypesDescValidator;
25
+ };
26
+ isRequired: import("react-desc").PropTypesDescValue;
27
+ };
28
+ /**
29
+ * If the modal slide is visible or not
30
+ */
31
+ isOpen: {
32
+ defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
33
+ deprecated: import("react-desc").PropTypesDescValidator;
34
+ };
35
+ isRequired: import("react-desc").PropTypesDescValue;
36
+ };
37
+ /**
38
+ * Main content of the modal
39
+ */
40
+ children: any;
41
+ /**
42
+ * If the modal slide takes the full width or not
43
+ */
44
+ fullWidth: {
45
+ defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
46
+ deprecated: import("react-desc").PropTypesDescValidator;
47
+ };
48
+ isRequired: import("react-desc").PropTypesDescValue;
49
+ };
50
+ /**
51
+ * If the modal slide has a header, only available for full width option
52
+ */
53
+ header: {
54
+ defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
55
+ deprecated: import("react-desc").PropTypesDescValidator;
56
+ };
57
+ isRequired: import("react-desc").PropTypesDescValue;
58
+ };
59
+ /**
60
+ * Ratio of fade out
61
+ */
62
+ fadeOut: {
63
+ defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
64
+ deprecated: import("react-desc").PropTypesDescValidator;
65
+ };
66
+ isRequired: import("react-desc").PropTypesDescValue;
67
+ };
68
+ /**
69
+ * Ratio of fade in
70
+ */
71
+ fadeIn: {
72
+ defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
73
+ deprecated: import("react-desc").PropTypesDescValidator;
74
+ };
75
+ isRequired: import("react-desc").PropTypesDescValue;
76
+ };
77
+ /**
78
+ * Override the panel height to scroll height of the container
79
+ */
80
+ overrideHeight: {
81
+ defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
82
+ deprecated: import("react-desc").PropTypesDescValidator;
83
+ };
84
+ isRequired: import("react-desc").PropTypesDescValue;
85
+ };
86
+ };
87
+ };
88
+ declare const DSModalSlideWithSchema: {
89
+ (props?: unknown): JSX.Element;
90
+ propTypes: unknown;
91
+ toTypescript: () => import("react-desc").TypescriptSchema;
92
+ };
93
+ export { ModalHeader, ModalFooter, DSModalSlide, DSModalSlideWithSchema };
94
+ export default DSModalSlide;
@@ -0,0 +1,79 @@
1
+ /// <reference path="../../../../../shared/typings/react-desc.d.ts" />
2
+ /// <reference types="react" />
3
+ declare const ModalFooter: {
4
+ ({ confirmLabel, rejectLabel, onConfirm, onReject, confirmProps, rejectProps, }: {
5
+ confirmLabel?: string | undefined;
6
+ rejectLabel?: string | undefined;
7
+ onConfirm: any;
8
+ onReject: any;
9
+ confirmProps?: {
10
+ disabled: boolean;
11
+ } | undefined;
12
+ rejectProps?: {
13
+ disabled: boolean;
14
+ } | undefined;
15
+ }): JSX.Element;
16
+ propTypes: {
17
+ /**
18
+ * Confirm Label
19
+ */
20
+ confirmLabel: {
21
+ defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
22
+ deprecated: import("react-desc").PropTypesDescValidator;
23
+ };
24
+ isRequired: import("react-desc").PropTypesDescValue;
25
+ };
26
+ /**
27
+ * Reject Label
28
+ */
29
+ rejectLabel: {
30
+ defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
31
+ deprecated: import("react-desc").PropTypesDescValidator;
32
+ };
33
+ isRequired: import("react-desc").PropTypesDescValue;
34
+ };
35
+ /**
36
+ * Callback
37
+ */
38
+ onConfirm: {
39
+ defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
40
+ deprecated: import("react-desc").PropTypesDescValidator;
41
+ };
42
+ isRequired: import("react-desc").PropTypesDescValue;
43
+ };
44
+ /**
45
+ * Callback
46
+ */
47
+ onReject: {
48
+ defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
49
+ deprecated: import("react-desc").PropTypesDescValidator;
50
+ };
51
+ isRequired: import("react-desc").PropTypesDescValue;
52
+ };
53
+ /**
54
+ * Extra DSButton props for confirm btn.
55
+ */
56
+ confirmProps: {
57
+ defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
58
+ deprecated: import("react-desc").PropTypesDescValidator;
59
+ };
60
+ isRequired: import("react-desc").PropTypesDescValue;
61
+ };
62
+ /**
63
+ * Extra DSButton props for reject btn.
64
+ */
65
+ rejectProps: {
66
+ defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
67
+ deprecated: import("react-desc").PropTypesDescValidator;
68
+ };
69
+ isRequired: import("react-desc").PropTypesDescValue;
70
+ };
71
+ };
72
+ };
73
+ declare const DSModalSlideFooterWithSchema: {
74
+ (props?: unknown): JSX.Element;
75
+ propTypes: unknown;
76
+ toTypescript: () => import("react-desc").TypescriptSchema;
77
+ };
78
+ export { DSModalSlideFooterWithSchema };
79
+ export default ModalFooter;
@@ -0,0 +1,39 @@
1
+ /// <reference path="../../../../../shared/typings/react-desc.d.ts" />
2
+ /// <reference types="react" />
3
+ declare const ModalHeader: {
4
+ ({ title: headerTitle, onClose, toolbar }: {
5
+ title?: string | undefined;
6
+ onClose?: (() => null) | undefined;
7
+ toolbar?: null | undefined;
8
+ }): JSX.Element;
9
+ propTypes: {
10
+ /** on modal close callback */
11
+ onClose: {
12
+ defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
13
+ deprecated: import("react-desc").PropTypesDescValidator;
14
+ };
15
+ isRequired: import("react-desc").PropTypesDescValue;
16
+ };
17
+ /** modal toolbar component */
18
+ toolbar: {
19
+ defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
20
+ deprecated: import("react-desc").PropTypesDescValidator;
21
+ };
22
+ isRequired: import("react-desc").PropTypesDescValue;
23
+ };
24
+ /** modal title */
25
+ title: {
26
+ defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
27
+ deprecated: import("react-desc").PropTypesDescValidator;
28
+ };
29
+ isRequired: import("react-desc").PropTypesDescValue;
30
+ };
31
+ };
32
+ };
33
+ declare const DSModalSlideHeaderWithSchema: {
34
+ (props?: unknown): JSX.Element;
35
+ propTypes: unknown;
36
+ toTypescript: () => import("react-desc").TypescriptSchema;
37
+ };
38
+ export { DSModalSlideHeaderWithSchema };
39
+ export default ModalHeader;
@@ -0,0 +1,11 @@
1
+ /// <reference types="react" />
2
+ export declare const Wrapper: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
3
+ export declare const Overlay: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
4
+ export declare const Content: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
5
+ export declare const Title: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
6
+ export declare const BreadcrumTitle: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
7
+ export declare const HeaderLeftSide: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
8
+ export declare const ActualContent: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
9
+ export declare const Header: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
10
+ export declare const Footer: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
11
+ export declare const FooterWrapper: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
@@ -0,0 +1,4 @@
1
+ export { default } from './DSModalSlide';
2
+ export * from './DSModalSlide';
3
+ export { DSModalSlideHeaderWithSchema } from './components/Header';
4
+ export { DSModalSlideFooterWithSchema } from './components/Footer';
@@ -0,0 +1 @@
1
+ export {};
@@ -1,152 +0,0 @@
1
- var __create = Object.create;
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __getProtoOf = Object.getPrototypeOf;
6
- var __hasOwnProp = Object.prototype.hasOwnProperty;
7
- var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __reExport = (target, module2, copyDefault, desc) => {
13
- if (module2 && typeof module2 === "object" || typeof module2 === "function") {
14
- for (let key of __getOwnPropNames(module2))
15
- if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
16
- __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
17
- }
18
- return target;
19
- };
20
- var __toESM = (module2, isNodeMode) => {
21
- return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
22
- };
23
- var __toCommonJS = /* @__PURE__ */ ((cache) => {
24
- return (module2, temp) => {
25
- return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
26
- };
27
- })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
28
- var DSModalSlide_exports = {};
29
- __export(DSModalSlide_exports, {
30
- DSModalSlide: () => DSModalSlide,
31
- DSModalSlideWithSchema: () => DSModalSlideWithSchema,
32
- ModalFooter: () => import_Footer.default,
33
- ModalHeader: () => import_Header.default,
34
- default: () => DSModalSlide_default
35
- });
36
- var React = __toESM(require("react"));
37
- var import_react = __toESM(require("react"));
38
- var import_react_desc = require("react-desc");
39
- var import_react_dom = __toESM(require("react-dom"));
40
- var import_ds_system = require("@elliemae/ds-system");
41
- var import_ds_grid = require("@elliemae/ds-grid");
42
- var import_ds_separator = __toESM(require("@elliemae/ds-separator"));
43
- var import_blocks = require("./components/blocks");
44
- var import_Header = __toESM(require("./components/Header"));
45
- var import_Footer = __toESM(require("./components/Footer"));
46
- const DSModalSlide = ({
47
- isOpen = false,
48
- children,
49
- getContainer,
50
- centered = false,
51
- fullWidth = false,
52
- header = null,
53
- footer = null,
54
- fadeOut = 1500,
55
- fadeIn = 1500,
56
- overrideHeight = false
57
- }) => {
58
- const [isMoving, setMoving] = (0, import_react.useState)(false);
59
- const [show, setShow] = (0, import_react.useState)(isOpen);
60
- const [width, setWidth] = (0, import_react.useState)(50);
61
- const theme = (0, import_ds_system.useTheme)();
62
- const contentRows = [...header ? [theme.space.m] : [], "0px", "auto", "0px", ...footer ? [theme.space.m] : []];
63
- const updateShow = (0, import_react.useCallback)(() => {
64
- if (fullWidth)
65
- setWidth(100);
66
- else
67
- setWidth(50);
68
- if (isOpen !== show) {
69
- setMoving(true);
70
- if (isOpen) {
71
- setShow(isOpen);
72
- }
73
- }
74
- }, [isOpen, fullWidth, isMoving]);
75
- (0, import_react.useEffect)(updateShow, [isOpen, fullWidth]);
76
- if (!show)
77
- return null;
78
- const container = getContainer();
79
- if (!container)
80
- return null;
81
- const handleAnimationEnd = () => {
82
- setMoving(false);
83
- if (!isOpen)
84
- setShow(isOpen);
85
- };
86
- let { height } = container.getBoundingClientRect();
87
- if (overrideHeight && container.scrollHeight > height) {
88
- height = container.scrollHeight;
89
- }
90
- if (!container.style.position) {
91
- container.style.position = "relative";
92
- }
93
- return import_react_dom.default.createPortal(/* @__PURE__ */ import_react.default.createElement(import_blocks.Wrapper, {
94
- classProps: {
95
- show: isOpen,
96
- centered
97
- },
98
- style: {
99
- "--height": height,
100
- "--fade-in": fadeIn,
101
- "--fade-out": fadeOut,
102
- "--width": width
103
- }
104
- }, /* @__PURE__ */ import_react.default.createElement(import_blocks.Overlay, {
105
- classProps: {
106
- show: isOpen
107
- }
108
- }, /* @__PURE__ */ import_react.default.createElement(import_blocks.Content, {
109
- onAnimationEnd: handleAnimationEnd,
110
- classProps: {
111
- show: isOpen
112
- }
113
- }, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
114
- style: {
115
- height: "100%",
116
- width: "100%",
117
- maxHeight: "100%",
118
- overflow: "hidden",
119
- "-webkit-backface-visibility": "hidden",
120
- "backface-visibility": "hidden",
121
- "-webkit-transform-style": "preserve-3d"
122
- },
123
- rows: contentRows,
124
- "data-testid": "ds-modal-slide"
125
- }, header && import_react.default.cloneElement(header, { fullWidth }), header && /* @__PURE__ */ import_react.default.createElement(import_ds_separator.default, {
126
- position: "initial",
127
- type: "non-form"
128
- }), /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
129
- style: { overflow: "hidden" }
130
- }, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
131
- style: { overflow: "auto" }
132
- }, /* @__PURE__ */ import_react.default.createElement(import_blocks.ActualContent, null, children))), footer && /* @__PURE__ */ import_react.default.createElement(import_ds_separator.default, {
133
- position: "initial",
134
- type: "non-form"
135
- }), footer)))), container);
136
- };
137
- const props = {
138
- centered: import_react_desc.PropTypes.bool.description("If the modal slide is centered or not"),
139
- isOpen: import_react_desc.PropTypes.bool.description("If the modal slide is visible or not"),
140
- children: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.element, import_react_desc.PropTypes.string, import_react_desc.PropTypes.any]).isRequired.description("Main content of the modal"),
141
- fullWidth: import_react_desc.PropTypes.bool.description("If the modal slide takes the full width or not"),
142
- header: import_react_desc.PropTypes.element.description("If the modal slide has a header, only available for full width option"),
143
- fadeOut: import_react_desc.PropTypes.number.description("Ratio of fade out"),
144
- fadeIn: import_react_desc.PropTypes.number.description("Ratio of fade in"),
145
- overrideHeight: import_react_desc.PropTypes.bool.description("Override the panel height to scroll height of the container")
146
- };
147
- DSModalSlide.propTypes = props;
148
- const DSModalSlideWithSchema = (0, import_react_desc.describe)(DSModalSlide);
149
- DSModalSlideWithSchema.propTypes = props;
150
- var DSModalSlide_default = DSModalSlide;
151
- module.exports = __toCommonJS(DSModalSlide_exports);
152
- //# sourceMappingURL=DSModalSlide.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/DSModalSlide.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useState, useEffect, useCallback } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport ReactDOM from 'react-dom';\nimport { useTheme } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport DSSeparator from '@elliemae/ds-separator';\nimport { Wrapper, Overlay, Content, ActualContent } from './components/blocks';\nimport ModalHeader from './components/Header';\nimport ModalFooter from './components/Footer';\n\n// eslint-disable-next-line complexity\nconst DSModalSlide = ({\n isOpen = false,\n children,\n getContainer,\n centered = false,\n fullWidth = false,\n header = null,\n footer = null,\n fadeOut = 1500,\n fadeIn = 1500,\n overrideHeight = false,\n}) => {\n const [isMoving, setMoving] = useState(false);\n const [show, setShow] = useState(isOpen);\n const [width, setWidth] = useState(50);\n const theme = useTheme();\n const contentRows = [...(header ? [theme.space.m] : []), '0px', 'auto', '0px', ...(footer ? [theme.space.m] : [])];\n\n const updateShow = useCallback(() => {\n if (fullWidth) setWidth(100);\n else setWidth(50);\n if (isOpen !== show) {\n setMoving(true);\n if (isOpen) {\n setShow(isOpen);\n }\n }\n }, [isOpen, fullWidth, isMoving]);\n\n useEffect(updateShow, [isOpen, fullWidth]);\n\n if (!show) return null;\n\n const container = getContainer();\n if (!container) return null;\n\n const handleAnimationEnd = () => {\n setMoving(false);\n if (!isOpen) setShow(isOpen);\n };\n\n let { height } = container.getBoundingClientRect();\n if (overrideHeight && container.scrollHeight > height) {\n height = container.scrollHeight;\n }\n if (!container.style.position) {\n container.style.position = 'relative';\n }\n\n return ReactDOM.createPortal(\n <Wrapper\n classProps={{\n show: isOpen,\n centered,\n }}\n style={{\n '--height': height,\n '--fade-in': fadeIn,\n '--fade-out': fadeOut,\n '--width': width,\n }}\n >\n <Overlay\n classProps={{\n show: isOpen,\n }}\n >\n <Content\n onAnimationEnd={handleAnimationEnd}\n classProps={{\n show: isOpen,\n }}\n >\n <Grid\n style={{\n height: '100%',\n width: '100%',\n maxHeight: '100%',\n overflow: 'hidden',\n '-webkit-backface-visibility': 'hidden',\n 'backface-visibility': 'hidden',\n '-webkit-transform-style': 'preserve-3d',\n }}\n rows={contentRows}\n data-testid=\"ds-modal-slide\"\n >\n {header && React.cloneElement(header, { fullWidth })}\n {header && <DSSeparator position=\"initial\" type=\"non-form\" />}\n <Grid style={{ overflow: 'hidden' }}>\n <Grid style={{ overflow: 'auto' }}>\n <ActualContent>{children}</ActualContent>\n </Grid>\n </Grid>\n {footer && <DSSeparator position=\"initial\" type=\"non-form\" />}\n {footer}\n </Grid>\n </Content>\n </Overlay>\n </Wrapper>,\n container,\n );\n};\n\nconst props = {\n /**\n * If the modal slide is centered or not\n */\n centered: PropTypes.bool.description('If the modal slide is centered or not'),\n /**\n * If the modal slide is visible or not\n */\n isOpen: PropTypes.bool.description('If the modal slide is visible or not'),\n /**\n * Main content of the modal\n */\n children: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.any]).isRequired.description(\n 'Main content of the modal',\n ),\n /**\n * If the modal slide takes the full width or not\n */\n fullWidth: PropTypes.bool.description('If the modal slide takes the full width or not'),\n /**\n * If the modal slide has a header, only available for full width option\n */\n header: PropTypes.element.description('If the modal slide has a header, only available for full width option'),\n /**\n * Ratio of fade out\n */\n fadeOut: PropTypes.number.description('Ratio of fade out'),\n /**\n * Ratio of fade in\n */\n fadeIn: PropTypes.number.description('Ratio of fade in'),\n /**\n * Override the panel height to scroll height of the container\n */\n overrideHeight: PropTypes.bool.description('Override the panel height to scroll height of the container'),\n};\n\nDSModalSlide.propTypes = props;\n\nconst DSModalSlideWithSchema = describe(DSModalSlide);\nDSModalSlideWithSchema.propTypes = props;\n\nexport { ModalHeader, ModalFooter, DSModalSlide, DSModalSlideWithSchema };\n\nexport default DSModalSlide;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
6
- "names": []
7
- }