pragmate-ui/toast/toast.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 '@beyond-js/kernel/styles';
import * as dependency_2 from 'react';
import * as dependency_3 from '@beyond-js/react-18-widgets/hooks';
import * as dependency_4 from '@beyond-js/events/events';
import * as dependency_5 from 'pragmate-ui/icons';

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

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

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


const ims = new Map();

/*****************************
INTERNAL MODULE: ./definitions
*****************************/

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

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

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

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Toasts = Toasts;
var _react = require("react");
var _hooks = require("@beyond-js/react-18-widgets/hooks");
var _model = require("./model");
var _toast = require("./toast");
/*bundle*/function Toasts({
  position = {
    bottom: '1rem',
    right: '1rem'
  },
  className,
  ...props
}) {
  const [items, setItems] = _react.default.useState([]);
  (0, _hooks.useBinder)([_model.toast], () => setItems(_model.toast.current), 'current.toast.changed');
  const elements = items.map(item => _react.default.createElement(_toast.Toast, {
    key: item.id,
    ...item,
    className: className,
    position: position
  }));
  return _react.default.createElement("div", {
    style: position,
    className: `pui-toast__container ${className}`,
    ...props
  }, elements);
}
}});

/***********************
INTERNAL MODULE: ./model
***********************/

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.toast = void 0;
var _events = require("@beyond-js/events/events");
class Toast extends _events.Events {
  #current;
  get current() {
    return this.#current;
  }
  set current(newValue) {
    this.#current = newValue;
    this.trigger('current.toast.changed');
  }
  constructor() {
    super();
    this.#current = [];
  }
  #generateUniqueId() {
    return crypto.getRandomValues(new Uint8Array(16)).toString();
  }
  #add(type, message, duration) {
    const newToast = {
      id: this.#generateUniqueId(),
      message,
      type,
      duration
    };
    this.#current = [...this.#current, newToast];
    this.trigger('current.toast.changed');
    return newToast.id;
  }
  remove(toastId) {
    this.#current = this.#current.filter(toast => toast.id !== toastId);
    this.trigger('current.toast.changed');
  }
  success(message, duration) {
    return this.#add('success', message, duration);
  }
  error(message, duration) {
    return this.#add('error', message, duration);
  }
  warning(message, duration) {
    return this.#add('warning', message, duration);
  }
  info(message, duration) {
    return this.#add('info', message, duration);
  }
  loading(message, duration) {
    return this.#add('loading', message, duration);
  }
}
/*bundle*/const toast = exports.toast = new Toast();
}});

/***********************
INTERNAL MODULE: ./toast
***********************/

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Toast = Toast;
var _icons = require("pragmate-ui/icons");
var _react = require("react");
var _useToast = require("./use-toast");
const DEFAULT_DURATION = 3000;
/*bundle*/function Toast({
  type,
  message,
  duration,
  id
}) {
  const toastRef = _react.default.useRef(null);
  duration = duration ?? DEFAULT_DURATION;
  (0, _useToast.useToastAnimation)(toastRef, duration, id);
  const icons = {
    error: 'triangle-exclamation',
    success: 'tickCircle',
    info: 'infoCircle',
    loading: 'refreshCircle',
    warning: 'warning'
  };
  return _react.default.createElement("article", {
    ref: toastRef,
    className: `toast ${type}`
  }, _react.default.createElement(_icons.Icon, {
    icon: icons[type],
    className: 'icon'
  }), _react.default.createElement("p", {
    className: 'message'
  }, message));
}
}});

/***************************
INTERNAL MODULE: ./use-toast
***************************/

ims.set('./use-toast', {hash: 3446030186, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useToastAnimation = useToastAnimation;
var _react = require("react");
var _model = require("./model");
const ANIMATION_MARGIN = 300;
function useToastAnimation(ref, duration, id) {
  _react.default.useEffect(() => {
    if (ref.current) {
      ref.current.classList.add('enter');
    }
    return () => {
      if (ref.current) ref.current.classList.remove('enter');
    };
  }, [ref]);
  _react.default.useEffect(() => {
    const enterTimeout = setTimeout(() => {
      if (ref.current) {
        ref.current.classList.remove('enter');
        ref.current.classList.add('exit');
      }
    }, duration);
    const exitTimeout = setTimeout(() => {
      _model.toast.current = _model.toast.current.filter(item => item.id !== id);
    }, duration + ANIMATION_MARGIN);
    return () => {
      clearTimeout(enterTimeout);
      clearTimeout(exitTimeout);
    };
  }, [duration, id, ref]);
}
}});

__pkg.exports.descriptor = [{"im":"./index","from":"Toasts","name":"Toasts"},{"im":"./model","from":"ToastTypes","name":"ToastTypes"},{"im":"./model","from":"IToast","name":"IToast"},{"im":"./model","from":"toast","name":"toast"},{"im":"./toast","from":"Toast","name":"Toast"}];

export let Toasts, ToastTypes, IToast, toast, Toast;

// Module exports
__pkg.exports.process = function({require, prop, value}) {
    (require || prop === 'Toasts') && (Toasts = require ? require('./index').Toasts : value);
    (require || prop === 'ToastTypes') && (ToastTypes = require ? require('./model').ToastTypes : value);
    (require || prop === 'IToast') && (IToast = require ? require('./model').IToast : value);
    (require || prop === 'toast') && (toast = require ? require('./model').toast : value);
    (require || prop === 'Toast') && (Toast = require ? require('./toast').Toast : 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=toast.browser.mjs.map