react-easily-modal
Version:
It is an easy-to-use modal library exclusively for react.js.
697 lines (685 loc) • 29.9 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
var styled = _interopDefault(require('styled-components'));
function _regeneratorRuntime() {
_regeneratorRuntime = function () {
return exports;
};
var exports = {},
Op = Object.prototype,
hasOwn = Op.hasOwnProperty,
defineProperty = Object.defineProperty || function (obj, key, desc) {
obj[key] = desc.value;
},
$Symbol = "function" == typeof Symbol ? Symbol : {},
iteratorSymbol = $Symbol.iterator || "@@iterator",
asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator",
toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
function define(obj, key, value) {
return Object.defineProperty(obj, key, {
value: value,
enumerable: !0,
configurable: !0,
writable: !0
}), obj[key];
}
try {
define({}, "");
} catch (err) {
define = function (obj, key, value) {
return obj[key] = value;
};
}
function wrap(innerFn, outerFn, self, tryLocsList) {
var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator,
generator = Object.create(protoGenerator.prototype),
context = new Context(tryLocsList || []);
return defineProperty(generator, "_invoke", {
value: makeInvokeMethod(innerFn, self, context)
}), generator;
}
function tryCatch(fn, obj, arg) {
try {
return {
type: "normal",
arg: fn.call(obj, arg)
};
} catch (err) {
return {
type: "throw",
arg: err
};
}
}
exports.wrap = wrap;
var ContinueSentinel = {};
function Generator() {}
function GeneratorFunction() {}
function GeneratorFunctionPrototype() {}
var IteratorPrototype = {};
define(IteratorPrototype, iteratorSymbol, function () {
return this;
});
var getProto = Object.getPrototypeOf,
NativeIteratorPrototype = getProto && getProto(getProto(values([])));
NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype);
var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype);
function defineIteratorMethods(prototype) {
["next", "throw", "return"].forEach(function (method) {
define(prototype, method, function (arg) {
return this._invoke(method, arg);
});
});
}
function AsyncIterator(generator, PromiseImpl) {
function invoke(method, arg, resolve, reject) {
var record = tryCatch(generator[method], generator, arg);
if ("throw" !== record.type) {
var result = record.arg,
value = result.value;
return value && "object" == typeof value && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) {
invoke("next", value, resolve, reject);
}, function (err) {
invoke("throw", err, resolve, reject);
}) : PromiseImpl.resolve(value).then(function (unwrapped) {
result.value = unwrapped, resolve(result);
}, function (error) {
return invoke("throw", error, resolve, reject);
});
}
reject(record.arg);
}
var previousPromise;
defineProperty(this, "_invoke", {
value: function (method, arg) {
function callInvokeWithMethodAndArg() {
return new PromiseImpl(function (resolve, reject) {
invoke(method, arg, resolve, reject);
});
}
return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
}
});
}
function makeInvokeMethod(innerFn, self, context) {
var state = "suspendedStart";
return function (method, arg) {
if ("executing" === state) throw new Error("Generator is already running");
if ("completed" === state) {
if ("throw" === method) throw arg;
return doneResult();
}
for (context.method = method, context.arg = arg;;) {
var delegate = context.delegate;
if (delegate) {
var delegateResult = maybeInvokeDelegate(delegate, context);
if (delegateResult) {
if (delegateResult === ContinueSentinel) continue;
return delegateResult;
}
}
if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) {
if ("suspendedStart" === state) throw state = "completed", context.arg;
context.dispatchException(context.arg);
} else "return" === context.method && context.abrupt("return", context.arg);
state = "executing";
var record = tryCatch(innerFn, self, context);
if ("normal" === record.type) {
if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue;
return {
value: record.arg,
done: context.done
};
}
"throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg);
}
};
}
function maybeInvokeDelegate(delegate, context) {
var methodName = context.method,
method = delegate.iterator[methodName];
if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator.return && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel;
var record = tryCatch(method, delegate.iterator, context.arg);
if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel;
var info = record.arg;
return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel);
}
function pushTryEntry(locs) {
var entry = {
tryLoc: locs[0]
};
1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry);
}
function resetTryEntry(entry) {
var record = entry.completion || {};
record.type = "normal", delete record.arg, entry.completion = record;
}
function Context(tryLocsList) {
this.tryEntries = [{
tryLoc: "root"
}], tryLocsList.forEach(pushTryEntry, this), this.reset(!0);
}
function values(iterable) {
if (iterable) {
var iteratorMethod = iterable[iteratorSymbol];
if (iteratorMethod) return iteratorMethod.call(iterable);
if ("function" == typeof iterable.next) return iterable;
if (!isNaN(iterable.length)) {
var i = -1,
next = function next() {
for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next;
return next.value = undefined, next.done = !0, next;
};
return next.next = next;
}
}
return {
next: doneResult
};
}
function doneResult() {
return {
value: undefined,
done: !0
};
}
return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", {
value: GeneratorFunctionPrototype,
configurable: !0
}), defineProperty(GeneratorFunctionPrototype, "constructor", {
value: GeneratorFunction,
configurable: !0
}), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) {
var ctor = "function" == typeof genFun && genFun.constructor;
return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name));
}, exports.mark = function (genFun) {
return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun;
}, exports.awrap = function (arg) {
return {
__await: arg
};
}, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () {
return this;
}), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) {
void 0 === PromiseImpl && (PromiseImpl = Promise);
var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl);
return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) {
return result.done ? result.value : iter.next();
});
}, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () {
return this;
}), define(Gp, "toString", function () {
return "[object Generator]";
}), exports.keys = function (val) {
var object = Object(val),
keys = [];
for (var key in object) keys.push(key);
return keys.reverse(), function next() {
for (; keys.length;) {
var key = keys.pop();
if (key in object) return next.value = key, next.done = !1, next;
}
return next.done = !0, next;
};
}, exports.values = values, Context.prototype = {
constructor: Context,
reset: function (skipTempReset) {
if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined);
},
stop: function () {
this.done = !0;
var rootRecord = this.tryEntries[0].completion;
if ("throw" === rootRecord.type) throw rootRecord.arg;
return this.rval;
},
dispatchException: function (exception) {
if (this.done) throw exception;
var context = this;
function handle(loc, caught) {
return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught;
}
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
var entry = this.tryEntries[i],
record = entry.completion;
if ("root" === entry.tryLoc) return handle("end");
if (entry.tryLoc <= this.prev) {
var hasCatch = hasOwn.call(entry, "catchLoc"),
hasFinally = hasOwn.call(entry, "finallyLoc");
if (hasCatch && hasFinally) {
if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0);
if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc);
} else if (hasCatch) {
if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0);
} else {
if (!hasFinally) throw new Error("try statement without catch or finally");
if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc);
}
}
}
},
abrupt: function (type, arg) {
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
var entry = this.tryEntries[i];
if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) {
var finallyEntry = entry;
break;
}
}
finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null);
var record = finallyEntry ? finallyEntry.completion : {};
return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record);
},
complete: function (record, afterLoc) {
if ("throw" === record.type) throw record.arg;
return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel;
},
finish: function (finallyLoc) {
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
var entry = this.tryEntries[i];
if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel;
}
},
catch: function (tryLoc) {
for (var i = this.tryEntries.length - 1; i >= 0; --i) {
var entry = this.tryEntries[i];
if (entry.tryLoc === tryLoc) {
var record = entry.completion;
if ("throw" === record.type) {
var thrown = record.arg;
resetTryEntry(entry);
}
return thrown;
}
}
throw new Error("illegal catch attempt");
},
delegateYield: function (iterable, resultName, nextLoc) {
return this.delegate = {
iterator: values(iterable),
resultName: resultName,
nextLoc: nextLoc
}, "next" === this.method && (this.arg = undefined), ContinueSentinel;
}
}, exports;
}
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
Promise.resolve(value).then(_next, _throw);
}
}
function _asyncToGenerator(fn) {
return function () {
var self = this,
args = arguments;
return new Promise(function (resolve, reject) {
var gen = fn.apply(self, args);
function _next(value) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
}
function _throw(err) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
}
_next(undefined);
});
};
}
function _extends() {
_extends = Object.assign ? Object.assign.bind() : 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);
}
function _taggedTemplateLiteralLoose(strings, raw) {
if (!raw) {
raw = strings.slice(0);
}
strings.raw = raw;
return strings;
}
// import { useRouter } from 'next/router';
var useModal = function useModal() {
// const nextPastPathname = useRef('');
// const router = useRouter();
// const { pathname } = router;
var _useContext = React.useContext(ModalContext),
modals = _useContext.modals,
setModals = _useContext.setModals,
scrollRelease = _useContext.scrollRelease,
scrollFreeze = _useContext.scrollFreeze;
var checkModal = function checkModal(component, onlyLastCheck) {
if (onlyLastCheck === void 0) {
onlyLastCheck = false;
}
var modalList = modals.current;
if (onlyLastCheck) {
return modalList.length > 0 ? modalList[modalList.length - 1].component.name === component.name : false;
}
return modalList.some(function (m) {
return m.component.name === component.name;
});
};
var addModal = function addModal(_ref) {
var component = _ref.component,
props = _ref.props,
isScrollFreeze = _ref.isScrollFreeze;
return new Promise(function (resolve, reject) {
var _modalList$id, _modalList;
var modal = {
id: -1,
props: props,
component: component,
resolve: resolve,
reject: reject
};
if (isScrollFreeze && scrollFreeze) scrollFreeze();
var modalList = modals.current;
var duplicate = checkModal(modal.component, true);
if (props != null && props.duplicateCheck) duplicate = checkModal(modal.component);
if (duplicate) return;
modal.id = ((_modalList$id = (_modalList = modalList[modalList.length - 1]) == null ? void 0 : _modalList.id) != null ? _modalList$id : -1) + 1;
setModals([].concat(modalList, [modal]));
});
};
var openModal = /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(component, props) {
return _regeneratorRuntime().wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
return _context.abrupt("return", addModal({
component: component,
props: props,
isScrollFreeze: true
}));
case 1:
case "end":
return _context.stop();
}
}, _callee);
}));
return function openModal(_x, _x2) {
return _ref2.apply(this, arguments);
};
}();
var openScrollFreeModal = /*#__PURE__*/function () {
var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(component, props) {
return _regeneratorRuntime().wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
return _context2.abrupt("return", addModal({
component: component,
props: props,
isScrollFreeze: false
}));
case 1:
case "end":
return _context2.stop();
}
}, _callee2);
}));
return function openScrollFreeModal(_x3, _x4) {
return _ref3.apply(this, arguments);
};
}();
var closeModal = function closeModal(id) {
var newModalList = modals.current.filter(function (m) {
return m.id !== id;
});
setModals(newModalList);
if (!newModalList.length && scrollRelease) scrollRelease();
};
var resolveModal = function resolveModal(modal, result) {
modal.resolve(result);
closeModal(modal.id);
};
var resetModal = function resetModal() {
setModals([]);
scrollRelease && scrollRelease();
};
// useEffect(() => {
// if (nextPastPathname.current !== pathname) nextPastPathname.current = pathname;
// return () => {
// if (nextPastPathname.current !== pathname) {
// resetModal();
// }
// };
// }, [pathname]);
return {
modals: modals,
modal: openModal,
scrollModal: openScrollFreeModal,
closeModal: closeModal,
resolveModal: resolveModal,
checkModal: checkModal,
resetModal: resetModal,
scrollRelease: scrollRelease
};
};
var _templateObject;
var Component = function Component(_ref) {
var is = _ref.is,
props = _ref.props;
if (is) return React__default.createElement(React.Suspense, null, React__default.createElement(is, props));
// eslint-disable-next-line react/jsx-no-useless-fragment
return React__default.createElement(React__default.Fragment, null);
};
var ModalComponentComp = function ModalComponentComp(_ref2) {
var className = _ref2.className,
modal = _ref2.modal;
var _useContext = React.useContext(ModalContext),
modalClassName = _useContext.className;
var _useModal = useModal(),
closeModal = _useModal.closeModal,
resolveModal = _useModal.resolveModal,
scrollRelease = _useModal.scrollRelease;
var _useModalAnimation = useModalAnimation(modal, closeModal),
transitionClass = _useModalAnimation.transitionClass,
animationClassName = _useModalAnimation.animationClassName,
closeAnimationModal = _useModalAnimation.closeModal;
var _close = function close(modal) {
if (animationClassName) closeAnimationModal();else closeModal(modal.id);
};
var _resolve = function resolve(modal, result) {
resolveModal(modal, result);
};
React.useEffect(function () {
return function () {
scrollRelease && scrollRelease();
};
}, []);
return React__default.createElement("div", {
className: className + " " + modalClassName + " " + transitionClass
}, React__default.createElement(Component, {
is: modal.component,
key: modal.id,
props: _extends({}, modal.props, {
close: function close() {
return _close(modal);
},
resolve: function resolve(result) {
return _resolve(modal, result);
}
})
}));
};
var ModalComponent = /*#__PURE__*/styled(ModalComponentComp)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: hidden;\n \n >.dim{\n transition: opacity 0.1s;\n }\n\n &.enter, &.leave{ \n visibility: visible; \n \n >.dim{\n opacity: 1;\n }\n }\n &.enter-done, &.leave-done{\n visibility: visible;\n }\n &.enter{\n .modal-cont{\n animation-name: ", ";\n animation-duration: ", ";\n animation-timing-function: ", ";\n animation-direction: normal;\n }\n }\n &.leave{\n .modal-cont{\n animation-name: ", ";\n animation-duration: ", ";\n animation-timing-function: ", ";\n animation-direction: reverse;\n }\n }\n"])), function (_ref3) {
var _modal$props, _modal$props$animatio, _modal$props2, _modal$props2$animati;
var modal = _ref3.modal;
return (_modal$props = modal.props) != null && (_modal$props$animatio = _modal$props.animation) != null && _modal$props$animatio.name ? "modal-" + ((_modal$props2 = modal.props) == null ? void 0 : (_modal$props2$animati = _modal$props2.animation) == null ? void 0 : _modal$props2$animati.name) : 'none';
}, function (_ref4) {
var _modal$props3, _modal$props3$animati, _modal$props4, _modal$props4$animati;
var modal = _ref4.modal;
return (_modal$props3 = modal.props) != null && (_modal$props3$animati = _modal$props3.animation) != null && _modal$props3$animati.duration ? ((_modal$props4 = modal.props) == null ? void 0 : (_modal$props4$animati = _modal$props4.animation) == null ? void 0 : _modal$props4$animati.duration) + "ms" : DEFAULT_ANIMATION_DURATION + "ms";
}, function (_ref5) {
var _modal$props5, _modal$props5$animati, _modal$props6, _modal$props6$animati;
var modal = _ref5.modal;
return (_modal$props5 = modal.props) != null && (_modal$props5$animati = _modal$props5.animation) != null && _modal$props5$animati.timingFunction ? "" + ((_modal$props6 = modal.props) == null ? void 0 : (_modal$props6$animati = _modal$props6.animation) == null ? void 0 : _modal$props6$animati.timingFunction) : 'ease-in-out';
}, function (_ref6) {
var _modal$props7, _modal$props7$animati, _modal$props8, _modal$props8$animati;
var modal = _ref6.modal;
return (_modal$props7 = modal.props) != null && (_modal$props7$animati = _modal$props7.animation) != null && _modal$props7$animati.name ? "modal-" + ((_modal$props8 = modal.props) == null ? void 0 : (_modal$props8$animati = _modal$props8.animation) == null ? void 0 : _modal$props8$animati.name) : 'none';
}, function (_ref7) {
var _modal$props9, _modal$props9$animati, _modal$props10, _modal$props10$animat;
var modal = _ref7.modal;
return (_modal$props9 = modal.props) != null && (_modal$props9$animati = _modal$props9.animation) != null && _modal$props9$animati.duration ? ((_modal$props10 = modal.props) == null ? void 0 : (_modal$props10$animat = _modal$props10.animation) == null ? void 0 : _modal$props10$animat.duration) + "ms" : DEFAULT_ANIMATION_DURATION + "ms";
}, function (_ref8) {
var _modal$props11, _modal$props11$animat, _modal$props12, _modal$props12$animat;
var modal = _ref8.modal;
return (_modal$props11 = modal.props) != null && (_modal$props11$animat = _modal$props11.animation) != null && _modal$props11$animat.timingFunction ? "" + ((_modal$props12 = modal.props) == null ? void 0 : (_modal$props12$animat = _modal$props12.animation) == null ? void 0 : _modal$props12$animat.timingFunction) : 'ease-in-out';
});
var ModalComponent$1 = /*#__PURE__*/React__default.memo(ModalComponent);
var _templateObject$1;
var initialValue = {
modals: {
current: []
},
setModals: function setModals() {}
};
var ModalContainerStyle = /*#__PURE__*/styled.div(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute; left:0; top: 0; z-index: 9999;\n > button { position: fixed; left:0; top: 0; z-index: 9999; }\n"])));
var ModalContext = /*#__PURE__*/React.createContext(initialValue);
var ModalProvider = function ModalProvider(_ref) {
var _ref$className = _ref.className,
className = _ref$className === void 0 ? 'jw-modal' : _ref$className,
animation = _ref.animation,
children = _ref.children,
backActionControl = _ref.backActionControl,
pathname = _ref.pathname,
scrollRelease = _ref.scrollRelease,
scrollFreeze = _ref.scrollFreeze;
var modalList = React.useRef([]);
var _useState = React.useState([]),
modals = _useState[0],
setModals = _useState[1];
var value = React.useMemo(function () {
return _extends({}, initialValue, {
className: className,
animation: animation,
modals: modalList,
setModals: setModals,
scrollRelease: scrollRelease,
scrollFreeze: scrollFreeze
});
}, [className, animation, scrollRelease, scrollFreeze]);
React.useEffect(function () {
backActionControl && backActionControl.func({
modals: modalList
});
}, [].concat((backActionControl == null ? void 0 : backActionControl.deps) || [], [backActionControl]));
React.useEffect(function () {
setModals([]);
scrollRelease && scrollRelease();
}, [pathname]);
return React__default.createElement(ModalContext.Provider, {
value: value
}, React__default.createElement(ModalContainerStyle, null, modals.map(function (modal) {
return React__default.createElement(ModalComponent$1, {
key: modal.id,
modal: modal
});
})), children);
};
var _templateObject$2;
var ModalTemplateComp = function ModalTemplateComp(_ref) {
var className = _ref.className,
showDim = _ref.showDim,
children = _ref.children,
close = _ref.close;
return React__default.createElement("div", {
className: className
}, !!showDim && React__default.createElement("div", {
tabIndex: -1,
role: "button",
"aria-label": "modal-dim",
className: "dim",
onClick: close
}), React__default.createElement("div", {
className: "modal-cont"
}, children));
};
var ModalTemplate = /*#__PURE__*/styled(ModalTemplateComp)(_templateObject$2 || (_templateObject$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: fixed; top: 0; left:0; bottom: 0; right: 0; z-index: 1; display: flex; justify-content: center; align-items: center;\n button{ cursor:pointer; border: none; background-color: transparent; }\n .dim{ position: absolute; top: 0; left:0; bottom: 0; right: 0; z-index: 1; background-color: rgba(0,0,0,0.5); }\n .modal-cont{ position: relative; z-index: 2; width: 500px; height: 500px; padding: 20px; border-radius: 8px; background-color: white; }\n\n &.fade{ opacity: 0; transition-property: opacity;\n &.enter{ opacity: 1; }\n &.leave{ opacity: 0; }\n }\n\n @keyframes fade {\n 0%{ opacity: 0; }\n 100%{ opacity: 1;}\n }\n"])));
var useModalAnimation = function useModalAnimation(modal, close) {
var timeOutIds = React.useRef([]);
var _ref = modal.props || {},
animation = _ref.animation;
var _ref2 = animation || {},
_ref2$duration = _ref2.duration,
animationDuration = _ref2$duration === void 0 ? DEFAULT_ANIMATION_DURATION : _ref2$duration,
_ref2$name = _ref2.name,
animationClassName = _ref2$name === void 0 ? '' : _ref2$name;
var _useState = React.useState(false),
open = _useState[0],
setOpen = _useState[1];
var _useState2 = React.useState(false),
done = _useState2[0],
setDone = _useState2[1];
var transitionClass = React.useMemo(function () {
var name = '';
if (open && !done) {
name = 'enter';
} else if (!open && done) {
name = 'leave';
} else if (open && done) {
name = 'enter-done';
}
return name;
}, [open, done]);
var closeModal = function closeModal() {
if (!open || !done) return;
setOpen(false);
var id = window.setTimeout(function () {
close(modal.id);
}, animationClassName ? animationDuration - 50 : 0);
timeOutIds.current.push(id);
};
var changeDoneStatus = function changeDoneStatus() {
if (!open) return;
var timeOutId = window.setTimeout(function () {
setDone(function (done) {
return !done;
});
}, animationClassName ? animationDuration : 0);
timeOutIds.current.push(timeOutId);
};
React.useEffect(function () {
setOpen(true);
return function () {
timeOutIds.current.forEach(function (id) {
window.clearTimeout(id);
});
};
}, []);
React.useEffect(function () {
changeDoneStatus();
}, [open]);
return {
transitionClass: transitionClass,
animationClassName: animationClassName,
closeModal: closeModal
};
};
var DEFAULT_ANIMATION_DURATION = 250;
exports.DEFAULT_ANIMATION_DURATION = DEFAULT_ANIMATION_DURATION;
exports.ModalProvider = ModalProvider;
exports.ModalTemplate = ModalTemplate;
exports.useModal = useModal;
exports.useModalAnimation = useModalAnimation;
//# sourceMappingURL=react-easily-modal.cjs.development.js.map