Fix drop marker indent

This commit is contained in:
Gregory Schier
2023-11-04 11:16:41 -07:00
parent e26ba0f9d0
commit f4a071ee05
2 changed files with 4 additions and 7 deletions

View File

@@ -3,16 +3,14 @@ import React, { memo } from 'react';
interface Props { interface Props {
className?: string; className?: string;
depth: number;
} }
export const DropMarker = memo( export const DropMarker = memo(
function DropMarker({ className, depth }: Props) { function DropMarker({ className }: Props) {
return ( return (
<div <div
className={classNames( className={classNames(
className, className,
depth > 0 ? 'ml-5' : 'ml-0',
'relative w-full h-0 overflow-visible pointer-events-none', 'relative w-full h-0 overflow-visible pointer-events-none',
)} )}
> >

View File

@@ -403,9 +403,8 @@ function SidebarItems({
> >
{tree.children.map((child, i) => ( {tree.children.map((child, i) => (
<Fragment key={child.item.id}> <Fragment key={child.item.id}>
{hoveredIndex === i && hoveredTree?.item.id === tree.item.id && ( {hoveredIndex === i && hoveredTree?.item.id === tree.item.id && <DropMarker />}
<DropMarker depth={tree.depth} /> {hoveredIndex === i && hoveredTree?.item.id === tree.item.id && <DropMarker />}
)}
<DraggableSidebarItem <DraggableSidebarItem
selected={selectedId === child.item.id} selected={selectedId === child.item.id}
itemId={child.item.id} itemId={child.item.id}
@@ -441,7 +440,7 @@ function SidebarItems({
</Fragment> </Fragment>
))} ))}
{hoveredIndex === tree.children.length && hoveredTree?.item.id === tree.item.id && ( {hoveredIndex === tree.children.length && hoveredTree?.item.id === tree.item.id && (
<DropMarker depth={tree.depth} /> <DropMarker />
)} )}
</VStack> </VStack>
); );