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

fixed issue flattening node arrays

Browse source
This commit is contained in:
Carter 2025-03-21 13:21:25 -06:00
parent 36d1eaf22c
commit 85bfcce921
2 changed files with 91 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

109
src/bin/BinYards.tsx
View file

@ -211,12 +211,6 @@ export default function BinYard(props: Props) {
}
}, [props.yards, props.yardPerms]);
// useEffect(() => {
// if (props.tab && binYards.length > 1) {
// setYardFilter(binYards[props.tab - 1].key);
// }
// }, [props.tab, binYards, setYardFilter, loadYards]);
const tabChange = (i: number) => {
if (tab === i) return;
if (i === binYards.length + 2) return;
@ -687,43 +681,68 @@ export default function BinYard(props: Props) {
value={tab}
TabIndicatorProps={{ style: { background: "rgba(0,0,0,0)" } }}
onChange={(_, newValue) => {
if (+newValue > 0) {
// if (+newValue > 0) {
tabChange(newValue);
}
}}>
<Tab
className={searchSelected ? classes.searchTabExpanded : classes.searchTab}
disableTouchRipple
disableFocusRipple
draggable={false}
label={
<Grid container direction="row" wrap="nowrap" spacing={2}>
<Grid>{yardsLoading ? <CircularProgress size={20} /> : <Search />}</Grid>
{searchSelected && (
<Grid>
<TextField
onChange={e => {
loadYards(e.target.value);
}}
/>
// }
}}
startNode={
<>
<Tab
className={searchSelected ? classes.searchTabExpanded : classes.searchTab}
disableTouchRipple
disableFocusRipple
draggable={false}
label={
<Grid container direction="row" wrap="nowrap" spacing={2}>
<Grid>{yardsLoading ? <CircularProgress size={20} /> : <Search />}</Grid>
{searchSelected && (
<Grid>
<TextField
onChange={e => {
loadYards(e.target.value);
}}
/>
</Grid>
)}
</Grid>
)}
</Grid>
}
onClick={_e => {
setSearchSelected(true);
}}
/>
<Tab
classes={{ root: classes.smallTab, selected: classes.selectedTab }}
style={{ marginLeft: theme.spacing(1) }}
label="All"
draggable={false}
disableTouchRipple={true}
onClick={() => {
setShowing("all");
}}
/>
}
onClick={_e => {
setSearchSelected(true);
}}
/>
<Tab
classes={{ root: classes.smallTab, selected: classes.selectedTab }}
style={{ marginLeft: theme.spacing(1) }}
label="All"
draggable={false}
disableTouchRipple={true}
onClick={() => {
setShowing("all");
}}
/>
</>
}
endNode={
<>
<Tab
classes={{ root: classes.smallTab, selected: classes.selectedTab }}
label={<AddIcon color="primary"/>}
onClick={() => setShowAddYard(true)}
disableTouchRipple={true}
/>
</>
}
>
{/* <Tab
classes={{ root: classes.smallTab, selected: classes.selectedTab }}
style={{ marginLeft: theme.spacing(1) }}
label="All"
draggable={false}
disableTouchRipple={true}
onClick={() => {
setShowing("all");
}}
/> */}
{binYards.map((n, index) => (
<Tooltip
title={
@ -770,13 +789,7 @@ export default function BinYard(props: Props) {
/>
</Tooltip>
))}
<Tab
classes={{ root: classes.smallTab, selected: classes.selectedTab }}
// fullWidth={false}
label={<AddIcon color="primary"/>}
onClick={() => setShowAddYard(true)}
disableTouchRipple={true}
/>
{/* {grainBags.length > 0 && (
<Tab
classes={{ root: classes.smallTab, selected: classes.selectedTab }}

33
src/common/DraggableTabs.tsx
View file

@ -3,9 +3,33 @@ import React from "react";
interface DraggableTabsProps extends TabsProps {
children: React.ReactNode;
startNode?: React.ReactNode;
endNode?: React.ReactNode;
}
export default function DraggableTabs({children, ...tabsProps}: DraggableTabsProps) {
export default function DraggableTabs(props: DraggableTabsProps) {
const { startNode, endNode, children, ...tabsProps } = props
// 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) {
return React.Children.toArray(node.props.children).map((child, childIndex) =>
React.isValidElement(child)
? React.cloneElement(child, { key: `${prefix}-${nodeIndex}-${childIndex}` })
: child
);
}
return React.isValidElement(node)
? React.cloneElement(node, { key: `${prefix}-${nodeIndex}` })
: 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) {
@ -21,11 +45,14 @@ export default function DraggableTabs({children, ...tabsProps}: DraggableTabsPro
}
// Return non-Tab children unchanged
return child;
});
}) || [];
// Combine all tabs into a single array
const allTabs = [...startTabs, ...enhancedChildren, ...endTabs];
return (
<Tabs {...tabsProps}>
{enhancedChildren}
{allTabs}
</Tabs>
)
}