) => {
+ return (
+
{node.render?.(node, {
- isOver: !!(isOver && canDrop),
+ isOver: isOver && canDrop,
onAdd: () => onAdd?.(node),
onDelete: () => onDelete?.(node),
collapsed,
setCollapsed,
+ isSelected: selectedId === node.id,
})}
);
};
-export const TreeNode = ({
- node,
- index,
- allowDrop = true,
- ...otherProps
-}: TreeNodeProps) => {
- const { indent } = otherProps;
- const [collapsed, setCollapsed] = useState(false);
-
+export const TreeNodeWithDnd = (
+ props: TreeNodeProps
+) => {
const [{ isDragging }, drag] = useDrag(() => ({
type: 'node',
- item: node,
+ item: props.node,
collect: monitor => ({
isDragging: monitor.isDragging(),
}),
}));
+ return ;
+};
+
+export const TreeNode = ({
+ node,
+ index,
+ isDragging = false,
+ allowDrop = true,
+ dragRef,
+ ...otherProps
+}: TreeNodeProps) => {
+ const { indent, enableDnd, collapsedIds } = otherProps;
+ const collapsed = collapsedIds.includes(node.id);
+
return (
-
+
- {index === 0 && (
+ {enableDnd && index === 0 && (
({
isTop={true}
/>
)}
-
- {(!node.children?.length || collapsed) && (
+ {enableDnd ? (
+
+ ) : (
+
+ )}
+
+ {enableDnd && (!node.children?.length || collapsed) && (
({
{node.children &&
- node.children.map((childNode, index) => (
-
- ))}
+ node.children.map((childNode, index) =>
+ enableDnd ? (
+
+ ) : (
+
+ )
+ )}
);
};
-
-export default TreeNode;
diff --git a/packages/component/src/ui/tree-view/TreeView.tsx b/packages/component/src/ui/tree-view/TreeView.tsx
index 1d72433780..61c87c780e 100644
--- a/packages/component/src/ui/tree-view/TreeView.tsx
+++ b/packages/component/src/ui/tree-view/TreeView.tsx
@@ -1,15 +1,108 @@
+import { useEffect, useState } from 'react';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
-import { TreeNode } from './TreeNode';
-import type { TreeViewProps } from './types';
-export const TreeView = ({ data, ...otherProps }: TreeViewProps) => {
+import { TreeNode, TreeNodeWithDnd } from './TreeNode';
+import type { TreeNodeProps, TreeViewProps } from './types';
+import { flattenIds } from './utils';
+
+export const TreeView = ({
+ data,
+ enableKeyboardSelection,
+ onSelect,
+ enableDnd = true,
+ initialCollapsedIds = [],
+ ...otherProps
+}: TreeViewProps) => {
+ const [selectedId, setSelectedId] = useState();
+ // TODO: should record collapsedIds in localStorage
+ const [collapsedIds, setCollapsedIds] =
+ useState(initialCollapsedIds);
+
+ useEffect(() => {
+ if (!enableKeyboardSelection) {
+ return;
+ }
+
+ const flattenedIds = flattenIds(data);
+
+ const handleDirectionKeyDown = (e: KeyboardEvent) => {
+ if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') {
+ return;
+ }
+ if (selectedId === undefined) {
+ setSelectedId(flattenedIds[0]);
+ return;
+ }
+ let selectedIndex = flattenedIds.indexOf(selectedId);
+ if (e.key === 'ArrowDown') {
+ selectedIndex < flattenedIds.length - 1 && selectedIndex++;
+ }
+ if (e.key === 'ArrowUp') {
+ selectedIndex > 0 && selectedIndex--;
+ }
+
+ setSelectedId(flattenedIds[selectedIndex]);
+ };
+
+ const handleEnterKeyDown = (e: KeyboardEvent) => {
+ if (e.key !== 'Enter') {
+ return;
+ }
+ selectedId && onSelect?.(selectedId);
+ };
+
+ document.addEventListener('keydown', handleDirectionKeyDown);
+ document.addEventListener('keydown', handleEnterKeyDown);
+
+ return () => {
+ document.removeEventListener('keydown', handleDirectionKeyDown);
+ document.removeEventListener('keydown', handleEnterKeyDown);
+ };
+ }, [data, selectedId]);
+
+ const setCollapsed: TreeNodeProps['setCollapsed'] = (id, collapsed) => {
+ if (collapsed) {
+ setCollapsedIds(ids => [...ids, id]);
+ } else {
+ setCollapsedIds(ids => ids.filter(i => i !== id));
+ }
+ };
+
+ if (enableDnd) {
+ return (
+
+ {data.map((node, index) => (
+
+ ))}
+
+ );
+ }
+
return (
-
+ <>
{data.map((node, index) => (
-
+
))}
-
+
);
};
diff --git a/packages/component/src/ui/tree-view/styles.ts b/packages/component/src/ui/tree-view/styles.ts
index 5255543a95..9b5f6305d6 100644
--- a/packages/component/src/ui/tree-view/styles.ts
+++ b/packages/component/src/ui/tree-view/styles.ts
@@ -15,8 +15,8 @@ export const StyledTreeNodeWrapper = styled('div')(() => {
position: 'relative',
};
});
-export const StyledTreeNodeContainer = styled('div')<{ isDragging: boolean }>(
- ({ isDragging, theme }) => {
+export const StyledTreeNodeContainer = styled('div')<{ isDragging?: boolean }>(
+ ({ isDragging = false, theme }) => {
return {
background: isDragging ? theme.colors.hoverBackground : '',
// opacity: isDragging ? 0.4 : 1,
diff --git a/packages/component/src/ui/tree-view/types.ts b/packages/component/src/ui/tree-view/types.ts
index 494b481db3..8b1af1687c 100644
--- a/packages/component/src/ui/tree-view/types.ts
+++ b/packages/component/src/ui/tree-view/types.ts
@@ -1,52 +1,71 @@
-import type { CSSProperties, ReactNode } from 'react';
+import type { CSSProperties, ReactNode, Ref } from 'react';
-export type Node = {
+export type DropPosition = {
+ topLine: boolean;
+ bottomLine: boolean;
+ internal: boolean;
+};
+export type OnDrop = (
+ dragId: string,
+ dropId: string,
+ position: DropPosition
+) => void;
+
+export type Node = {
id: string;
- children?: Node[];
- render?: (
- node: Node,
+ children?: Node[];
+ render: (
+ node: Node,
eventsAndStatus: {
isOver: boolean;
onAdd: () => void;
onDelete: () => void;
collapsed: boolean;
- setCollapsed: (collapsed: boolean) => void;
+ setCollapsed: (id: string, collapsed: boolean) => void;
+ isSelected: boolean;
},
- extendProps?: unknown
+ renderProps?: RenderProps
) => ReactNode;
-} & N;
-
-type CommonProps = {
- indent?: CSSProperties['paddingLeft'];
- onAdd?: (node: Node) => void;
- onDelete?: (node: Node) => void;
- onDrop?: (
- dragNode: Node,
- dropNode: Node,
- position: {
- topLine: boolean;
- bottomLine: boolean;
- internal: boolean;
- }
- ) => void;
};
-export type TreeNodeProps = {
- node: Node;
+type CommonProps = {
+ enableDnd?: boolean;
+ enableKeyboardSelection?: boolean;
+ indent?: CSSProperties['paddingLeft'];
+ onAdd?: (node: Node) => void;
+ onDelete?: (node: Node) => void;
+ onDrop?: OnDrop;
+ // Only trigger when the enableKeyboardSelection is true
+ onSelect?: (id: string) => void;
+};
+
+export type TreeNodeProps = {
+ node: Node;
index: number;
+ collapsedIds: string[];
+ setCollapsed: (id: string, collapsed: boolean) => void;
allowDrop?: boolean;
-} & CommonProps;
+ selectedId?: string;
+ isDragging?: boolean;
+ dragRef?: Ref;
+} & CommonProps;
-export type TreeNodeItemProps = {
+export type TreeNodeItemProps = {
collapsed: boolean;
- setCollapsed: (collapsed: boolean) => void;
-} & TreeNodeProps;
+ setCollapsed: (id: string, collapsed: boolean) => void;
-export type TreeViewProps = {
- data: Node[];
-} & CommonProps;
+ isOver?: boolean;
+ canDrop?: boolean;
-export type NodeLIneProps = {
+ dropRef?: Ref;
+} & TreeNodeProps;
+
+export type TreeViewProps = {
+ data: Node[];
+ initialCollapsedIds?: string[];
+} & CommonProps;
+
+export type NodeLIneProps = {
allowDrop: boolean;
isTop?: boolean;
-} & Pick, 'node' | 'onDrop'>;
+} & Pick, 'node' | 'onDrop'>;
diff --git a/packages/component/src/ui/tree-view/utils.ts b/packages/component/src/ui/tree-view/utils.ts
new file mode 100644
index 0000000000..869ad1aea3
--- /dev/null
+++ b/packages/component/src/ui/tree-view/utils.ts
@@ -0,0 +1,18 @@
+import type { Node } from '@affine/component';
+
+export function flattenIds(arr: Node[]): string[] {
+ const result: string[] = [];
+
+ function flatten(arr: Node[]) {
+ for (let i = 0, len = arr.length; i < len; i++) {
+ const item = arr[i];
+ result.push(item.id);
+ if (Array.isArray(item.children)) {
+ flatten(item.children);
+ }
+ }
+ }
+
+ flatten(arr);
+ return result;
+}
diff --git a/packages/i18n/src/resources/en.json b/packages/i18n/src/resources/en.json
index c904129e23..534e33d59a 100644
--- a/packages/i18n/src/resources/en.json
+++ b/packages/i18n/src/resources/en.json
@@ -197,5 +197,8 @@
"Pivots": "Pivots",
"Add a subpage inside": "Add a subpage inside",
"Rename": "Rename",
- "Move to": "Move to"
+ "Move to": "Move to",
+ "Move page to...": "Move page to...",
+ "Remove from Pivots": "Remove from Pivots",
+ "RFP": "Pages can be freely added/removed from pivots, remaining accessible from \"All Pages\"."
}