({
},
collect: monitor => ({
isOver: monitor.isOver(),
- canDrop: monitor.canDrop(),
+ canDrop: monitor.canDrop() && allowDrop,
}),
}),
- [onDrop, allDrop]
+ [onDrop, allowDrop]
);
+ useEffect(() => {
+ if (isOver && canDrop) {
+ setCollapsed(false);
+ }
+ }, [isOver, canDrop]);
+
+ return (
+
+ {node.render?.(node, {
+ isOver: !!(isOver && canDrop),
+ onAdd: () => onAdd?.(node),
+ onDelete: () => onDelete?.(node),
+ collapsed,
+ setCollapsed,
+ })}
+
+ );
+};
+
+export const TreeNode = ({
+ node,
+ index,
+ allowDrop = true,
+ ...otherProps
+}: TreeNodeProps) => {
+ const { indent } = otherProps;
+ const [collapsed, setCollapsed] = useState(false);
+
+ const [{ isDragging }, drag] = useDrag(() => ({
+ type: 'node',
+ item: node,
+ collect: monitor => ({
+ isDragging: monitor.isDragging(),
+ }),
+ }));
+
return (
-
+
{index === 0 && (
)}
- {node.render?.(node, {
- onAdd: () => onAdd?.(node),
- onDelete: () => onDelete?.(node),
- collapsed,
- setCollapsed,
- })}
+
{(!node.children?.length || collapsed) && (
)}
-
-
+
{node.children &&
node.children.map((childNode, index) => (
@@ -116,7 +145,7 @@ export const TreeNode = ({
key={childNode.id}
node={childNode}
index={index}
- allDrop={isDragging ? false : allDrop}
+ allowDrop={isDragging ? false : allowDrop}
{...otherProps}
/>
))}
diff --git a/packages/component/src/ui/tree-view/styles.ts b/packages/component/src/ui/tree-view/styles.ts
index 1c8502aca5..5255543a95 100644
--- a/packages/component/src/ui/tree-view/styles.ts
+++ b/packages/component/src/ui/tree-view/styles.ts
@@ -1,7 +1,7 @@
import MuiCollapse from '@mui/material/Collapse';
import type { CSSProperties } from 'react';
-import { styled } from '../../styles';
+import { alpha, styled } from '../../styles';
export const StyledCollapse = styled(MuiCollapse)<{
indent?: CSSProperties['paddingLeft'];
@@ -10,12 +10,8 @@ export const StyledCollapse = styled(MuiCollapse)<{
paddingLeft: indent,
};
});
-export const StyledTreeNodeItem = styled('div')<{
- isOver?: boolean;
- canDrop?: boolean;
-}>(({ isOver, canDrop, theme }) => {
+export const StyledTreeNodeWrapper = styled('div')(() => {
return {
- background: isOver && canDrop ? theme.colors.hoverBackground : '',
position: 'relative',
};
});
@@ -23,6 +19,7 @@ export const StyledTreeNodeContainer = styled('div')<{ isDragging: boolean }>(
({ isDragging, theme }) => {
return {
background: isDragging ? theme.colors.hoverBackground : '',
+ // opacity: isDragging ? 0.4 : 1,
};
}
);
@@ -32,11 +29,14 @@ export const StyledNodeLine = styled('div')<{ show: boolean; isTop?: boolean }>(
return {
position: 'absolute',
left: '0',
- ...(isTop ? { top: '0' } : { bottom: '0' }),
+ ...(isTop ? { top: '-1px' } : { bottom: '-1px' }),
width: '100%',
- paddingTop: '3px',
- borderBottom: '3px solid',
+ paddingTop: '2x',
+ borderTop: '2px solid',
borderColor: show ? theme.colors.primaryColor : 'transparent',
+ boxShadow: show
+ ? `0px 0px 8px ${alpha(theme.colors.primaryColor, 0.35)}`
+ : 'none',
zIndex: 1,
};
}
diff --git a/packages/component/src/ui/tree-view/types.ts b/packages/component/src/ui/tree-view/types.ts
index 80079ccec9..494b481db3 100644
--- a/packages/component/src/ui/tree-view/types.ts
+++ b/packages/component/src/ui/tree-view/types.ts
@@ -6,6 +6,7 @@ export type Node = {
render?: (
node: Node,
eventsAndStatus: {
+ isOver: boolean;
onAdd: () => void;
onDelete: () => void;
collapsed: boolean;
@@ -33,9 +34,14 @@ type CommonProps = {
export type TreeNodeProps = {
node: Node;
index: number;
- allDrop?: boolean;
+ allowDrop?: boolean;
} & CommonProps;
+export type TreeNodeItemProps = {
+ collapsed: boolean;
+ setCollapsed: (collapsed: boolean) => void;
+} & TreeNodeProps;
+
export type TreeViewProps = {
data: Node[];
} & CommonProps;
diff --git a/packages/i18n/src/resources/en.json b/packages/i18n/src/resources/en.json
index 7361f4d012..c904129e23 100644
--- a/packages/i18n/src/resources/en.json
+++ b/packages/i18n/src/resources/en.json
@@ -194,5 +194,8 @@
"Please make sure you are online": "Please make sure you are online",
"Workspace Owner": "Workspace Owner",
"Members": "Members",
- "Pivots": "Pivots"
+ "Pivots": "Pivots",
+ "Add a subpage inside": "Add a subpage inside",
+ "Rename": "Rename",
+ "Move to": "Move to"
}