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.
342 lines (322 loc) • 12 kB
JavaScript
System.register(["@beyond-js/kernel/bundle", "react", "@beyond-js/reactive/model", "pragmate-ui/base", "pragmate-ui/icons", "@beyond-js/kernel/styles"], function (_export, _context2) {
"use strict";
var dependency_0, dependency_1, dependency_2, dependency_3, dependency_4, dependency_5, __Bundle, __pkg, ims, ContextMenuContainer, ContextMenuManager, ContextMenu, ContextItem, __beyond_pkg, hmr;
_export({
ContextMenuContainer: void 0,
ContextMenuManager: void 0,
ContextMenu: void 0,
ContextItem: void 0
});
return {
setters: [function (_beyondJsKernelBundle) {
dependency_0 = _beyondJsKernelBundle;
}, function (_react2) {
dependency_1 = _react2;
}, function (_beyondJsReactiveModel) {
dependency_2 = _beyondJsReactiveModel;
}, function (_pragmateUiBase) {
dependency_3 = _pragmateUiBase;
}, function (_pragmateUiIcons) {
dependency_4 = _pragmateUiIcons;
}, function (_beyondJsKernelStyles) {
dependency_5 = _beyondJsKernelStyles;
}],
execute: function () {
({
Bundle: __Bundle
} = dependency_0);
__pkg = new __Bundle({
"module": {
"vspecifier": "pragmate-ui@1.0.1/context-menu"
},
"type": "code"
}, _context2.meta.url).package();
;
__pkg.dependencies.update([['react', dependency_1], ['@beyond-js/reactive/model', dependency_2], ['pragmate-ui/base', dependency_3], ['pragmate-ui/icons', dependency_4], ['@beyond-js/kernel/styles', dependency_5]]);
brequire('@beyond-js/kernel/styles').styles.register('pragmate-ui@1.0.1/context-menu');
ims = new Map();
/***************************
INTERNAL MODULE: ./container
***************************/
ims.set('./container', {
hash: 648905027,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ContextMenuContainer = ContextMenuContainer;
var _react = require("react");
var _context = require("./context");
/*bundle*/
function ContextMenuContainer({
children
}) {
const [showContextMenu, toggleContextMenu] = _react.default.useState();
const onClick = event => {
event.stopPropagation();
event.preventDefault();
toggleContextMenu({
x: event.clientX,
y: event.clientY
});
};
const closeContextMenu = () => toggleContextMenu(null);
return _react.default.createElement(_context.ContextMenuContext.Provider, {
value: {
closeContextMenu,
opened: !!showContextMenu,
position: showContextMenu
}
}, _react.default.createElement("span", {
className: 'context-menu__container',
onClick: onClick
}, children));
}
}
});
/******************************
INTERNAL MODULE: ./context-menu
******************************/
ims.set('./context-menu', {
hash: 3144112597,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ContextMenuManager = exports.ContextMenu = void 0;
var _model = require("@beyond-js/reactive/model");
class ContextMenu extends _model.ReactiveModel {
_event;
constructor() {
super();
this._event = null;
this.init();
}
get event() {
return this._event;
}
get currentTarget() {
return this._event?.currentTarget || null;
}
get target() {
return this._event?.target || null;
}
init() {
globalThis.oncontextmenu = event => {
this._event = event;
const target = event.target; // Assuming target is always an HTMLElement
const parentContext = target.closest('[data-context]');
if (target.dataset.context || parentContext) {
event.preventDefault();
event.stopPropagation();
const contextEvent = target.dataset.context || parentContext?.dataset.context;
this.triggerEvent('closed');
if (contextEvent) {
this.triggerEvent(`fired.${contextEvent}`);
}
return;
}
if (target.classList.contains('ds-context-menu') || target.closest('.ds-context-menu')) {
this.triggerEvent('closed');
}
};
}
}
exports.ContextMenu = ContextMenu;
/*bundle */
const ContextMenuManager = exports.ContextMenuManager = new ContextMenu();
}
});
/*************************
INTERNAL MODULE: ./context
*************************/
ims.set('./context', {
hash: 197579782,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useContextMenuContext = exports.ContextMenuContext = void 0;
var _react = require("react");
const ContextMenuContext = exports.ContextMenuContext = _react.default.createContext({});
const useContextMenuContext = () => _react.default.useContext(ContextMenuContext);
exports.useContextMenuContext = useContextMenuContext;
}
});
/*****************************
INTERNAL MODULE: ./definitions
*****************************/
ims.set('./definitions', {
hash: 2944976739,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
}
});
/***********************
INTERNAL MODULE: ./index
***********************/
ims.set('./index', {
hash: 1105731779,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ContextMenu = ContextMenu;
var _react = require("react");
var _context = require("./context");
var _useContext = require("./use-context");
/*bundle*/
function ContextMenu({
className,
unmount,
children
}) {
const container = document.createElement('span');
const ref = (0, _react.useRef)(null);
const {
opened,
position
} = (0, _context.useContextMenuContext)();
(0, _useContext.useContextMenu)(container, ref, position, unmount);
if (!opened) {
return null;
}
const styles = {
position: 'absolute',
top: `${position.y}px`,
left: `${position.x}px`
};
const cls = `pui-context-menu ${className || ''}`;
return _react.default.createElement("div", {
style: styles,
ref: ref,
className: cls
}, children);
}
}
});
/**********************
INTERNAL MODULE: ./item
**********************/
ims.set('./item', {
hash: 2629990627,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ContextItem = ContextItem;
var _react = require("react");
var _icons = require("pragmate-ui/icons");
var _context = require("./context");
/*bundle */
function ContextItem({
onClick,
icon,
label
}) {
const {
closeContextMenu
} = (0, _context.useContextMenuContext)();
const onClickEvent = async event => {
event.stopPropagation();
await onClick(event);
closeContextMenu();
};
return _react.default.createElement("li", {
onClick: onClickEvent
}, icon ? _react.default.createElement(_icons.Icon, {
icon: icon
}) : _react.default.createElement("span", null), label);
}
}
});
/*****************************
INTERNAL MODULE: ./use-context
*****************************/
ims.set('./use-context', {
hash: 3365751087,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useContextMenu = useContextMenu;
var _react = require("react");
function useContextMenu(container, ref, position, unmount) {
(0, _react.useEffect)(() => {
const close = () => {
document.removeEventListener('click', close);
unmount(false);
};
const body = document.querySelector('body');
if (!body) return;
document.addEventListener('click', close);
body.appendChild(container);
const refCurrent = ref.current;
if (!refCurrent) return;
const {
offsetWidth,
offsetHeight
} = refCurrent;
const tWidth = offsetWidth + position.x;
const tHeight = offsetHeight + position.y;
if (tWidth > globalThis.innerWidth) {
refCurrent.style.left = `${position.x - offsetWidth}px`;
}
if (tHeight > globalThis.innerHeight) {
refCurrent.style.top = `${position.y - offsetHeight}px`;
}
return () => {
document.removeEventListener('click', close);
container.remove();
};
}, [position.x, position.y, container, ref, unmount]);
}
}
});
__pkg.exports.descriptor = [{
"im": "./container",
"from": "ContextMenuContainer",
"name": "ContextMenuContainer"
}, {
"im": "./context-menu",
"from": "ContextMenuManager",
"name": "ContextMenuManager"
}, {
"im": "./index",
"from": "ContextMenu",
"name": "ContextMenu"
}, {
"im": "./item",
"from": "ContextItem",
"name": "ContextItem"
}];
// Module exports
__pkg.exports.process = function ({
require,
prop,
value
}) {
(require || prop === 'ContextMenuContainer') && _export("ContextMenuContainer", ContextMenuContainer = require ? require('./container').ContextMenuContainer : value);
(require || prop === 'ContextMenuManager') && _export("ContextMenuManager", ContextMenuManager = require ? require('./context-menu').ContextMenuManager : value);
(require || prop === 'ContextMenu') && _export("ContextMenu", ContextMenu = require ? require('./index').ContextMenu : value);
(require || prop === 'ContextItem') && _export("ContextItem", ContextItem = require ? require('./item').ContextItem : 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=context-menu.sjs.js.map