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

EssentialJS UI

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.hmr = exports.__beyond_pkg = exports.SuccessModal = exports.Modal = exports.InfoModal = exports.ErrorModal = exports.ConfirmModal = void 0;
var dependency_0 = require("@beyond-js/kernel/bundle");
var dependency_1 = require("@beyond-js/kernel/styles");
var dependency_2 = require("react");
var dependency_3 = require("iconsax-react");
var dependency_4 = require("@essential-js/ui/buttons");
const {
  Bundle: __Bundle
} = dependency_0;
const __pkg = new __Bundle({
  "module": {
    "vspecifier": "@essential-js/ui@1.0.0/modals"
  },
  "type": "code"
}).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"
}];
let ConfirmModal, ErrorModal, Modal, InfoModal, SuccessModal;

// Module exports
exports.SuccessModal = SuccessModal;
exports.InfoModal = InfoModal;
exports.Modal = Modal;
exports.ErrorModal = ErrorModal;
exports.ConfirmModal = ConfirmModal;
__pkg.exports.process = function ({
  require,
  prop,
  value
}) {
  (require || prop === 'ConfirmModal') && (exports.ConfirmModal = ConfirmModal = require ? require('./confirm').ConfirmModal : value);
  (require || prop === 'ErrorModal') && (exports.ErrorModal = ErrorModal = require ? require('./error').ErrorModal : value);
  (require || prop === 'Modal') && (exports.Modal = Modal = require ? require('./index').Modal : value);
  (require || prop === 'InfoModal') && (exports.InfoModal = InfoModal = require ? require('./info').InfoModal : value);
  (require || prop === 'SuccessModal') && (exports.SuccessModal = SuccessModal = require ? require('./success').SuccessModal : value);
};
const __beyond_pkg = __pkg;
exports.__beyond_pkg = __beyond_pkg;
const hmr = new function () {
  this.on = (event, listener) => void 0;
  this.off = (event, listener) => void 0;
}();
exports.hmr = hmr;
__pkg.initialise(ims);
//# sourceMappingURL=modals.cjs.js.map