react-snappy-modal
Version:
Flexible and easy-to-use modal library for React, supporting customizable dialogs with promise-based interactions.
216 lines (212 loc) • 7.18 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);
// src/context/index.ts
var context_exports = {};
__export(context_exports, {
SnappyModalProvider: () => SnappyModalProvider,
useSnappyModalState: () => useSnappyModalState
});
module.exports = __toCommonJS(context_exports);
// src/SnappyModal.tsx
var import_react = __toESM(require("react"));
var import_SnappyModal = require("../SnappyModal-JGLWFQD3.css");
var import_jsx_runtime = require("react/jsx-runtime");
var currentComponents = [];
var SnappyModal = class {
static isShow() {
return currentComponents.length > 0;
}
static getCurrentComponent(layer) {
return currentComponents.find((c) => c.options.layer === layer);
}
static removeModalProcess(layer) {
const index = currentComponents.findIndex((c) => c.options.layer === layer);
if (index === -1)
return;
currentComponents.splice(index, 1);
SnappyModalExternalStore.emitChange();
}
static getModalProcess() {
return currentComponents;
}
static close(value, layer = 0) {
const currentComponent = this.getCurrentComponent(layer);
currentComponent?.resolve(value);
this.removeModalProcess(layer);
}
static throw(thrower, layer = 0) {
const currentComponent = this.getCurrentComponent(layer);
currentComponent?.throw(thrower);
this.removeModalProcess(layer);
currentComponent?.throw(thrower);
}
static show(component, options) {
const dialogOptions = {
...defaultDialogOptions,
...options
};
return new Promise((resolve, reject) => {
currentComponents.push({
component: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.default.Fragment, { children: component }),
options: dialogOptions,
resolve: (value) => {
resolve(value);
SnappyModalExternalStore.emitChange();
},
throw: (thrower) => {
reject(thrower);
SnappyModalExternalStore.emitChange();
}
});
currentComponents.sort((a, b) => a.options.layer - b.options.layer);
SnappyModalExternalStore.emitChange();
});
}
};
var defaultDialogOptions = {
allowOutsideClick: true,
allowScroll: false,
backdrop: true,
position: "center",
layer: 0
};
// src/context/useSnappyModalState.tsx
var import_react2 = require("react");
var snappyModalListeners = [];
var snappyModalState = {
isShow: false,
modalProgress: []
};
function emitChange() {
for (const listener of snappyModalListeners) {
listener();
}
}
var SnappyModalExternalStore = {
emitChange: () => {
snappyModalState = {
isShow: SnappyModal.isShow(),
modalProgress: [...SnappyModal.getModalProcess()]
};
emitChange();
},
subscribe(listener) {
snappyModalListeners = [...snappyModalListeners, listener];
return () => {
snappyModalListeners = snappyModalListeners.filter((l) => l !== listener);
};
},
getSnappyModalState() {
return snappyModalState;
}
};
var useSnappyModalState = () => {
return (0, import_react2.useSyncExternalStore)(
SnappyModalExternalStore.subscribe,
SnappyModalExternalStore.getSnappyModalState
);
};
// src/context/SnappyModalContext.tsx
var import_react3 = require("react");
var import_jsx_runtime2 = require("react/jsx-runtime");
var SnappyModalContext = (0, import_react3.createContext)({});
var SnappyModalProvider = ({ children }) => {
const snappyModal = useSnappyModalState();
(0, import_react3.useEffect)(() => {
if (!snappyModal.isShow)
return;
const htmlElement = document.getElementsByTagName("html")[0];
const pageX = window.scrollX;
const pageY = window.scrollY;
htmlElement.style.top = `-${pageY}px`;
htmlElement.style.left = `-${pageX}px`;
htmlElement.classList.add("not-scroll");
return () => {
htmlElement.style.top = "";
htmlElement.style.left = "";
htmlElement.classList.remove("not-scroll");
window.scrollTo({
left: pageX,
top: pageY
});
};
}, [snappyModal.isShow]);
const modalRendered = (0, import_react3.useMemo)(() => {
const { modalProgress } = snappyModal;
return modalProgress.map((modal) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ...assignModalOptions(modal.options), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"div",
{
className: `snappy-modal-content`,
onClick: (e) => e.stopPropagation(),
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(modal.component, {})
}
) }, modal.options.layer));
}, [snappyModal.modalProgress]);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(SnappyModalContext.Provider, { value: {}, children: [
children,
modalRendered
] });
};
function assignModalOptions(options) {
const domOptions = {
classList: ["snappy-modal-area"],
styleProperty: {},
onClick: (e) => {
}
};
if (options.backdrop) {
domOptions.classList.push("backdrop");
if (typeof options.backdrop === "string") {
domOptions.styleProperty["--snappy-modal-backdrop"] = options.backdrop;
}
}
if (options.position) {
domOptions.styleProperty["--snappy-modal-content-position"] = options.position;
}
if (options?.allowOutsideClick) {
domOptions.onClick = (e) => {
e.stopPropagation();
e.preventDefault();
SnappyModal.close(void 0, options.layer);
};
}
if (options.zIndex !== void 0) {
domOptions.styleProperty["--snappy-modal-z-index"] = options.zIndex.toString();
}
return {
className: domOptions.classList.join(" "),
style: domOptions.styleProperty,
onClick: domOptions.onClick
};
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
SnappyModalProvider,
useSnappyModalState
});
//# sourceMappingURL=index.js.map