@activecollab/components 1.0.347 → 1.0.348
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/components/Dialog/Dialog.js +11 -6
- package/dist/cjs/components/Dialog/Dialog.js.map +1 -1
- package/dist/cjs/components/Modal/Modal.js +7 -3
- package/dist/cjs/components/Modal/Modal.js.map +1 -1
- package/dist/esm/components/Dialog/Dialog.d.ts +3 -2
- package/dist/esm/components/Dialog/Dialog.d.ts.map +1 -1
- package/dist/esm/components/Dialog/Dialog.js +10 -4
- package/dist/esm/components/Dialog/Dialog.js.map +1 -1
- package/dist/esm/components/Modal/Modal.d.ts +1 -0
- package/dist/esm/components/Modal/Modal.d.ts.map +1 -1
- package/dist/esm/components/Modal/Modal.js +7 -3
- package/dist/esm/components/Modal/Modal.js.map +1 -1
- package/dist/index.js +138 -130
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -15,11 +15,13 @@ var _DialogActions = require("./DialogActions");
|
|
|
15
15
|
var _DialogContent = require("./DialogContent");
|
|
16
16
|
var _DialogContentDivider = require("./DialogContentDivider");
|
|
17
17
|
var _DialogTitle = require("./DialogTitle");
|
|
18
|
+
var _excluded = ["children", "open", "onClose", "className", "enableBackgroundClick", "disableCloseOnEsc", "animate", "onClickOutside"];
|
|
18
19
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
19
20
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
20
21
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
|
-
|
|
22
|
-
|
|
22
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
23
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
24
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
23
25
|
var _Dialog = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
24
26
|
var children = _ref.children,
|
|
25
27
|
_ref$open = _ref.open,
|
|
@@ -31,7 +33,9 @@ var _Dialog = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
31
33
|
_ref$disableCloseOnEs = _ref.disableCloseOnEsc,
|
|
32
34
|
disableCloseOnEsc = _ref$disableCloseOnEs === void 0 ? false : _ref$disableCloseOnEs,
|
|
33
35
|
_ref$animate = _ref.animate,
|
|
34
|
-
animate = _ref$animate === void 0 ? "slide" : _ref$animate
|
|
36
|
+
animate = _ref$animate === void 0 ? "slide" : _ref$animate,
|
|
37
|
+
onClickOutside = _ref.onClickOutside,
|
|
38
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
35
39
|
var animateDialog = function animateDialog() {
|
|
36
40
|
switch (animate) {
|
|
37
41
|
case "fade":
|
|
@@ -51,13 +55,14 @@ var _Dialog = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
51
55
|
return (
|
|
52
56
|
/*#__PURE__*/
|
|
53
57
|
// <DialogContext.Provider value={{}}>
|
|
54
|
-
_react.default.createElement(_Modal.Modal, {
|
|
58
|
+
_react.default.createElement(_Modal.Modal, _extends({
|
|
55
59
|
ref: ref,
|
|
56
60
|
open: open,
|
|
57
61
|
onClose: onClose,
|
|
58
62
|
disableBackgroundClick: !enableBackgroundClick,
|
|
59
|
-
disableCloseOnEsc: disableCloseOnEsc
|
|
60
|
-
|
|
63
|
+
disableCloseOnEsc: disableCloseOnEsc,
|
|
64
|
+
onClickOutside: onClickOutside
|
|
65
|
+
}, rest), animateDialog())
|
|
61
66
|
// </DialogContext.Provider>
|
|
62
67
|
);
|
|
63
68
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","names":["_Dialog","forwardRef","ref","children","open","onClose","className","enableBackgroundClick","disableCloseOnEsc","animate","animateDialog","classnames","displayName","Dialog","Object","assign","Title","DialogTitle","Content","DialogContent","ContentDivider","DialogContentDivider","Actions","DialogActions"],"sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import classnames from \"classnames\";\nimport React, { forwardRef, PropsWithChildren } from \"react\";\nimport { Modal } from \"../Modal\";\nimport { SlideFromTop } from \"../Transitions/SlideFromTop\";\nimport { StyledDialog } from \"./Styles\";\n\n// import { DialogContext } from \"./DialogContext\";\n\nimport { Fade } from \"../Transitions\";\nimport { DialogActions } from \"./DialogActions\";\nimport { DialogContent } from \"./DialogContent\";\nimport { DialogContentDivider } from \"./DialogContentDivider\";\nimport { DialogTitle } from \"./DialogTitle\";\n\nexport interface DialogProps {\n open?: boolean;\n onClose?: () => void;\n className?: string;\n enableBackgroundClick?: boolean;\n disableCloseOnEsc?: boolean;\n animate?: \"fade\" | \"slide\";\n}\n\nexport const _Dialog = forwardRef<\n HTMLDivElement,\n PropsWithChildren<DialogProps>\n>(\n (\n {\n children,\n open = false,\n onClose,\n className,\n enableBackgroundClick = false,\n disableCloseOnEsc = false,\n animate = \"slide\",\n },\n ref\n ) => {\n const animateDialog = () => {\n switch (animate) {\n case \"fade\":\n return (\n <Fade in={open}>\n <StyledDialog className={classnames(\"c-dialog\", className)}>\n {children}\n </StyledDialog>\n </Fade>\n );\n default:\n return (\n <SlideFromTop in={open}>\n <StyledDialog className={classnames(\"c-dialog\", className)}>\n {children}\n </StyledDialog>\n </SlideFromTop>\n );\n }\n };\n\n return (\n // <DialogContext.Provider value={{}}>\n\n <Modal\n ref={ref}\n open={open}\n onClose={onClose}\n disableBackgroundClick={!enableBackgroundClick}\n disableCloseOnEsc={disableCloseOnEsc}\n >\n {animateDialog()}\n </Modal>\n // </DialogContext.Provider>\n );\n }\n);\n\n_Dialog.displayName = \"Dialog\";\n\n// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34757\nexport const Dialog = Object.assign({}, _Dialog, {\n Title: DialogTitle,\n Content: DialogContent,\n ContentDivider: DialogContentDivider,\n Actions: DialogActions,\n});\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAIA;AACA;AACA;AACA;AACA;AAA4C;AAAA;AAAA;
|
|
1
|
+
{"version":3,"file":"Dialog.js","names":["_Dialog","forwardRef","ref","children","open","onClose","className","enableBackgroundClick","disableCloseOnEsc","animate","onClickOutside","rest","animateDialog","classnames","displayName","Dialog","Object","assign","Title","DialogTitle","Content","DialogContent","ContentDivider","DialogContentDivider","Actions","DialogActions"],"sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import classnames from \"classnames\";\nimport React, { forwardRef, HTMLAttributes, PropsWithChildren } from \"react\";\nimport { Modal } from \"../Modal\";\nimport { SlideFromTop } from \"../Transitions/SlideFromTop\";\nimport { StyledDialog } from \"./Styles\";\n\n// import { DialogContext } from \"./DialogContext\";\n\nimport { Fade } from \"../Transitions\";\nimport { DialogActions } from \"./DialogActions\";\nimport { DialogContent } from \"./DialogContent\";\nimport { DialogContentDivider } from \"./DialogContentDivider\";\nimport { DialogTitle } from \"./DialogTitle\";\n\nexport interface DialogProps extends HTMLAttributes<HTMLDivElement> {\n open?: boolean;\n onClose?: () => void;\n className?: string;\n enableBackgroundClick?: boolean;\n disableCloseOnEsc?: boolean;\n animate?: \"fade\" | \"slide\";\n onClickOutside?: (event) => void;\n}\n\nexport const _Dialog = forwardRef<\n HTMLDivElement,\n PropsWithChildren<DialogProps>\n>(\n (\n {\n children,\n open = false,\n onClose,\n className,\n enableBackgroundClick = false,\n disableCloseOnEsc = false,\n animate = \"slide\",\n onClickOutside,\n ...rest\n },\n ref\n ) => {\n const animateDialog = () => {\n switch (animate) {\n case \"fade\":\n return (\n <Fade in={open}>\n <StyledDialog className={classnames(\"c-dialog\", className)}>\n {children}\n </StyledDialog>\n </Fade>\n );\n default:\n return (\n <SlideFromTop in={open}>\n <StyledDialog className={classnames(\"c-dialog\", className)}>\n {children}\n </StyledDialog>\n </SlideFromTop>\n );\n }\n };\n\n return (\n // <DialogContext.Provider value={{}}>\n\n <Modal\n ref={ref}\n open={open}\n onClose={onClose}\n disableBackgroundClick={!enableBackgroundClick}\n disableCloseOnEsc={disableCloseOnEsc}\n onClickOutside={onClickOutside}\n {...rest}\n >\n {animateDialog()}\n </Modal>\n // </DialogContext.Provider>\n );\n }\n);\n\n_Dialog.displayName = \"Dialog\";\n\n// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34757\nexport const Dialog = Object.assign({}, _Dialog, {\n Title: DialogTitle,\n Content: DialogContent,\n ContentDivider: DialogContentDivider,\n Actions: DialogActions,\n});\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAIA;AACA;AACA;AACA;AACA;AAA4C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYrC,IAAMA,OAAO,gBAAG,IAAAC,iBAAU,EAI/B,gBAYEC,GAAG,EACA;EAAA,IAXDC,QAAQ,QAARA,QAAQ;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAG,KAAK;IACZC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IAAA,6BACTC,qBAAqB;IAArBA,qBAAqB,sCAAG,KAAK;IAAA,6BAC7BC,iBAAiB;IAAjBA,iBAAiB,sCAAG,KAAK;IAAA,oBACzBC,OAAO;IAAPA,OAAO,6BAAG,OAAO;IACjBC,cAAc,QAAdA,cAAc;IACXC,IAAI;EAIT,IAAMC,aAAa,GAAG,SAAhBA,aAAa,GAAS;IAC1B,QAAQH,OAAO;MACb,KAAK,MAAM;QACT,oBACE,6BAAC,iBAAI;UAAC,EAAE,EAAEL;QAAK,gBACb,6BAAC,oBAAY;UAAC,SAAS,EAAE,IAAAS,mBAAU,EAAC,UAAU,EAAEP,SAAS;QAAE,GACxDH,QAAQ,CACI,CACV;MAEX;QACE,oBACE,6BAAC,0BAAY;UAAC,EAAE,EAAEC;QAAK,gBACrB,6BAAC,oBAAY;UAAC,SAAS,EAAE,IAAAS,mBAAU,EAAC,UAAU,EAAEP,SAAS;QAAE,GACxDH,QAAQ,CACI,CACF;IACf;EAER,CAAC;EAED;IAAA;IACE;IAEA,6BAAC,YAAK;MACJ,GAAG,EAAED,GAAI;MACT,IAAI,EAAEE,IAAK;MACX,OAAO,EAAEC,OAAQ;MACjB,sBAAsB,EAAE,CAACE,qBAAsB;MAC/C,iBAAiB,EAAEC,iBAAkB;MACrC,cAAc,EAAEE;IAAe,GAC3BC,IAAI,GAEPC,aAAa,EAAE;IAElB;EAAA;AAEJ,CAAC,CACF;AAAC;AAEFZ,OAAO,CAACc,WAAW,GAAG,QAAQ;;AAE9B;AACO,IAAMC,MAAM,GAAGC,MAAM,CAACC,MAAM,CAAC,CAAC,CAAC,EAAEjB,OAAO,EAAE;EAC/CkB,KAAK,EAAEC,wBAAW;EAClBC,OAAO,EAAEC,4BAAa;EACtBC,cAAc,EAAEC,0CAAoB;EACpCC,OAAO,EAAEC;AACX,CAAC,CAAC;AAAC"}
|
|
@@ -10,7 +10,7 @@ var _Window = require("../Window");
|
|
|
10
10
|
var _useForkRef = _interopRequireDefault(require("../../utils/useForkRef"));
|
|
11
11
|
var _createChainedFunction = _interopRequireDefault(require("../../utils/createChainedFunction"));
|
|
12
12
|
var _Overlay = require("../Overlay");
|
|
13
|
-
var _excluded = ["children", "disableFocusLock", "disableScrollLock", "disableBackgroundClick", "disableBackgroundColor", "disableCloseOnEsc", "open", "onClose"];
|
|
13
|
+
var _excluded = ["children", "disableFocusLock", "disableScrollLock", "disableBackgroundClick", "disableBackgroundColor", "disableCloseOnEsc", "open", "onClose", "onClickOutside"];
|
|
14
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
15
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
16
16
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -41,6 +41,7 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
41
41
|
_ref$open = _ref.open,
|
|
42
42
|
defaultOpen = _ref$open === void 0 ? false : _ref$open,
|
|
43
43
|
onClose = _ref.onClose,
|
|
44
|
+
onClickOutside = _ref.onClickOutside,
|
|
44
45
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
45
46
|
var _useState = (0, _react.useState)(defaultOpen),
|
|
46
47
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -67,9 +68,12 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
67
68
|
var handleBackgroundClick = (0, _react.useCallback)(function (event) {
|
|
68
69
|
if (!disableBackgroundClick) {
|
|
69
70
|
event.preventDefault();
|
|
70
|
-
handleClose();
|
|
71
|
+
return handleClose();
|
|
71
72
|
}
|
|
72
|
-
|
|
73
|
+
if (onClickOutside) {
|
|
74
|
+
onClickOutside(event);
|
|
75
|
+
}
|
|
76
|
+
}, [disableBackgroundClick, onClickOutside, handleClose]);
|
|
73
77
|
var handleEnter = (0, _react.useCallback)(function () {
|
|
74
78
|
setExited(false);
|
|
75
79
|
}, []);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","names":["getHasTransition","children","props","Object","prototype","hasOwnProperty","call","Modal","forwardRef","ref","disableFocusLock","disableScrollLock","disableBackgroundClick","disableBackgroundColor","disableCloseOnEsc","open","defaultOpen","onClose","rest","useState","setOpen","exited","setExited","innerRef","useRef","handleRef","useForkRef","hasTransition","useMemo","useEffect","handleClose","useCallback","handleBackgroundClick","event","preventDefault","handleEnter","handleExited","childProps","onEnter","createChainedFunction","onExited","in","cloneElement","displayName"],"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, {\n forwardRef,\n HTMLAttributes,\n useRef,\n cloneElement,\n useMemo,\n useCallback,\n ReactElement,\n useState,\n useEffect,\n MouseEvent,\n} from \"react\";\nimport { Window } from \"../Window\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport createChainedFunction from \"../../utils/createChainedFunction\";\nimport { Overlay } from \"../Overlay\";\n\nexport interface IModal {\n disableFocusLock?: boolean;\n disableScrollLock?: boolean;\n open?: boolean;\n disableBackgroundClick?: boolean;\n disableCloseOnEsc?: boolean;\n disableBackgroundColor?: boolean;\n onClose?: () => void;\n children: ReactElement;\n}\n\nconst getHasTransition = (children): boolean => {\n return children.props\n ? Object.prototype.hasOwnProperty.call(children.props, \"in\")\n : false;\n};\n\nexport const Modal = forwardRef<\n HTMLDivElement,\n IModal & HTMLAttributes<HTMLDivElement>\n>(\n (\n {\n children,\n disableFocusLock = false,\n disableScrollLock = false,\n disableBackgroundClick = false,\n disableBackgroundColor = false,\n disableCloseOnEsc = false,\n open: defaultOpen = false,\n onClose,\n ...rest\n },\n ref\n ) => {\n const [open, setOpen] = useState(defaultOpen);\n const [exited, setExited] = useState(true);\n const innerRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(innerRef, ref);\n\n const hasTransition = useMemo(() => {\n return getHasTransition(children);\n }, [children]);\n\n useEffect(() => {\n setOpen(defaultOpen);\n }, [defaultOpen]);\n\n const handleClose = useCallback(() => {\n setOpen(false);\n if (!hasTransition) {\n typeof onClose === \"function\" && onClose();\n }\n }, [hasTransition, onClose]);\n\n const handleBackgroundClick = useCallback(\n (event: MouseEvent<HTMLDivElement>) => {\n if (!disableBackgroundClick) {\n event.preventDefault();\n handleClose();\n }\n },\n [disableBackgroundClick, handleClose]\n );\n\n const handleEnter = useCallback(() => {\n setExited(false);\n }, []);\n\n const handleExited = useCallback(() => {\n setExited(true);\n typeof onClose === \"function\" && onClose();\n }, [onClose]);\n\n const childProps = useMemo(() => {\n let props = {};\n\n // It's a Transition like component\n if (hasTransition && children) {\n props = {\n onEnter: createChainedFunction(handleEnter, children.props.onEnter),\n onExited: createChainedFunction(\n handleExited,\n children.props.onExited\n ),\n in: open,\n };\n }\n\n return props;\n }, [children, handleEnter, handleExited, hasTransition, open]);\n\n if (!open && (!hasTransition || exited)) {\n return null;\n }\n\n return (\n <Window\n {...rest}\n ref={handleRef}\n onClose={handleClose}\n disableFocusLock={disableFocusLock}\n disableScrollLock={disableScrollLock}\n disableCloseOnEsc={disableCloseOnEsc}\n >\n {open ? (\n <Overlay\n onClick={handleBackgroundClick}\n disableBackgroundColor={disableBackgroundColor}\n />\n ) : null}\n {cloneElement(children, childProps)}\n </Window>\n );\n }\n);\n\nModal.displayName = \"Modal\";\n"],"mappings":";;;;;;;AAAA;AAYA;AACA;AACA;AACA;AAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
1
|
+
{"version":3,"file":"Modal.js","names":["getHasTransition","children","props","Object","prototype","hasOwnProperty","call","Modal","forwardRef","ref","disableFocusLock","disableScrollLock","disableBackgroundClick","disableBackgroundColor","disableCloseOnEsc","open","defaultOpen","onClose","onClickOutside","rest","useState","setOpen","exited","setExited","innerRef","useRef","handleRef","useForkRef","hasTransition","useMemo","useEffect","handleClose","useCallback","handleBackgroundClick","event","preventDefault","handleEnter","handleExited","childProps","onEnter","createChainedFunction","onExited","in","cloneElement","displayName"],"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, {\n forwardRef,\n HTMLAttributes,\n useRef,\n cloneElement,\n useMemo,\n useCallback,\n ReactElement,\n useState,\n useEffect,\n MouseEvent,\n} from \"react\";\nimport { Window } from \"../Window\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport createChainedFunction from \"../../utils/createChainedFunction\";\nimport { Overlay } from \"../Overlay\";\n\nexport interface IModal {\n disableFocusLock?: boolean;\n disableScrollLock?: boolean;\n open?: boolean;\n disableBackgroundClick?: boolean;\n disableCloseOnEsc?: boolean;\n disableBackgroundColor?: boolean;\n onClose?: () => void;\n children: ReactElement;\n onClickOutside?: (event) => void;\n}\n\nconst getHasTransition = (children): boolean => {\n return children.props\n ? Object.prototype.hasOwnProperty.call(children.props, \"in\")\n : false;\n};\n\nexport const Modal = forwardRef<\n HTMLDivElement,\n IModal & HTMLAttributes<HTMLDivElement>\n>(\n (\n {\n children,\n disableFocusLock = false,\n disableScrollLock = false,\n disableBackgroundClick = false,\n disableBackgroundColor = false,\n disableCloseOnEsc = false,\n open: defaultOpen = false,\n onClose,\n onClickOutside,\n ...rest\n },\n ref\n ) => {\n const [open, setOpen] = useState(defaultOpen);\n const [exited, setExited] = useState(true);\n const innerRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(innerRef, ref);\n\n const hasTransition = useMemo(() => {\n return getHasTransition(children);\n }, [children]);\n\n useEffect(() => {\n setOpen(defaultOpen);\n }, [defaultOpen]);\n\n const handleClose = useCallback(() => {\n setOpen(false);\n if (!hasTransition) {\n typeof onClose === \"function\" && onClose();\n }\n }, [hasTransition, onClose]);\n\n const handleBackgroundClick = useCallback(\n (event: MouseEvent<HTMLDivElement>) => {\n if (!disableBackgroundClick) {\n event.preventDefault();\n return handleClose();\n }\n\n if (onClickOutside) {\n onClickOutside(event);\n }\n },\n [disableBackgroundClick, onClickOutside, handleClose]\n );\n\n const handleEnter = useCallback(() => {\n setExited(false);\n }, []);\n\n const handleExited = useCallback(() => {\n setExited(true);\n typeof onClose === \"function\" && onClose();\n }, [onClose]);\n\n const childProps = useMemo(() => {\n let props = {};\n\n // It's a Transition like component\n if (hasTransition && children) {\n props = {\n onEnter: createChainedFunction(handleEnter, children.props.onEnter),\n onExited: createChainedFunction(\n handleExited,\n children.props.onExited\n ),\n in: open,\n };\n }\n\n return props;\n }, [children, handleEnter, handleExited, hasTransition, open]);\n\n if (!open && (!hasTransition || exited)) {\n return null;\n }\n\n return (\n <Window\n {...rest}\n ref={handleRef}\n onClose={handleClose}\n disableFocusLock={disableFocusLock}\n disableScrollLock={disableScrollLock}\n disableCloseOnEsc={disableCloseOnEsc}\n >\n {open ? (\n <Overlay\n onClick={handleBackgroundClick}\n disableBackgroundColor={disableBackgroundColor}\n />\n ) : null}\n {cloneElement(children, childProps)}\n </Window>\n );\n }\n);\n\nModal.displayName = \"Modal\";\n"],"mappings":"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"}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
export interface DialogProps {
|
|
1
|
+
import React, { HTMLAttributes } from "react";
|
|
2
|
+
export interface DialogProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
3
|
open?: boolean;
|
|
4
4
|
onClose?: () => void;
|
|
5
5
|
className?: string;
|
|
6
6
|
enableBackgroundClick?: boolean;
|
|
7
7
|
disableCloseOnEsc?: boolean;
|
|
8
8
|
animate?: "fade" | "slide";
|
|
9
|
+
onClickOutside?: (event: any) => void;
|
|
9
10
|
}
|
|
10
11
|
export declare const _Dialog: React.ForwardRefExoticComponent<DialogProps & {
|
|
11
12
|
children?: React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAc,cAAc,EAAqB,MAAM,OAAO,CAAC;AAa7E,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,cAAc,CAAC;IACjE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,CAAC,KAAK,KAAA,KAAK,IAAI,CAAC;CAClC;AAED,eAAO,MAAM,OAAO;;wCAwDnB,CAAC;AAKF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;CAKjB,CAAC"}
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
+
var _excluded = ["children", "open", "onClose", "className", "enableBackgroundClick", "disableCloseOnEsc", "animate", "onClickOutside"];
|
|
1
4
|
import classnames from "classnames";
|
|
2
5
|
import React, { forwardRef } from "react";
|
|
3
6
|
import { Modal } from "../Modal";
|
|
@@ -22,7 +25,9 @@ export var _Dialog = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
22
25
|
_ref$disableCloseOnEs = _ref.disableCloseOnEsc,
|
|
23
26
|
disableCloseOnEsc = _ref$disableCloseOnEs === void 0 ? false : _ref$disableCloseOnEs,
|
|
24
27
|
_ref$animate = _ref.animate,
|
|
25
|
-
animate = _ref$animate === void 0 ? "slide" : _ref$animate
|
|
28
|
+
animate = _ref$animate === void 0 ? "slide" : _ref$animate,
|
|
29
|
+
onClickOutside = _ref.onClickOutside,
|
|
30
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
26
31
|
var animateDialog = function animateDialog() {
|
|
27
32
|
switch (animate) {
|
|
28
33
|
case "fade":
|
|
@@ -42,13 +47,14 @@ export var _Dialog = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
42
47
|
return (
|
|
43
48
|
/*#__PURE__*/
|
|
44
49
|
// <DialogContext.Provider value={{}}>
|
|
45
|
-
React.createElement(Modal, {
|
|
50
|
+
React.createElement(Modal, _extends({
|
|
46
51
|
ref: ref,
|
|
47
52
|
open: open,
|
|
48
53
|
onClose: onClose,
|
|
49
54
|
disableBackgroundClick: !enableBackgroundClick,
|
|
50
|
-
disableCloseOnEsc: disableCloseOnEsc
|
|
51
|
-
|
|
55
|
+
disableCloseOnEsc: disableCloseOnEsc,
|
|
56
|
+
onClickOutside: onClickOutside
|
|
57
|
+
}, rest), animateDialog())
|
|
52
58
|
// </DialogContext.Provider>
|
|
53
59
|
);
|
|
54
60
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","names":["classnames","React","forwardRef","Modal","SlideFromTop","StyledDialog","Fade","DialogActions","DialogContent","DialogContentDivider","DialogTitle","_Dialog","ref","children","open","onClose","className","enableBackgroundClick","disableCloseOnEsc","animate","animateDialog","displayName","Dialog","Object","assign","Title","Content","ContentDivider","Actions"],"sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import classnames from \"classnames\";\nimport React, { forwardRef, PropsWithChildren } from \"react\";\nimport { Modal } from \"../Modal\";\nimport { SlideFromTop } from \"../Transitions/SlideFromTop\";\nimport { StyledDialog } from \"./Styles\";\n\n// import { DialogContext } from \"./DialogContext\";\n\nimport { Fade } from \"../Transitions\";\nimport { DialogActions } from \"./DialogActions\";\nimport { DialogContent } from \"./DialogContent\";\nimport { DialogContentDivider } from \"./DialogContentDivider\";\nimport { DialogTitle } from \"./DialogTitle\";\n\nexport interface DialogProps {\n open?: boolean;\n onClose?: () => void;\n className?: string;\n enableBackgroundClick?: boolean;\n disableCloseOnEsc?: boolean;\n animate?: \"fade\" | \"slide\";\n}\n\nexport const _Dialog = forwardRef<\n HTMLDivElement,\n PropsWithChildren<DialogProps>\n>(\n (\n {\n children,\n open = false,\n onClose,\n className,\n enableBackgroundClick = false,\n disableCloseOnEsc = false,\n animate = \"slide\",\n },\n ref\n ) => {\n const animateDialog = () => {\n switch (animate) {\n case \"fade\":\n return (\n <Fade in={open}>\n <StyledDialog className={classnames(\"c-dialog\", className)}>\n {children}\n </StyledDialog>\n </Fade>\n );\n default:\n return (\n <SlideFromTop in={open}>\n <StyledDialog className={classnames(\"c-dialog\", className)}>\n {children}\n </StyledDialog>\n </SlideFromTop>\n );\n }\n };\n\n return (\n // <DialogContext.Provider value={{}}>\n\n <Modal\n ref={ref}\n open={open}\n onClose={onClose}\n disableBackgroundClick={!enableBackgroundClick}\n disableCloseOnEsc={disableCloseOnEsc}\n >\n {animateDialog()}\n </Modal>\n // </DialogContext.Provider>\n );\n }\n);\n\n_Dialog.displayName = \"Dialog\";\n\n// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34757\nexport const Dialog = Object.assign({}, _Dialog, {\n Title: DialogTitle,\n Content: DialogContent,\n ContentDivider: DialogContentDivider,\n Actions: DialogActions,\n});\n"],"mappings":"AAAA,OAAOA,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,IAAIC,UAAU,
|
|
1
|
+
{"version":3,"file":"Dialog.js","names":["classnames","React","forwardRef","Modal","SlideFromTop","StyledDialog","Fade","DialogActions","DialogContent","DialogContentDivider","DialogTitle","_Dialog","ref","children","open","onClose","className","enableBackgroundClick","disableCloseOnEsc","animate","onClickOutside","rest","animateDialog","displayName","Dialog","Object","assign","Title","Content","ContentDivider","Actions"],"sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import classnames from \"classnames\";\nimport React, { forwardRef, HTMLAttributes, PropsWithChildren } from \"react\";\nimport { Modal } from \"../Modal\";\nimport { SlideFromTop } from \"../Transitions/SlideFromTop\";\nimport { StyledDialog } from \"./Styles\";\n\n// import { DialogContext } from \"./DialogContext\";\n\nimport { Fade } from \"../Transitions\";\nimport { DialogActions } from \"./DialogActions\";\nimport { DialogContent } from \"./DialogContent\";\nimport { DialogContentDivider } from \"./DialogContentDivider\";\nimport { DialogTitle } from \"./DialogTitle\";\n\nexport interface DialogProps extends HTMLAttributes<HTMLDivElement> {\n open?: boolean;\n onClose?: () => void;\n className?: string;\n enableBackgroundClick?: boolean;\n disableCloseOnEsc?: boolean;\n animate?: \"fade\" | \"slide\";\n onClickOutside?: (event) => void;\n}\n\nexport const _Dialog = forwardRef<\n HTMLDivElement,\n PropsWithChildren<DialogProps>\n>(\n (\n {\n children,\n open = false,\n onClose,\n className,\n enableBackgroundClick = false,\n disableCloseOnEsc = false,\n animate = \"slide\",\n onClickOutside,\n ...rest\n },\n ref\n ) => {\n const animateDialog = () => {\n switch (animate) {\n case \"fade\":\n return (\n <Fade in={open}>\n <StyledDialog className={classnames(\"c-dialog\", className)}>\n {children}\n </StyledDialog>\n </Fade>\n );\n default:\n return (\n <SlideFromTop in={open}>\n <StyledDialog className={classnames(\"c-dialog\", className)}>\n {children}\n </StyledDialog>\n </SlideFromTop>\n );\n }\n };\n\n return (\n // <DialogContext.Provider value={{}}>\n\n <Modal\n ref={ref}\n open={open}\n onClose={onClose}\n disableBackgroundClick={!enableBackgroundClick}\n disableCloseOnEsc={disableCloseOnEsc}\n onClickOutside={onClickOutside}\n {...rest}\n >\n {animateDialog()}\n </Modal>\n // </DialogContext.Provider>\n );\n }\n);\n\n_Dialog.displayName = \"Dialog\";\n\n// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34757\nexport const Dialog = Object.assign({}, _Dialog, {\n Title: DialogTitle,\n Content: DialogContent,\n ContentDivider: DialogContentDivider,\n Actions: DialogActions,\n});\n"],"mappings":";;;AAAA,OAAOA,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,IAAIC,UAAU,QAA2C,OAAO;AAC5E,SAASC,KAAK,QAAQ,UAAU;AAChC,SAASC,YAAY,QAAQ,6BAA6B;AAC1D,SAASC,YAAY,QAAQ,UAAU;;AAEvC;;AAEA,SAASC,IAAI,QAAQ,gBAAgB;AACrC,SAASC,aAAa,QAAQ,iBAAiB;AAC/C,SAASC,aAAa,QAAQ,iBAAiB;AAC/C,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,WAAW,QAAQ,eAAe;AAY3C,OAAO,IAAMC,OAAO,gBAAGT,UAAU,CAI/B,gBAYEU,GAAG,EACA;EAAA,IAXDC,QAAQ,QAARA,QAAQ;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAG,KAAK;IACZC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IAAA,6BACTC,qBAAqB;IAArBA,qBAAqB,sCAAG,KAAK;IAAA,6BAC7BC,iBAAiB;IAAjBA,iBAAiB,sCAAG,KAAK;IAAA,oBACzBC,OAAO;IAAPA,OAAO,6BAAG,OAAO;IACjBC,cAAc,QAAdA,cAAc;IACXC,IAAI;EAIT,IAAMC,aAAa,GAAG,SAAhBA,aAAa,GAAS;IAC1B,QAAQH,OAAO;MACb,KAAK,MAAM;QACT,oBACE,oBAAC,IAAI;UAAC,EAAE,EAAEL;QAAK,gBACb,oBAAC,YAAY;UAAC,SAAS,EAAEd,UAAU,CAAC,UAAU,EAAEgB,SAAS;QAAE,GACxDH,QAAQ,CACI,CACV;MAEX;QACE,oBACE,oBAAC,YAAY;UAAC,EAAE,EAAEC;QAAK,gBACrB,oBAAC,YAAY;UAAC,SAAS,EAAEd,UAAU,CAAC,UAAU,EAAEgB,SAAS;QAAE,GACxDH,QAAQ,CACI,CACF;IACf;EAER,CAAC;EAED;IAAA;IACE;IAEA,oBAAC,KAAK;MACJ,GAAG,EAAED,GAAI;MACT,IAAI,EAAEE,IAAK;MACX,OAAO,EAAEC,OAAQ;MACjB,sBAAsB,EAAE,CAACE,qBAAsB;MAC/C,iBAAiB,EAAEC,iBAAkB;MACrC,cAAc,EAAEE;IAAe,GAC3BC,IAAI,GAEPC,aAAa,EAAE;IAElB;EAAA;AAEJ,CAAC,CACF;;AAEDX,OAAO,CAACY,WAAW,GAAG,QAAQ;;AAE9B;AACA,OAAO,IAAMC,MAAM,GAAGC,MAAM,CAACC,MAAM,CAAC,CAAC,CAAC,EAAEf,OAAO,EAAE;EAC/CgB,KAAK,EAAEjB,WAAW;EAClBkB,OAAO,EAAEpB,aAAa;EACtBqB,cAAc,EAAEpB,oBAAoB;EACpCqB,OAAO,EAAEvB;AACX,CAAC,CAAC"}
|
|
@@ -8,6 +8,7 @@ export interface IModal {
|
|
|
8
8
|
disableBackgroundColor?: boolean;
|
|
9
9
|
onClose?: () => void;
|
|
10
10
|
children: ReactElement;
|
|
11
|
+
onClickOutside?: (event: any) => void;
|
|
11
12
|
}
|
|
12
13
|
export declare const Modal: React.ForwardRefExoticComponent<IModal & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
13
14
|
//# sourceMappingURL=Modal.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAOZ,YAAY,EAIb,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,MAAM;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAOZ,YAAY,EAIb,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,MAAM;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,YAAY,CAAC;IACvB,cAAc,CAAC,EAAE,CAAC,KAAK,KAAA,KAAK,IAAI,CAAC;CAClC;AAQD,eAAO,MAAM,KAAK,sHAuGjB,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
-
var _excluded = ["children", "disableFocusLock", "disableScrollLock", "disableBackgroundClick", "disableBackgroundColor", "disableCloseOnEsc", "open", "onClose"];
|
|
3
|
+
var _excluded = ["children", "disableFocusLock", "disableScrollLock", "disableBackgroundClick", "disableBackgroundColor", "disableCloseOnEsc", "open", "onClose", "onClickOutside"];
|
|
4
4
|
import React, { forwardRef, useRef, cloneElement, useMemo, useCallback, useState, useEffect } from "react";
|
|
5
5
|
import { Window } from "../Window";
|
|
6
6
|
import useForkRef from "../../utils/useForkRef";
|
|
@@ -24,6 +24,7 @@ export var Modal = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
24
24
|
_ref$open = _ref.open,
|
|
25
25
|
defaultOpen = _ref$open === void 0 ? false : _ref$open,
|
|
26
26
|
onClose = _ref.onClose,
|
|
27
|
+
onClickOutside = _ref.onClickOutside,
|
|
27
28
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
28
29
|
var _useState = useState(defaultOpen),
|
|
29
30
|
open = _useState[0],
|
|
@@ -48,9 +49,12 @@ export var Modal = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
48
49
|
var handleBackgroundClick = useCallback(function (event) {
|
|
49
50
|
if (!disableBackgroundClick) {
|
|
50
51
|
event.preventDefault();
|
|
51
|
-
handleClose();
|
|
52
|
+
return handleClose();
|
|
52
53
|
}
|
|
53
|
-
|
|
54
|
+
if (onClickOutside) {
|
|
55
|
+
onClickOutside(event);
|
|
56
|
+
}
|
|
57
|
+
}, [disableBackgroundClick, onClickOutside, handleClose]);
|
|
54
58
|
var handleEnter = useCallback(function () {
|
|
55
59
|
setExited(false);
|
|
56
60
|
}, []);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","names":["React","forwardRef","useRef","cloneElement","useMemo","useCallback","useState","useEffect","Window","useForkRef","createChainedFunction","Overlay","getHasTransition","children","props","Object","prototype","hasOwnProperty","call","Modal","ref","disableFocusLock","disableScrollLock","disableBackgroundClick","disableBackgroundColor","disableCloseOnEsc","open","defaultOpen","onClose","rest","setOpen","exited","setExited","innerRef","handleRef","hasTransition","handleClose","handleBackgroundClick","event","preventDefault","handleEnter","handleExited","childProps","onEnter","onExited","in","displayName"],"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, {\n forwardRef,\n HTMLAttributes,\n useRef,\n cloneElement,\n useMemo,\n useCallback,\n ReactElement,\n useState,\n useEffect,\n MouseEvent,\n} from \"react\";\nimport { Window } from \"../Window\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport createChainedFunction from \"../../utils/createChainedFunction\";\nimport { Overlay } from \"../Overlay\";\n\nexport interface IModal {\n disableFocusLock?: boolean;\n disableScrollLock?: boolean;\n open?: boolean;\n disableBackgroundClick?: boolean;\n disableCloseOnEsc?: boolean;\n disableBackgroundColor?: boolean;\n onClose?: () => void;\n children: ReactElement;\n}\n\nconst getHasTransition = (children): boolean => {\n return children.props\n ? Object.prototype.hasOwnProperty.call(children.props, \"in\")\n : false;\n};\n\nexport const Modal = forwardRef<\n HTMLDivElement,\n IModal & HTMLAttributes<HTMLDivElement>\n>(\n (\n {\n children,\n disableFocusLock = false,\n disableScrollLock = false,\n disableBackgroundClick = false,\n disableBackgroundColor = false,\n disableCloseOnEsc = false,\n open: defaultOpen = false,\n onClose,\n ...rest\n },\n ref\n ) => {\n const [open, setOpen] = useState(defaultOpen);\n const [exited, setExited] = useState(true);\n const innerRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(innerRef, ref);\n\n const hasTransition = useMemo(() => {\n return getHasTransition(children);\n }, [children]);\n\n useEffect(() => {\n setOpen(defaultOpen);\n }, [defaultOpen]);\n\n const handleClose = useCallback(() => {\n setOpen(false);\n if (!hasTransition) {\n typeof onClose === \"function\" && onClose();\n }\n }, [hasTransition, onClose]);\n\n const handleBackgroundClick = useCallback(\n (event: MouseEvent<HTMLDivElement>) => {\n if (!disableBackgroundClick) {\n event.preventDefault();\n handleClose();\n }\n },\n [disableBackgroundClick, handleClose]\n );\n\n const handleEnter = useCallback(() => {\n setExited(false);\n }, []);\n\n const handleExited = useCallback(() => {\n setExited(true);\n typeof onClose === \"function\" && onClose();\n }, [onClose]);\n\n const childProps = useMemo(() => {\n let props = {};\n\n // It's a Transition like component\n if (hasTransition && children) {\n props = {\n onEnter: createChainedFunction(handleEnter, children.props.onEnter),\n onExited: createChainedFunction(\n handleExited,\n children.props.onExited\n ),\n in: open,\n };\n }\n\n return props;\n }, [children, handleEnter, handleExited, hasTransition, open]);\n\n if (!open && (!hasTransition || exited)) {\n return null;\n }\n\n return (\n <Window\n {...rest}\n ref={handleRef}\n onClose={handleClose}\n disableFocusLock={disableFocusLock}\n disableScrollLock={disableScrollLock}\n disableCloseOnEsc={disableCloseOnEsc}\n >\n {open ? (\n <Overlay\n onClick={handleBackgroundClick}\n disableBackgroundColor={disableBackgroundColor}\n />\n ) : null}\n {cloneElement(children, childProps)}\n </Window>\n );\n }\n);\n\nModal.displayName = \"Modal\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IACVC,UAAU,EAEVC,MAAM,EACNC,YAAY,EACZC,OAAO,EACPC,WAAW,EAEXC,QAAQ,EACRC,SAAS,QAEJ,OAAO;AACd,SAASC,MAAM,QAAQ,WAAW;AAClC,OAAOC,UAAU,MAAM,wBAAwB;AAC/C,OAAOC,qBAAqB,MAAM,mCAAmC;AACrE,SAASC,OAAO,QAAQ,YAAY;
|
|
1
|
+
{"version":3,"file":"Modal.js","names":["React","forwardRef","useRef","cloneElement","useMemo","useCallback","useState","useEffect","Window","useForkRef","createChainedFunction","Overlay","getHasTransition","children","props","Object","prototype","hasOwnProperty","call","Modal","ref","disableFocusLock","disableScrollLock","disableBackgroundClick","disableBackgroundColor","disableCloseOnEsc","open","defaultOpen","onClose","onClickOutside","rest","setOpen","exited","setExited","innerRef","handleRef","hasTransition","handleClose","handleBackgroundClick","event","preventDefault","handleEnter","handleExited","childProps","onEnter","onExited","in","displayName"],"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, {\n forwardRef,\n HTMLAttributes,\n useRef,\n cloneElement,\n useMemo,\n useCallback,\n ReactElement,\n useState,\n useEffect,\n MouseEvent,\n} from \"react\";\nimport { Window } from \"../Window\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport createChainedFunction from \"../../utils/createChainedFunction\";\nimport { Overlay } from \"../Overlay\";\n\nexport interface IModal {\n disableFocusLock?: boolean;\n disableScrollLock?: boolean;\n open?: boolean;\n disableBackgroundClick?: boolean;\n disableCloseOnEsc?: boolean;\n disableBackgroundColor?: boolean;\n onClose?: () => void;\n children: ReactElement;\n onClickOutside?: (event) => void;\n}\n\nconst getHasTransition = (children): boolean => {\n return children.props\n ? Object.prototype.hasOwnProperty.call(children.props, \"in\")\n : false;\n};\n\nexport const Modal = forwardRef<\n HTMLDivElement,\n IModal & HTMLAttributes<HTMLDivElement>\n>(\n (\n {\n children,\n disableFocusLock = false,\n disableScrollLock = false,\n disableBackgroundClick = false,\n disableBackgroundColor = false,\n disableCloseOnEsc = false,\n open: defaultOpen = false,\n onClose,\n onClickOutside,\n ...rest\n },\n ref\n ) => {\n const [open, setOpen] = useState(defaultOpen);\n const [exited, setExited] = useState(true);\n const innerRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(innerRef, ref);\n\n const hasTransition = useMemo(() => {\n return getHasTransition(children);\n }, [children]);\n\n useEffect(() => {\n setOpen(defaultOpen);\n }, [defaultOpen]);\n\n const handleClose = useCallback(() => {\n setOpen(false);\n if (!hasTransition) {\n typeof onClose === \"function\" && onClose();\n }\n }, [hasTransition, onClose]);\n\n const handleBackgroundClick = useCallback(\n (event: MouseEvent<HTMLDivElement>) => {\n if (!disableBackgroundClick) {\n event.preventDefault();\n return handleClose();\n }\n\n if (onClickOutside) {\n onClickOutside(event);\n }\n },\n [disableBackgroundClick, onClickOutside, handleClose]\n );\n\n const handleEnter = useCallback(() => {\n setExited(false);\n }, []);\n\n const handleExited = useCallback(() => {\n setExited(true);\n typeof onClose === \"function\" && onClose();\n }, [onClose]);\n\n const childProps = useMemo(() => {\n let props = {};\n\n // It's a Transition like component\n if (hasTransition && children) {\n props = {\n onEnter: createChainedFunction(handleEnter, children.props.onEnter),\n onExited: createChainedFunction(\n handleExited,\n children.props.onExited\n ),\n in: open,\n };\n }\n\n return props;\n }, [children, handleEnter, handleExited, hasTransition, open]);\n\n if (!open && (!hasTransition || exited)) {\n return null;\n }\n\n return (\n <Window\n {...rest}\n ref={handleRef}\n onClose={handleClose}\n disableFocusLock={disableFocusLock}\n disableScrollLock={disableScrollLock}\n disableCloseOnEsc={disableCloseOnEsc}\n >\n {open ? (\n <Overlay\n onClick={handleBackgroundClick}\n disableBackgroundColor={disableBackgroundColor}\n />\n ) : null}\n {cloneElement(children, childProps)}\n </Window>\n );\n }\n);\n\nModal.displayName = \"Modal\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IACVC,UAAU,EAEVC,MAAM,EACNC,YAAY,EACZC,OAAO,EACPC,WAAW,EAEXC,QAAQ,EACRC,SAAS,QAEJ,OAAO;AACd,SAASC,MAAM,QAAQ,WAAW;AAClC,OAAOC,UAAU,MAAM,wBAAwB;AAC/C,OAAOC,qBAAqB,MAAM,mCAAmC;AACrE,SAASC,OAAO,QAAQ,YAAY;AAcpC,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,CAAIC,QAAQ,EAAc;EAC9C,OAAOA,QAAQ,CAACC,KAAK,GACjBC,MAAM,CAACC,SAAS,CAACC,cAAc,CAACC,IAAI,CAACL,QAAQ,CAACC,KAAK,EAAE,IAAI,CAAC,GAC1D,KAAK;AACX,CAAC;AAED,OAAO,IAAMK,KAAK,gBAAGlB,UAAU,CAI7B,gBAaEmB,GAAG,EACA;EAAA,IAZDP,QAAQ,QAARA,QAAQ;IAAA,6BACRQ,gBAAgB;IAAhBA,gBAAgB,sCAAG,KAAK;IAAA,6BACxBC,iBAAiB;IAAjBA,iBAAiB,sCAAG,KAAK;IAAA,6BACzBC,sBAAsB;IAAtBA,sBAAsB,sCAAG,KAAK;IAAA,8BAC9BC,sBAAsB;IAAtBA,sBAAsB,uCAAG,KAAK;IAAA,6BAC9BC,iBAAiB;IAAjBA,iBAAiB,sCAAG,KAAK;IAAA,iBACzBC,IAAI;IAAEC,WAAW,0BAAG,KAAK;IACzBC,OAAO,QAAPA,OAAO;IACPC,cAAc,QAAdA,cAAc;IACXC,IAAI;EAIT,gBAAwBxB,QAAQ,CAACqB,WAAW,CAAC;IAAtCD,IAAI;IAAEK,OAAO;EACpB,iBAA4BzB,QAAQ,CAAC,IAAI,CAAC;IAAnC0B,MAAM;IAAEC,SAAS;EACxB,IAAMC,QAAQ,GAAGhC,MAAM,CAAiB,IAAI,CAAC;EAC7C,IAAMiC,SAAS,GAAG1B,UAAU,CAACyB,QAAQ,EAAEd,GAAG,CAAC;EAE3C,IAAMgB,aAAa,GAAGhC,OAAO,CAAC,YAAM;IAClC,OAAOQ,gBAAgB,CAACC,QAAQ,CAAC;EACnC,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEdN,SAAS,CAAC,YAAM;IACdwB,OAAO,CAACJ,WAAW,CAAC;EACtB,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAEjB,IAAMU,WAAW,GAAGhC,WAAW,CAAC,YAAM;IACpC0B,OAAO,CAAC,KAAK,CAAC;IACd,IAAI,CAACK,aAAa,EAAE;MAClB,OAAOR,OAAO,KAAK,UAAU,IAAIA,OAAO,EAAE;IAC5C;EACF,CAAC,EAAE,CAACQ,aAAa,EAAER,OAAO,CAAC,CAAC;EAE5B,IAAMU,qBAAqB,GAAGjC,WAAW,CACvC,UAACkC,KAAiC,EAAK;IACrC,IAAI,CAAChB,sBAAsB,EAAE;MAC3BgB,KAAK,CAACC,cAAc,EAAE;MACtB,OAAOH,WAAW,EAAE;IACtB;IAEA,IAAIR,cAAc,EAAE;MAClBA,cAAc,CAACU,KAAK,CAAC;IACvB;EACF,CAAC,EACD,CAAChB,sBAAsB,EAAEM,cAAc,EAAEQ,WAAW,CAAC,CACtD;EAED,IAAMI,WAAW,GAAGpC,WAAW,CAAC,YAAM;IACpC4B,SAAS,CAAC,KAAK,CAAC;EAClB,CAAC,EAAE,EAAE,CAAC;EAEN,IAAMS,YAAY,GAAGrC,WAAW,CAAC,YAAM;IACrC4B,SAAS,CAAC,IAAI,CAAC;IACf,OAAOL,OAAO,KAAK,UAAU,IAAIA,OAAO,EAAE;EAC5C,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEb,IAAMe,UAAU,GAAGvC,OAAO,CAAC,YAAM;IAC/B,IAAIU,KAAK,GAAG,CAAC,CAAC;;IAEd;IACA,IAAIsB,aAAa,IAAIvB,QAAQ,EAAE;MAC7BC,KAAK,GAAG;QACN8B,OAAO,EAAElC,qBAAqB,CAAC+B,WAAW,EAAE5B,QAAQ,CAACC,KAAK,CAAC8B,OAAO,CAAC;QACnEC,QAAQ,EAAEnC,qBAAqB,CAC7BgC,YAAY,EACZ7B,QAAQ,CAACC,KAAK,CAAC+B,QAAQ,CACxB;QACDC,EAAE,EAAEpB;MACN,CAAC;IACH;IAEA,OAAOZ,KAAK;EACd,CAAC,EAAE,CAACD,QAAQ,EAAE4B,WAAW,EAAEC,YAAY,EAAEN,aAAa,EAAEV,IAAI,CAAC,CAAC;EAE9D,IAAI,CAACA,IAAI,KAAK,CAACU,aAAa,IAAIJ,MAAM,CAAC,EAAE;IACvC,OAAO,IAAI;EACb;EAEA,oBACE,oBAAC,MAAM,eACDF,IAAI;IACR,GAAG,EAAEK,SAAU;IACf,OAAO,EAAEE,WAAY;IACrB,gBAAgB,EAAEhB,gBAAiB;IACnC,iBAAiB,EAAEC,iBAAkB;IACrC,iBAAiB,EAAEG;EAAkB,IAEpCC,IAAI,gBACH,oBAAC,OAAO;IACN,OAAO,EAAEY,qBAAsB;IAC/B,sBAAsB,EAAEd;EAAuB,EAC/C,GACA,IAAI,eACPrB,YAAY,CAACU,QAAQ,EAAE8B,UAAU,CAAC,CAC5B;AAEb,CAAC,CACF;AAEDxB,KAAK,CAAC4B,WAAW,GAAG,OAAO"}
|