@grandlinex/react-components
Version:
112 lines (111 loc) • 5.36 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 });
const react_1 = __importStar(require("react"));
const util_1 = require("../../../util");
const TabBarElement_1 = require("./TabBarElement");
const TabBar = function (prop) {
const { c } = prop;
const { tabsLeft, tabsRight, currentTabLeft, currentTabRight, addTab, closeTab, error, moveTab, setCurrentTab, contextMenu, } = c;
const refLeft = (0, react_1.createRef)();
const refRight = (0, react_1.createRef)();
const [dLeft, setDLeft] = (0, react_1.useState)(false);
const [dRight, setDRight] = (0, react_1.useState)(false);
const fc = (event) => {
const cur = refLeft.current;
if (!cur) {
return;
}
if (event.deltaY > 0) {
cur.scrollTo({ left: cur.scrollLeft + 50 });
}
else {
cur.scrollTo({ left: cur.scrollLeft - 50 });
}
};
const fca = (event) => {
const cur = refRight.current;
if (!cur) {
return;
}
if (event.deltaY > 0) {
cur.scrollTo({ left: cur.scrollLeft + 50 });
}
else {
cur.scrollTo({ left: cur.scrollLeft - 50 });
}
};
(0, react_1.useEffect)(() => {
const rl = refLeft.current;
const rr = refRight.current;
rl?.addEventListener('wheel', fc);
rr?.addEventListener('wheel', fca);
return () => {
rl?.removeEventListener('wheel', fc);
rr?.removeEventListener('wheel', fca);
};
});
const onDrop = async (e, target, position) => {
e.preventDefault();
e.stopPropagation();
const id = e.dataTransfer.getData('id');
const type = e.dataTransfer.getData('type');
moveTab(id, type, target, position);
};
return (react_1.default.createElement("div", { className: (0, util_1.cnx)('tab-bar', [tabsRight.length === 0, 'tab-bar--single']) },
react_1.default.createElement("div", { className: (0, util_1.cnx)('glx-tab-bar-l'), ref: refLeft, onDragOver: (e) => {
e.preventDefault();
setDLeft(true);
}, onDragLeave: (e) => {
e.preventDefault();
setDLeft(false);
}, onMouseLeave: () => {
setDLeft(false);
}, onMouseEnter: () => {
setDRight(false);
}, onDrop: async (e) => onDrop(e, 'left') },
tabsLeft.map((item, index) => (react_1.default.createElement(TabBarElement_1.TabBarElement, { key: `${item.key}_tab_left`, index: index, item: item, current: currentTabLeft, drag: dLeft, tabs: tabsLeft, closeTab: closeTab, onDrop: (e, position) => onDrop(e, 'left', position), context: "left", addTab: addTab, setCurrentTab: setCurrentTab, error: error, moveTab: moveTab, contextMenu: contextMenu }))),
tabsLeft.length === 0 ? (react_1.default.createElement("div", { className: (0, util_1.cnx)('glx-electron-no-drag', 'glx-no-select', [
dLeft,
'glx-drop-nonce--active',
]) }, "|")) : null),
react_1.default.createElement("div", { className: "glx-tab-bar-r", ref: refRight, onDragOver: (e) => {
e.preventDefault();
setDRight(true);
}, onDragLeave: (e) => {
e.preventDefault();
setDRight(false);
}, onMouseLeave: () => {
setDRight(false);
}, onMouseEnter: () => {
setDLeft(false);
}, onDrop: async (e) => onDrop(e, 'right') },
tabsRight.map((item, index) => (react_1.default.createElement(TabBarElement_1.TabBarElement, { key: `${item.key}_tab_right`, index: index, item: item, current: currentTabRight, drag: dRight, tabs: tabsRight, closeTab: closeTab, onDrop: (e, position) => onDrop(e, 'left', position), context: "right", addTab: addTab, setCurrentTab: setCurrentTab, error: error, moveTab: moveTab, contextMenu: contextMenu }))),
tabsRight.length === 0 ? (react_1.default.createElement("div", { className: (0, util_1.cnx)('glx-electron-no-drag', 'glx-no-select', [
dRight,
'glx-drop-nonce--active',
]) }, "|")) : null)));
};
exports.default = TabBar;