@essential-js/ui
Version:
EssentialJS UI
333 lines (316 loc) • 11.2 kB
JavaScript
System.register(["@beyond-js/kernel/bundle", "@beyond-js/kernel/styles", "react", "iconsax-react", "@essential-js/ui/buttons"], function (_export, _context) {
"use strict";
var dependency_0, dependency_1, dependency_2, dependency_3, dependency_4, __Bundle, __pkg, ims, ConfirmModal, ErrorModal, Modal, InfoModal, SuccessModal, __beyond_pkg, hmr;
_export({
ConfirmModal: void 0,
ErrorModal: void 0,
Modal: void 0,
InfoModal: void 0,
SuccessModal: void 0
});
return {
setters: [function (_beyondJsKernelBundle) {
dependency_0 = _beyondJsKernelBundle;
}, function (_beyondJsKernelStyles) {
dependency_1 = _beyondJsKernelStyles;
}, function (_react2) {
dependency_2 = _react2;
}, function (_iconsaxReact2) {
dependency_3 = _iconsaxReact2;
}, function (_essentialJsUiButtons) {
dependency_4 = _essentialJsUiButtons;
}],
execute: function () {
({
Bundle: __Bundle
} = dependency_0);
__pkg = new __Bundle({
"module": {
"vspecifier": "@essential-js/ui@1.0.0/modals"
},
"type": "code"
}, _context.meta.url).package();
;
__pkg.dependencies.update([['@beyond-js/kernel/styles', dependency_1], ['react', dependency_2], ['iconsax-react', dependency_3], ['@essential-js/ui/buttons', dependency_4]]);
brequire('@beyond-js/kernel/styles').styles.register('@essential-js/ui@1.0.0/modals');
ims = new Map();
/*************************
INTERNAL MODULE: ./confirm
*************************/
ims.set('./confirm', {
hash: 545194948,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ConfirmModal = ConfirmModal;
var _react = require("react");
var _header = require("./header");
var _index = require("./index");
var _iconsaxReact = require("iconsax-react");
var _buttons = require("@essential-js/ui/buttons");
/*bundle*/
function ConfirmModal({
children,
title,
onConfirm,
onCancel,
cancelText,
confirmText,
onHide
}) {
return _react.default.createElement(_index.Modal, {
className: "confirm__modal confirm",
onHide: onHide
}, _react.default.createElement(_header.Header, {
icon: _iconsaxReact.InfoCircle,
className: "confirm-header",
title: title,
onHide: onHide
}), _react.default.createElement("div", {
className: "content"
}, children), _react.default.createElement("footer", {
className: "actions"
}, _react.default.createElement(_buttons.Button, {
onClick: onCancel,
className: "cancel"
}, _react.default.createElement("span", null, cancelText)), _react.default.createElement(_buttons.Button, {
onClick: onConfirm,
className: "confirm success"
}, _react.default.createElement("span", null, confirmText))));
}
}
});
/***********************
INTERNAL MODULE: ./error
***********************/
ims.set('./error', {
hash: 719801684,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ErrorModal = ErrorModal;
var _react = require("react");
var _iconsaxReact = require("iconsax-react");
var _index = require("./index");
var _header = require("./header");
/*bundle*/
function ErrorModal({
children,
title,
onHide
}) {
return _react.default.createElement(_index.Modal, {
className: "error",
onHide: onHide
}, _react.default.createElement(_header.Header, {
icon: _iconsaxReact.InfoCircle,
className: "error-header",
title: title,
onHide: onHide
}), _react.default.createElement("div", {
className: "content"
}, children));
}
}
});
/************************
INTERNAL MODULE: ./header
************************/
ims.set('./header', {
hash: 3824540714,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Header = Header;
var _react = require("react");
var _iconsaxReact = require("iconsax-react");
function Header({
title,
icon,
onHide,
className = '',
closeable = true,
...props
}) {
const Icon = icon;
function close() {
onHide();
}
return _react.default.createElement("header", {
className: `modal-header ${className}`,
...props
}, _react.default.createElement("div", {
className: "title"
}, icon && _react.default.createElement(Icon, {
className: "icon"
}), _react.default.createElement("h2", null, title)), closeable && _react.default.createElement("button", {
onClick: close,
title: "close"
}, _react.default.createElement(_iconsaxReact.CloseCircle, {
className: "icon"
})));
}
}
});
/***********************
INTERNAL MODULE: ./index
***********************/
ims.set('./index', {
hash: 317119939,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Modal = Modal;
var _react = require("react");
const CLOSE_DELAY = 100;
/*bundle*/
function Modal({
onHide,
children,
className,
...props
}) {
const modalRef = _react.default.useRef(null);
_react.default.useEffect(() => {
if (modalRef.current) modalRef.current.classList.add('appear');
}, [modalRef.current]);
function hide(event) {
if (event.target === modalRef.current || modalRef.current.contains(event.target)) return;
modalRef.current.classList.remove('appear');
modalRef.current.classList.add('disappear');
setTimeout(() => {
onHide();
}, CLOSE_DELAY);
}
return _react.default.createElement("main", {
onClick: hide,
className: "essential__modal",
...props
}, _react.default.createElement("article", {
className: `modal ${className}`,
ref: modalRef
}, children));
}
}
});
/**********************
INTERNAL MODULE: ./info
**********************/
ims.set('./info', {
hash: 3685385461,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.InfoModal = InfoModal;
var _react = require("react");
var _iconsaxReact = require("iconsax-react");
var _index = require("./index");
var _header = require("./header");
/*bundle*/
function InfoModal({
children,
title,
onHide
}) {
return _react.default.createElement(_index.Modal, {
className: "info",
onHide: onHide
}, _react.default.createElement(_header.Header, {
icon: _iconsaxReact.InfoCircle,
className: "info-header",
title: title,
onHide: onHide
}), _react.default.createElement("div", {
className: "content"
}, children));
}
}
});
/*************************
INTERNAL MODULE: ./success
*************************/
ims.set('./success', {
hash: 3900843873,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SuccessModal = SuccessModal;
var _react = require("react");
var _iconsaxReact = require("iconsax-react");
var _index = require("./index");
var _header = require("./header");
/*bundle*/
function SuccessModal({
children,
title,
onHide
}) {
return _react.default.createElement(_index.Modal, {
className: "success",
onHide: onHide
}, _react.default.createElement(_header.Header, {
icon: _iconsaxReact.TickCircle,
className: "success-header",
title: title,
onHide: onHide
}), _react.default.createElement("div", {
className: "content"
}, children));
}
}
});
__pkg.exports.descriptor = [{
"im": "./confirm",
"from": "ConfirmModal",
"name": "ConfirmModal"
}, {
"im": "./error",
"from": "ErrorModal",
"name": "ErrorModal"
}, {
"im": "./index",
"from": "Modal",
"name": "Modal"
}, {
"im": "./info",
"from": "InfoModal",
"name": "InfoModal"
}, {
"im": "./success",
"from": "SuccessModal",
"name": "SuccessModal"
}];
// Module exports
__pkg.exports.process = function ({
require,
prop,
value
}) {
(require || prop === 'ConfirmModal') && _export("ConfirmModal", ConfirmModal = require ? require('./confirm').ConfirmModal : value);
(require || prop === 'ErrorModal') && _export("ErrorModal", ErrorModal = require ? require('./error').ErrorModal : value);
(require || prop === 'Modal') && _export("Modal", Modal = require ? require('./index').Modal : value);
(require || prop === 'InfoModal') && _export("InfoModal", InfoModal = require ? require('./info').InfoModal : value);
(require || prop === 'SuccessModal') && _export("SuccessModal", SuccessModal = require ? require('./success').SuccessModal : value);
};
_export("__beyond_pkg", __beyond_pkg = __pkg);
_export("hmr", hmr = new function () {
this.on = (event, listener) => void 0;
this.off = (event, listener) => void 0;
}());
__pkg.initialise(ims);
}
};
});
//# sourceMappingURL=modals.sjs.js.map