@essential-js/ui/modals/modals.mjs

EssentialJS UI

import * as dependency_0 from '@beyond-js/kernel/bundle';
import * as dependency_1 from '@beyond-js/kernel/styles';
import * as dependency_2 from 'react';
import * as dependency_3 from 'iconsax-react';
import * as dependency_4 from '@essential-js/ui/buttons';

const {Bundle: __Bundle} = dependency_0;
const __pkg = new __Bundle({"module":{"vspecifier":"@essential-js/ui@1.0.0/modals"},"type":"code"}, import.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')


const 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"}];

export let ConfirmModal, ErrorModal, Modal, InfoModal, SuccessModal;

// Module exports
__pkg.exports.process = function({require, prop, value}) {
    (require || prop === 'ConfirmModal') && (ConfirmModal = require ? require('./confirm').ConfirmModal : value);
    (require || prop === 'ErrorModal') && (ErrorModal = require ? require('./error').ErrorModal : value);
    (require || prop === 'Modal') && (Modal = require ? require('./index').Modal : value);
    (require || prop === 'InfoModal') && (InfoModal = require ? require('./info').InfoModal : value);
    (require || prop === 'SuccessModal') && (SuccessModal = require ? require('./success').SuccessModal : value);

};
export const __beyond_pkg = __pkg;

export const hmr = new (function () {
    this.on = (event, listener) => void 0;
    this.off = (event, listener) => void 0;
});


__pkg.initialise(ims);
//# sourceMappingURL=modals.mjs.map