@essential-js/ui/toast/toast.mjs

EssentialJS UI

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 '@essential-js/ui/hooks';
import * as dependency_4 from 'iconsax-react';
import * as dependency_5 from 'nanoid';
import * as dependency_6 from '@essential-js/ui/reactive-model';

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

__pkg.dependencies.update([['@beyond-js/kernel/styles', dependency_1],['react', dependency_2],['@essential-js/ui/hooks', dependency_3],['iconsax-react', dependency_4],['nanoid', dependency_5],['@essential-js/ui/reactive-model', dependency_6]]);

brequire('@beyond-js/kernel/styles').styles.register('@essential-js/ui@1.0.0/toast')


const ims = new Map();

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

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Toasts = Toasts;
var _react = require("react");
var _hooks = require("@essential-js/ui/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-toasts-changed');
  const elements = items.map(item => _react.default.createElement(_toast.Toast, {
    key: item.id,
    ...item
  }));
  return _react.default.createElement("div", {
    style: position,
    className: `essential__toasts ${className}`,
    ...props
  }, elements);
}
}});

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

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.toast = void 0;
var _iconsaxReact = require("iconsax-react");
var _nanoid = require("nanoid");
var _reactiveModel = require("@essential-js/ui/reactive-model");
class Toast extends _reactiveModel.ReactiveModel {
  #current;
  #icons = {
    error: _iconsaxReact.CloseCircle,
    success: _iconsaxReact.TickCircle,
    info: _iconsaxReact.InfoCircle,
    loading: _iconsaxReact.RefreshCircle,
    warning: _iconsaxReact.Warning2
  };
  #defaultTypes = ['warning', 'info', 'success', 'error', 'loading'];
  get current() {
    return this.#current;
  }
  set current(newValue) {
    this.#current = newValue;
    this.triggerEvent('current-toasts-changed');
  }
  constructor() {
    super();
    this.#defaultTypes.map(type => {
      this.set(type);
    });
    this.#current = [];
  }
  info(message, duration) {
    return this.#add('info', message, duration);
  }
  warning(message, duration) {
    return this.#add('warning', message, duration);
  }
  success(message, duration) {
    return this.#add('success', message, duration);
  }
  error(message, duration) {
    return this.#add('error', message, duration);
  }
  loading(message, duration) {
    return this.#add('loading', message, duration);
  }
  #add(type, message, duration) {
    const newToast = {
      id: (0, _nanoid.nanoid)(),
      message,
      type,
      duration,
      icon: this.#icons[type]
    };
    this.#current = [...this.#current, newToast];
    this.triggerEvent('current-toasts-changed');
    return newToast.id;
  }
  remove(toastId) {
    this.#current = this.#current.filter(toast => toast.id !== toastId);
    this.triggerEvent('current-toasts-changed');
  }
  set(type) {
    this[type] = (message, duration) => this.#add(type, message, duration);
  }
  setIcon(iconName, icon) {
    this.#icons[iconName] = icon;
  }
}
/*bundle*/const toast = new Toast();
exports.toast = toast;
}});

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

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Toast = Toast;
var _react = require("react");
var _model = require("./model");
const DEFAULT_DURATION = 3000;
const ANIMATION_MARGIN = 300;
/*bundle*/function Toast({
  type,
  message,
  duration,
  id,
  icon
}) {
  const toastRef = _react.default.useRef(null);
  const Icon = icon;
  _react.default.useEffect(() => {
    if (toastRef.current) {
      toastRef.current.classList.add('enter');
    }
    return () => {
      if (toastRef.current) toastRef.current.classList.remove('enter');
    };
  }, [toastRef.current]);
  _react.default.useEffect(() => {
    duration = duration ?? DEFAULT_DURATION;
    setTimeout(() => {
      toastRef.current.classList.remove('enter');
      toastRef.current.classList.add('exit');
    }, duration);
    const timeout = setTimeout(() => {
      _model.toast.current = _model.toast.current.filter(item => item.id !== id);
    }, duration + ANIMATION_MARGIN);
    return () => clearTimeout(timeout);
  }, [duration, id]);
  return _react.default.createElement("article", {
    ref: toastRef,
    className: `toast ${type}`
  }, icon && _react.default.createElement(Icon, {
    style: {
      width: '25px',
      height: '25px'
    },
    className: "icon"
  }), _react.default.createElement("p", {
    className: "message"
  }, message));
}
}});

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

export let Toasts, IToast, toast, Toast;

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