pragmate-ui/alert/alert.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/icons';
import * as dependency_3 from 'pragmate-ui/base';
import * as dependency_4 from '@beyond-js/kernel/styles';

const {Bundle: __Bundle} = dependency_0;
const __pkg = new __Bundle({"module":{"vspecifier":"pragmate-ui@1.0.1/alert"},"type":"code","name":"alert"}, import.meta.url).package();;

__pkg.dependencies.update([['react', dependency_1],['pragmate-ui/icons', dependency_2],['pragmate-ui/base', dependency_3],['@beyond-js/kernel/styles', dependency_4]]);

brequire('@beyond-js/kernel/styles').styles.register('pragmate-ui@1.0.1/alert')


const ims = new Map();

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

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Alert = Alert;
var _react = require("react");
var _icons = require("pragmate-ui/icons");
var _content = require("./content");
/*bundle*/function Alert({
  message,
  className,
  type,
  title,
  children,
  closable,
  onClose,
  icon
}) {
  const [show, setShow] = _react.default.useState(true);
  if (!show || !message && !children) return null;
  const onClick = async event => {
    event.stopPropagation();
    if (onClose) await onClose();
    setShow(false);
  };
  let cls = `${className ? `${className} ` : ''} alert${type ? ` alert--${type}` : ''}`;
  cls = icon ? `${cls} alert--icon` : cls;
  const icons = {
    error: 'error',
    warning: 'circle-exclamation',
    success: 'circle-check',
    info: 'info'
  };
  const defaultIcon = icons[type ?? 'success'];
  const hasIcon = !!icon;
  const attributes = {
    className: cls
  };
  if (closable) attributes.onClick = onClick;
  return _react.default.createElement("div", {
    ...attributes
  }, icon && _react.default.createElement("section", null, _react.default.createElement(_icons.Icon, {
    icon: defaultIcon
  })), _react.default.createElement(_content.Content, {
    message: message,
    title: title,
    icon: hasIcon
  }, children), closable && _react.default.createElement(_icons.IconButton, {
    icon: 'close',
    onClick: onClick
  }));
}
}});

/*************************
INTERNAL MODULE: ./content
*************************/

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Content = Content;
var _react = require("react");
function Content({
  message,
  children,
  title,
  icon
}) {
  let output = [];
  if (title) {
    output.push(_react.default.createElement("header", {
      key: "title",
      className: "alert__title"
    }, _react.default.createElement("h3", {
      className: "alert__title-span",
      dangerouslySetInnerHTML: {
        __html: title
      }
    })));
  }
  if (message) {
    output.push(_react.default.createElement("span", {
      key: "message",
      dangerouslySetInnerHTML: {
        __html: message
      }
    }));
  }
  const Control = icon ? 'section' : _react.default.Fragment;
  return _react.default.createElement(Control, null, output, children);
}
}});

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

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ITypes = exports.IAlertTypes = void 0;
/*bundle*/var ITypes;
(function (ITypes) {
  ITypes["Error"] = "error";
  ITypes["Warning"] = "warning";
  ITypes["Success"] = "success";
  ITypes["Info"] = "info";
})(ITypes || (exports.ITypes = ITypes = {}));
/*bundle*/const IAlertTypes = exports.IAlertTypes = ITypes;
}});

__pkg.exports.descriptor = [{"im":"./alert","from":"Alert","name":"Alert"},{"im":"./types","from":"ITypes","name":"ITypes"},{"im":"./types","from":"IAlertTypes","name":"IAlertTypes"}];

export let Alert, ITypes, IAlertTypes;

// Module exports
__pkg.exports.process = function({require, prop, value}) {
    (require || prop === 'Alert') && (Alert = require ? require('./alert').Alert : value);
    (require || prop === 'ITypes') && (ITypes = require ? require('./types').ITypes : value);
    (require || prop === 'IAlertTypes') && (IAlertTypes = require ? require('./types').IAlertTypes : 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=alert.browser.mjs.map