Skip to content

Commit 5035090

Browse files
crazyaircrazyair
authored
CascaderProps 重构 (#480)
* feat: 优化代码 * feat: 优化代码 * feat: 优化代码 * feat: 优化类型 * feat: 优化类型 * feat: 优化类型 * feat: 修复 * feat: test * feat: test * feat: 移除 T * feat: 移除 T * feat: 移除 T * feat: 移除 T * feat: add * feat: t * feat: onChange * feat: onChange * feat: type * feat: type * feat: type * feat: demo * feat: type * feat: type * feat: 删除 demo.tsx * feat: 删除 any * feat: review * feat: review * feat: review * feat: review * feat: 优化类型 * feat: test * feat: test * feat: test * feat: test * feat: test * feat: test * feat: test * feat: null * feat: type * feat: review * feat: 优化类型,可以只写 filedNames * feat: add Multiple 泛型 * feat: 优化写法 * feat: add test * feat: 代码优化 * feat: 代码优化 * feat: review * feat: review * feat: review * feat: review * feat: list type * feat: ingore * feat: any * feat: any
1 parent e5941ba commit 5035090

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+342
-249
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,3 +38,4 @@ coverage
3838
.dumi/tmp
3939
.dumi/tmp-production
4040
dist
41+
.vscode

‎examples/adjust-overflow.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import React, { useState } from 'react';
22
import type { BuildInPlacements } from '@rc-component/trigger/lib/interface';
33
import '../assets/index.less';
4+
import type { CascaderProps } from '../src';
45
import Cascader from '../src';
6+
import type { Option2 } from './utils';
57

68
const addressOptions = [
79
{
@@ -60,7 +62,7 @@ const addressOptions = [
6062
const MyCascader = ({ builtinPlacements }: { builtinPlacements?: BuildInPlacements }) => {
6163
const [inputValue, setInputValue] = useState('');
6264

63-
const onChange = (value, selectedOptions) => {
65+
const onChange: CascaderProps<Option2>['onChange'] = (value, selectedOptions) => {
6466
console.log(value, selectedOptions);
6567
setInputValue(selectedOptions.map(o => o.label).join(', '));
6668
};

‎examples/animation.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React, { useState } from 'react';
22
import '../assets/index.less';
3+
import type { CascaderProps } from '../src';
34
import Cascader from '../src';
5+
import type { Option2 } from './utils';
46

57
const addressOptions = [
68
{
@@ -58,7 +60,7 @@ const addressOptions = [
5860
const Demo = () => {
5961
const [inputValue, setInputValue] = useState('');
6062

61-
const onChange = (value, selectedOptions) => {
63+
const onChange: CascaderProps<Option2, 'value'>['onChange'] = (value, selectedOptions) => {
6264
console.log(value, selectedOptions);
6365
setInputValue(selectedOptions.map(o => o.label).join(', '));
6466
};

‎examples/change-on-select.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React from 'react';
22
import '../assets/index.less';
3+
import type { CascaderProps } from '../src';
34
import Cascader from '../src';
5+
import type { Option2 } from './utils';
46

57
const options = [
68
{
@@ -61,7 +63,7 @@ const options = [
6163
},
6264
];
6365

64-
const onChange = (value, selectedOptions) => {
66+
const onChange: CascaderProps<Option2>['onChange'] = (value, selectedOptions) => {
6567
console.log(value, selectedOptions);
6668
};
6769

‎examples/custom-arrow-icon.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import React, { useState } from 'react';
22
import '../assets/index.less';
3+
import type { CascaderProps } from '../src';
34
import Cascader from '../src';
5+
import type { Option2 } from './utils';
46

5-
const addressOptions = [
7+
const addressOptions: CascaderProps<Option2>['options'] = [
68
{
79
label: '福建',
810
value: 'fj',
@@ -96,12 +98,12 @@ const Demo = () => {
9698
},
9799
]);
98100

99-
const onChange = (value, selectedOptions) => {
101+
const onChange: CascaderProps<Option2>['onChange'] = (value, selectedOptions) => {
100102
console.log(value, selectedOptions);
101103
setInputValue(selectedOptions.map(o => o.label).join(', '));
102104
};
103105

104-
const onChangeDynamic = (value, selectedOptions) => {
106+
const onChangeDynamic: CascaderProps<Option2>['onChange'] = (value, selectedOptions) => {
105107
console.log(value, selectedOptions);
106108
setDynamicInputValue(selectedOptions.map(o => o.label).join(', '));
107109
};
@@ -146,7 +148,7 @@ const Demo = () => {
146148
</i>
147149
);
148150

149-
const loadData = selectedOptions => {
151+
const loadData: CascaderProps<Option2>['loadData'] = selectedOptions => {
150152
const targetOption = selectedOptions[selectedOptions.length - 1];
151153
targetOption.loading = true;
152154
// 动态加载下级数据

‎examples/custom-field-name.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import React, { useState } from 'react';
22
import '../assets/index.less';
3+
import type { CascaderProps } from '../src';
34
import Cascader from '../src';
5+
import type { Option } from './utils';
46

5-
const addressOptions = [
7+
const addressOptions: Option[] = [
68
{
79
name: '福建',
810
code: 'fj',
@@ -59,7 +61,7 @@ const addressOptions = [
5961
const Demo = () => {
6062
const [inputValue, setInputValue] = useState('');
6163

62-
const onChange = (value, selectedOptions) => {
64+
const onChange: CascaderProps<Option, 'code'>['onChange'] = (value, selectedOptions) => {
6365
console.log(value, selectedOptions);
6466
setInputValue(selectedOptions.map(o => o.name).join(', '));
6567
};

‎examples/debug.tsx‎

Lines changed: 16 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React from 'react';
22
import '../assets/index.less';
33
import Cascader from '../src';
4+
import type { Option2 } from './utils';
45

5-
const addressOptions = [
6+
const addressOptions: Option2[] = [
67
// ...new Array(20).fill(null).map((_, i) => ({ label: String(i), value: `99${i}` })),
78
{
89
label: <span>空孩子</span>,
@@ -88,7 +89,7 @@ const addressOptions = [
8889
const Demo = () => {
8990
const [multiple, setMultiple] = React.useState(true);
9091

91-
const onChange = (value: any, selectedOptions: any) => {
92+
const onChange = (value: string[], selectedOptions: Option2[]) => {
9293
console.log('[DEBUG] onChange - value:', value);
9394
console.log('[DEBUG] onChange - selectedOptions:', selectedOptions);
9495
};
@@ -105,27 +106,19 @@ const Demo = () => {
105106
/>
106107
Multiple
107108
</label>
108-
<Cascader
109-
style={{ width: 200 }}
110-
options={addressOptions}
111-
onChange={onChange}
112-
checkable={multiple}
113-
allowClear
114-
// defaultValue={multiple ? [defaultValue] : defaultValue}
115-
// defaultValue={[['not', 'yet'], ['exist']]}
116-
// defaultValue={[['empty']]}
117-
defaultValue={['fj', 'fuzhou']}
118-
showSearch
119-
// showSearch={{ limit: 1 }}
120-
// open
121-
// tagRender={props => {
122-
// console.log(props);
123-
// return props.label as any;
124-
// }}
125-
// direction="rtl"
126-
// searchValue="福a"
127-
// changeOnSelect
128-
/>
109+
{multiple ? (
110+
<Cascader style={{ width: 200 }} checkable defaultValue={[['fj'], ['fuzhou']]} showSearch />
111+
) : (
112+
<Cascader
113+
style={{ width: 200 }}
114+
options={addressOptions}
115+
onChange={onChange}
116+
checkable={false}
117+
allowClear
118+
defaultValue={['fj', 'fuzhou']}
119+
showSearch
120+
/>
121+
)}
129122
</>
130123
);
131124
};

‎examples/default-expand-single-option.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
/* eslint-disable @typescript-eslint/no-shadow */
22
import React, { useState } from 'react';
33
import '../assets/index.less';
4+
import type { CascaderProps } from '../src';
45
import Cascader from '../src';
6+
import type { Option2 } from './utils';
57

68
const options = [
79
{
@@ -41,12 +43,12 @@ const options = [
4143
const App = () => {
4244
const [inputValue, setInputValue] = useState('');
4345

44-
const [value, setValue] = useState([]);
46+
const [value, setValue] = useState<string[]>([]);
4547

46-
const onChange = (value, selectedOptions) => {
48+
const onChange: CascaderProps<Option2, 'value'>['onChange'] = (value, selectedOptions) => {
4749
const lastSelected = selectedOptions[selectedOptions.length - 1];
4850
if (lastSelected.children && lastSelected.children.length === 1) {
49-
value.push(lastSelected.children[0].value);
51+
value.push(lastSelected.children[0].value as string);
5052
setInputValue(selectedOptions.map(o => o.label).join(', '));
5153
setValue(value);
5254
return;

‎examples/defaultValue.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React, { useState } from 'react';
22
import '../assets/index.less';
3+
import type { CascaderProps } from '../src';
34
import Cascader from '../src';
5+
import type { Option2 } from './utils';
46

57
const addressOptions = [
68
{
@@ -93,7 +95,7 @@ const defaultOptions = [
9395
const Demo = () => {
9496
const [inputValue, setInputValue] = useState(defaultOptions.map(o => o.label).join(', '));
9597

96-
const onChange = (value, selectedOptions) => {
98+
const onChange: CascaderProps<Option2>['onChange'] = (value, selectedOptions) => {
9799
console.log(value, selectedOptions);
98100
setInputValue(selectedOptions.map(o => o.label).join(', '));
99101
};

‎examples/dropdown-render.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React, { useState } from 'react';
22
import '../assets/index.less';
3+
import type { CascaderProps } from '../src';
34
import Cascader from '../src';
5+
import type { Option2 } from './utils';
46

57
const addressOptions = [
68
{
@@ -59,7 +61,7 @@ const addressOptions = [
5961
const Demo = () => {
6062
const [inputValue, setInputValue] = useState('');
6163

62-
const onChange = (value, selectedOptions) => {
64+
const onChange: CascaderProps<Option2>['onChange'] = (value, selectedOptions) => {
6365
console.log(value, selectedOptions);
6466
setInputValue(selectedOptions.map(o => o.label).join(', '));
6567
};

0 commit comments

Comments
 (0)