flexlayout-react
Version:
A multi-tab docking layout manager
144 lines • 8.23 kB
JavaScript
import * as React from "react";
import { DockLocation } from "../DockLocation";
import { BorderButton } from "./BorderButton";
import { showPopup } from "./PopupMenu";
import { Actions } from "../model/Actions";
import { I18nLabel } from "../I18nLabel";
import { useTabOverflow } from "./TabOverflowHook";
import { Orientation } from "../Orientation";
import { CLASSES } from "../Types";
import { isAuxMouseEvent } from "./Utils";
/** @internal */
export const BorderTabSet = (props) => {
const { border, layout, size } = props;
const toolbarRef = React.useRef(null);
const miniScrollRef = React.useRef(null);
const overflowbuttonRef = React.useRef(null);
const stickyButtonsRef = React.useRef(null);
const tabStripInnerRef = React.useRef(null);
const icons = layout.getIcons();
React.useLayoutEffect(() => {
border.setTabHeaderRect(layout.getBoundingClientRect(selfRef.current));
});
const { selfRef, userControlledPositionRef, onScroll, onScrollPointerDown, hiddenTabs, onMouseWheel, isDockStickyButtons, isShowHiddenTabs } = useTabOverflow(layout, border, Orientation.flip(border.getOrientation()), tabStripInnerRef, miniScrollRef, layout.getClassName(CLASSES.FLEXLAYOUT__BORDER_BUTTON));
const onAuxMouseClick = (event) => {
if (isAuxMouseEvent(event)) {
layout.auxMouseClick(border, event);
}
};
const onContextMenu = (event) => {
layout.showContextMenu(border, event);
};
const onInterceptPointerDown = (event) => {
event.stopPropagation();
};
const onOverflowClick = (event) => {
const callback = layout.getShowOverflowMenu();
const items = hiddenTabs.map(h => { return { index: h, node: border.getChildren()[h] }; });
if (callback !== undefined) {
callback(border, event, items, onOverflowItemSelect);
}
else {
const element = overflowbuttonRef.current;
showPopup(element, border, items, onOverflowItemSelect, layout);
}
event.stopPropagation();
};
const onOverflowItemSelect = (item) => {
layout.doAction(Actions.selectTab(item.node.getId()));
userControlledPositionRef.current = false;
};
const onPopoutTab = (event) => {
const selectedTabNode = border.getChildren()[border.getSelected()];
if (selectedTabNode !== undefined) {
layout.doAction(Actions.popoutTab(selectedTabNode.getId()));
}
event.stopPropagation();
};
const cm = layout.getClassName;
const tabButtons = [];
const layoutTab = (i) => {
let isSelected = border.getSelected() === i;
let child = border.getChildren()[i];
tabButtons.push(React.createElement(BorderButton, { layout: layout, border: border.getLocation().getName(), node: child, path: border.getPath() + "/tb" + i, key: child.getId(), selected: isSelected, icons: icons }));
if (i < border.getChildren().length - 1) {
tabButtons.push(React.createElement("div", { key: "divider" + i, className: cm(CLASSES.FLEXLAYOUT__BORDER_TAB_DIVIDER) }));
}
};
for (let i = 0; i < border.getChildren().length; i++) {
layoutTab(i);
}
let borderClasses = cm(CLASSES.FLEXLAYOUT__BORDER) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_ + border.getLocation().getName());
if (border.getClassName() !== undefined) {
borderClasses += " " + border.getClassName();
}
// allow customization of tabset right/bottom buttons
let buttons = [];
let stickyButtons = [];
const renderState = { buttons, stickyButtons: stickyButtons, overflowPosition: undefined };
layout.customizeTabSet(border, renderState);
buttons = renderState.buttons;
if (renderState.overflowPosition === undefined) {
renderState.overflowPosition = stickyButtons.length;
}
if (stickyButtons.length > 0) {
if (isDockStickyButtons) {
buttons = [...stickyButtons, ...buttons];
}
else {
tabButtons.push(React.createElement("div", { ref: stickyButtonsRef, key: "sticky_buttons_container", onPointerDown: onInterceptPointerDown, onDragStart: (e) => { e.preventDefault(); }, className: cm(CLASSES.FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER) }, stickyButtons));
}
}
if (isShowHiddenTabs) {
const overflowTitle = layout.i18nName(I18nLabel.Overflow_Menu_Tooltip);
let overflowContent;
if (typeof icons.more === "function") {
const items = hiddenTabs.map(h => { return { index: h, node: border.getChildren()[h] }; });
overflowContent = icons.more(border, items);
}
else {
overflowContent = (React.createElement(React.Fragment, null,
icons.more,
React.createElement("div", { className: cm(CLASSES.FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT) }, hiddenTabs.length > 0 ? hiddenTabs.length : "")));
}
buttons.splice(Math.min(renderState.overflowPosition, buttons.length), 0, React.createElement("button", { key: "overflowbutton", ref: overflowbuttonRef, className: cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_ + border.getLocation().getName()), title: overflowTitle, onClick: onOverflowClick, onPointerDown: onInterceptPointerDown }, overflowContent));
}
const selectedIndex = border.getSelected();
if (selectedIndex !== -1) {
const selectedTabNode = border.getChildren()[selectedIndex];
if (selectedTabNode !== undefined && layout.isSupportsPopout() && selectedTabNode.isEnablePopout()) {
const popoutTitle = layout.i18nName(I18nLabel.Popout_Tab);
buttons.push(React.createElement("button", { key: "popout", title: popoutTitle, className: cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_FLOAT), onClick: onPopoutTab, onPointerDown: onInterceptPointerDown }, (typeof icons.popout === "function") ? icons.popout(selectedTabNode) : icons.popout));
}
}
const toolbar = (React.createElement("div", { key: "toolbar", ref: toolbarRef, className: cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_ + border.getLocation().getName()) }, buttons));
let innerStyle = {};
let outerStyle = {};
const borderHeight = size - 1;
if (border.getLocation() === DockLocation.LEFT) {
innerStyle = { right: "100%", top: 0 };
outerStyle = { width: borderHeight, overflowY: "auto" };
}
else if (border.getLocation() === DockLocation.RIGHT) {
innerStyle = { left: "100%", top: 0 };
outerStyle = { width: borderHeight, overflowY: "auto" };
}
else {
innerStyle = { left: 0 };
outerStyle = { height: borderHeight, overflowX: "auto" };
}
let miniScrollbar = undefined;
if (border.isEnableTabScrollbar()) {
miniScrollbar = (React.createElement("div", { ref: miniScrollRef, className: cm(CLASSES.FLEXLAYOUT__MINI_SCROLLBAR), onPointerDown: onScrollPointerDown }));
}
return (React.createElement("div", { ref: selfRef, style: {
display: "flex",
flexDirection: (border.getOrientation() === Orientation.VERT ? "row" : "column")
}, className: borderClasses, "data-layout-path": border.getPath(), onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onContextMenu: onContextMenu, onWheel: onMouseWheel },
React.createElement("div", { className: cm(CLASSES.FLEXLAYOUT__MINI_SCROLLBAR_CONTAINER) },
React.createElement("div", { ref: tabStripInnerRef, className: cm(CLASSES.FLEXLAYOUT__BORDER_INNER) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_INNER_ + border.getLocation().getName()), style: outerStyle, onScroll: onScroll },
React.createElement("div", { style: innerStyle, className: cm(CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_ + border.getLocation().getName()) }, tabButtons)),
miniScrollbar),
toolbar));
};
//# sourceMappingURL=BorderTabSet.js.map