fix page arrows

This commit is contained in:
Philipinho
2023-10-26 23:36:01 +01:00
parent fd2ef3a906
commit cb3fc4015b

View File

@ -26,7 +26,7 @@ import { usePersistence } from '@/features/page/tree/hooks/use-persistence';
import { IPage } from '@/features/page/types/page.types'; import { IPage } from '@/features/page/types/page.types';
import { getPages } from '@/features/page/services/page-service'; import { getPages } from '@/features/page/services/page-service';
import useWorkspacePageOrder from '@/features/page/tree/hooks/use-workspace-page-order'; import useWorkspacePageOrder from '@/features/page/tree/hooks/use-workspace-page-order';
import { useLocation, useNavigate} from 'react-router-dom'; import { useLocation, useNavigate } from 'react-router-dom';
export default function PageTree() { export default function PageTree() {
const { data, setData, controllers } = usePersistence<TreeApi<TreeNode>>(); const { data, setData, controllers } = usePersistence<TreeApi<TreeNode>>();
@ -37,7 +37,7 @@ export default function PageTree() {
const fetchAndSetTreeData = async () => { const fetchAndSetTreeData = async () => {
if (pageOrderData?.childrenIds) { if (pageOrderData.childrenIds) {
try { try {
const pages = await getPages(); const pages = await getPages();
const treeData = convertToTree(pages, pageOrderData.childrenIds); const treeData = convertToTree(pages, pageOrderData.childrenIds);
@ -54,9 +54,9 @@ export default function PageTree() {
useEffect(() => { useEffect(() => {
const pageId = location.pathname.split('/')[2]; const pageId = location.pathname.split('/')[2];
setTimeout(() => { setTimeout(() => {
tree?.select(pageId); tree?.select(pageId);
}, 100); }, 100);
}, [tree, location.pathname]); }, [tree, location.pathname]);
return ( return (
@ -91,9 +91,9 @@ function Node({ node, style, dragHandle }: NodeRendererProps<any>) {
const handleClick = () => { const handleClick = () => {
navigate(`/p/${node.id}`); navigate(`/p/${node.id}`);
} };
if (node.willReceiveDrop && node.isClosed){ if (node.willReceiveDrop && node.isClosed) {
setTimeout(() => { setTimeout(() => {
if (node.state.willReceiveDrop) node.open(); if (node.state.willReceiveDrop) node.open();
}, 650); }, 650);
@ -213,24 +213,25 @@ function NodeMenu({ node }: { node: NodeApi<TreeNode> }) {
function PageArrow({ node }: { node: NodeApi<TreeNode> }) { function PageArrow({ node }: { node: NodeApi<TreeNode> }) {
return ( return (
<span onClick={(e) => { <ActionIcon size={20} variant="subtle" color="gray"
e.preventDefault(); onClick={(e) => {
e.stopPropagation(); e.preventDefault();
node.toggle(); e.stopPropagation();
}}> node.toggle();
}}>
{node.isInternal ? ( {node.isInternal ? (
node.children && node.children.length > 0 ? ( node.children && node.children.length > 0 ? (
node.isOpen ? ( node.isOpen ? (
<IconChevronDown size={18} /> <IconChevronDown stroke={2} size={18} />
) : ( ) : (
<IconChevronRight size={18} /> <IconChevronRight stroke={2} size={18} />
) )
) : ( ) : (
<IconChevronRight size={18} style={{ visibility: 'hidden' }} /> <IconChevronRight size={18} style={{ visibility: 'hidden' }} />
) )
) : null} ) : null}
</span> </ActionIcon>
); );
} }