pragmate-ui/modal/modal.browser.mjs

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.

import * as dependency_0 from '@beyond-js/kernel/bundle';
import * as dependency_1 from 'react';
import * as dependency_2 from 'pragmate-ui/components';
import * as dependency_3 from 'pragmate-ui/icons';
import * as dependency_4 from 'pragmate-ui/base';
import * as dependency_5 from '@beyond-js/kernel/styles';

const {Bundle: __Bundle} = dependency_0;
const __pkg = new __Bundle({"module":{"vspecifier":"pragmate-ui@1.0.1/modal"},"type":"code"}, import.meta.url).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"}];

export let AlertModal, ConfirmModal, Modal, IModalProps;

// Module exports
__pkg.exports.process = function({require, prop, value}) {
    (require || prop === 'AlertModal') && (AlertModal = require ? require('./alert').AlertModal : value);
    (require || prop === 'ConfirmModal') && (ConfirmModal = require ? require('./confirm/index').ConfirmModal : value);
    (require || prop === 'Modal') && (Modal = require ? require('./modal').Modal : value);
    (require || prop === 'IModalProps') && (IModalProps = require ? require('./types/modal-props').IModalProps : 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=modal.browser.mjs.map