feat(tree): replace sidebar tree (react-aborist) with custom tree implementation (#2199)
* feat(tree): replace react-arborist with custom tree implementation * feat(tree): keyboard arrow navigation between rows * feat(emoji-picker): focus search input on open * refactor(emoji): switch to @slidoapp/emoji-mart fork for accessibility * feat(tree): Home/End and typeahead keyboard navigation * feat(tree): roving tabindex and * to expand sibling subtrees * feat(tree): Space activation and ARIA refinements * fix(tree): move treeitem role to focusable row + aria-current
This commit is contained in:
Philip Okugbe
GitHub
@@ -0,0 +1,329 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { treeModel } from './tree-model';
|
||||
import type { TreeNode } from './tree-model.types';
|
||||
|
||||
type N = TreeNode<{ name: string }>;
|
||||
|
||||
const fixture: N[] = [
|
||||
{
|
||||
id: 'a',
|
||||
name: 'A',
|
||||
children: [
|
||||
{ id: 'a1', name: 'A1', children: [{ id: 'a1a', name: 'A1a' }] },
|
||||
{ id: 'a2', name: 'A2' },
|
||||
],
|
||||
},
|
||||
{ id: 'b', name: 'B' },
|
||||
];
|
||||
|
||||
describe('treeModel.find', () => {
|
||||
it('finds a root node', () => {
|
||||
expect(treeModel.find(fixture, 'a')?.name).toBe('A');
|
||||
});
|
||||
it('finds a deeply nested node', () => {
|
||||
expect(treeModel.find(fixture, 'a1a')?.name).toBe('A1a');
|
||||
});
|
||||
it('returns null for unknown id', () => {
|
||||
expect(treeModel.find(fixture, 'zzz')).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('treeModel.path', () => {
|
||||
it('returns root-to-leaf path for nested id', () => {
|
||||
const p = treeModel.path(fixture, 'a1a');
|
||||
expect(p?.map((n) => n.id)).toEqual(['a', 'a1', 'a1a']);
|
||||
});
|
||||
it('returns [node] for root-level id', () => {
|
||||
expect(treeModel.path(fixture, 'b')?.map((n) => n.id)).toEqual(['b']);
|
||||
});
|
||||
it('returns null for unknown id', () => {
|
||||
expect(treeModel.path(fixture, 'zzz')).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('treeModel.siblingsOf', () => {
|
||||
it('returns siblings + parent + index for a child', () => {
|
||||
const info = treeModel.siblingsOf(fixture, 'a2');
|
||||
expect(info?.parentId).toBe('a');
|
||||
expect(info?.siblings.map((n) => n.id)).toEqual(['a1', 'a2']);
|
||||
expect(info?.index).toBe(1);
|
||||
});
|
||||
it('returns parentId null + root siblings for a root id', () => {
|
||||
const info = treeModel.siblingsOf(fixture, 'b');
|
||||
expect(info?.parentId).toBeNull();
|
||||
expect(info?.siblings.map((n) => n.id)).toEqual(['a', 'b']);
|
||||
expect(info?.index).toBe(1);
|
||||
});
|
||||
it('returns null for unknown id', () => {
|
||||
expect(treeModel.siblingsOf(fixture, 'zzz')).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('treeModel.isDescendant', () => {
|
||||
it('returns true when descendantId is nested under ancestorId', () => {
|
||||
expect(treeModel.isDescendant(fixture, 'a', 'a1a')).toBe(true);
|
||||
});
|
||||
it('returns false when ids are siblings', () => {
|
||||
expect(treeModel.isDescendant(fixture, 'a1', 'a2')).toBe(false);
|
||||
});
|
||||
it('returns false when ancestorId is the same as descendantId', () => {
|
||||
expect(treeModel.isDescendant(fixture, 'a', 'a')).toBe(false);
|
||||
});
|
||||
it('returns false for unknown ids', () => {
|
||||
expect(treeModel.isDescendant(fixture, 'zzz', 'a')).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('treeModel.visible', () => {
|
||||
it('returns only root nodes when no openIds', () => {
|
||||
const v = treeModel.visible(fixture, new Set());
|
||||
expect(v.map((n) => n.id)).toEqual(['a', 'b']);
|
||||
});
|
||||
it('includes children of open ids in DFS order', () => {
|
||||
const v = treeModel.visible(fixture, new Set(['a']));
|
||||
expect(v.map((n) => n.id)).toEqual(['a', 'a1', 'a2', 'b']);
|
||||
});
|
||||
it('recursively descends through chains of open ids', () => {
|
||||
const v = treeModel.visible(fixture, new Set(['a', 'a1']));
|
||||
expect(v.map((n) => n.id)).toEqual(['a', 'a1', 'a1a', 'a2', 'b']);
|
||||
});
|
||||
it('ignores openIds that are not in the tree', () => {
|
||||
const v = treeModel.visible(fixture, new Set(['ghost']));
|
||||
expect(v.map((n) => n.id)).toEqual(['a', 'b']);
|
||||
});
|
||||
});
|
||||
|
||||
describe('treeModel.insert', () => {
|
||||
const leaf = (id: string): N => ({ id, name: id.toUpperCase() });
|
||||
|
||||
it('inserts at end when index is undefined', () => {
|
||||
const t = treeModel.insert(fixture, 'a', leaf('a3'));
|
||||
expect(treeModel.siblingsOf(t, 'a3')?.siblings.map((n) => n.id)).toEqual([
|
||||
'a1', 'a2', 'a3',
|
||||
]);
|
||||
});
|
||||
it('inserts at index 0', () => {
|
||||
const t = treeModel.insert(fixture, 'a', leaf('a0'), 0);
|
||||
expect(treeModel.siblingsOf(t, 'a0')?.siblings.map((n) => n.id)).toEqual([
|
||||
'a0', 'a1', 'a2',
|
||||
]);
|
||||
});
|
||||
it('inserts in the middle', () => {
|
||||
const t = treeModel.insert(fixture, 'a', leaf('a1half'), 1);
|
||||
expect(
|
||||
treeModel.siblingsOf(t, 'a1half')?.siblings.map((n) => n.id),
|
||||
).toEqual(['a1', 'a1half', 'a2']);
|
||||
});
|
||||
it('inserts at root when parentId is null', () => {
|
||||
const t = treeModel.insert(fixture, null, leaf('c'));
|
||||
expect(t.map((n) => n.id)).toEqual(['a', 'b', 'c']);
|
||||
});
|
||||
it('returns same array reference for unknown parentId', () => {
|
||||
const t = treeModel.insert(fixture, 'ghost', leaf('zz'));
|
||||
expect(t).toBe(fixture);
|
||||
});
|
||||
it('initializes children array when parent had no children', () => {
|
||||
const t = treeModel.insert(fixture, 'b', leaf('b1'));
|
||||
expect(treeModel.find(t, 'b')?.children?.map((n) => n.id)).toEqual(['b1']);
|
||||
});
|
||||
});
|
||||
|
||||
describe('treeModel.remove', () => {
|
||||
it('removes a leaf', () => {
|
||||
const t = treeModel.remove(fixture, 'a2');
|
||||
expect(treeModel.find(t, 'a2')).toBeNull();
|
||||
});
|
||||
it('removes a subtree', () => {
|
||||
const t = treeModel.remove(fixture, 'a1');
|
||||
expect(treeModel.find(t, 'a1')).toBeNull();
|
||||
expect(treeModel.find(t, 'a1a')).toBeNull();
|
||||
});
|
||||
it('removes a root node', () => {
|
||||
const t = treeModel.remove(fixture, 'b');
|
||||
expect(t.map((n) => n.id)).toEqual(['a']);
|
||||
});
|
||||
it('returns same array reference for unknown id', () => {
|
||||
expect(treeModel.remove(fixture, 'ghost')).toBe(fixture);
|
||||
});
|
||||
});
|
||||
|
||||
describe('treeModel.update', () => {
|
||||
it('shallow-merges a patch on the matching node', () => {
|
||||
const t = treeModel.update(fixture, 'a1', { name: 'A1-renamed' });
|
||||
expect(treeModel.find(t, 'a1')?.name).toBe('A1-renamed');
|
||||
});
|
||||
it('returns same array reference for unknown id', () => {
|
||||
expect(treeModel.update(fixture, 'ghost', { name: 'x' })).toBe(fixture);
|
||||
});
|
||||
it("preserves children when patching parent's own fields", () => {
|
||||
const t = treeModel.update(fixture, 'a', { name: 'A-renamed' });
|
||||
expect(treeModel.find(t, 'a')?.children?.map((n) => n.id)).toEqual([
|
||||
'a1', 'a2',
|
||||
]);
|
||||
});
|
||||
it('preserves reference identity of unrelated subtrees', () => {
|
||||
const t = treeModel.update(fixture, 'a1', { name: 'X' });
|
||||
expect(t[1]).toBe(fixture[1]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('treeModel.appendChildren', () => {
|
||||
const kid = (id: string): N => ({ id, name: id });
|
||||
|
||||
it('appends to existing children', () => {
|
||||
const t = treeModel.appendChildren(fixture, 'a', [kid('a3'), kid('a4')]);
|
||||
expect(treeModel.find(t, 'a')?.children?.map((n) => n.id)).toEqual([
|
||||
'a1', 'a2', 'a3', 'a4',
|
||||
]);
|
||||
});
|
||||
it('initializes children when parent had none', () => {
|
||||
const t = treeModel.appendChildren(fixture, 'b', [kid('b1')]);
|
||||
expect(treeModel.find(t, 'b')?.children?.map((n) => n.id)).toEqual(['b1']);
|
||||
});
|
||||
it('returns same array reference for unknown parentId', () => {
|
||||
expect(treeModel.appendChildren(fixture, 'ghost', [kid('zz')])).toBe(
|
||||
fixture,
|
||||
);
|
||||
});
|
||||
|
||||
// Regression: lazy-load + auto-expand can race and call appendChildren with
|
||||
// children that overlap what's already there. React then crashes on duplicate
|
||||
// keys. Defensive dedup at the model level.
|
||||
it('dedups against existing children by id', () => {
|
||||
const t1 = treeModel.appendChildren(fixture, 'a', [
|
||||
kid('a3'),
|
||||
kid('a4'),
|
||||
]);
|
||||
const t2 = treeModel.appendChildren(t1, 'a', [
|
||||
kid('a3'),
|
||||
kid('a4'),
|
||||
kid('a5'),
|
||||
]);
|
||||
expect(treeModel.find(t2, 'a')?.children?.map((n) => n.id)).toEqual([
|
||||
'a1', 'a2', 'a3', 'a4', 'a5',
|
||||
]);
|
||||
});
|
||||
|
||||
it('returns same array reference when every child is a duplicate', () => {
|
||||
const t1 = treeModel.appendChildren(fixture, 'a', [kid('a3')]);
|
||||
const t2 = treeModel.appendChildren(t1, 'a', [kid('a3')]);
|
||||
expect(t2).toBe(t1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('treeModel.place', () => {
|
||||
it('moves a node to a new parent at a given index', () => {
|
||||
const t = treeModel.place(fixture, 'a2', { parentId: 'b', index: 0 });
|
||||
expect(treeModel.find(t, 'a')?.children?.map((n) => n.id)).toEqual(['a1']);
|
||||
expect(treeModel.find(t, 'b')?.children?.map((n) => n.id)).toEqual(['a2']);
|
||||
});
|
||||
it('moves a node to root', () => {
|
||||
const t = treeModel.place(fixture, 'a1', { parentId: null, index: 0 });
|
||||
expect(t.map((n) => n.id)).toEqual(['a1', 'a', 'b']);
|
||||
expect(treeModel.find(t, 'a')?.children?.map((n) => n.id)).toEqual(['a2']);
|
||||
});
|
||||
it('reorders within the same parent', () => {
|
||||
const t = treeModel.place(fixture, 'a2', { parentId: 'a', index: 0 });
|
||||
expect(treeModel.find(t, 'a')?.children?.map((n) => n.id)).toEqual([
|
||||
'a2', 'a1',
|
||||
]);
|
||||
});
|
||||
it('returns same array reference for unknown source', () => {
|
||||
expect(
|
||||
treeModel.place(fixture, 'ghost', { parentId: 'a', index: 0 }),
|
||||
).toBe(fixture);
|
||||
});
|
||||
it('returns same array reference for unknown destination parent', () => {
|
||||
expect(
|
||||
treeModel.place(fixture, 'a1', { parentId: 'ghost', index: 0 }),
|
||||
).toBe(fixture);
|
||||
});
|
||||
});
|
||||
|
||||
describe('treeModel.move', () => {
|
||||
it('reorder-before within same parent: moves source to target index', () => {
|
||||
const { tree: t, result } = treeModel.move(fixture, 'a2', {
|
||||
kind: 'reorder-before',
|
||||
targetId: 'a1',
|
||||
});
|
||||
expect(treeModel.find(t, 'a')?.children?.map((n) => n.id)).toEqual([
|
||||
'a2', 'a1',
|
||||
]);
|
||||
expect(result).toEqual({ parentId: 'a', index: 0 });
|
||||
});
|
||||
it('reorder-after within same parent', () => {
|
||||
const { tree: t, result } = treeModel.move(fixture, 'a1', {
|
||||
kind: 'reorder-after',
|
||||
targetId: 'a2',
|
||||
});
|
||||
expect(treeModel.find(t, 'a')?.children?.map((n) => n.id)).toEqual([
|
||||
'a2', 'a1',
|
||||
]);
|
||||
expect(result).toEqual({ parentId: 'a', index: 1 });
|
||||
});
|
||||
it('make-child appends at end of target children', () => {
|
||||
const { tree: t, result } = treeModel.move(fixture, 'b', {
|
||||
kind: 'make-child',
|
||||
targetId: 'a',
|
||||
});
|
||||
expect(treeModel.find(t, 'a')?.children?.map((n) => n.id)).toEqual([
|
||||
'a1', 'a2', 'b',
|
||||
]);
|
||||
expect(result).toEqual({ parentId: 'a', index: 2 });
|
||||
});
|
||||
it('make-child initializes children when target had none', () => {
|
||||
const { tree: t, result } = treeModel.move(fixture, 'a2', {
|
||||
kind: 'make-child',
|
||||
targetId: 'b',
|
||||
});
|
||||
expect(treeModel.find(t, 'b')?.children?.map((n) => n.id)).toEqual(['a2']);
|
||||
expect(result).toEqual({ parentId: 'b', index: 0 });
|
||||
});
|
||||
it('reorder-before across parents', () => {
|
||||
const { tree: t, result } = treeModel.move(fixture, 'b', {
|
||||
kind: 'reorder-before',
|
||||
targetId: 'a1',
|
||||
});
|
||||
expect(treeModel.find(t, 'a')?.children?.map((n) => n.id)).toEqual([
|
||||
'b', 'a1', 'a2',
|
||||
]);
|
||||
expect(result).toEqual({ parentId: 'a', index: 0 });
|
||||
});
|
||||
it('reorder-after to root', () => {
|
||||
const { tree: t, result } = treeModel.move(fixture, 'a1', {
|
||||
kind: 'reorder-after',
|
||||
targetId: 'a',
|
||||
});
|
||||
expect(t.map((n) => n.id)).toEqual(['a', 'a1', 'b']);
|
||||
expect(treeModel.find(t, 'a')?.children?.map((n) => n.id)).toEqual(['a2']);
|
||||
expect(result).toEqual({ parentId: null, index: 1 });
|
||||
});
|
||||
it('no-op when sourceId === targetId', () => {
|
||||
const out = treeModel.move(fixture, 'a', {
|
||||
kind: 'make-child',
|
||||
targetId: 'a',
|
||||
});
|
||||
expect(out.tree).toBe(fixture);
|
||||
});
|
||||
it('no-op when target is descendant of source', () => {
|
||||
const out = treeModel.move(fixture, 'a', {
|
||||
kind: 'make-child',
|
||||
targetId: 'a1a',
|
||||
});
|
||||
expect(out.tree).toBe(fixture);
|
||||
});
|
||||
it('no-op when source is unknown', () => {
|
||||
const out = treeModel.move(fixture, 'ghost', {
|
||||
kind: 'reorder-before',
|
||||
targetId: 'a',
|
||||
});
|
||||
expect(out.tree).toBe(fixture);
|
||||
});
|
||||
it('no-op when target is unknown', () => {
|
||||
const out = treeModel.move(fixture, 'a1', {
|
||||
kind: 'reorder-before',
|
||||
targetId: 'ghost',
|
||||
});
|
||||
expect(out.tree).toBe(fixture);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,222 @@
|
||||
import type { TreeNode, SiblingsInfo } from './tree-model.types';
|
||||
|
||||
function findInternal<T extends object>(
|
||||
nodes: TreeNode<T>[],
|
||||
id: string,
|
||||
): { parents: TreeNode<T>[]; node: TreeNode<T> } | null {
|
||||
for (const node of nodes) {
|
||||
if (node.id === id) return { parents: [], node };
|
||||
if (node.children) {
|
||||
const inner = findInternal(node.children, id);
|
||||
if (inner) return { parents: [node, ...inner.parents], node: inner.node };
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export const treeModel = {
|
||||
find<T extends object>(tree: TreeNode<T>[], id: string): TreeNode<T> | null {
|
||||
return findInternal(tree, id)?.node ?? null;
|
||||
},
|
||||
|
||||
path<T extends object>(tree: TreeNode<T>[], id: string): TreeNode<T>[] | null {
|
||||
const found = findInternal(tree, id);
|
||||
if (!found) return null;
|
||||
return [...found.parents, found.node];
|
||||
},
|
||||
|
||||
siblingsOf<T extends object>(
|
||||
tree: TreeNode<T>[],
|
||||
id: string,
|
||||
): SiblingsInfo<T> | null {
|
||||
const found = findInternal(tree, id);
|
||||
if (!found) return null;
|
||||
const parent = found.parents[found.parents.length - 1];
|
||||
const siblings = parent ? parent.children! : tree;
|
||||
return {
|
||||
parentId: parent?.id ?? null,
|
||||
siblings,
|
||||
index: siblings.findIndex((n) => n.id === id),
|
||||
};
|
||||
},
|
||||
|
||||
isDescendant<T extends object>(
|
||||
tree: TreeNode<T>[],
|
||||
ancestorId: string,
|
||||
descendantId: string,
|
||||
): boolean {
|
||||
if (ancestorId === descendantId) return false;
|
||||
const ancestor = treeModel.find(tree, ancestorId);
|
||||
if (!ancestor?.children) return false;
|
||||
return findInternal(ancestor.children, descendantId) !== null;
|
||||
},
|
||||
|
||||
visible<T extends object>(
|
||||
tree: TreeNode<T>[],
|
||||
openIds: ReadonlySet<string>,
|
||||
): TreeNode<T>[] {
|
||||
const out: TreeNode<T>[] = [];
|
||||
const walk = (nodes: TreeNode<T>[]) => {
|
||||
for (const node of nodes) {
|
||||
out.push(node);
|
||||
if (openIds.has(node.id) && node.children?.length) walk(node.children);
|
||||
}
|
||||
};
|
||||
walk(tree);
|
||||
return out;
|
||||
},
|
||||
|
||||
insert<T extends object>(
|
||||
tree: TreeNode<T>[],
|
||||
parentId: string | null,
|
||||
node: TreeNode<T>,
|
||||
index?: number,
|
||||
): TreeNode<T>[] {
|
||||
if (parentId === null) {
|
||||
const idx = index ?? tree.length;
|
||||
return [...tree.slice(0, idx), node, ...tree.slice(idx)];
|
||||
}
|
||||
let touched = false;
|
||||
const walk = (nodes: TreeNode<T>[]): TreeNode<T>[] =>
|
||||
nodes.map((n) => {
|
||||
if (n.id === parentId) {
|
||||
touched = true;
|
||||
const kids = n.children ?? [];
|
||||
const idx = index ?? kids.length;
|
||||
return {
|
||||
...n,
|
||||
children: [...kids.slice(0, idx), node, ...kids.slice(idx)],
|
||||
};
|
||||
}
|
||||
if (n.children) {
|
||||
const next = walk(n.children);
|
||||
if (next !== n.children) return { ...n, children: next };
|
||||
}
|
||||
return n;
|
||||
});
|
||||
const out = walk(tree);
|
||||
return touched ? out : tree;
|
||||
},
|
||||
|
||||
remove<T extends object>(tree: TreeNode<T>[], id: string): TreeNode<T>[] {
|
||||
let touched = false;
|
||||
const walk = (nodes: TreeNode<T>[]): TreeNode<T>[] => {
|
||||
const filtered = nodes.filter((n) => {
|
||||
if (n.id === id) {
|
||||
touched = true;
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
return filtered.map((n) => {
|
||||
if (n.children) {
|
||||
const next = walk(n.children);
|
||||
if (next !== n.children) return { ...n, children: next };
|
||||
}
|
||||
return n;
|
||||
});
|
||||
};
|
||||
const out = walk(tree);
|
||||
return touched ? out : tree;
|
||||
},
|
||||
|
||||
// `patch` excludes `id` (immutable) and `children` (use insert / remove /
|
||||
// appendChildren for structural changes — otherwise referential identity of
|
||||
// unrelated subtrees gets blown away).
|
||||
update<T extends object>(
|
||||
tree: TreeNode<T>[],
|
||||
id: string,
|
||||
patch: Omit<Partial<T>, "id" | "children">,
|
||||
): TreeNode<T>[] {
|
||||
let touched = false;
|
||||
const walk = (nodes: TreeNode<T>[]): TreeNode<T>[] =>
|
||||
nodes.map((n) => {
|
||||
if (n.id === id) {
|
||||
touched = true;
|
||||
return { ...n, ...patch };
|
||||
}
|
||||
if (n.children) {
|
||||
const next = walk(n.children);
|
||||
if (next !== n.children) return { ...n, children: next };
|
||||
}
|
||||
return n;
|
||||
});
|
||||
const out = walk(tree);
|
||||
return touched ? out : tree;
|
||||
},
|
||||
|
||||
appendChildren<T extends object>(
|
||||
tree: TreeNode<T>[],
|
||||
parentId: string,
|
||||
children: TreeNode<T>[],
|
||||
): TreeNode<T>[] {
|
||||
let touched = false;
|
||||
const walk = (nodes: TreeNode<T>[]): TreeNode<T>[] =>
|
||||
nodes.map((n) => {
|
||||
if (n.id === parentId) {
|
||||
const existing = n.children ?? [];
|
||||
// Dedup against existing ids — auto-expand + manual toggle can race
|
||||
// and produce overlapping fetches; we don't want React to see two
|
||||
// children with the same key.
|
||||
const existingIds = new Set(existing.map((c) => c.id));
|
||||
const fresh = children.filter((c) => !existingIds.has(c.id));
|
||||
if (fresh.length === 0) return n;
|
||||
touched = true;
|
||||
return { ...n, children: [...existing, ...fresh] };
|
||||
}
|
||||
if (n.children) {
|
||||
const next = walk(n.children);
|
||||
if (next !== n.children) return { ...n, children: next };
|
||||
}
|
||||
return n;
|
||||
});
|
||||
const out = walk(tree);
|
||||
return touched ? out : tree;
|
||||
},
|
||||
|
||||
place<T extends object>(
|
||||
tree: TreeNode<T>[],
|
||||
sourceId: string,
|
||||
to: { parentId: string | null; index: number },
|
||||
): TreeNode<T>[] {
|
||||
const source = treeModel.find(tree, sourceId);
|
||||
if (!source) return tree;
|
||||
if (to.parentId !== null && !treeModel.find(tree, to.parentId)) return tree;
|
||||
const removed = treeModel.remove(tree, sourceId);
|
||||
return treeModel.insert(removed, to.parentId, source, to.index);
|
||||
},
|
||||
|
||||
move<T extends object>(
|
||||
tree: TreeNode<T>[],
|
||||
sourceId: string,
|
||||
op: import('./tree-model.types').DropOp,
|
||||
): { tree: TreeNode<T>[]; result: import('./tree-model.types').DropResult } {
|
||||
if (sourceId === op.targetId) return { tree, result: { parentId: null, index: 0 } };
|
||||
if (!treeModel.find(tree, sourceId) || !treeModel.find(tree, op.targetId)) {
|
||||
return { tree, result: { parentId: null, index: 0 } };
|
||||
}
|
||||
if (treeModel.isDescendant(tree, sourceId, op.targetId)) {
|
||||
return { tree, result: { parentId: null, index: 0 } };
|
||||
}
|
||||
|
||||
let parentId: string | null;
|
||||
let index: number;
|
||||
|
||||
if (op.kind === 'make-child') {
|
||||
parentId = op.targetId;
|
||||
const target = treeModel.find(tree, op.targetId)!;
|
||||
index = target.children?.length ?? 0;
|
||||
} else {
|
||||
const info = treeModel.siblingsOf(tree, op.targetId)!;
|
||||
parentId = info.parentId;
|
||||
const sourceInfo = treeModel.siblingsOf(tree, sourceId)!;
|
||||
const sameParent = sourceInfo.parentId === parentId;
|
||||
const adjust =
|
||||
sameParent && sourceInfo.index < info.index ? -1 : 0;
|
||||
index = info.index + adjust + (op.kind === 'reorder-after' ? 1 : 0);
|
||||
}
|
||||
|
||||
const next = treeModel.place(tree, sourceId, { parentId, index });
|
||||
return { tree: next, result: { parentId, index } };
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,20 @@
|
||||
export type TreeNode<T extends object = object> = T & {
|
||||
id: string;
|
||||
children?: TreeNode<T>[];
|
||||
};
|
||||
|
||||
export type DropOp =
|
||||
| { kind: 'reorder-before'; targetId: string }
|
||||
| { kind: 'reorder-after'; targetId: string }
|
||||
| { kind: 'make-child'; targetId: string };
|
||||
|
||||
export type DropResult = {
|
||||
parentId: string | null;
|
||||
index: number;
|
||||
};
|
||||
|
||||
export type SiblingsInfo<T extends object> = {
|
||||
parentId: string | null;
|
||||
siblings: TreeNode<T>[];
|
||||
index: number;
|
||||
};
|
||||
Reference in New Issue
Block a user