pragmate-ui/modal/modal.amd.js

An advanced, on-demand React UI library optimized for BeyondJS. Pragmate UI provides modular, responsive, and accessible components with a focus on efficient bundle sizes and a streamlined development process.

define(["exports", "module", "@beyond-js/kernel/bundle", "react", "pragmate-ui/components", "pragmate-ui/icons", "pragmate-ui/base", "@beyond-js/kernel/styles"], function (_exports, _amd_module, dependency_0, dependency_1, dependency_2, dependency_3, dependency_4, dependency_5) {
  "use strict";

  Object.defineProperty(_exports, "__esModule", {
    value: true
  });
  _exports.hmr = _exports.__beyond_pkg = _exports.Modal = _exports.IModalProps = _exports.ConfirmModal = _exports.AlertModal = void 0;
  const {
    Bundle: __Bundle
  } = dependency_0;
  const __pkg = new __Bundle({
    "module": {
      "vspecifier": "pragmate-ui@1.0.1/modal"
    },
    "type": "code"
  }, _amd_module.uri).package();
  ;
  __pkg.dependencies.update([['react', dependency_1], ['pragmate-ui/components', dependency_2], ['pragmate-ui/icons', dependency_3], ['pragmate-ui/base', dependency_4], ['@beyond-js/kernel/styles', dependency_5]]);
  brequire('@beyond-js/kernel/styles').styles.register('pragmate-ui@1.0.1/modal');
  const ims = new Map();

  /***********************
  INTERNAL MODULE: ./alert
  ***********************/

  ims.set('./alert', {
    hash: 853535473,
    creator: function (require, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.AlertModal = AlertModal;
      var React = require("react");
      var _modal = require("./modal");
      var _components = require("pragmate-ui/components");
      /*bundle*/
      function AlertModal(props) {
        const [state, setState] = React.useState({
          fetching: false
        });
        const {
          text,
          title,
          centered,
          button = {}
        } = props;
        const close = async () => {
          setState({
            fetching: true
          });
          if (props.onConfirm) await props.onConfirm();
          setState({
            fetching: false
          });
          if (props.onClose) props.onClose();
        };
        const btnAttrs = {
          className: `btn btn-primary${props.className ? ` ${props.className}` : ''}`,
          disabled: state.fetching,
          label: props.buttonLabel || 'Confirm',
          onClick: close,
          ...button
        };
        let cls = `pui-alert-dialog${centered ? ' pui-alert-dialog-centered' : ''}`;
        if (props.className) cls += ` ${props.className}`;
        return React.createElement(_modal.Modal, {
          show: true,
          className: cls,
          onClose: props.onClose
        }, React.createElement("div", {
          className: 'alert-dialog-content'
        }, title && React.createElement(_components.HtmlWrapper, null, title), text && React.createElement(_components.HtmlWrapper, null, text), props.children ? props.children : null), React.createElement("div", {
          className: 'pui-modal-actions'
        }, React.createElement(_components.Button, {
          ...btnAttrs
        })));
      }
    }
  });

  /**************************
  INTERNAL MODULE: ./children
  **************************/

  ims.set('./children', {
    hash: 1764852864,
    creator: function (require, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.useModalContext = exports.ModalContext = exports.Children = void 0;
      var _react = require("react");
      var React = _react;
      var _icons = require("pragmate-ui/icons");
      const ModalContext = exports.ModalContext = (0, _react.createContext)({});
      const useModalContext = () => (0, _react.useContext)(ModalContext);
      exports.useModalContext = useModalContext;
      const Children = ({
        children,
        close,
        dismiss
      }) => {
        const output = [];
        if (dismiss !== false) {
          output.push(React.createElement(_icons.IconButton, {
            className: 'close-icon',
            onClick: close,
            "data-dismiss": 'modal',
            "aria-label": 'Close',
            key: 'dismiss-button',
            icon: 'close'
          }));
        }
        const childrenWithProps = React.Children.map(children, child => {
          // checking isValidElement is the safe way and avoids a typescript error too
          if ((0, _react.isValidElement)(child)) {
            const specs = {};
            //TODO: check a official way to check the children type
            return (0, _react.cloneElement)(child, specs);
          }
          return child;
        });
        output.push(childrenWithProps);
        return React.createElement(ModalContext.Provider, {
          value: {
            close,
            dismiss
          }
        }, output);
      };
      exports.Children = Children;
    }
  });

  /*******************************
  INTERNAL MODULE: ./confirm/index
  *******************************/

  ims.set('./confirm/index', {
    hash: 1766706381,
    creator: function (require, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.ConfirmModal = void 0;
      var React = require("react");
      var _components = require("pragmate-ui/components");
      var _modal = require("../modal");
      var _useActionProperties = require("./use-action-properties");
      /*bundle*/
      const ConfirmModal = properties => {
        const [state, setState] = React.useState({
          fetching: false
        });
        const {
          text,
          title,
          onCancel,
          centered,
          onClose,
          show
        } = properties;
        let cls = `pui-confirm-dialog${centered ? ' pui-confirm-dialog-centered' : ''}`;
        if (properties.className) cls += ` ${properties.className}`;
        const props = Object.assign({}, properties);
        ['text', 'title', 'className', 'centering', 'btnCancel', 'btnConfirm', 'onCancel'].forEach(prop => delete props[prop]);
        const [confirmProps, cancelProps] = (0, _useActionProperties.useActionProperties)(properties, setState);
        const disabled = {};
        if (state.fetching) disabled.disabled = true;
        const handleClose = onClose ?? onCancel;
        return React.createElement(_modal.Modal, {
          show: show,
          className: cls,
          onClose: handleClose
        }, React.createElement("div", {
          className: 'pui-confirm-dialog-content'
        }, title && React.createElement("h3", null, title), text && React.createElement("div", {
          className: 'pui-confirm-dialog-content__text'
        }, text), properties.children), React.createElement("div", {
          className: 'pui-actions'
        }, React.createElement(_components.Button, {
          ...cancelProps,
          ...disabled
        }), React.createElement(_components.Button, {
          ...disabled,
          ...confirmProps
        })));
      };
      exports.ConfirmModal = ConfirmModal;
    }
  });

  /***********************************************
  INTERNAL MODULE: ./confirm/use-action-properties
  ***********************************************/

  ims.set('./confirm/use-action-properties', {
    hash: 1933355049,
    creator: function (require, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.useActionProperties = useActionProperties;
      /**
       * useActionProperties function
       *
       * This function is designed to process and return action properties for the Button component
       * in the Pragmate UI library. It supports the current API structure of the Button component
       * while maintaining backward compatibility with an older configuration format.
       *
       * The function takes a `properties` object as an argument. If this object contains an `actions` property,
       * it directly returns the `confirm` and `cancel` actions defined within. This is aligned with the current API design.
       *
       * For backward compatibility, the function also handles the scenario where the `actions` property is not present.
       * In this case, it extracts and processes individual properties like `onCancel`, `onConfirm`, `btnConfirm`, and `btnCancel`
       * from the `properties` object. These are then used to construct and return `confirm` and `cancel` action objects
       * with appropriate labels, class names, variants, and onClick handlers.
       *
       * @param {object} properties - The properties object containing either a direct `actions` property
       *                              or individual properties for backward compatibility.
       * @returns An array containing two action objects: confirm and cancel.
       */
      function useActionProperties(properties, setState) {
        const onProcessConfirm = callback => {
          return async event => {
            event.stopPropagation();
            setState({
              fetching: true
            });
            await callback(event);
            setState({
              fetching: false
            });
          };
        };
        if (properties.actions) {
          const confirmProps = {
            ...properties.actions.confirm
          };
          const cancelProps = {
            ...properties.actions.cancel
          };
          if (!confirmProps.onClick && !properties.onConfirm) {
            throw new Error('ConfirmModal: No confirm function defined');
          }
          if (!cancelProps.onClick && !properties.onCancel) {
            throw new Error('ConfirmModal: No cancel function defined');
          }
          confirmProps.onClick = onProcessConfirm(confirmProps.onClick ?? properties.onConfirm);
          cancelProps.onClick = cancelProps.onClick ?? properties.onCancel;
          return [confirmProps, cancelProps];
        }
        const {
          onCancel,
          onConfirm,
          btnConfirm,
          btnCancel
        } = properties;
        const defaultConfirm = {
          label: 'Confirm',
          variant: 'primary',
          onClick: onProcessConfirm(onConfirm)
        };
        const defaultCancel = {
          label: 'Cancel',
          variant: 'primary',
          onClick: onCancel,
          bordered: true
        };
        const actions = {
          confirm: typeof btnConfirm === 'object' ? {
            ...defaultConfirm,
            ...btnConfirm
          } : defaultConfirm,
          cancel: typeof btnCancel === 'object' ? {
            ...defaultCancel,
            ...btnCancel
          } : defaultCancel
        };
        return [actions.confirm, actions.cancel];
      }
    }
  });

  /***********************
  INTERNAL MODULE: ./modal
  ***********************/

  ims.set('./modal', {
    hash: 346464964,
    creator: function (require, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.Modal = Modal;
      var _react = require("react");
      var React = _react;
      var _children = require("./children");
      /*bundle*/
      function Modal(props) {
        const [state, setState] = (0, _react.useState)({
          show: props?.show ?? false,
          closeClicked: (props.closeClicked || props.closeBackdrop) ?? true,
          container: null
        });
        const modal = (0, _react.useRef)(null);
        React.useEffect(() => {
          setState({
            ...state,
            show: props.show
          });
        }, [props.show]);
        const close = async event => {
          if (event) event.stopPropagation();
          const body = document.querySelector('body');
          modal.current.classList.add('modal-hidden');
          globalThis.setTimeout(async () => {
            setState({
              ...state,
              show: false,
              closeClicked: true
            });
            body.setAttribute('style', '');
            body.classList.remove('body-custom-modal-opened');
            const {
              onClose
            } = props;
            if (!onClose || typeof onClose !== 'function') return;
            onClose(event);
          }, 200);
        };
        const onClickBackdrop = event => {
          event.stopPropagation();
          if (!state.closeClicked) return;
          close(event);
        };
        const show = state.show;
        let cls = 'pui-modal ';
        cls += props.className ? props.className : '';
        if (show) cls += ' show-modal';
        const output = [];
        if (show) {
          output.push(React.createElement("div", {
            key: 'modal-content-wrapper',
            className: 'modal-wrapper'
          }, React.createElement("div", {
            className: 'modal-content',
            onClick: event => {
              event.stopPropagation();
            }
          }, React.createElement(_children.Children, {
            ...props,
            close: close,
            key: 'children-content'
          }, props.children))));
        }
        return React.createElement("div", {
          ref: modal,
          onClick: onClickBackdrop,
          className: cls
        }, output);
      }
    }
  });

  /*****************************
  INTERNAL MODULE: ./types/alert
  *****************************/

  ims.set('./types/alert', {
    hash: 3453279328,
    creator: function (require, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
    }
  });

  /*******************************
  INTERNAL MODULE: ./types/confirm
  *******************************/

  ims.set('./types/confirm', {
    hash: 3090985645,
    creator: function (require, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
    }
  });

  /***********************************
  INTERNAL MODULE: ./types/modal-props
  ***********************************/

  ims.set('./types/modal-props', {
    hash: 1658030921,
    creator: function (require, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
    }
  });
  __pkg.exports.descriptor = [{
    "im": "./alert",
    "from": "AlertModal",
    "name": "AlertModal"
  }, {
    "im": "./confirm/index",
    "from": "ConfirmModal",
    "name": "ConfirmModal"
  }, {
    "im": "./modal",
    "from": "Modal",
    "name": "Modal"
  }, {
    "im": "./types/modal-props",
    "from": "IModalProps",
    "name": "IModalProps"
  }];
  let AlertModal = _exports.AlertModal = void 0,
    ConfirmModal = _exports.ConfirmModal = void 0,
    Modal = _exports.Modal = void 0,
    IModalProps = _exports.IModalProps = void 0;

  // Module exports
  __pkg.exports.process = function ({
    require,
    prop,
    value
  }) {
    (require || prop === 'AlertModal') && (_exports.AlertModal = AlertModal = require ? require('./alert').AlertModal : value);
    (require || prop === 'ConfirmModal') && (_exports.ConfirmModal = ConfirmModal = require ? require('./confirm/index').ConfirmModal : value);
    (require || prop === 'Modal') && (_exports.Modal = Modal = require ? require('./modal').Modal : value);
    (require || prop === 'IModalProps') && (_exports.IModalProps = IModalProps = require ? require('./types/modal-props').IModalProps : value);
  };
  const __beyond_pkg = _exports.__beyond_pkg = __pkg;
  const hmr = _exports.hmr = new function () {
    this.on = (event, listener) => void 0;
    this.off = (event, listener) => void 0;
  }();
  __pkg.initialise(ims);
});
//# sourceMappingURL=modal.amd.js.map