@clayui/modal
Version:
ClayModal component
190 lines (188 loc) • 6.49 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var Modal_exports = {};
__export(Modal_exports, {
default: () => Modal_default
});
module.exports = __toCommonJS(Modal_exports);
var import_shared = require("@clayui/shared");
var import_aria_hidden = require("aria-hidden");
var import_classnames = __toESM(require("classnames"));
var import_react = __toESM(require("react"));
var import_warning = __toESM(require("warning"));
var import_Body = __toESM(require("./Body"));
var import_Context = __toESM(require("./Context"));
var import_Footer = __toESM(require("./Footer"));
var import_Header = __toESM(require("./Header"));
var import_Hook = require("./Hook");
var import_types = require("./types");
const warningMessage = `You need to pass the 'observer' prop to ClayModal for everything to work fine, use the 'useModal' hook that exposes the observer.
> const {observer} = useModal({...});
>
> return (
> <ClayModal observer={observer}>
> ...
> </ClayModal>
> );
`;
let counter = 0;
function Modal({
center,
children,
className,
containerElementRef,
containerProps = {},
disableAutoClose = false,
observer,
role = "dialog",
size,
spritemap,
status,
zIndex,
...otherProps
}) {
const modalElementRef = (0, import_react.useRef)(null);
const modalBodyElementRef = (0, import_react.useRef)(null);
const [show, content] = observer && observer.mutation ? observer.mutation : [false, false];
(0, import_warning.default)(observer !== void 0, warningMessage);
(0, import_Hook.useUserInteractions)(
modalElementRef,
modalBodyElementRef,
() => !disableAutoClose && observer.dispatch(import_types.ObserverType.Close),
show,
content
);
(0, import_react.useEffect)(() => {
observer.dispatch(import_types.ObserverType.RestoreFocus, document.activeElement);
observer.dispatch(import_types.ObserverType.Open);
}, []);
(0, import_react.useEffect)(() => {
if (modalBodyElementRef.current && show && content) {
const focusedElement = modalBodyElementRef.current.querySelector("h1");
if (focusedElement) {
focusedElement.focus();
} else {
modalBodyElementRef.current.focus();
}
}
}, [show, content]);
const ariaLabelledby = (0, import_react.useMemo)(() => {
counter++;
return `clay-modal-label-${counter}`;
}, []);
(0, import_react.useEffect)(() => {
if (show && content) {
import_shared.stack.push(modalElementRef);
}
return () => {
const index = import_shared.stack.indexOf(modalElementRef);
if (index >= 0) {
import_shared.stack.splice(index, 1);
}
};
}, [show, modalElementRef, content]);
(0, import_react.useEffect)(() => {
if (modalElementRef.current && show && import_shared.stack[import_shared.stack.length - 1] === modalElementRef) {
return (0, import_aria_hidden.suppressOthers)(modalElementRef.current);
}
}, [show]);
return /* @__PURE__ */ import_react.default.createElement(
import_shared.ClayPortal,
{
...containerProps,
containerRef: containerElementRef,
subPortalRef: modalElementRef
},
/* @__PURE__ */ import_react.default.createElement(
"div",
{
"aria-hidden": "true",
className: (0, import_classnames.default)("modal-backdrop fade", {
show
}),
style: { zIndex }
}
),
/* @__PURE__ */ import_react.default.createElement(
"div",
{
...otherProps,
className: (0, import_classnames.default)("fade modal d-block", className, {
show
}),
ref: modalElementRef,
style: { zIndex: zIndex && zIndex + 10 }
},
/* @__PURE__ */ import_react.default.createElement(
"div",
{
className: (0, import_classnames.default)("modal-dialog", {
[`modal-${size}`]: size,
[`modal-${status}`]: status,
"modal-dialog-centered": center
})
},
/* @__PURE__ */ import_react.default.createElement(
"div",
{
"aria-labelledby": ariaLabelledby,
"aria-modal": "true",
className: "modal-content",
ref: modalBodyElementRef,
role,
tabIndex: -1
},
/* @__PURE__ */ import_react.default.createElement(
import_Context.default.Provider,
{
value: {
ariaLabelledby,
onClose: () => observer.dispatch(import_types.ObserverType.Close),
spritemap,
status
}
},
content && children
)
)
)
)
);
}
Modal.Body = import_Body.default;
Modal.Footer = import_Footer.default;
Modal.Header = import_Header.default;
Modal.Item = import_Header.Item;
Modal.ItemGroup = import_Header.ItemGroup;
Modal.Subtitle = import_Header.Subtitle;
Modal.SubtitleSection = import_Header.SubtitleSection;
Modal.Title = import_Header.Title;
Modal.TitleIndicator = import_Header.TitleIndicator;
Modal.TitleSection = import_Header.TitleSection;
var Modal_default = Modal;