@lonli-lokli/react-mosaic-component
Version:
A React Tiling Window Manager
178 lines (176 loc) • 6.74 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// libs/react-mosaic-component/src/lib/DraggableTab.tsx
var DraggableTab_exports = {};
__export(DraggableTab_exports, {
DraggableTab: () => DraggableTab
});
module.exports = __toCommonJS(DraggableTab_exports);
var import_react_dnd = require("react-dnd");
var import_lodash_es = require("lodash-es");
var import_types = require("./types.cjs");
var import_mosaicUpdates = require("./util/mosaicUpdates.cjs");
var import_mosaicUtilities = require("./util/mosaicUtilities.cjs");
var DraggableTab = ({
tabKey,
tabIndex,
tabContainerPath,
mosaicActions,
mosaicId,
children
}) => {
const tabPath = tabContainerPath.concat(tabIndex);
const [{ isDragging }, connectDragSource, connectDragPreview] = (0, import_react_dnd.useDrag)({
type: import_types.MosaicDragType.WINDOW,
item: () => {
const hideTimer = window.setTimeout(() => {
mosaicActions.hide(tabPath, true);
}, 50);
return {
mosaicId,
hideTimer,
// Add additional properties for tab reordering
isTab: true,
tabIndex,
tabKey,
tabContainerPath
};
},
end: (item, monitor) => {
window.clearTimeout(item.hideTimer);
const dropResult = monitor.getDropResult();
const didDrop = monitor.didDrop();
const ownPath = tabPath;
const tabReorderIndex = dropResult?.tabReorderIndex;
const isTabReorder = tabReorderIndex !== void 0 && dropResult?.path && (0, import_lodash_es.isEqual)(dropResult.path, tabContainerPath);
const isTabToTabContainer = tabReorderIndex !== void 0 && dropResult?.path && !(0, import_lodash_es.isEqual)(dropResult.path, tabContainerPath);
const isSelfDrop = dropResult?.path && (0, import_lodash_es.isEqual)(dropResult.path, tabContainerPath) && tabReorderIndex === void 0;
const isChildDrop = dropResult?.path && dropResult.path.length > ownPath.length && (0, import_lodash_es.isEqual)(dropResult.path.slice(0, ownPath.length), ownPath);
if (!didDrop || !dropResult || isChildDrop) {
mosaicActions.show(ownPath, true);
return;
}
if (isTabReorder) {
const root = mosaicActions.getRoot();
const tabsNode = (0, import_mosaicUtilities.getNodeAtPath)(
root,
tabContainerPath
);
if (tabsNode && (0, import_mosaicUtilities.isTabsNode)(tabsNode)) {
const currentTabs = [...tabsNode.tabs];
const currentActiveTabIndex = tabsNode.activeTabIndex;
const [movedTab] = currentTabs.splice(tabIndex, 1);
const adjustedInsertIndex = tabIndex < tabReorderIndex ? tabReorderIndex - 1 : tabReorderIndex;
currentTabs.splice(adjustedInsertIndex, 0, movedTab);
let newActiveTabIndex = currentActiveTabIndex;
if (tabIndex === currentActiveTabIndex) {
newActiveTabIndex = adjustedInsertIndex;
} else if (tabIndex < currentActiveTabIndex && adjustedInsertIndex >= currentActiveTabIndex) {
newActiveTabIndex = currentActiveTabIndex - 1;
} else if (tabIndex > currentActiveTabIndex && adjustedInsertIndex <= currentActiveTabIndex) {
newActiveTabIndex = currentActiveTabIndex + 1;
}
mosaicActions.updateTree([
{
path: tabContainerPath,
spec: {
tabs: { $set: currentTabs },
activeTabIndex: { $set: newActiveTabIndex }
}
}
]);
} else {
console.warn("Could not find tabs node at path:", tabContainerPath);
}
return;
}
if (isTabToTabContainer) {
const root = mosaicActions.getRoot();
const destinationTabsNode = (0, import_mosaicUtilities.getNodeAtPath)(
root,
dropResult.path
);
if (destinationTabsNode && (0, import_mosaicUtilities.isTabsNode)(destinationTabsNode)) {
const sourceTabsNode = (0, import_mosaicUtilities.getNodeAtPath)(
root,
tabContainerPath
);
const currentSourceTabs = [...sourceTabsNode.tabs];
currentSourceTabs.splice(tabIndex, 1);
const removeUpdates = [
{
path: tabContainerPath,
spec: {
tabs: { $set: currentSourceTabs },
activeTabIndex: {
$set: Math.max(
0,
Math.min(tabIndex, sourceTabsNode.tabs.length - 2)
)
}
}
}
];
const currentDestinationTabs = [...destinationTabsNode.tabs];
currentDestinationTabs.splice(tabReorderIndex, 0, tabKey);
const insertUpdates = [
{
path: dropResult.path,
spec: {
tabs: { $set: currentDestinationTabs },
activeTabIndex: { $set: tabReorderIndex }
// Make the newly inserted tab active
}
}
];
mosaicActions.updateTree([...removeUpdates, ...insertUpdates]);
} else {
console.warn(
"Could not find destination tabs node at path:",
dropResult.path
);
}
return;
}
if (isSelfDrop || dropResult.path === void 0) {
mosaicActions.show(ownPath, true);
return;
}
const updates = (0, import_mosaicUpdates.createDragToUpdates)(
mosaicActions.getRoot(),
ownPath,
dropResult.path,
dropResult.position === void 0 ? {
type: "tab-container"
} : { type: "split", position: dropResult.position }
);
mosaicActions.updateTree(updates, {
shouldNormalize: true
});
},
collect: (monitor) => ({
isDragging: monitor.isDragging()
})
});
return children({
isDragging,
connectDragSource,
connectDragPreview
});
};