Skip to content

Commit e69920a

Browse files
phphephphe
committed
refactor: rename renderHeTree to renderTree
1 parent f800f20 commit e69920a

20 files changed

+42
-42
lines changed

‎docs/v1/api.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
The exported variables, methods, and Typescript types.
66

7-
- [`useHeTree`](#usehetree): Main React hook. This library does not export components, you need to use the [`renderHeTree`](#renderhetree) render tree returned by this function.
7+
- [`useHeTree`](#usehetree): Main React hook. This library does not export components, you need to use the [`renderTree`](#rendertree) render tree returned by this function.
88
- [`walkTreeData`](#walktreedata), [`walkTreeDataGenerator`](#walktreedatagenerator), [`findTreeData`](#findtreedata), [`filterTreeData`](#filtertreedata), [`openParentsInTreeData`](#openparentsintreedata), [`updateCheckedInTreeData`](#updatecheckedintreedata): Methods for processing and traversing tree data.
99
- [`sortFlatData`](#sortflatdata), [`walkFlatData`](#walkflatdata), [`walkFlatDataGenerator`](#walkflatdatagenerator), [`convertIndexToTreeIndexInFlatData`](#convertindextotreeindexinflatdata), [`addToFlatData`](#addtoflatdata), [`removeByIdInFlatData`](#removebyidinflatdata), [`openParentsInFlatData`](#openparentsinflatdata), [`updateCheckedInFlatData`](#updatecheckedinflatdata): Methods for processing and traversing flat data.
1010
- [`walkParentsGenerator`](#walkparentsgenerator): To iterate over another special kind of data. This data is like `HTMLElement`, which contains a key pointing to the parent node like `parentElement`.
@@ -64,7 +64,7 @@ The main function of this library. React hook. The arguments are as follows:
6464
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:
6565
| Name | Type | Description |
6666
| ------------------------- | ------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------|
67-
|renderHeTree<a id="renderhetree"/>|`(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.|
67+
|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.|
6868
|getStat<a id="getstat"/>|`(idOrNodeOrStat)=>stat`|Get stat by id, or node data, or stat object.|
6969
|allIds<a id="allids"/>|Array|The ids of all nodes.|
7070
|rootIds<a id="rootids"/>|Array|The ids of all root nodes|

‎docs/v1/guide.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,15 +49,15 @@ The `id, pid, children` in the data are not fixed. In the options, use `idKey, p
4949

5050
## No Components
5151

52-
This library does not export components, but exports a hook `useHeTree`. Use the returned `renderHeTree` to render the tree. The advantage of this is that in addition to `renderHeTree`, `useHeTree` will also return some internal states and methods, which can be easily obtained.
52+
This library does not export components, but exports a hook `useHeTree`. Use the returned `renderTree` to render the tree. The advantage of this is that in addition to `renderTree`, `useHeTree` will also return some internal states and methods, which can be easily obtained.
5353

5454
```js
5555
import { useHeTree } from "he-tree-react";
5656

5757
export default function App() {
58-
const { renderHeTree } = useHeTree({...})
58+
const { renderTree } = useHeTree({...})
5959
return <div>
60-
{renderHeTree()}
60+
{renderTree()}
6161
</div>
6262
}
6363
```

‎docs/zh/v1/api.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
此库导出的变量, 方法, Typescript 类型.
66

7-
- [`useHeTree`](#usehetree): 主要的 React hook. 本库没有导出组件, 你需要使用此函数返回的[`renderHeTree`](#renderhetree)渲染树.
7+
- [`useHeTree`](#usehetree): 主要的 React hook. 本库没有导出组件, 你需要使用此函数返回的[`renderTree`](#rendertree)渲染树.
88
- [`walkTreeData`](#walktreedata), [`walkTreeDataGenerator`](#walktreedatagenerator), [`findTreeData`](#findtreedata), [`filterTreeData`](#filtertreedata), [`openParentsInTreeData`](#openparentsintreedata), [`updateCheckedInTreeData`](#updatecheckedintreedata): 用来处理和遍历树形数据的方法.
99
- [`sortFlatData`](#sortflatdata), [`walkFlatData`](#walkflatdata), [`walkFlatDataGenerator`](#walkflatdatagenerator), [`convertIndexToTreeIndexInFlatData`](#convertindextotreeindexinflatdata), [`addToFlatData`](#addtoflatdata), [`removeByIdInFlatData`](#removebyidinflatdata), [`openParentsInFlatData`](#openparentsinflatdata), [`updateCheckedInFlatData`](#updatecheckedinflatdata): 用来处理和遍历扁平数据的方法.
1010
- [`walkParentsGenerator`](#walkparentsgenerator): 遍历另一种特殊数据的方法. 这种数据类似`HTMLElement`, 其中包含类似于`parentElement`的指向父节点的键.
@@ -64,7 +64,7 @@ const {/* return */} = useHeTree({/* options */}) // prettier-ignore
6464
`useHeTree`的返回是对象, 包含了一些 states 和方法. **注意**, 这个对象每次更新都会改变, 不要依赖这个对象, 可以依赖这个对象的属性. 属性如下:
6565
| 名称 | 类型 | 描述 |
6666
| ------------------------- | ------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------|
67-
|renderHeTree<a id="renderhetree"/>|`(options?: { className?: string, style?: React.CSSProperties }): ReactNode`|渲染树. 参数可以传入`className`和`style`控制根元素的样式.|
67+
|renderTree<a id="rendertree"/>|`(options?: { className?: string, style?: React.CSSProperties }): ReactNode`|渲染树. 参数可以传入`className`和`style`控制根元素的样式.|
6868
|getStat<a id="getstat"/>|`(idOrNodeOrStat)=>stat`|根据 id, 节点数据或 stat, 获得对应的 stat.|
6969
|allIds<a id="allids"/>|数组|所有节点的 id.|
7070
|rootIds<a id="rootids"/>|数组|树根级的所有节点的 id.|

‎docs/zh/v1/guide.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,16 +50,16 @@ yarn add he-tree-react
5050

5151
## 没有组件
5252

53-
此库没有导出组件,而是导出一个 hook `useHeTree`. 使用它返回的`renderHeTree`渲染树. 这样做的好处是除了`renderHeTree`,
53+
此库没有导出组件,而是导出一个 hook `useHeTree`. 使用它返回的`renderTree`渲染树. 这样做的好处是除了`renderTree`,
5454
`useHeTree`还会返回一些内部状态和方法, 可以轻松的被获取.
5555

5656
```js
5757
import { useHeTree } from "he-tree-react";
5858

5959
export default function App() {
60-
const { renderHeTree } = useHeTree({...})
60+
const { renderTree } = useHeTree({...})
6161
return <div>
62-
{renderHeTree()}
62+
{renderTree()}
6363
</div>
6464
}
6565
```

‎lib/HeTree.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -636,7 +636,7 @@ export function useHeTree<T extends Record<string, any>>(
636636
const { visibleIds, attrsList, onDragOverRoot, onDropToRoot, onDragEndOnRoot } = cacheForVisible
637637
const persistentIndices = useMemo(() => draggingStat ? [visibleIds.indexOf(draggingStat.id)] : [], [draggingStat, visibleIds]);
638638
// render
639-
const renderHeTree = (options?: { className?: string, style?: React.CSSProperties }): ReactNode => {
639+
const renderTree = (options?: { className?: string, style?: React.CSSProperties }): ReactNode => {
640640
let renderNodeBox = props.renderNodeBox!
641641
if (!renderNodeBox) {
642642
const placeholder = <div className="he-tree-drag-placeholder" style={{ minHeight: '20px', border: '1px dashed blue' }}></div>
@@ -664,7 +664,7 @@ export function useHeTree<T extends Record<string, any>>(
664664
// drag states
665665
draggingStat, dragOverStat, placeholder,
666666
// render
667-
renderHeTree,
667+
renderTree, renderHeTree: renderTree,
668668
}
669669
}
670670
// react components ==================================

‎src/pages/base_flat_data.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export default function BasePage() {
5050
name: "Physics",
5151
},
5252
], keys));
53-
const { renderHeTree } = useHeTree({
53+
const { renderTree } = useHeTree({
5454
...keys,
5555
data,
5656
dataType: 'flat',
@@ -60,6 +60,6 @@ export default function BasePage() {
6060
</div>,
6161
})
6262
return <div>
63-
{renderHeTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
63+
{renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
6464
</div>
6565
}

‎src/pages/base_tree_data.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export default function BasePage() {
5454
],
5555
},
5656
]);
57-
const { renderHeTree } = useHeTree({
57+
const { renderTree } = useHeTree({
5858
data,
5959
dataType: 'tree',
6060
childrenKey: 'children',
@@ -64,6 +64,6 @@ export default function BasePage() {
6464
</div>,
6565
})
6666
return <div>
67-
{renderHeTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
67+
{renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
6868
</div>
6969
}

‎src/pages/checked_ids.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export default function BasePage() {
1313
setcheckedIds(r[0]);
1414
setsemiCheckedIds(r[1]);
1515
}
16-
const { renderHeTree } = useHeTree({
16+
const { renderTree } = useHeTree({
1717
...keys,
1818
data,
1919
dataType: 'flat',
@@ -27,6 +27,6 @@ export default function BasePage() {
2727
return <div>
2828
Checked: {JSON.stringify(checkedIds)} <br />
2929
Semi-Checked: {JSON.stringify(semiCheckedIds)}
30-
{renderHeTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
30+
{renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
3131
</div>
3232
}

‎src/pages/custom_drag_trigger_flat_data.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export default function BasePage() {
55
const keys = { idKey: 'id', parentIdKey: 'parent_id' };
66
// prettier-ignore
77
const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
8-
const { renderHeTree } = useHeTree({
8+
const { renderTree } = useHeTree({
99
...keys,
1010
data,
1111
dataType: 'flat',
@@ -16,6 +16,6 @@ export default function BasePage() {
1616
</div>,
1717
})
1818
return <div>
19-
{renderHeTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
19+
{renderTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
2020
</div>
2121
}

‎src/pages/customize_placeholder_and_node_box.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export default function BasePage() {
55
const keys = { idKey: 'id', parentIdKey: 'parent_id' };
66
// prettier-ignore
77
const [data, setdata] = useState(() => sortFlatData([{ id: 1, parent_id: null, name: "Root Category", }, { id: 2, parent_id: 1, name: "Technology", }, { id: 5, parent_id: 2, name: "Hardware", }, { id: 10, parent_id: 5, name: "Computer Components", }, { id: 4, parent_id: 2, name: "Programming", }, { id: 8, parent_id: 4, name: "Python", }, { id: 3, parent_id: 1, name: "Science", }, { id: 7, parent_id: 3, name: "Biology", }, { id: 6, parent_id: 3, name: "Physics", },], keys));
8-
const { renderHeTree } = useHeTree({
8+
const { renderTree } = useHeTree({
99
...keys,
1010
data,
1111
dataType: 'flat',
@@ -19,7 +19,7 @@ export default function BasePage() {
1919
),
2020
})
2121
return <div>
22-
{renderHeTree({ className: 'mytree', style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
22+
{renderTree({ className: 'mytree', style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
2323
<style>{`
2424
.mytree [data-node-box]{
2525
padding: 5px 0;

0 commit comments

Comments
 (0)