flexlayout-react-v7-react-19
Version:
A multi-tab docking layout manager
139 lines • 6.21 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.BorderButton = void 0;
const React = require("react");
const I18nLabel_1 = require("../I18nLabel");
const Actions_1 = require("../model/Actions");
const Rect_1 = require("../Rect");
const ICloseType_1 = require("../model/ICloseType");
const Types_1 = require("../Types");
const Utils_1 = require("./Utils");
/** @internal */
const BorderButton = (props) => {
const { layout, node, selected, border, iconFactory, titleFactory, icons, path } = props;
const selfRef = React.useRef(null);
const contentRef = React.useRef(null);
const onMouseDown = (event) => {
if (!(0, Utils_1.isAuxMouseEvent)(event) && !layout.getEditingTab()) {
layout.dragStart(event, undefined, node, node.isEnableDrag(), onClick, onDoubleClick);
}
};
const onAuxMouseClick = (event) => {
if ((0, Utils_1.isAuxMouseEvent)(event)) {
layout.auxMouseClick(node, event);
}
};
const onContextMenu = (event) => {
layout.showContextMenu(node, event);
};
const onClick = () => {
layout.doAction(Actions_1.Actions.selectTab(node.getId()));
};
const onDoubleClick = (event) => {
// if (node.isEnableRename()) {
// onRename();
// }
};
// const onRename = () => {
// layout.setEditingTab(node);
// layout.getCurrentDocument()!.body.addEventListener("mousedown", onEndEdit);
// layout.getCurrentDocument()!.body.addEventListener("touchstart", onEndEdit);
// };
const onEndEdit = (event) => {
if (event.target !== contentRef.current) {
layout.getCurrentDocument().body.removeEventListener("mousedown", onEndEdit);
layout.getCurrentDocument().body.removeEventListener("touchstart", onEndEdit);
layout.setEditingTab(undefined);
}
};
const isClosable = () => {
const closeType = node.getCloseType();
if (selected || closeType === ICloseType_1.ICloseType.Always) {
return true;
}
if (closeType === ICloseType_1.ICloseType.Visible) {
// not selected but x should be visible due to hover
if (window.matchMedia && window.matchMedia("(hover: hover) and (pointer: fine)").matches) {
return true;
}
}
return false;
};
const onClose = (event) => {
if (isClosable()) {
layout.doAction(Actions_1.Actions.deleteTab(node.getId()));
}
else {
onClick();
}
};
const onCloseMouseDown = (event) => {
event.stopPropagation();
};
React.useLayoutEffect(() => {
updateRect();
if (layout.getEditingTab() === node) {
contentRef.current.select();
}
});
const updateRect = () => {
var _a;
// record position of tab in node
const layoutRect = layout.getDomRect();
const r = (_a = selfRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
if (r && layoutRect) {
node._setTabRect(new Rect_1.Rect(r.left - layoutRect.left, r.top - layoutRect.top, r.width, r.height));
}
};
const onTextBoxMouseDown = (event) => {
// console.log("onTextBoxMouseDown");
event.stopPropagation();
};
const onTextBoxKeyPress = (event) => {
if (event.code === 'Escape') {
// esc
layout.setEditingTab(undefined);
}
else if (event.code === 'Enter') {
// enter
layout.setEditingTab(undefined);
layout.doAction(Actions_1.Actions.renameTab(node.getId(), event.target.value));
}
};
const cm = layout.getClassName;
let classNames = cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON) + " " + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON_ + border);
if (selected) {
classNames += " " + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON__SELECTED);
}
else {
classNames += " " + cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON__UNSELECTED);
}
if (node.getClassName() !== undefined) {
classNames += " " + node.getClassName();
}
let iconAngle = 0;
if (node.getModel().isEnableRotateBorderIcons() === false) {
if (border === "left") {
iconAngle = 90;
}
else if (border === "right") {
iconAngle = -90;
}
}
const renderState = (0, Utils_1.getRenderStateEx)(layout, node, iconFactory, titleFactory, iconAngle);
let content = renderState.content ? (React.createElement("div", { className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON_CONTENT) }, renderState.content)) : null;
const leading = renderState.leading ? (React.createElement("div", { className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON_LEADING) }, renderState.leading)) : null;
if (layout.getEditingTab() === node) {
content = (React.createElement("input", { ref: contentRef, className: cm(Types_1.CLASSES.FLEXLAYOUT__TAB_BUTTON_TEXTBOX), "data-layout-path": path + "/textbox", type: "text", autoFocus: true, defaultValue: node.getName(), onKeyDown: onTextBoxKeyPress, onMouseDown: onTextBoxMouseDown, onTouchStart: onTextBoxMouseDown }));
}
if (node.isEnableClose()) {
const closeTitle = layout.i18nName(I18nLabel_1.I18nLabel.Close_Tab);
renderState.buttons.push(React.createElement("div", { key: "close", "data-layout-path": path + "/button/close", title: closeTitle, className: cm(Types_1.CLASSES.FLEXLAYOUT__BORDER_BUTTON_TRAILING), onMouseDown: onCloseMouseDown, onClick: onClose, onTouchStart: onCloseMouseDown }, (typeof icons.close === "function") ? icons.close(node) : icons.close));
}
return (React.createElement("div", { ref: selfRef, "data-layout-path": path, className: classNames, onMouseDown: onMouseDown, onClick: onAuxMouseClick, onAuxClick: onAuxMouseClick, onContextMenu: onContextMenu, onTouchStart: onMouseDown, title: node.getHelpText() },
leading,
content,
renderState.buttons));
};
exports.BorderButton = BorderButton;
//# sourceMappingURL=BorderButton.js.map