@essential-js/ui
Version:
EssentialJS UI
263 lines (255 loc) • 9.26 kB
JavaScript
System.register(["@beyond-js/kernel/bundle", "@beyond-js/kernel/styles", "react", "@essential-js/ui/hooks", "iconsax-react", "nanoid", "@essential-js/ui/reactive-model"], function (_export, _context) {
"use strict";
var dependency_0, dependency_1, dependency_2, dependency_3, dependency_4, dependency_5, dependency_6, __Bundle, __pkg, ims, Toasts, IToast, toast, Toast, __beyond_pkg, hmr;
_export({
Toasts: void 0,
IToast: void 0,
toast: void 0,
Toast: void 0
});
return {
setters: [function (_beyondJsKernelBundle) {
dependency_0 = _beyondJsKernelBundle;
}, function (_beyondJsKernelStyles) {
dependency_1 = _beyondJsKernelStyles;
}, function (_react2) {
dependency_2 = _react2;
}, function (_essentialJsUiHooks) {
dependency_3 = _essentialJsUiHooks;
}, function (_iconsaxReact2) {
dependency_4 = _iconsaxReact2;
}, function (_nanoid2) {
dependency_5 = _nanoid2;
}, function (_essentialJsUiReactiveModel) {
dependency_6 = _essentialJsUiReactiveModel;
}],
execute: function () {
({
Bundle: __Bundle
} = dependency_0);
__pkg = new __Bundle({
"module": {
"vspecifier": "@essential-js/ui@1.0.0/toast"
},
"type": "code"
}, _context.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');
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"
}];
// Module exports
__pkg.exports.process = function ({
require,
prop,
value
}) {
(require || prop === 'Toasts') && _export("Toasts", Toasts = require ? require('./index').Toasts : value);
(require || prop === 'IToast') && _export("IToast", IToast = require ? require('./model').IToast : value);
(require || prop === 'toast') && _export("toast", toast = require ? require('./model').toast : value);
(require || prop === 'Toast') && _export("Toast", Toast = require ? require('./toast').Toast : value);
};
_export("__beyond_pkg", __beyond_pkg = __pkg);
_export("hmr", hmr = new function () {
this.on = (event, listener) => void 0;
this.off = (event, listener) => void 0;
}());
__pkg.initialise(ims);
}
};
});
//# sourceMappingURL=toast.sjs.js.map