| 631 | } |
| 632 | |
| 633 | function createTreeProps<T extends { id: string; children?: T[] }>( |
| 634 | dispatch: Dispatch<TreeAction> |
| 635 | ): () => React.HTMLAttributes<HTMLElement> { |
| 636 | return () => ({ |
| 637 | role: "tree", |
| 638 | tabIndex: -1, |
| 639 | onKeyDown: (e) => { |
| 640 | if (e.defaultPrevented) { |
| 641 | return; // Do nothing if the event was already processed |
| 642 | } |
| 643 | |
| 644 | switch (e.key) { |
| 645 | case "Home": { |
| 646 | dispatch({ type: "MOVE_TO_TOP", source: e.nativeEvent }); |
| 647 | e.preventDefault(); |
| 648 | break; |
| 649 | } |
| 650 | case "End": { |
| 651 | dispatch({ type: "MOVE_TO_BOTTOM", source: e.nativeEvent }); |
| 652 | e.preventDefault(); |
| 653 | break; |
| 654 | } |
| 655 | case "Down": |
| 656 | case "ArrowDown": { |
| 657 | dispatch({ type: "MOVE_DOWN", source: e.nativeEvent }); |
| 658 | e.preventDefault(); |
| 659 | break; |
| 660 | } |
| 661 | case "Up": |
| 662 | case "ArrowUp": { |
| 663 | dispatch({ type: "MOVE_UP", source: e.nativeEvent }); |
| 664 | e.preventDefault(); |
| 665 | break; |
| 666 | } |
| 667 | case "Left": |
| 668 | case "ArrowLeft": { |
| 669 | if (e.altKey) { |
| 670 | dispatch({ type: "COLLAPSE_ALL_NODES" }); |
| 671 | } else { |
| 672 | dispatch({ |
| 673 | type: "MOVE_LEFT", |
| 674 | source: e.nativeEvent, |
| 675 | }); |
| 676 | } |
| 677 | e.preventDefault(); |
| 678 | |
| 679 | break; |
| 680 | } |
| 681 | case "Right": |
| 682 | case "ArrowRight": { |
| 683 | dispatch({ |
| 684 | type: "MOVE_RIGHT", |
| 685 | source: e.nativeEvent, |
| 686 | }); |
| 687 | e.preventDefault(); |
| 688 | |
| 689 | break; |
| 690 | } |