Skip to content

Commit 77fadf0

Browse files
afc163afc163
committed
docs: add Chinese README
1 parent 34f4c91 commit 77fadf0

2 files changed

Lines changed: 186 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@
1414
</p>
1515
</div>
1616

17+
<p align="center">English | <a href="./README.zh-CN.md">简体中文</a></p>
18+
1719

1820
## Highlights
1921

‎README.zh-CN.md‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
<div align="center">
2+
<h1>@rc-component/tree-select</h1>
3+
<p><sub>Ant Design 生态的一部分。</sub></p>
4+
<img alt="Ant Design" height="32" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" />
5+
<p>🌲 React 树选择组件，结合树形数据、多选、搜索和下拉交互。</p>
6+
7+
<p>
8+
<a href="https://npmjs.org/package/@rc-component/tree-select"><img alt="NPM version" src="https://img.shields.io/npm/v/@rc-component/tree-select.svg?style=flat-square"></a>
9+
<a href="https://npmjs.org/package/@rc-component/tree-select"><img alt="npm downloads" src="https://img.shields.io/npm/dm/@rc-component/tree-select.svg?style=flat-square"></a>
10+
<a href="https://github.com/react-component/tree-select/actions/workflows/react-component-ci.yml"><img alt="build status" src="https://github.com/react-component/tree-select/actions/workflows/react-component-ci.yml/badge.svg"></a>
11+
<a href="https://app.codecov.io/gh/react-component/tree-select"><img alt="Codecov" src="https://img.shields.io/codecov/c/github/react-component/tree-select/master.svg?style=flat-square"></a>
12+
<a href="https://bundlephobia.com/package/@rc-component/tree-select"><img alt="bundle size" src="https://img.shields.io/bundlephobia/minzip/@rc-component/tree-select?style=flat-square"></a>
13+
<a href="https://github.com/umijs/dumi"><img alt="dumi" src="https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square"></a>
14+
</p>
15+
</div>
16+
17+
<p align="center"><a href="./README.md">English</a> | 简体中文</p>
18+
19+
20+
## 特性
21+
22+
| 范围 | 支持 |
23+
| --------- | --------------------------------------------------------- |
24+
| Data | Tree data, simple mode, custom field names |
25+
| Selection | Single, multiple, checkable, strict check, label-in-value |
26+
| Search | Controlled search, custom filter, auto clear |
27+
| Loading | Async tree loading and controlled loaded keys |
28+
| Scale | Virtual scrolling with configurable list metrics |
29+
30+
## 安装
31+
32+
```bash
33+
npm install @rc-component/tree-select
34+
```
35+
36+
## 使用
37+
38+
```tsx | pure
39+
import TreeSelect from '@rc-component/tree-select';
40+
41+
const treeData = [
42+
{
43+
title: 'Parent',
44+
value: 'parent',
45+
children: [
46+
{
47+
title: 'Child',
48+
value: 'child',
49+
},
50+
],
51+
},
52+
];
53+
54+
export default () => <TreeSelect treeData={treeData} placeholder="Select a node" />;
55+
```
56+
57+
## 示例
58+
59+
```bash
60+
npm install
61+
npm start
62+
```
63+
64+
Open <http://localhost:8000/examples/> locally, or visit the online example:
65+
<https://tree-select-react-component.vercel.app/>.
66+
67+
## API
68+
69+
### TreeSelect
70+
71+
TreeSelect also accepts public props from `@rc-component/select` `BaseSelect`, except
72+
for the internal `mode`, `classNames`, `styles`, and `showSearch` props that are
73+
redefined by TreeSelect.
74+
75+
| 名称 | 说明 | 类型 | 默认值 |
76+
| ----------------------- | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
77+
| autoClearSearchValue | Deprecated. Use `showSearch.autoClearSearchValue` instead. | boolean | true |
78+
| classNames | Semantic class names. | `Partial<Record<SemanticName, string>> & { popup?: Partial<Record<PopupSemantic, string>> }` | - |
79+
| defaultValue | Initial selected value. | `ValueType` | - |
80+
| fieldNames | Customize field names for tree data. | `FieldNames` | - |
81+
| filterTreeNode | Deprecated. Use `showSearch.filterTreeNode` instead. | boolean \| `(inputValue: string, treeNode: DataNode) => boolean` | - |
82+
| inputValue | Deprecated. Use `showSearch.searchValue` instead. | string | - |
83+
| labelInValue | Whether to return labeled value objects instead of raw values. | boolean | false |
84+
| listHeight | Popup list height. | number | 200 |
85+
| listItemHeight | Popup list item height. | number | 20 |
86+
| listItemScrollOffset | Popup list item scroll offset. | number | 0 |
87+
| loadData | Load tree data asynchronously. | `(dataNode: LegacyDataNode) => Promise<unknown>` | - |
88+
| maxCount | Maximum selected item count in multiple or checkable mode. | number | - |
89+
| multiple | Enable multiple selection. | boolean | false |
90+
| onChange | Called when selected value changes. | `(value: ValueType, labelList: ReactNode[], extra: ChangeEventExtra) => void` | - |
91+
| onDeselect | Called when a value is deselected. | `(value: ValueType, option: OptionType) => void` | - |
92+
| onPopupVisibleChange | Called when popup visibility changes. | `(open: boolean) => void` | - |
93+
| onSearch | Deprecated. Use `showSearch.onSearch` instead. | `(value: string) => void` | - |
94+
| onSelect | Called when a value is selected. | `(value: ValueType, option: OptionType) => void` | - |
95+
| onTreeExpand | Called when expanded tree keys change. | `(expandedKeys: SafeKey[]) => void` | - |
96+
| onTreeLoad | Called when async loaded keys change. | `(loadedKeys: SafeKey[]) => void` | - |
97+
| searchValue | Deprecated. Use `showSearch.searchValue` instead. | string | - |
98+
| showCheckedStrategy | Configure how checked values are displayed. | `SHOW_ALL` \| `SHOW_PARENT` \| `SHOW_CHILD` | `SHOW_CHILD` when `treeCheckable` is enabled, otherwise `SHOW_ALL` |
99+
| showSearch | Enable search or configure search behavior. | boolean \| `SearchConfig` | - |
100+
| showTreeIcon | Whether to show tree icons. | boolean | false |
101+
| styles | Semantic styles. | `Partial<Record<SemanticName, CSSProperties>> & { popup?: Partial<Record<PopupSemantic, CSSProperties>> }` | - |
102+
| switcherIcon | Custom tree switcher icon. | `IconType` | - |
103+
| treeCheckable | Whether to show checkboxes in the tree. | boolean \| ReactNode | false |
104+
| treeCheckStrictly | Check tree nodes precisely without parent-child association. | boolean | false |
105+
| treeData | Tree node data. | `OptionType[]` | - |
106+
| treeDataSimpleMode | Enable simple tree data mode. | boolean \| `SimpleModeConfig` | false |
107+
| treeDefaultExpandAll | Expand all tree nodes by default. | boolean | false |
108+
| treeDefaultExpandedKeys | Initial expanded tree keys. | `SafeKey[]` | - |
109+
| treeExpandAction | Expand action for tree nodes. | false \| `click` \| `doubleClick` | `click` |
110+
| treeExpandedKeys | Controlled expanded tree keys. | `SafeKey[]` | - |
111+
| treeIcon | Custom tree icon. | `IconType` | - |
112+
| treeLine | Whether to show tree lines. | boolean | false |
113+
| treeLoadedKeys | Controlled loaded tree keys. | `SafeKey[]` | - |
114+
| treeMotion | Tree motion config. | any | - |
115+
| treeNodeFilterProp | Deprecated. Use `showSearch.treeNodeFilterProp` instead. | string | `value` |
116+
| treeNodeLabelProp | Tree node prop rendered as selected label. | string | `title` |
117+
| treeTitleRender | Custom tree node title renderer. | `(node: OptionType) => ReactNode` | - |
118+
| value | Controlled selected value. | `ValueType` | - |
119+
| virtual | Disable virtual scrolling when set to `false`. | boolean | - |
120+
121+
### SearchConfig
122+
123+
| 名称 | 说明 | 类型 | 默认值 |
124+
| -------------------- | ------------------------------------------------------------------- | ---------------------------------------------------------------- | ------- |
125+
| autoClearSearchValue | Clear search input after selecting or deselecting in multiple mode. | boolean | true |
126+
| filterTreeNode | Filter tree nodes by search input. | boolean \| `(inputValue: string, treeNode: DataNode) => boolean` | - |
127+
| onSearch | Called when search input changes. | `(value: string) => void` | - |
128+
| searchValue | Controlled search input value. | string | - |
129+
| treeNodeFilterProp | Tree node prop used for filtering when `filterTreeNode` is enabled. | string | `value` |
130+
131+
### DataNode
132+
133+
| 名称 | 说明 | 类型 | 默认值 |
134+
| -------- | ---------------------- | ------------ | ------- |
135+
| children | Child tree nodes. | `DataNode[]` | - |
136+
| disabled | Disable the tree node. | boolean | false |
137+
| key | Unique tree node key. | `React.Key` | - |
138+
| title | Tree node title. | ReactNode | - |
139+
| value | Tree node value. | `SafeKey` | - |
140+
141+
### TreeNode
142+
143+
Using `treeData` is recommended. `TreeNode` is kept for legacy usage.
144+
145+
| 名称 | 说明 | 类型 | 默认值 |
146+
| -------- | ----------------------------- | --------- | ------- |
147+
| disabled | Disable the tree node. | boolean | false |
148+
| isLeaf | Mark the node as a leaf node. | boolean | false |
149+
| key | Unique tree node key. | React.Key | - |
150+
| title | Tree node title. | ReactNode | - |
151+
| value | Tree node value. | SafeKey | - |
152+
153+
## 说明
154+
155+
For large trees, avoid expanding all nodes by default. Prefer virtual scrolling,
156+
keep the number of simultaneous TreeSelect instances low, and use
157+
`treeCheckStrictly` when checkable mode has many nodes.
158+
159+
In `treeCheckable` mode, removing a selected item from the selector and
160+
unchecking the matching tree node produce the same selected values, but they are
161+
different interactions. Both trigger `onChange`, and the `extra` argument may
162+
therefore differ.
163+
164+
## 本地开发
165+
166+
```bash
167+
npm install
168+
npm start
169+
npm test
170+
npm run lint
171+
npm run compile
172+
```
173+
174+
## 发布
175+
176+
```bash
177+
npm run prepublishOnly
178+
```
179+
180+
The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build.
181+
182+
## 许可证
183+
184+
@rc-component/tree-select is released under the [MIT](./LICENSE.md) license.

0 commit comments

Comments
 (0)