-
-
Notifications
You must be signed in to change notification settings - Fork 928
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor all Tree related components. (#3769)
* refactor: refactor CheckTree and CheckTreePicker components * refactor: refactor Tree and TreePicker components * refactor: refactor Tree and TreePicker components * fix: fix accessibility * feat: add support for `searchable` on `<Tree>` and `<CheckTree>` * fix: fix bad tests * chore: remove deprecated utility functions * fix: remove inline parameter in usePickerRef * fix: remove useFlattenTreeData * test: add tests * fix(CheckTree): fix checked error in deep nested data * feat: use `treeHeight` instead of height * fix: fix disabled option style issue * fix: fix Tree not updated when loading data asynchronously * fix: fix indent line not show in dark mode * fix: fix cannot keep the expanded state * test: add tests * fix: use useFocusState in CheckTreePicker * fix(CheckTreePicker): fix the flicker of the tree node checked state * fix(CheckTreePicker): fix the flicker of the tree node checked state * fix(Tree): fix the problem that tree nodes cannot be dragged * fix(Tree,CheckTree): fix tree node cannot be interacted with by keyboard when virtualized * fix: remove redundant code * refactor: use CSS to add indent lines to tree nodes * docs: add examples for uncheckable and disabled * fix(TreePicker): fix accessibility issues * fix: fix failed tests * fix: `renderMenu` is deprecated and replaced by `reanderTree` * docs: fix errors in docs
- Loading branch information
Showing
146 changed files
with
7,217 additions
and
5,114 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| ### `ts:TreeNode` | ||
|
|
||
| ```ts | ||
| interface TreeNode { | ||
| /** The value of the option corresponds to the `valueKey` in the data. **/ | ||
| value: string | number; | ||
|
|
||
| /** The content displayed by the option corresponds to the `labelKey` in the data. **/ | ||
| label: React.ReactNode; | ||
|
|
||
| /** The data of the child option corresponds to the `childrenKey` in the data. */ | ||
| children?: TreeNode[]; | ||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| <!--start-code--> | ||
|
|
||
| ```js | ||
| import { CheckTree } from 'rsuite'; | ||
|
|
||
| const data = [ | ||
| { | ||
| label: 'Node 1', | ||
| value: '1', | ||
| children: [ | ||
| { | ||
| label: 'Node 1-1', | ||
| value: '1-1' | ||
| }, | ||
| { | ||
| label: 'Node 1-2', | ||
| value: '1-2' | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| label: 'Node 2', | ||
| value: '2', | ||
| children: [ | ||
| { | ||
| label: 'Node 2-1', | ||
| value: '2-1', | ||
| children: [ | ||
| { | ||
| label: 'Node 2-1-1', | ||
| value: '2-1-1' | ||
| }, | ||
| { | ||
| label: 'Node 2-1-2', | ||
| value: '2-1-2' | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| label: 'Node 2-2', | ||
| value: '2-2' | ||
| } | ||
| ] | ||
| } | ||
| ]; | ||
|
|
||
| const App = () => ( | ||
| <CheckTree data={data} disabledItemValues={['1', '2', '2-1-1', '2-1-2']} defaultExpandAll /> | ||
| ); | ||
|
|
||
| ReactDOM.render(<App />, document.getElementById('root')); | ||
| ``` | ||
|
|
||
| <!--end-code--> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| <!--start-code--> | ||
|
|
||
| ```js | ||
| import { CheckTree } from 'rsuite'; | ||
| import { mockTreeData } from './mock'; | ||
|
|
||
| const data = mockTreeData({ | ||
| limits: [3, 3, 4], | ||
| labels: (layer, value, faker) => { | ||
| const methodName = ['jobArea', 'jobType', 'firstName']; | ||
| return faker.person[methodName[layer]](); | ||
| } | ||
| }); | ||
|
|
||
| const App = () => { | ||
| return <CheckTree data={data} searchable />; | ||
| }; | ||
| ReactDOM.render(<App />, document.getElementById('root')); | ||
| ``` | ||
|
|
||
| <!--end-code--> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| <!--start-code--> | ||
|
|
||
| ```js | ||
| import { CheckTree } from 'rsuite'; | ||
|
|
||
| const data = [ | ||
| { | ||
| label: 'Node 1', | ||
| value: '1', | ||
| children: [ | ||
| { | ||
| label: 'Node 1-1', | ||
| value: '1-1' | ||
| }, | ||
| { | ||
| label: 'Node 1-2', | ||
| value: '1-2' | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| label: 'Node 2', | ||
| value: '2', | ||
| children: [ | ||
| { | ||
| label: 'Node 2-1', | ||
| value: '2-1', | ||
| children: [ | ||
| { | ||
| label: 'Node 2-1-1', | ||
| value: '2-1-1' | ||
| }, | ||
| { | ||
| label: 'Node 2-1-2', | ||
| value: '2-1-2' | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| label: 'Node 2-2', | ||
| value: '2-2' | ||
| } | ||
| ] | ||
| } | ||
| ]; | ||
|
|
||
| const App = () => ( | ||
| <CheckTree data={data} uncheckableItemValues={['1', '2', '2-1-1', '2-1-2']} defaultExpandAll /> | ||
| ); | ||
|
|
||
| ReactDOM.render(<App />, document.getElementById('root')); | ||
| ``` | ||
|
|
||
| <!--end-code--> |
Oops, something went wrong.