diff --git a/.eslintrc.cjs b/.eslintrc.cjs
deleted file mode 100644
index d6c9537..0000000
--- a/.eslintrc.cjs
+++ /dev/null
@@ -1,18 +0,0 @@
-module.exports = {
- root: true,
- env: { browser: true, es2020: true },
- extends: [
- 'eslint:recommended',
- 'plugin:@typescript-eslint/recommended',
- 'plugin:react-hooks/recommended',
- ],
- ignorePatterns: ['dist', '.eslintrc.cjs'],
- parser: '@typescript-eslint/parser',
- plugins: ['react-refresh'],
- rules: {
- 'react-refresh/only-export-components': [
- 'warn',
- { allowConstantExport: true },
- ],
- },
-}
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
deleted file mode 100644
index 663f144..0000000
--- a/.github/workflows/build.yml
+++ /dev/null
@@ -1,68 +0,0 @@
-name: Release with Changelog, Build Docs, Deploy to Github Pages, Publish to NPM
-# concat workflows because it is not easy to run trigger multiple. https://docs.github.com/en/actions/using-workflows/triggering-a-workflow#triggering-a-workflow-from-a-workflow
-permissions:
- contents: write
-on:
- push:
- tags:
- - "v*"
-
-jobs:
- build:
- runs-on: ubuntu-latest
-
- steps:
- - name: Checkout Repository
- uses: actions/checkout@v4
- with:
- fetch-depth: 0
-
- - name: Set up Node.js
- uses: actions/setup-node@v4
- with:
- node-version: "20.x"
- registry-url: "https://registry.npmjs.org"
-
- - name: Install
- run: npm install
-
- - name: Release with Changelog
- run: npx changelogithub # or changelogithub@0.12 if ensure the stable result
- continue-on-error: true # failed when only tag pushed
- env:
- GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
-
- - name: Build Demo
- run: npm run build:web
- - name: Build Docs
- run: npm run docs:build
-
- - name: Extra Files
- run: |
- # Switch to the generated directory
- cd docs/.vitepress/dist
-
- # cp demo to here
- cp -r ../../../dist v1-demo-windowed
-
- # Set custom domain for GitHub Pages
- echo "he-tree-react.phphe.com" > CNAME
-
- # Required to bypass Jekyll on GitHub Pages
- echo "" > .nojekyll
-
- - name: Deploy
- uses: JamesIves/github-pages-deploy-action@v4
- with:
- single-commit: true
- branch: gh-pages
- clean: true
- folder: docs/.vitepress/dist
- - name: Remove Dist
- run: rm -rf dist
- - name: Build Library
- run: npm run build
- - run: rm -rf node_modules && npm ci
- - run: npm publish
- env:
- NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.gitignore b/.gitignore
deleted file mode 100644
index 535dd9f..0000000
--- a/.gitignore
+++ /dev/null
@@ -1,27 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-
-# test
-/coverage
\ No newline at end of file
diff --git a/LICENSE b/LICENSE
index b490f51..337f71c 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
MIT License
-Copyright (c) 2017 phphe
+Copyright (c) 2020 Xinxin
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index 607c08e..9c00088 100644
--- a/README.md
+++ b/README.md
@@ -1,24 +1,2 @@
-
-
-# he-tree-react    
-
-React draggable sortable tree component. [Document](https://he-tree-react.phphe.com), [demo](https://he-tree-react.phphe.com/v1/examples).
-
-React 可拖拽树组件. [文档](https://he-tree-react.phphe.com/zh), [演示](https://he-tree-react.phphe.com/zh/v1/examples).
-
-## Features
-
-- Drag with a customizable placeholder.
-- The height of the node is not fixed.
-- Based on HTML Drag and Drop API.
-- Both flat data and tree-shaped data supported.
-- Drag from external.
-- Open or expand. Open node when drag onto it.
-- Checked, semi-checked.
-- Big data, virtual list.
-- Examples for update data.
-- rtl, display from right to left.
-
-## Changelog
-
-https://github.com/phphe/he-tree-react/releases
+# he-tree-react
+A draggable sortable nested react tree component.
diff --git a/docs/.gitignore b/docs/.gitignore
deleted file mode 100644
index 5921e8c..0000000
--- a/docs/.gitignore
+++ /dev/null
@@ -1,2 +0,0 @@
-.vitepress/dist
-.vitepress/cache
\ No newline at end of file
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
deleted file mode 100644
index 1300c27..0000000
--- a/docs/.vitepress/config.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-import { defineConfig } from "vitepress";
-import { version } from "../../package.json";
-
-const GTAG_ID = "G-GVYKBNTKPG";
-const vVersion = `v${version}`;
-
-// https://vitepress.dev/reference/site-config
-export default defineConfig({
- title: "He Tree React",
- description: "A VitePress Site",
- cleanUrls: true,
- themeConfig: {
- search: {
- provider: "local",
- },
- // https://vitepress.dev/reference/default-theme-config
- // nav: [
- // { text: "Home", link: "/" },
- // { text: "Guide", link: "/v1/guide" },
- // { text: "API", link: "/v1/api" },
- // ],
-
- // sidebar: [
- // {
- // text: "Examples",
- // items: [
- // { text: "Markdown Examples", link: "/markdown-examples" },
- // { text: "Runtime API Examples", link: "/api-examples" },
- // ],
- // },
- // ],
-
- socialLinks: [
- { icon: "github", link: "https://github.com/phphe/he-tree-react" },
- ],
- },
- markdown: {
- // lineNumbers: true,
- },
- locales: {
- root: {
- label: "English",
- lang: "en",
- themeConfig: {
- nav: [
- { text: "Home", link: "/" },
- { text: "Guide", link: "/v1/guide" },
- { text: "Examples", link: "/v1/examples" },
- { text: "API", link: "/v1/api" },
- {
- text: vVersion,
- items: [
- {
- text: "Changelog",
- link: "https://github.com/phphe/he-tree-react/releases",
- },
- ],
- },
- ],
- },
- },
- zh: {
- label: "中文",
- lang: "zh",
- themeConfig: {
- nav: [
- { text: "首页", link: "/zh/" },
- { text: "使用", link: "/zh/v1/guide" },
- { text: "例子", link: "/zh/v1/examples" },
- { text: "API", link: "/zh/v1/api" },
- {
- text: vVersion,
- items: [
- {
- text: "更新日志",
- link: "https://github.com/phphe/he-tree-react/releases",
- },
- ],
- },
- ],
- },
- },
- },
- head: [
- [
- "script",
- {
- async: "",
- src: `https://www.googletagmanager.com/gtag/js?id=${GTAG_ID}`,
- },
- ],
- [
- "script",
- {},
- `window.dataLayer = window.dataLayer || [];
- function gtag(){dataLayer.push(arguments);}
- gtag('js', new Date());
- gtag('config', '${GTAG_ID}');`,
- ],
- ],
- sitemap: {
- hostname: "https://he-tree-react.phphe.com",
- },
- lastUpdated: true,
-});
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
deleted file mode 100644
index 1c7bb0e..0000000
--- a/docs/.vitepress/theme/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// https://vitepress.dev/guide/custom-theme
-import { h } from "vue";
-import type { Theme } from "vitepress";
-import DefaultTheme from "vitepress/theme";
-import "./style.css";
-import DemoIframe from "../../components/DemoIframe.vue";
-
-export default {
- extends: DefaultTheme,
- Layout: () => {
- return h(DefaultTheme.Layout, null, {
- // https://vitepress.dev/guide/extending-default-theme#layout-slots
- });
- },
- enhanceApp({ app, router, siteData }) {
- // ...
- app.component("DemoIframe", DemoIframe);
- },
-} satisfies Theme;
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
deleted file mode 100644
index d63aee8..0000000
--- a/docs/.vitepress/theme/style.css
+++ /dev/null
@@ -1,139 +0,0 @@
-/**
- * Customize default theme styling by overriding CSS variables:
- * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
- */
-
-/**
- * Colors
- *
- * Each colors have exact same color scale system with 3 levels of solid
- * colors with different brightness, and 1 soft color.
- *
- * - `XXX-1`: The most solid color used mainly for colored text. It must
- * satisfy the contrast ratio against when used on top of `XXX-soft`.
- *
- * - `XXX-2`: The color used mainly for hover state of the button.
- *
- * - `XXX-3`: The color for solid background, such as bg color of the button.
- * It must satisfy the contrast ratio with pure white (#ffffff) text on
- * top of it.
- *
- * - `XXX-soft`: The color used for subtle background such as custom container
- * or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
- * on top of it.
- *
- * The soft color must be semi transparent alpha channel. This is crucial
- * because it allows adding multiple "soft" colors on top of each other
- * to create a accent, such as when having inline code block inside
- * custom containers.
- *
- * - `default`: The color used purely for subtle indication without any
- * special meanings attched to it such as bg color for menu hover state.
- *
- * - `brand`: Used for primary brand colors, such as link text, button with
- * brand theme, etc.
- *
- * - `tip`: Used to indicate useful information. The default theme uses the
- * brand color for this by default.
- *
- * - `warning`: Used to indicate warning to the users. Used in custom
- * container, badges, etc.
- *
- * - `danger`: Used to show error, or dangerous message to the users. Used
- * in custom container, badges, etc.
- * -------------------------------------------------------------------------- */
-
- :root {
- --vp-c-default-1: var(--vp-c-gray-1);
- --vp-c-default-2: var(--vp-c-gray-2);
- --vp-c-default-3: var(--vp-c-gray-3);
- --vp-c-default-soft: var(--vp-c-gray-soft);
-
- --vp-c-brand-1: var(--vp-c-indigo-1);
- --vp-c-brand-2: var(--vp-c-indigo-2);
- --vp-c-brand-3: var(--vp-c-indigo-3);
- --vp-c-brand-soft: var(--vp-c-indigo-soft);
-
- --vp-c-tip-1: var(--vp-c-brand-1);
- --vp-c-tip-2: var(--vp-c-brand-2);
- --vp-c-tip-3: var(--vp-c-brand-3);
- --vp-c-tip-soft: var(--vp-c-brand-soft);
-
- --vp-c-warning-1: var(--vp-c-yellow-1);
- --vp-c-warning-2: var(--vp-c-yellow-2);
- --vp-c-warning-3: var(--vp-c-yellow-3);
- --vp-c-warning-soft: var(--vp-c-yellow-soft);
-
- --vp-c-danger-1: var(--vp-c-red-1);
- --vp-c-danger-2: var(--vp-c-red-2);
- --vp-c-danger-3: var(--vp-c-red-3);
- --vp-c-danger-soft: var(--vp-c-red-soft);
-}
-
-/**
- * Component: Button
- * -------------------------------------------------------------------------- */
-
-:root {
- --vp-button-brand-border: transparent;
- --vp-button-brand-text: var(--vp-c-white);
- --vp-button-brand-bg: var(--vp-c-brand-3);
- --vp-button-brand-hover-border: transparent;
- --vp-button-brand-hover-text: var(--vp-c-white);
- --vp-button-brand-hover-bg: var(--vp-c-brand-2);
- --vp-button-brand-active-border: transparent;
- --vp-button-brand-active-text: var(--vp-c-white);
- --vp-button-brand-active-bg: var(--vp-c-brand-1);
-}
-
-/**
- * Component: Home
- * -------------------------------------------------------------------------- */
-
-:root {
- --vp-home-hero-name-color: transparent;
- --vp-home-hero-name-background: -webkit-linear-gradient(
- 120deg,
- #bd34fe 30%,
- #41d1ff
- );
-
- --vp-home-hero-image-background-image: linear-gradient(
- -45deg,
- #bd34fe 50%,
- #47caff 50%
- );
- --vp-home-hero-image-filter: blur(44px);
-}
-
-@media (min-width: 640px) {
- :root {
- --vp-home-hero-image-filter: blur(56px);
- }
-}
-
-@media (min-width: 960px) {
- :root {
- --vp-home-hero-image-filter: blur(68px);
- }
-}
-
-/**
- * Component: Custom Block
- * -------------------------------------------------------------------------- */
-
-:root {
- --vp-custom-block-tip-border: transparent;
- --vp-custom-block-tip-text: var(--vp-c-text-1);
- --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
- --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
-}
-
-/**
- * Component: Algolia
- * -------------------------------------------------------------------------- */
-
-.DocSearch {
- --docsearch-primary-color: var(--vp-c-brand-1) !important;
-}
-
diff --git a/docs/components/DemoIframe.vue b/docs/components/DemoIframe.vue
deleted file mode 100644
index 1a56856..0000000
--- a/docs/components/DemoIframe.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-
-
-
- {{ lang === 'zh' ? '请看效果' : 'Preview' }}
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/docs/index.md b/docs/index.md
deleted file mode 100644
index 6e196da..0000000
--- a/docs/index.md
+++ /dev/null
@@ -1,37 +0,0 @@
----
-# https://vitepress.dev/reference/default-theme-home-page
-layout: home
-
-hero:
- name: "He Tree React"
- # text: ""
- tagline: React draggable sortable tree component
- actions:
- - theme: brand
- text: Get started
- link: ./v1/guide
- - theme: alt
- text: Online Examples
- link: ./v1/examples
-
-features:
- - title: Draggable
- details: When drag, show a placeholder to help user.
- - title: High-performance
- details: Supports virtual list to handle large data calmly.
- - title: Easy to customize
- details: Simple structure, few built-in style, so the style and UI can be easily customized.
----
-
-## Features
-
-- Drag with a customizable placeholder.
-- The height of the node is not fixed.
-- Based on HTML Drag and Drop API.
-- Both flat data and tree-shaped data supported.
-- Drag from external.
-- Open or expand. Open node when drag onto it.
-- Checked, semi-checked.
-- Big data, virtual list.
-- Examples for update data.
-- rtl, display from right to left.
diff --git a/docs/v1/api.md b/docs/v1/api.md
deleted file mode 100644
index f5609ce..0000000
--- a/docs/v1/api.md
+++ /dev/null
@@ -1,341 +0,0 @@
-# API
-
-## Exported
-
-The exported variables, methods, and Typescript types.
-
-- [`useHeTree`](#usehetree): Main React hook. This library does not export components, you need to use the [`renderTree`](#rendertree) render tree returned by this function.
-- [`walkTreeData`](#walktreedata), [`walkTreeDataGenerator`](#walktreedatagenerator), [`findTreeData`](#findtreedata), [`filterTreeData`](#filtertreedata), [`openParentsInTreeData`](#openparentsintreedata), [`updateCheckedInTreeData`](#updatecheckedintreedata): Methods for processing and traversing tree data.
-- [`sortFlatData`](#sortflatdata), [`walkFlatData`](#walkflatdata), [`walkFlatDataGenerator`](#walkflatdatagenerator), [`convertIndexToTreeIndexInFlatData`](#convertindextotreeindexinflatdata), [`addToFlatData`](#addtoflatdata), [`removeByIdInFlatData`](#removebyidinflatdata), [`openParentsInFlatData`](#openparentsinflatdata), [`updateCheckedInFlatData`](#updatecheckedinflatdata): Methods for processing and traversing flat data.
-- [`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`.
-- `defaultProps`: The default value of `useHeTree` options.
-
-Typescript types:
-
-- `Id`: node id, parent id. Type: `string | number`.
-- [`Stat`](#stat): Node information.
-- `HeTreeProps`: Options for `useHeTree`.
-
-## useHeTree
-
-```ts
-import { useHeTree } from "he-tree-react";
-const {/* return */} = useHeTree({/* options */}) // prettier-ignore
-```
-
-The main function of this library. React hook. The arguments are as follows:
-
-- options: Options, type is object. The following are some properties in options:
-
- | Name | Type | Default | Description |
- | ---------------------------------------------- | ----------------------- | ----------- | :------------------------------------------------------------------------------------------------------------------- |
- | data | Array | | Data. Check [Data Types](guide#data-types). |
- | dataType | 'flat', 'tree' | 'flat' | Data Types |
- | idKey | string | 'id' | key of id 名. |
- | parentIdKey | string | 'parent_id' | key of the parent id. For flat data only. |
- | childrenKey | string | 'children' | key of children nodes. For tree data only. |
- | indent | number | 20 | Node indentation, unit is px. |
- | dragOpen | boolean | false | Whether to enable the function "Open node when dragging over node". |
- | dragOpenDelay | number | 600 | The waiting time to open the node when dragging over the node. The unit is milliseconds. |
- | onDragOpen | `function(stat): void` | | The callback of "Open node when dragging over node". |
- | direction | 'lrt', 'rtl' | 'ltr' | Display direction, ltr is displayed from left to right, rtl is the opposite. |
- | rootId | string, null | null | The parent id of a node that has not parent in flat data. |
- | virtual | boolean | false | Whether to enable virtualization. Used to improve performance when there is a lot of data. |
- | keepPlaceholder | boolean | false | Whether to retain placeholder when dragging out of the tree. It is recommended to enable this only on one tree page. |
- | openIds | Array | | All open nodes' id. |
- | checkedIds | Array | | All checked nodes' id. |
- | isFunctionReactive | boolean | false | Whether to listen for change of the callback functions. [Reference](guide#isfunctionreactive) |
-
- The remaining callback functions in options:
- | Name | Type | Description |
- | ------------------------- | ------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------|
- | renderNode | `(stat)=> ReactNode` | Node render. |
- | renderNodeBox | `({stat, attrs, isPlaceholder})=> ReactNode` | nodeBox's render. [Reference](guide#node_structure_style). |
- | onChange| `(newData)=>void`|Callback on data change|
- | canDrag | `(stat)=>boolean, null, undefined, void` | Whether a node draggable. Returning `null, undefined, void` means inheriting the parent node. |
- | canDrop | `(stat, index)=>boolean, null, undefined, void` | Whether a node droppable. Returning `null, undefined, void` means inheriting the parent node. The parameter `index` may be empty. If it is not empty, it indicates the position. |
- | customDragImage | `(event, stat)=> void` | Called `event.dataTransfer.setDragImage` to custom drag image. [Reference](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setDragImage). |
- |onDragStart| `(event, stat)=> void` ||
- |onExternalDragOver|`(event)=>boolean`|Called when drag from external. Must return a Boolean value to indicate whether to handle this drag.|
- |onDragOver| `(event, stat, isExternal)=> void` |`isExternal` indicates whether the drag is from outside.|
- |onDragEnd|`(event, stat, isOutside)=>void`|Called on dragend and this drag is started in this tree. `stat` is the stat of the dragged node. `isOutside` indicates whether it ended outside the tree.|
- |onExternalDrop|`(event, parentStat, index)=>void`|Called when the external drag ends on this tree. parentStat is the stat of the target parent node, and when it is empty, it represents the root of the tree. Index is the target position, the index of the node among siblings.|
-
-### Return of `useHeTree`
-
-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|`(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|`(idOrNodeOrStat)=>stat`|Get stat by id, or node data, or stat object.|
-|allIds|Array|The ids of all nodes.|
-|rootIds|Array|The ids of all root nodes|
-|rootNodes|Array|All root nodes. In tree data, it is same with `options.data`.|
-|rootStats|Array|All root nodes' stat.|
-|placeholder|`{parentStat, index, level}`| Drag placeholder info. Null if it does not exist.|
-|draggingStat|`stat`|When a drag is initiated from this tree, the stat of the dragged node. Null if it does not exist.|
-|dragOverStat|`stat`|Dragging over node's stat. May be null.|
-|visibleIds|Array|All visible nodes' id.|
-|attrsList|Array|All visible nodes' attrs.|
-|virtualListRef|`ref`| `ref` of virtual list component, Check [virtual list](https://github.com/phphe/react-base-virtual-list).|
-|scrollToNode|`(idOrNodeOrStat)=>boolean`|Scroll to node. The argument can be id, node or stat. If node not found or invisible, it return `false`. [Example](examples#scroll_to_node2)|
-
-## walkTreeDataGenerator
-
-The method of traversing tree data through `for of`. Executing `skipChildren()` in the loop will skip all child nodes of the node, and executing `exitWalk` will end the traversal.
-
-```ts
-for (const [
- node,
- { parent, parents, siblings, index, skipChildren, exitWalk },
-] of walkTreeDataGenerator(data, "children")) {
- // ...
-}
-```
-
-## walkTreeData
-
-The method to traverse tree data through the callback method. Executing `skipChildren()` in the callback method will skip all child nodes of the node, and executing `exitWalk` will end the traversal.
-
-```ts
-walkTreeDataGenerator(
- data,
- (node, { parent, parents, siblings, index, skipChildren, exitWalk }) => {
- // ...
- },
- "children"
-);
-```
-
-## findTreeData
-
-Like `Array.prototype.find`. Returns the first node found. Executing `skipChildren()` in the callback method will skip all child nodes of the node, and executing `exitWalk` will end the traversal.
-
-```ts
-let foundNode = findTreeData(
- data,
- (node, { parent, parents, siblings, index, skipChildren, exitWalk }) => {
- // return node.id === 1;
- },
- "children"
-);
-```
-
-## filterTreeData
-
-Like `Array.prototype.filter`. Returns all nodes found. Executing `skipChildren()` in the callback method will skip all child nodes of the node, and executing `exitWalk` will end the traversal.
-
-```ts
-let nodes = filterTreeData(
- data,
- (node, { parent, parents, siblings, index, skipChildren, exitWalk }) => {
- // return node.id > 1;
- },
- "children"
-);
-```
-
-## openParentsInTreeData
-
-Open all parent nodes of a single or multiple nodes to make the node visible. [Reference](guide#node_open).
-
-```
-(
- treeData,
- openIds: Id[],
- idOrIds: Id | Id[],
- options?: {idKey: string, childrenKey: string}
-): newOpenIds
-```
-
-## updateCheckedInTreeData
-
-Update the `checked` status of a single node or multiple nodes. This will update both their children and parents. [Reference](guide#node_checked).
-
-```
-(
- treeData,
- checkedIds: Id[],
- idOrIds: Id | Id[],
- checked: boolean,
- options?: {idKey: string, childrenKey: string}
-): [newCheckedIds, newSemiCheckedIds]
-```
-
-## sortFlatData
-
-Sort the flat data according to the order of the nodes in the tree. Return the new sorted array. Your data should use it to ensure order after initialized.
-
-```
-(
- flatData,
- options?: {idKey: string, parentIdKey: string}
-): sortedData
-```
-
-## walkFlatDataGenerator
-
-The method of traversing flat data through `for of`. Executing `skipChildren()` in the loop will skip all the child nodes of the node, and executing `exitWalk` will end the traversal. Make sure the order of your data is correct before using it.
-
-Compared to walkTreeDataGenerator, it lacks `siblings`, but has `treeIndex, id, pid`. treeIndex is the index of the node in the tree.
-
-```ts
-for (const [
- node,
- { parent, parents, index, treeIndex, id, pid, skipChildren, exitWalk },
-] of walkFlatDataGenerator(flatData, {
- idKey: "id",
- parentIdKey: "parent_id",
-})) {
- // ...
-}
-```
-
-## walkFlatData
-
-The method of traversing flat data through the callback method. Executing `skipChildren()` in the callback method will skip all child nodes of the node, and executing `exitWalk` will end the traversal. Before using, make sure that the order of your data is correct.
-
-```ts
-walkFlatData(
- flatData,
- (
- node,
- { parent, parents, index, treeIndex, id, pid, skipChildren, exitWalk }
- ) => {
- // ...
- },
- {
- idKey: "id",
- parentIdKey: "parent_id",
- }
-);
-```
-
-## openParentsInFlatData
-
-Open all parent nodes of a single or multiple nodes to make the node visible. Make sure your data is in the correct order before using it. [Reference](guide#node_open).
-
-```
-(
- flatData,
- openIds: Id[],
- idOrIds: Id | Id[],
- options?: {
- idKey: "id",
- parentIdKey: "parent_id",
- }
-): newOpenIds
-```
-
-## updateCheckedInFlatData
-
-Update the `checked` status of a single node or multiple nodes. This will update both their children and parents. Make sure your data is in the correct order before using it. [Reference](guide#node_checked).
-
-```
-(
- flatData,
- checkedIds: Id[],
- idOrIds: Id | Id[],
- checked: boolean,
- options?: {
- idKey: "id",
- parentIdKey: "parent_id",
- }
-): [newCheckedIds, newSemiCheckedIds]
-```
-
-## convertIndexToTreeIndexInFlatData
-
-Calculate the index of a node in the tree through its parent node id and its index in the sibling nodes.
-
-```
-(
- flatData,
- parentId: Id | null,
- indexInSiblings: Id | null,
- options?: {
- idKey: "id",
- parentIdKey: "parent_id",
- }
-): treeIndex
-```
-
-## addToFlatData
-
-Add a node to the flat data. It will change the original data array. Therefore, it is recommended to pass in a copy of the original data, or use it together with `useImmer`. [Reference](guide#update_flat_data_with_inner_methods2)
-
-```
-(
- flatData,
- newNode,
- index: Id | null,
- options?: {
- idKey: "id",
- parentIdKey: "parent_id",
- }
-):void
-```
-
-## removeByIdInFlatData
-
-Remove node by id from the flat data. It will change the original data array. Therefore, it is recommended to pass in a copy of the original data, or use it together with `useImmer`. [Reference](guide#update_flat_data_with_inner_methods2)
-
-```
-(
- flatData,
- removeId: Id | null,
- options?: {
- idKey: "id",
- parentIdKey: "parent_id",
- }
-): removedData
-```
-
-## walkParentsGenerator
-
-A method to iterate over another special kind of data. This data is like `HTMLElement`, which contains keys pointing to the parent node like `parentElement`.
-
-```
-(
- node,
- parentKeyOrGetter: string | ((node) => parent | undefined),
- options?: {
- withSelf: boolean;
- }
-): Generator
-```
-
-`parentKeyOrGetter` can be a string or a method that returns the parent. `options.withSelf` indicates whether to include the node self. Returns [Generator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator). Here is an example of traversing HTMLElement:
-
-```ts
-let el = document.querySelector("div");
-for (const parent of walkParentsGenerator(el, "parentElement", {
- withSelf: true,
-})) {
- // ...
-}
-```
-
-## Stat
-
-`stat` contains information related to the node. Read-only. The properties are as follows:
-
-| Name | Type | Description |
-| ------------ | ------------ | :------------------------------------ |
-| \_isStat | boolean | Indicates whether it is a stat object |
-| node | object | node data |
-| id | Id | id |
-| pid | Id, null | parent id |
-| parent | object, null | parent data |
-| parentStat | stat, null | parent stat |
-| childIds | Id[] | |
-| children | object[] | |
-| childStats | stat[] | stats of children |
-| siblingIds | Id[] | |
-| siblings | object[] | sibling nodes |
-| siblingStats | stat[] | stats of siblings |
-| index | number | node's index in siblings |
-| level | number | node's depth in tree. Start from 1 |
-| open | boolean | |
-| checked | boolean | |
-| draggable | boolean | |
diff --git a/docs/v1/examples.md b/docs/v1/examples.md
deleted file mode 100644
index 66995d6..0000000
--- a/docs/v1/examples.md
+++ /dev/null
@@ -1,106 +0,0 @@
-# Examples
-
-## Custom Style
-
-
-**Source**
-
-<<< @/../src/pages/custom_style.tsx
-
-## Flat Data
-
-
-**Source**
-
-<<< @/../src/pages/base_flat_data.tsx
-
-## Tree-shaped Data
-
-
-**Source**
-
-<<< @/../src/pages/base_tree_data.tsx
-
-## Trigger Element
-
-
-**Source**
-
-<<< @/../src/pages/custom_drag_trigger_flat_data.tsx{14}
-
-## Placeholder
-
-
-**Source**
-
-<<< @/../src/pages/customize_placeholder_and_node_box.tsx{13-19,23-39}
-
-## Open
-
-
-**Source**
-
-<<< @/../src/pages/open_ids.tsx{1,9-16,22-24,29-32}
-
-## Checked
-
-
-**Source**
-
-<<< @/../src/pages/checked_ids.tsx{1,9-15,21-23,28-29}
-
-## Draggable & Droppable
-
-
-**Source**
-
-<<< @/../src/pages/draggable_droppable.tsx{16-18}
-
-## Open when drag onto
-
-
-**Source**
-
-<<< @/../src/pages/dragopen.tsx
-
-## Update Flat Data
-
-
-**Source**
-
-<<< @/../src/pages/update_data.tsx{3,12-22,33-34}
-
-## Update Flat Data with immer
-
-
-**Source**
-
-<<< @/../src/pages/update_flat_data_with_immer.tsx{3,7,12,13-31,42-44}
-
-## Update Tree Data with immer
-
-
-**Source**
-
-<<< @/../src/pages/update_tree_data_with_immer.tsx{1,4,10-30,41-43}
-
-## Drag from External
-
-
-**Source**
-
-<<< @/../src/pages/external_drag.tsx{16-22,25}
-
-## Big Data
-
-
-**Source**
-
-<<< @/../src/pages/virtual_list.tsx{23,30}
-
-## Scroll to Node
-
-
-**Source**
-
-<<< @/../src/pages/scroll_to_node.tsx{17,30}
diff --git a/docs/v1/guide.md b/docs/v1/guide.md
deleted file mode 100644
index 6502149..0000000
--- a/docs/v1/guide.md
+++ /dev/null
@@ -1,267 +0,0 @@
-# Guide
-
-## Installation
-
-::: code-group
-
-```sh [npm]
-npm install he-tree-react
-```
-
-```sh [pnpm]
-pnpm add he-tree-react
-```
-
-```sh [yarn]
-yarn add he-tree-react
-```
-
-:::
-
-## Data Types
-
-This library supports two types of data structures:
-
-- Flat data, which is a one-dimensional array. Similar to data stored in a database. Each item requires an id, a parent id, `null` means there is no parent. The order of flat data must be the same as the tree, you can use the [`sortFlatData`](./api#sortflatdata) method to sort the data when initializing the data.
- ```js
- [
- { id: 1, pid: null },
- { id: 2, pid: 1 },
- { id: 3, pid: 2 },
- ];
- ```
-- Tree data. Each node contain child nodes in an array. If id is not specified, this library will use the node's index in the tree as the id. When using tree data, you need to set `dataType: 'tree'`.
- ```js
- [
- {
- id: 1,
- children: [
- {
- id: 2,
- children: [{ id: 3 }],
- },
- ],
- },
- ];
- ```
-
-The `id, pid, children` in the data are not fixed. In the options, use `idKey, parentIdKey, childrenKey` to indicate the corresponding key names in your data.
-
-## No Components
-
-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.
-
-```js
-import { useHeTree } from "he-tree-react";
-
-export default function App() {
- const { renderTree } = useHeTree({...})
- return
- {renderTree()}
-
-}
-```
-
-## Options
-
-`useHeTree` is the primary function used, its first parameter is an options object. The required options are `data`, and at least one of `renderNode, renderNodeBox` must be present. Other important options include:
-
-- `dataType`, indicating data type. Available values:
- - `flat`, default. Flat data.
- - `tree`, tree-shaped data.
-- `idKey, parentIdKey`, the default values are `id` and `parent_id`. Needed when using flat data. Although there are default values, it is better to explicitly state them.
-- `childrenKey`, the default is `children`. Needed when using tree-shaped data. Although there are default values, it is better to explicitly state them.
-- `onChange`, a function called when data changes, the parameter is new data. If your tree will not change then this is not required.
-- `isFunctionReactive`, boolean. Default `false`. `useHeTree` options include many callback functions, such as `onChange, canDrop`. `isFunctionReactive` can be used to control whether to listen for changes to these callback functions. If your callback functions and `data` change synchronously, you do not need to enable this. Otherwise, you need to enable this and use React's `useCallback` or `useMemo` to cache all your callback functions to avoid performance issues.
-
-[See the `useHeTree` API documentation for more information](api#usehetree).
-
-## Tips
-
-- `stat`, information related to a single node. Most of the parameters in callback functions have `stat`. [Refer to `Stat` API](api#stat).
-- `node`, the data of the node. You can get node data through `stat.node`.
-- `getStat`, through this function you can get `stat`, the only parameter can be `id, node, stat`. This function is in the return object of `useHeTree`: `const {getStat} = useHeTree({...})`.
-- The code examples below have preview. These examples can be directly copied for use. Pay attention to the the highlighted lines in code.
-- The code examples below use the `tsx` format, if you need the `js` format, you can use any ts js online converter.
-
-## Use Flat Data
-
-<<< @/../src/pages/base_flat_data.tsx
-
-
-## Use Tree-shaped Data
-
-<<< @/../src/pages/base_tree_data.tsx
-
-
-## Custom Drag Trigger Element
-
-You can add the `draggable` attribute to any child element of the node.
-
-<<< @/../src/pages/custom_drag_trigger_flat_data.tsx{14}
-
-
-## HTML and Style of Node
-
-Node HTML:
-
-```html
-
-
Node
-
-```
-
-There are two `div` above. Use the `renderNode` option to control the rendering of the inner div. For example: `renderNode: ({node}) =>
{node.name}
`.
-
-The outer div is called `nodeBox`, don't modify its `padding-left, padding-right`. Use the [`indent`](api#indent) option to control the indentation of the node. If you want to control the rendering of `nodeBox` or the drag placeholder, you can use the `renderNodeBox` option, which will override `renderNode`. The standard `renderNodeBox` is as follows:
-
-```tsx{4-7,9}
-renderNodeBox: ({ stat, attrs, isPlaceholder }) => (
-
- {isPlaceholder ? (
-
- ) : (
-
{/* node area */}
- )}
-
-);
-```
-
-Lines 4 to 7 are drag-and-drop placeholder. Line 9 is node.
-
-## Custom Drag Placeholder and Node Box
-
-<<< @/../src/pages/customize_placeholder_and_node_box.tsx{13-19,23-39}
-
-
-## Open & Close
-
-- Use the `openIds` option to indicate the open nodes.
-- The `open` status of the node can be obtained through `stat.open`.
-- The `allIds` returned by `useHeTree` contains the ids of all nodes.
-- This library exports methods that can expand all parents of one or multiple nodes. For flat data: [`openParentsInFlatData`](api#openparentsinflatdata). For tree data: [`openParentsInTreeData`](api#openparentsintreedata).
-
-<<< @/../src/pages/open_ids.tsx{1,9-16,22-24,29-32}
-
-
-## Checked
-
-- Use the option `checkedIds` to indicate the checked nodes.
-- The `checked` status of this node can be obtained through `stat.checked`.
-- This library exports methods that can get `checkedIds` for one or more nodes after the `checked` status changes. Flat data: [`updateCheckedInFlatData`](api#updatecheckedinflatdata). Tree data: [`updateCheckedInTreeData](api#updatecheckedintreedata).
- - The update of this method to the node's `checked` is cascading. If you don't want to cascade updates, replace it with your own logic.
- - This method returns an array of length 2. The first item is all checked ids, and the second item is all semi-checked ids. If you don't need semi-checked, ignore the second item.
- - Semi-checked, that is, there are child nodes that are checked or semi-checked, and there are child nodes that are not checked.
-
-<<< @/../src/pages/checked_ids.tsx{1,9-15,21-23,28-29}
-
-
-## draggable & droppable
-
-Use the following options to control:
-
-- [`canDrag`](api#candrag), whether the node can be dragged.
-- [`canDrop`](api#candrop), whether the node can be dropped.
-- [`canDropToRoot`](api#candroptoroot), whether the tree root can be dropped.
-
-<<< @/../src/pages/draggable_droppable.tsx{16-18}
-
-
-- The root node cannot be dropped.
-- `Technology` and its sub-nodes can be dragged. `Science` and its sub-nodes cannot be dragged.
-- `Science` and its sub-nodes can be dropped. `Technology` and its sub-nodes cannot be dropped.
-
-## Open when dragging over
-
-Use the following options to control:
-
-- [`dragOpen`](api#dragopen), whether to enable, default `false`.
-- [`dragOpenDelay`](api#dragopen), delay, default `600` milliseconds.
-- [`onDragOpen`](api#ondragopen), the function called when the node is opened.
-
-<<< @/../src/pages/dragopen.tsx
-
-
-## Update Data
-
-Due to the immutable nature of React, it is difficult to update flat data and tree data. For flat data, this library provides two methods to add nodes or delete nodes. If you want to perform more complex operations, or update tree data, it is recommended that you use [`immer`](https://github.com/mweststrate/immer).
-
-::: code-group
-
-```sh [npm]
-npm install immer use-immer
-```
-
-```sh [pnpm]
-pnpm add immer use-immer
-```
-
-```sh [yarn]
-yarn add immer use-immer
-```
-
-:::
-
-## Update Flat Data
-
-[`addToFlatData`](api#addtoflatdata). [`removeByIdInFlatData`](api#removebyidinflatdata).
-These 2 methods will modify original data, so pass copy to it, or use `immer`.
-
-<<< @/../src/pages/update_data.tsx{3,12-22,33-34}
-
-
-## Update Flat Data with immer
-
-Note, here we use `useImmer` instead of React's `useState`.
-
-<<< @/../src/pages/update_flat_data_with_immer.tsx{3,7,12,13-31,42-44}
-
-
-## Update Tree Data with immer
-
-Note, here we use `useImmer` instead of React's `useState`. `findTreeData` is like `Array.prototype.find`.
-
-<<< @/../src/pages/update_tree_data_with_immer.tsx{1,4,10-30,41-43}
-
-
-## Drag from External
-
-Related options:
-
-- [`onExternalDragOver`](api#onexternaldragover): Indicate whether to handle external drag.
-- [`onExternalDrop`](api#onexternaldrop): Callback when drop from external.
-
-<<< @/../src/pages/external_drag.tsx{16-22,25}
-
-
-## Big Data
-
-Use option [`virtual`](api#virtual) to enable virtual list. Remember to set height for tree.
-
-<<< @/../src/pages/virtual_list.tsx{23,30}
-
-
-## Touch & Mobile Device
-
-It is based on HTML5 Drag and Drop API. So it works in any device that supports Drag and Drop API. For others, you can try Drag and Drop API polyfill.
-
-::: tip Notice
-In mobile, user need touch and hold to trigger drag.
-:::
-
-## Others
-
-- Option [`direction`](api#direction): from right to left.
-- Option [`customDragImage`](api#customdragimage): custom drag image.
-- Option [`rootId`](api#rootid): the parent id of root nodes in flat data.
-- Option [`keepPlaceholder`](api#keepplaceholder): whether to retain the drag placeholder node when dragging outside the tree. Default is `false`.
-- Function [`scrollToNode`](api#scrolltonode): Scroll to a node.
diff --git a/docs/zh/index.md b/docs/zh/index.md
deleted file mode 100644
index 3567ed8..0000000
--- a/docs/zh/index.md
+++ /dev/null
@@ -1,37 +0,0 @@
----
-# https://vitepress.dev/reference/default-theme-home-page
-layout: home
-
-hero:
- name: "He Tree React"
- # text: ""
- tagline: React 可拖拽树组件
- actions:
- - theme: brand
- text: 开始使用
- link: ./v1/guide
- - theme: alt
- text: 演示
- link: ./v1/examples
-
-features:
- - title: 可拖拽
- details: 拖拽时显示占位框辅助用户选择位置.
- - title: 高性能
- details: 支持虚拟列表, 从容处理大量数据.
- - title: 易定制
- details: 结构简单, 很少内置样式, 可以容易的修改样式和UI.
----
-
-## 功能
-
-- 拖拽时显示一个占位元素指示位置.
-- 节点高度不固定.
-- 基于 HTML Drag and Drop API.
-- 同时支持扁平数据和树形数据.
-- 支持外部拖拽.
-- 展开与折叠, 拖拽到节点上时展开它.
-- 勾选, 半选.
-- 大数据, 虚拟列表.
-- 更新数据的多个示例.
-- rtl, 从右往左显示.
diff --git a/docs/zh/v1/api.md b/docs/zh/v1/api.md
deleted file mode 100644
index e8d07f6..0000000
--- a/docs/zh/v1/api.md
+++ /dev/null
@@ -1,341 +0,0 @@
-# API
-
-## 导出
-
-此库导出的变量, 方法, Typescript 类型.
-
-- [`useHeTree`](#usehetree): 主要的 React hook. 本库没有导出组件, 你需要使用此函数返回的[`renderTree`](#rendertree)渲染树.
-- [`walkTreeData`](#walktreedata), [`walkTreeDataGenerator`](#walktreedatagenerator), [`findTreeData`](#findtreedata), [`filterTreeData`](#filtertreedata), [`openParentsInTreeData`](#openparentsintreedata), [`updateCheckedInTreeData`](#updatecheckedintreedata): 用来处理和遍历树形数据的方法.
-- [`sortFlatData`](#sortflatdata), [`walkFlatData`](#walkflatdata), [`walkFlatDataGenerator`](#walkflatdatagenerator), [`convertIndexToTreeIndexInFlatData`](#convertindextotreeindexinflatdata), [`addToFlatData`](#addtoflatdata), [`removeByIdInFlatData`](#removebyidinflatdata), [`openParentsInFlatData`](#openparentsinflatdata), [`updateCheckedInFlatData`](#updatecheckedinflatdata): 用来处理和遍历扁平数据的方法.
-- [`walkParentsGenerator`](#walkparentsgenerator): 遍历另一种特殊数据的方法. 这种数据类似`HTMLElement`, 其中包含类似于`parentElement`的指向父节点的键.
-- `defaultProps`: `useHeTree`的选项的默认值.
-
-以下为 Typescript 的类型:
-
-- `Id`: 节点 id, 父级 id. 类型: `string | number`.
-- [`Stat`](#stat): 节点的相关信息.
-- `HeTreeProps`: `useHeTree`的选项.
-
-## useHeTree
-
-```ts
-import { useHeTree } from "he-tree-react";
-const {/* return */} = useHeTree({/* options */}) // prettier-ignore
-```
-
-本库的主要功能. React hook. 参数如下:
-
-- options: 选项, 类型是对象. 以下是 options 中的部分属性:
-
- | 名称 | 类型 | 默认值 | 描述 |
- | ---------------------------------------------- | ----------------------- | ----------- | :-------------------------------------------------------------------- |
- | data | Array | | 数据. 参考[数据类型](guide#数据类型). |
- | dataType | 'flat', 'tree' | 'flat' | 数据类型 |
- | idKey | string | 'id' | 你的数据中 id 的键名. |
- | parentIdKey | string | 'parent_id' | 你的数据中父级 id 的键名. 仅用于扁平数据. |
- | childrenKey | string | 'children' | 你的数据中子级的键名. 仅用于树形数据. |
- | indent | number | 20 | 节点缩进, 单位是 px. |
- | dragOpen | boolean | false | 是否启用功能"拖拽到节点上时打开节点". |
- | dragOpenDelay | number | 600 | 拖拽到节点上时打开节点的等待时间. 单位是毫秒. |
- | onDragOpen | `function(stat): void` | | 拖拽到节点上时打开节点的回调. |
- | direction | 'lrt', 'rtl' | 'ltr' | 显示方向, ltr 是从左往右显示, rtl 与之相反. |
- | rootId | string, null | null | 使用扁平数据时, 没有父级的节点的父级 id. |
- | virtual | boolean | false | 是否启用虚拟化. 当数据非常多时用来提高性能. |
- | keepPlaceholder | boolean | false | 当拖拽离开树的范围, 是否要保留占位元素. 建议只在一个树的页面开启此项. |
- | openIds | Array | | 所有打开节点的 id. |
- | checkedIds | Array | | 所有勾选的节点的 id. |
- | isFunctionReactive | boolean | false | 是否监听回调函数的改变. [参考](guide#isfunctionreactive) |
-
- 以下是 options 中的剩余回调方法:
- | 名称 | 类型 | 描述 |
- | ------------------------- | ------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------|
- | renderNode | `(stat)=> ReactNode` | 节点的渲染函数. |
- | renderNodeBox | `({stat, attrs, isPlaceholder})=> ReactNode` | nodeBox 的渲染函数. [参考](guide#node_structure_style). |
- | onChange| `(newData)=>void`|数据发生改变时调用.|
- | canDrag | `(stat)=>boolean, null, undefined, void` | 节点是否可拖拽. 返回`null, undefined, void`表示继承父节点. |
- | canDrop | `(stat, index)=>boolean, null, undefined, void` | 节点是否可放入. 返回`null, undefined, void`表示继承父节点. 参数`index`可能为空, 不为空时表示将要放入节点的子级的位置. |
- | customDragImage | `(event, stat)=> void` | 调用`event.dataTransfer.setDragImage`自定义 drag image. [参考](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setDragImage). |
- |onDragStart| `(event, stat)=> void` |当拖拽开始时|
- |onExternalDragOver|`(event)=>boolean`|当拖拽来自外部时调用. 你必选返回布尔值表示是否处理此拖拽.|
- |onDragOver| `(event, stat, isExternal)=> void` |当拖拽到树上方时, `isExternal`表示此次拖拽是否来自外部.|
- |onDragEnd|`(event, stat, isOutside)=>void`|当此树发起的拖拽结束时调用. stat 是此次拖拽的节点的 stat.isOutside 表示是否在树外部结束.|
- |onExternalDrop|`(event, parentStat, index)=>void`|当外部拖拽在此树结束时调用. parentStat 是目标父节点的 stat, 为空时代表树的根级. index 是目标位置, 即节点在兄弟节点中的索引.|
-
-### `useHeTree`的返回
-
-`useHeTree`的返回是对象, 包含了一些 states 和方法. **注意**, 这个对象每次更新都会改变, 不要依赖这个对象, 可以依赖这个对象的属性. 属性如下:
-| 名称 | 类型 | 描述 |
-| ------------------------- | ------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------|
-|renderTree|`(options?: { className?: string, style?: React.CSSProperties }): ReactNode`|渲染树. 参数可以传入`className`和`style`控制根元素的样式.|
-|getStat|`(idOrNodeOrStat)=>stat`|根据 id, 节点数据或 stat, 获得对应的 stat.|
-|allIds|数组|所有节点的 id.|
-|rootIds|数组|树根级的所有节点的 id.|
-|rootNodes|数组|树根级的所有节点的数据. 如果是树形数据, 它就是选项中的`data`.|
-|rootStats|数组|树根级的所有节点的 stat.|
-|placeholder|`{parentStat, index, level}`| 拖拽时占位节点的信息. 占位节点不存在时为空.|
-|draggingStat|`stat`|由此树发起拖拽时, 被拖拽的节点的 stat. 不存在时为空.|
-|dragOverStat|`stat`|拖拽到其上面的节点. 可能为空.|
-|visibleIds|数组|显示的所有节点的 id.|
-|attrsList|数组|显示的所有节点的 attrs.|
-|virtualListRef|`ref`|虚拟列表组件的 ref, 参考[虚拟列表](https://github.com/phphe/react-base-virtual-list).|
-|scrollToNode|`(idOrNodeOrStat)=>boolean`|滚动到节点. 参数可以是 id, 节点数据或 stat. 如果节点未找到或未显示, 返回`false`. [例子](examples#scroll_to_node2)|
-
-## walkTreeDataGenerator
-
-通过`for of`遍历树形数据的方法. 循环中执行`skipChildren()`将跳过该节点的所有子节点, 执行`exitWalk`将结束遍历.
-
-```ts
-for (const [
- node,
- { parent, parents, siblings, index, skipChildren, exitWalk },
-] of walkTreeDataGenerator(data, "children")) {
- // ...
-}
-```
-
-## walkTreeData
-
-通过回调方法遍历树形数据的方法. 回调方法中执行`skipChildren()`将跳过该节点的所有子节点, 执行`exitWalk`将结束遍历.
-
-```ts
-walkTreeDataGenerator(
- data,
- (node, { parent, parents, siblings, index, skipChildren, exitWalk }) => {
- // ...
- },
- "children"
-);
-```
-
-## findTreeData
-
-类似 `Array.prototype.find`. 返回找到的第一个节点. 回调方法中执行`skipChildren()`将跳过该节点的所有子节点, 执行`exitWalk`将结束遍历.
-
-```ts
-let foundNode = findTreeData(
- data,
- (node, { parent, parents, siblings, index, skipChildren, exitWalk }) => {
- // return node.id === 1;
- },
- "children"
-);
-```
-
-## filterTreeData
-
-类似 `Array.prototype.filter`. 返回找到的所有节点. 回调方法中执行`skipChildren()`将跳过该节点的所有子节点, 执行`exitWalk`将结束遍历.
-
-```ts
-let nodes = filterTreeData(
- data,
- (node, { parent, parents, siblings, index, skipChildren, exitWalk }) => {
- // return node.id > 1;
- },
- "children"
-);
-```
-
-## openParentsInTreeData
-
-打开单个或多个节点的所有父节点, 这样才能确保该节点可见. [参考](guide#node_open).
-
-```
-(
- treeData,
- openIds: Id[],
- idOrIds: Id | Id[],
- options?: {idKey: string, childrenKey: string}
-): newOpenIds
-```
-
-## updateCheckedInTreeData
-
-更新单个节点或多个节点的`checked`状态. 这将同时更新它们的子节点和父节点. [参考](guide#node_checked).
-
-```
-(
- treeData,
- checkedIds: Id[],
- idOrIds: Id | Id[],
- checked: boolean,
- options?: {idKey: string, childrenKey: string}
-): [newCheckedIds, newSemiCheckedIds]
-```
-
-## sortFlatData
-
-把扁平数据按照节点在树里的顺序排序. 返回排序后的新数组. 你的数据在初始化时应该使用它以保证顺序.
-
-```
-(
- flatData,
- options?: {idKey: string, parentIdKey: string}
-): sortedData
-```
-
-## walkFlatDataGenerator
-
-通过`for of`遍历扁平数据的方法. 循环中执行`skipChildren()`将跳过该节点的所有子节点, 执行`exitWalk`将结束遍历. 使用前需确保你的数据的顺序是正确的.
-
-相比于`walkTreeDataGenerator`, 少了`siblings`, 多了 `treeIndex, id, pid`. `treeIndex`是节点在整个树中的索引.
-
-```ts
-for (const [
- node,
- { parent, parents, index, treeIndex, id, pid, skipChildren, exitWalk },
-] of walkFlatDataGenerator(flatData, {
- idKey: "id",
- parentIdKey: "parent_id",
-})) {
- // ...
-}
-```
-
-## walkFlatData
-
-通过回调方法遍历扁平数据的方法. 回调方法中执行`skipChildren()`将跳过该节点的所有子节点, 执行`exitWalk`将结束遍历. 使用前需确保你的数据的顺序是正确的.
-
-```ts
-walkFlatData(
- flatData,
- (
- node,
- { parent, parents, index, treeIndex, id, pid, skipChildren, exitWalk }
- ) => {
- // ...
- },
- {
- idKey: "id",
- parentIdKey: "parent_id",
- }
-);
-```
-
-## openParentsInFlatData
-
-打开单个或多个节点的所有父节点, 这样才能确保该节点可见. 用前需确保你的数据的顺序是正确的. [参考](guide#node_open).
-
-```
-(
- flatData,
- openIds: Id[],
- idOrIds: Id | Id[],
- options?: {
- idKey: "id",
- parentIdKey: "parent_id",
- }
-): newOpenIds
-```
-
-## updateCheckedInFlatData
-
-更新单个节点或多个节点的`checked`状态. 这将同时更新它们的子节点和父节点. 用前需确保你的数据的顺序是正确的. [参考](guide#node_checked).
-
-```
-(
- flatData,
- checkedIds: Id[],
- idOrIds: Id | Id[],
- checked: boolean,
- options?: {
- idKey: "id",
- parentIdKey: "parent_id",
- }
-): [newCheckedIds, newSemiCheckedIds]
-```
-
-## convertIndexToTreeIndexInFlatData
-
-通过某节点的父节点 id 和它在兄弟节点中的索引, 计算出它在整棵树中的索引.
-
-```
-(
- flatData,
- parentId: Id | null,
- indexInSiblings: Id | null,
- options?: {
- idKey: "id",
- parentIdKey: "parent_id",
- }
-): treeIndex
-```
-
-## addToFlatData
-
-向扁平数据添加一个节点. 它会改变原数据数组. 所以推荐传入原始数据的拷贝, 或者与`useImmer`一起使用. [参考](guide#update_flat_data_with_inner_methods2)
-
-```
-(
- flatData,
- newNode,
- index: Id | null,
- options?: {
- idKey: "id",
- parentIdKey: "parent_id",
- }
-):void
-```
-
-## removeByIdInFlatData
-
-从扁平数据删除一个节点. 返回被删除的数据. 它会改变原数据数组. 所以推荐传入原始数据的拷贝, 或者与`useImmer`一起使用. [参考](guide#update_flat_data_with_inner_methods2)
-
-```
-(
- flatData,
- removeId: Id | null,
- options?: {
- idKey: "id",
- parentIdKey: "parent_id",
- }
-): removedData
-```
-
-## walkParentsGenerator
-
-遍历另一种特殊数据的方法. 这种数据类似`HTMLElement`, 其中包含类似于`parentElement`的指向父节点的键.
-
-```
-(
- node,
- parentKeyOrGetter: string | ((node) => parent | undefined),
- options?: {
- withSelf: boolean;
- }
-): Generator
-```
-
-`parentKeyOrGetter`可以是字符串或者返回父级的方法. `options.withSelf`表示是否包括传入的节点. 返回 [Generator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator). 下面是遍历 HTMLElement 的例子:
-
-```ts
-let el = document.querySelector("div");
-for (const parent of walkParentsGenerator(el, "parentElement", {
- withSelf: true,
-})) {
- // ...
-}
-```
-
-## Stat
-
-`stat`包括和节点有关的信息. 只读. 属性如下:
-
-| 名称 | 类型 | 描述 |
-| ------------ | ------------ | :-------------------------- |
-| \_isStat | boolean | 表明是否是 stat 对象 |
-| node | object | 节点的数据 |
-| id | Id | id |
-| pid | Id, null | 节点的父级 id |
-| parent | object, null | 父节点的数据 |
-| parentStat | stat, null | 父节点的 stat |
-| childIds | Id[] | 子节点的 id 数组 |
-| children | object[] | 子节点数组 |
-| childStats | stat[] | 子节点的 stat 数组 |
-| siblingIds | Id[] | 兄弟节点的 id 数组 |
-| siblings | object[] | 兄弟节点数组 |
-| siblingStats | stat[] | 兄弟节点的 stat 数组 |
-| index | number | 节点在兄弟节点中的索引 |
-| level | number | 节点在树中的深度. 从 1 开始 |
-| open | boolean | 是否展开 |
-| checked | boolean | 是否勾选 |
-| draggable | boolean | 是否可拖动 |
diff --git a/docs/zh/v1/examples.md b/docs/zh/v1/examples.md
deleted file mode 100644
index e1ed0d9..0000000
--- a/docs/zh/v1/examples.md
+++ /dev/null
@@ -1,106 +0,0 @@
-# 示例
-
-## 自定义样式
-
-
-**源代码**
-
-<<< @/../src/pages/custom_style.tsx
-
-## 扁平数据
-
-
-**源代码**
-
-<<< @/../src/pages/base_flat_data.tsx
-
-## 树形数据
-
-
-**源代码**
-
-<<< @/../src/pages/base_tree_data.tsx
-
-## 触发元素
-
-
-**源代码**
-
-<<< @/../src/pages/custom_drag_trigger_flat_data.tsx{14}
-
-## 占位元素
-
-
-**源代码**
-
-<<< @/../src/pages/customize_placeholder_and_node_box.tsx{13-19,23-39}
-
-## 展开
-
-
-**源代码**
-
-<<< @/../src/pages/open_ids.tsx{1,9-16,22-24,29-32}
-
-## 勾选
-
-
-**源代码**
-
-<<< @/../src/pages/checked_ids.tsx{1,9-15,21-23,28-29}
-
-## 拖拽控制
-
-
-**源代码**
-
-<<< @/../src/pages/draggable_droppable.tsx{16-18}
-
-## 拖拽时打开
-
-
-**源代码**
-
-<<< @/../src/pages/dragopen.tsx
-
-## 更新扁平数据
-
-
-**源代码**
-
-<<< @/../src/pages/update_data.tsx{3,12-22,33-34}
-
-## 更新扁平数据使用 immer
-
-
-**源代码**
-
-<<< @/../src/pages/update_flat_data_with_immer.tsx{3,7,12,13-31,42-44}
-
-## 更新树形数据使用 immer
-
-
-**源代码**
-
-<<< @/../src/pages/update_tree_data_with_immer.tsx{1,4,10-30,41-43}
-
-## 外部拖拽交互
-
-
-**源代码**
-
-<<< @/../src/pages/external_drag.tsx{16-22,25}
-
-## 大数据, 虚拟列表
-
-
-**源代码**
-
-<<< @/../src/pages/virtual_list.tsx{23,30}
-
-## 滚动到节点
-
-
-**源代码**
-
-<<< @/../src/pages/scroll_to_node.tsx{17,30}
diff --git a/docs/zh/v1/guide.md b/docs/zh/v1/guide.md
deleted file mode 100644
index 98e9f3f..0000000
--- a/docs/zh/v1/guide.md
+++ /dev/null
@@ -1,269 +0,0 @@
-# 使用指南
-
-## 安装
-
-::: code-group
-
-```sh [npm]
-npm install he-tree-react
-```
-
-```sh [pnpm]
-pnpm add he-tree-react
-```
-
-```sh [yarn]
-yarn add he-tree-react
-```
-
-:::
-
-## 数据类型
-
-此库支持两种结构的数据:
-
-- 扁平数据, 即一个一维数组. 类似与存储在数据库中的数据. 每项需要`id`, 父级 id, `null`代表没有父级. 扁平数据的顺序必须跟树一样, 你可以在初始化数据时使用[`sortFlatData`](./api#sortflatdata)方法给数据排序.
- ```js
- [
- { id: 1, pid: null },
- { id: 2, pid: 1 },
- { id: 3, pid: 2 },
- ];
- ```
-- 树形数据. 使用`children`数组包含子节点. 如果未指定`id`, 此库将使用节点在树中的索引作为`id`. 使用树形数据时需设置`dataType: 'tree'`.
-
-```js
-[
- {
- id: 1,
- children: [
- {
- id: 2,
- children: [{ id: 3 }],
- },
- ],
- },
-];
-```
-
-数据中的`id, pid, children`不是固定的. 在设置中, 使用`idKey, parentIdKey, childrenKey`表明你的数据中的对应键名.
-
-## 没有组件
-
-此库没有导出组件,而是导出一个 hook `useHeTree`. 使用它返回的`renderTree`渲染树. 这样做的好处是除了`renderTree`,
-`useHeTree`还会返回一些内部状态和方法, 可以轻松的被获取.
-
-```js
-import { useHeTree } from "he-tree-react";
-
-export default function App() {
- const { renderTree } = useHeTree({...})
- return
