feat: renderTree add options listClassName, listInnerClassName

Author: phphe

docs/v1/api.md

@@ -66,7 +66,7 @@ The main function of this library. React hook. The arguments are as follows:
 The return of `useHeTree` is an object, including some states and methods. **Note**, this object will change every time. Do not rely on this object, but you can rely on the properties of this object. The properties are as follows:
 | Name | Type | Description |
 | ------------------------- | ------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------|
-|renderTree<a id="rendertree"/>|`(options?: { className?: string, style?: React.CSSProperties }): ReactNode`|Tree render. Options can be passed in `className` and `style` to control the style of the root element.|
+|renderTree<a id="rendertree"/>|`(options?: { className?: string, style?: React.CSSProperties, listClassName?: string, listInnerClassName?: string }): ReactNode`|Tree render. Options can be passed in `className` and `style` to control the style of the root element. `listClassName` is for virtual list root element, `listInnerClassName` is for virtual list inner element.|
 |getStat<a id="getstat"/>|`(idOrNodeOrStat)=>stat`|Get stat by id, or node data, or stat object.|
 |allIds<a id="allids"/>|Array|The ids of all nodes.|
 |rootIds<a id="rootids"/>|Array|The ids of all root nodes|

lib/HeTree.tsx

@@ -658,7 +658,7 @@ export function useHeTree<T extends Record<string, any>>(
   const { visibleIds, attrsList, onDragOverRoot, onDropToRoot, onDragEndOnRoot, scrollToNode } = cacheForVisible
   const persistentIndices = useMemo(() => draggingStat ? [visibleIds.indexOf(draggingStat.id)] : [], [draggingStat, visibleIds]);
   // render
-  const renderTree = (options?: { className?: string, style?: React.CSSProperties }): ReactNode => {
+  const renderTree = (options?: { className?: string, style?: React.CSSProperties, listClassName?: string, listInnerClassName?: string }): ReactNode => {
     let renderNodeBox = props.renderNodeBox!
     if (!renderNodeBox) {
       const placeholder = <div className="he-tree-drag-placeholder" style={{ minHeight: '20px', border: '1px dashed blue' }}></div>
@@ -668,7 +668,7 @@ export function useHeTree<T extends Record<string, any>>(
     }
     return (
       <div className={`he-tree ${options?.className || ''}`} style={options?.style} ref={rootRef} onDragOver={onDragOverRoot} onDrop={onDropToRoot} onDragEnd={onDragEndOnRoot}>
-        <VirtualList<Id> ref={virtualListRef} items={visibleIds} virtual={props.virtual} persistentIndices={persistentIndices} style={{ height: '100%' }}
+        <VirtualList<Id> ref={virtualListRef} className={options?.listClassName || ''} innerClassName={options?.listInnerClassName || ''} items={visibleIds} virtual={props.virtual} persistentIndices={persistentIndices} style={{ height: '100%' }}
           renderItem={(id, index) => renderNodeBox({
             stat: getStat(id)!, attrs: attrsList[index], isPlaceholder: id === placeholderId
           })}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "he-tree-react",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "license": "MIT",
   "author": "phphe <phphe@outlook.com> (https://github.com/phphe)",
   "description": "React draggable sortable tree component.",
@@ -41,7 +41,7 @@
   },
   "dependencies": {
     "helper-js": "^3.1.5",
-    "react-base-virtual-list": "^1.0.0"
+    "react-base-virtual-list": "^1.1.0"
   },
   "peerDependencies": {
     "react": "^18",
@@ -85,4 +85,4 @@
       ]
     }
   }
-}
+}