Allow for custom renderers

modules/react-arborist/src/components/default-cursor.tsx

@@ -1,5 +1,5 @@
 import React, { CSSProperties } from "react";
-import { CursorProps } from "../types/renderers.js";
+import { CursorRendererProps } from "../types/renderers.js";
 
 const placeholderStyle = {
   display: "flex",
@@ -21,11 +21,11 @@ const circleStyle = {
   borderRadius: "50%",
 };
 
-export const DefaultCursor = React.memo(function DefaultCursor({
+export const DefaultCursorRenderer = React.memo(function DefaultCursorRenderer({
   top,
   left,
   indent,
-}: CursorProps) {
+}: CursorRendererProps) {
   const style: CSSProperties = {
     position: "absolute",
     pointerEvents: "none",

modules/react-arborist/src/components/tree-view.tsx

@@ -1,16 +1,10 @@
-import React, {
-  HTMLAttributes,
-  ReactElement,
-  forwardRef,
-  useContext,
-  useRef,
-} from "react";
+import React, { forwardRef, useContext, useRef } from "react";
 import { TreeController } from "../controllers/tree-controller.js";
 import { TreeViewProps } from "../types/tree-view-props.js";
 import { FixedSizeList } from "react-window";
 import { NodeController } from "../controllers/node-controller.js";
 import { createRowAttributes } from "../row/attributes.js";
-import { DefaultCursor } from "./default-cursor.js";
+import { DefaultCursorRenderer } from "./default-cursor.js";
 import { useCursorProps } from "../cursor/use-cursor-props.js";
 import { useCursorContainerStyle } from "../cursor/use-cursor-container-style.js";
 import { useListInnerStyle } from "../list/use-list-inner-style.js";
@@ -20,6 +14,7 @@ import { useDefaultProps } from "../props/use-default-props.js";
 import { useRowFocus } from "../focus/use-row-focus.js";
 import { createTreeViewAttributes } from "../tree-view/attributes.js";
 import { useTreeDrop } from "../dnd/use-tree-drop.js";
+import { NodeRendererProps, RowRendererProps } from "../types/renderers.js";
 
 export function TreeView<T>(props: Partial<TreeViewProps<T>>) {
   const filledProps = useDefaultProps(props);
@@ -115,7 +110,7 @@ function CursorContainer() {
   if (!props) return null;
   return (
     <div style={style}>
-      <DefaultCursor {...props} />
+      <DefaultCursorRenderer {...props} />
     </div>
   );
 }
@@ -126,6 +121,7 @@ function RowContainer<T>(props: { style: React.CSSProperties; index: number }) {
   const attrs = createRowAttributes(tree, node, props.style);
   const ref = useRef<any>();
   const dropProps = useNodeDrop(node, ref);
+  const RowRenderer = tree.props.renderRow;
   useRowFocus(node, ref);
 
   return (
@@ -135,12 +131,7 @@ function RowContainer<T>(props: { style: React.CSSProperties; index: number }) {
   );
 }
 
-export function RowRenderer<T>(props: {
-  node: NodeController<T>;
-  attrs: HTMLAttributes<any>;
-  children: ReactElement;
-  innerRef: any;
-}) {
+export function DefaultRowRenderer<T>(props: RowRendererProps<T>) {
   return (
     <div
       {...props.attrs}
@@ -157,14 +148,19 @@ function NodeContainer<T>(props: { node: NodeController<T> }) {
   const indent = node.tree.indent * node.level;
   const style = { paddingInlineStart: indent + 10 };
   const dragProps = useNodeDrag(node);
+  const NodeRenderer = node.tree.props.renderNode;
 
-  return <NodeRenderer attrs={{ style, ...dragProps }} node={node} />;
+  return (
+    <NodeRenderer
+      attrs={{ style, ...dragProps }}
+      node={node}
+      style={style}
+      tree={node.tree}
+    />
+  );
 }
 
-function NodeRenderer<T>(props: {
-  attrs: HTMLAttributes<any>;
-  node: NodeController<T>;
-}) {
+export function DefaultNodeRenderer<T>(props: NodeRendererProps<T>) {
   const { node, attrs } = props;
 
   function onSubmit(e: any) {

modules/react-arborist/src/props/use-default-props.ts

@@ -1,4 +1,9 @@
 import * as defaultCommands from "../commands/default-commands.js";
+import { DefaultCursorRenderer } from "../components/default-cursor.js";
+import {
+  DefaultNodeRenderer,
+  DefaultRowRenderer,
+} from "../components/tree-view.js";
 import { useCursor } from "../cursor/use-cursor.js";
 import { useDnd } from "../dnd/use-dnd.js";
 import { useEdit } from "../edit/use-edit.js";
@@ -39,6 +44,11 @@ export function useDefaultProps<T>(
     overscanCount: props.overscanCount ?? 1,
     direction: "ltr",
 
+    /* Renderers */
+    renderRow: props.renderRow ?? DefaultRowRenderer,
+    renderNode: props.renderNode ?? DefaultNodeRenderer,
+    renderCursor: props.renderCursor ?? DefaultCursorRenderer,
+
     /* Callbacks */
     onScroll: props.onScroll ?? (() => {}),
 

modules/react-arborist/src/types/renderers.ts

@@ -1,9 +1,15 @@
-import { CSSProperties, HTMLAttributes, ReactElement } from "react";
+import {
+  CSSProperties,
+  HTMLAttributes,
+  MutableRefObject,
+  ReactElement,
+} from "react";
 import { TreeController } from "../controllers/tree-controller.js";
 import { NodeController } from "../controllers/node-controller.js";
 import { XY } from "../dnd/types.js";
 
 export type NodeRendererProps<T> = {
+  attrs: HTMLAttributes<any>;
   style: CSSProperties;
   node: NodeController<T>;
   tree: TreeController<T>;
@@ -13,7 +19,7 @@ export type NodeRendererProps<T> = {
 
 export type RowRendererProps<T> = {
   node: NodeController<T>;
-  innerRef: (el: HTMLDivElement | null) => void;
+  innerRef: MutableRefObject<any>;
   attrs: HTMLAttributes<any>;
   children: ReactElement;
 };
@@ -26,7 +32,7 @@ export type DragPreviewProps = {
   isDragging: boolean;
 };
 
-export type CursorProps = {
+export type CursorRendererProps = {
   top: number;
   left: number;
   indent: number;

modules/react-arborist/src/types/tree-props.ts

@@ -20,7 +20,7 @@ export interface TreeProps<T> {
   children?: ElementType<renderers.NodeRendererProps<T>>;
   renderRow?: ElementType<renderers.RowRendererProps<T>>;
   renderDragPreview?: ElementType<renderers.DragPreviewProps>;
-  renderCursor?: ElementType<renderers.CursorProps>;
+  renderCursor?: ElementType<renderers.CursorRendererProps>;
   renderContainer?: ElementType<{}>;
 
   /* Sizes */

modules/react-arborist/src/types/tree-view-props.ts

@@ -9,6 +9,11 @@ import { VisiblePartialController } from "../visible/types.js";
 import { ShortcutAttrs } from "../shortcuts/types.js";
 import { CommandObject } from "../commands/types.js";
 import { ListOnScrollProps } from "react-window";
+import {
+  CursorRendererProps,
+  NodeRendererProps,
+  RowRendererProps,
+} from "./renderers.js";
 
 export type TreeViewProps<T> = {
   /* Partial Controllers */
@@ -46,4 +51,8 @@ export type TreeViewProps<T> = {
   /* Configurations */
   openByDefault: boolean;
   disableDrop?: string | boolean | DisableDropCheck<T>;
+
+  renderRow: (props: RowRendererProps<T>) => any;
+  renderNode: (props: NodeRendererProps<T>) => any;
+  renderCursor: (props: CursorRendererProps) => any;
 };