pragmate-ui
Version:
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.
282 lines (265 loc) • 8.74 kB
JavaScript
define(["exports", "module", "@beyond-js/kernel/bundle", "@beyond-js/kernel/styles", "react", "@beyond-js/react-18-widgets/hooks", "@beyond-js/events/events", "pragmate-ui/icons"], function (_exports, _amd_module, dependency_0, dependency_1, dependency_2, dependency_3, dependency_4, dependency_5) {
"use strict";
Object.defineProperty(_exports, "__esModule", {
value: true
});
_exports.toast = _exports.hmr = _exports.__beyond_pkg = _exports.Toasts = _exports.ToastTypes = _exports.Toast = _exports.IToast = void 0;
const {
Bundle: __Bundle
} = dependency_0;
const __pkg = new __Bundle({
"module": {
"vspecifier": "pragmate-ui@1.0.1/toast"
},
"type": "code"
}, _amd_module.uri).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"
}];
let Toasts = _exports.Toasts = void 0,
ToastTypes = _exports.ToastTypes = void 0,
IToast = _exports.IToast = void 0,
toast = _exports.toast = void 0,
Toast = _exports.Toast = void 0;
// Module exports
__pkg.exports.process = function ({
require,
prop,
value
}) {
(require || prop === 'Toasts') && (_exports.Toasts = Toasts = require ? require('./index').Toasts : value);
(require || prop === 'ToastTypes') && (_exports.ToastTypes = ToastTypes = require ? require('./model').ToastTypes : value);
(require || prop === 'IToast') && (_exports.IToast = IToast = require ? require('./model').IToast : value);
(require || prop === 'toast') && (_exports.toast = toast = require ? require('./model').toast : value);
(require || prop === 'Toast') && (_exports.Toast = Toast = require ? require('./toast').Toast : value);
};
const __beyond_pkg = _exports.__beyond_pkg = __pkg;
const hmr = _exports.hmr = new function () {
this.on = (event, listener) => void 0;
this.off = (event, listener) => void 0;
}();
__pkg.initialise(ims);
});
//# sourceMappingURL=toast.amd.js.map