@grandlinex/react-components
Version:
123 lines (122 loc) • 5.64 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TabBarElement = TabBarElement;
const react_icons_1 = require("@grandlinex/react-icons");
const react_1 = __importStar(require("react"));
const react_dom_1 = require("react-dom");
const util_1 = require("../../../util");
const components_1 = require("../../../components");
function TabBarElement({ item, index, context, setCurrentTab, closeTab, onDrop, current, tabs, drag, moveTab, contextMenu, }) {
const ui = (0, util_1.useUIContext)();
const oContext = (0, react_1.useMemo)(() => (context === 'left' ? 'right' : 'left'), [context]);
const menu = (0, react_1.useMemo)(() => {
const move = context === 'left'
? {
order: 10,
key: 'move-right',
translation: 'glx.context.menu.move.to.right',
icon: 'IOArrowForward',
onClick() {
moveTab(item.key, context, oContext);
},
}
: {
order: 10,
key: 'move-left',
translation: 'glx.context.menu.move.to.left',
icon: 'IOArrowBack',
onClick() {
moveTab(item.key, context, oContext);
},
};
const combined = [
move,
{
order: 20,
key: 'close',
translation: 'glx.context.menu.close',
icon: 'IOClose',
onClick() {
closeTab(item.key, context);
},
},
...(contextMenu ?? []),
];
return combined.sort((a, b) => a.order - b.order);
}, [closeTab, context, contextMenu, item.key, moveTab, oContext]);
const [contextPos, setContextPos] = (0, react_1.useState)(null);
(0, react_1.useEffect)(() => {
const fc = () => {
if (contextPos) {
setContextPos(null);
document.removeEventListener('click', fc);
}
};
if (contextPos) {
document.addEventListener('click', fc);
return () => {
document.removeEventListener('click', fc);
};
}
return () => { };
}, [contextPos]);
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(components_1.Tooltip, { key: item.key, text: item.titel, position: "right" },
react_1.default.createElement("div", { key: item.key, draggable: true, onDragStart: (e) => {
e.dataTransfer.setData('id', item.key);
e.dataTransfer.setData('type', context);
}, onClick: () => {
setCurrentTab(index, context);
}, onDrop: async (e) => onDrop(e, index), className: (0, util_1.cnx)('tab-bar--item', [index === current, ' tab-bar--item-selected'], [
drag && index === tabs.length - 1,
'glx-drop-nonce--active-border',
]), onContextMenu: (e) => {
e.preventDefault();
setContextPos({
top: e.clientY,
left: e.clientX,
});
} },
react_1.default.createElement("span", { className: "tab-bar--button", role: "button" },
item.icon ? (0, react_icons_1.getIcon)(item.icon)({}) : null,
(0, util_1.trimmer)(item.titel)),
react_1.default.createElement("button", { type: "button", className: "tab-bar--button-close", onClick: (e) => {
e.stopPropagation();
closeTab(item.key, context);
} },
react_1.default.createElement(react_icons_1.IOClose, { size: react_icons_1.ISize.SL })))),
contextPos
? (0, react_dom_1.createPortal)(react_1.default.createElement(components_1.Grid, { flex: true, flexC: true, className: "glx-context-menu", style: {
top: contextPos.top,
left: contextPos.left,
} }, menu.map((m) => (react_1.default.createElement(components_1.Grid, { flex: true, flexRow: true, gap: 8, onClick: (e) => {
m.onClick(e, item, context);
} },
m.icon && (0, react_icons_1.getIcon)(m.icon)({}),
m.translation && ui.translation.get(m.translation),
m.text)))), ui.portalRoot)
: null));
}