brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

dragging and dropping a tab actually works now

Browse source
This commit is contained in:
Carter 2025-03-24 15:53:42 -06:00
parent 37eaa0fb11
commit 605b6d69dd
3 changed files with 91 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/bin/BinYards.tsx
View file

@ -126,10 +126,10 @@ const useStyles = makeStyles((theme: Theme) => {
background: theme.palette.background.default,
// "linear-gradient(rgba(150, 150, 150, 0.3),"
// + theme.palette.background.default + " 80%)"
// "&:hover": {
// background:
// "linear-gradient(rgba(150, 150, 150, 0.3)," + theme.palette.background.default + " 80%)"
// }
"&:hover": {
background:
"linear-gradient(rgba(150, 150, 150, 0.3)," + theme.palette.background.default + " 80%)"
}
},
icon: {
display: "flex",
@ -762,7 +762,6 @@ export default function BinYard(props: Props) {
<Tab
classes={{ root: classes.tab, selected: classes.selectedTab }}
key={index}
draggable
sx={{
textAlign: "left",
}}

108
src/common/DraggableTabs.tsx
View file

@ -1,5 +1,5 @@
import { Tab, Tabs, TabsProps } from "@mui/material";
import React from "react";
import React, { useEffect, useState, useRef } from "react";
interface DraggableTabsProps extends TabsProps {
children: React.ReactNode;
@ -8,9 +8,20 @@ interface DraggableTabsProps extends TabsProps {
}
export default function DraggableTabs(props: DraggableTabsProps) {
const { startNode, endNode, children, ...tabsProps } = props
const { startNode, endNode, children, ...tabsProps } = props;
const initialChildren = React.Children.toArray(children);
const [tabOrder, setTabOrder] = useState<number[]>([]);
const [hoveredIndex, setHoveredIndex] = useState<number>(-1); // Track hovered tab
const tabRefs = useRef<(HTMLDivElement | null)[]>([]); // Refs for each tab
useEffect(() => {
const newOrder = initialChildren.map((_, index) => index);
console.log("Children updated. New tabOrder:", newOrder);
setTabOrder(newOrder);
tabRefs.current = new Array(newOrder.length).fill(null); // Initialize refs
}, [initialChildren.length]);
// Helper function to flatten nodes and assign keys
const flattenNodes = (nodes: React.ReactNode, prefix: string) =>
React.Children.toArray(nodes).flatMap((node, nodeIndex) => {
if (React.isValidElement(node) && (node.type as any) === React.Fragment) {
@ -25,34 +36,83 @@ export default function DraggableTabs(props: DraggableTabsProps) {
: node;
});
// Process startTabs
const startTabs = flattenNodes(startNode, "start");
// Process endTabs
const endTabs = flattenNodes(endNode, "end");
const enhancedChildren = React.Children.map(children, (child) => {
if (React.isValidElement(child) && child.type === Tab) {
if (child.props.draggable === undefined || child.props.draggable === true) {
return React.cloneElement(child, {
...child.props,
draggable: true,
// onDragStart: (e: React.DragEvent<HTMLDivElement>) => handleDragStart(e, index),
onDragOver: (e: React.DragEvent<HTMLDivElement>) => e.preventDefault(),
// onDrop: (e: React.DragEvent<HTMLDivElement>) => handleDrop(e, index),
});
const handleDragStart = (e: React.DragEvent<HTMLDivElement>, index: number) => {
console.log("Drag started at index:", index);
e.dataTransfer.setData("text/plain", index.toString());
e.dataTransfer.effectAllowed = "move";
};
const handleDragOver = (e: React.DragEvent<HTMLDivElement>, index: number) => {
e.preventDefault();
e.dataTransfer.dropEffect = "move";
setHoveredIndex(index); // Update hovered index
console.log("Dragging over index:", index);
};
const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
e.preventDefault();
const draggedIndex = Number(e.dataTransfer.getData("text/plain"));
const dropIndex = hoveredIndex; // Use the last hovered index
console.log("Dragged from index:", draggedIndex);
console.log("Dropped at index:", dropIndex);
console.log("Current tabOrder before:", tabOrder);
if (dropIndex === -1) {
console.log("Drop skipped: no valid drop target");
return;
}
if (draggedIndex !== dropIndex && draggedIndex >= 0 && dropIndex >= 0 && draggedIndex < tabOrder.length && dropIndex < tabOrder.length) {
const newOrder = [...tabOrder];
const [draggedItem] = newOrder.splice(draggedIndex, 1);
newOrder.splice(dropIndex, 0, draggedItem);
console.log("New tabOrder after:", newOrder);
setTabOrder(newOrder);
} else {
console.log("Drop skipped: invalid indices or same position");
}
setHoveredIndex(-1); // Reset hovered index
};
const handleDragEnd = (e: React.DragEvent<HTMLDivElement>) => {
console.log("Drag ended");
setHoveredIndex(-1); // Reset on drag end
};
const enhancedChildren = React.Children.map(initialChildren, (child, originalIndex) => {
if (React.isValidElement(child)) {
const currentIndex = tabOrder.indexOf(originalIndex);
console.log("Original index:", originalIndex, "Current index:", currentIndex);
return (
<div
ref={(el) => (tabRefs.current[currentIndex] = el)} // Assign ref to each tab
draggable
onDragStart={(e) => handleDragStart(e, currentIndex)}
onDragOver={(e) => handleDragOver(e, currentIndex)}
onDrop={handleDrop} // Handle drop on individual tabs
onDragEnd={handleDragEnd}
>
{React.cloneElement(child)}
</div>
);
}
// Return non-Tab children unchanged
return child;
}) || [];
// Combine all tabs into a single array
const allTabs = [...startTabs, ...enhancedChildren, ...endTabs];
useEffect(() => {
console.log(hoveredIndex)
}, [hoveredIndex])
return (
<Tabs {...tabsProps}>
{allTabs}
</Tabs>
)
const orderedChildren = tabOrder.map((index) => enhancedChildren[index]);
const allTabs = [...startTabs, ...orderedChildren, ...endTabs];
useEffect(() => {
console.log("Current tab order:", tabOrder);
}, [tabOrder]);
return <Tabs {...tabsProps}>{allTabs}</Tabs>;
}

2
src/theme/theme.ts
View file

@ -13,7 +13,7 @@ export function CreateTheme(themeType: "light" | "dark"): Theme {
function generateBackgroundShades(themeType: "light" | "dark") {
if(themeType==="light") return ({
default: "#e2e2e2",
default: "#e9e9e9",
paper: "#fafafa",
})