Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: cascader component value support number type #24247

Merged
merged 1 commit into from
May 18, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 46 additions & 0 deletions components/cascader/__tests__/type.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import * as React from 'react';
import Cascader from '..';

describe('Cascader.typescript', () => {
it('options value', () => {
const options = [
{
value: 1,
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
children: [
{
value: 'xihu',
label: 'West Lake',
},
],
},
],
},
{
value: 'jiangsu',
label: 'Jiangsu',
children: [
{
value: 'nanjing',
label: 'Nanjing',
children: [
{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
},
],
},
],
},
];


const result = <Cascader options={options} defaultValue={[1, 'hangzhou']} />;

expect(result).toBeTruthy();
});
});
6 changes: 3 additions & 3 deletions components/cascader/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ Cascade selection box.
| bordered | whether has border style | boolean | true | |
| changeOnSelect | change value on each selection if set to true, see above demo for details | boolean | false | |
| className | additional css class | string | - | |
| defaultValue | initial selected value | string\[] | \[] | |
| defaultValue | initial selected value | string\[] | number\[] | \[] | |
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

- | defaultValue | initial selected value | string\[] | number\[] | \[] |  |
+ | defaultValue | initial selected value | string\[] \| number\[] | \[] |  |

| disabled | whether disabled select | boolean | false | |
| displayRender | render function of displaying selected options | `(label, selectedOptions) => ReactNode` | `label => label.join(' / ')` | |
| expandTrigger | expand current item when click or hover, one of 'click' 'hover' | string | 'click' | |
Expand All @@ -42,7 +42,7 @@ Cascade selection box.
| size | input size | `large` \| `middle` \| `small` | | |
| style | additional style | CSSProperties | - | |
| suffixIcon | The custom suffix icon | ReactNode | - | |
| value | selected value | string\[] | - | |
| value | selected value | string\[] | number\[] | - | |
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

- | defaultValue | initial selected value | string\[] | number\[] | \[] |  |
+ | defaultValue | initial selected value | string\[] \| number\[] | \[] |  |

| onChange | callback when finishing cascader select | `(value, selectedOptions) => void` | - | |
| onPopupVisibleChange | callback when popup shown or hidden | `(value) => void` | - | |

Expand All @@ -60,7 +60,7 @@ Fields in `showSearch`:

```typescript
interface Option {
value: string;
value: string | number;
label?: React.ReactNode;
disabled?: boolean;
children?: Option[];
Expand Down
18 changes: 10 additions & 8 deletions components/cascader/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import SizeContext, { SizeType } from '../config-provider/SizeContext';
import { replaceElement } from '../_util/reactNode';

export interface CascaderOptionType {
value?: string;
value?: string | number;
label?: React.ReactNode;
disabled?: boolean;
isLeaf?: boolean;
Expand All @@ -29,19 +29,21 @@ export interface CascaderOptionType {
}

export interface FieldNamesType {
value?: string;
value?: string | number;
label?: string;
children?: string;
}

export interface FilledFieldNamesType {
value: string;
value: string | number;
label: string;
children: string;
}

export type CascaderExpandTrigger = 'click' | 'hover';

export type CascaderValueType = (string | number)[];

export interface ShowSearchType {
filter?: (inputValue: string, path: CascaderOptionType[], names: FilledFieldNamesType) => boolean;
render?: (
Expand All @@ -64,11 +66,11 @@ export interface CascaderProps {
/** 可选项数据源 */
options: CascaderOptionType[];
/** 默认的选中项 */
defaultValue?: string[];
defaultValue?: CascaderValueType;
/** 指定选中项 */
value?: string[];
value?: CascaderValueType;
/** 选择完成后的回调 */
onChange?: (value: string[], selectedOptions?: CascaderOptionType[]) => void;
onChange?: (value: CascaderValueType, selectedOptions?: CascaderOptionType[]) => void;
/** 选择后展示的渲染函数 */
displayRender?: (label: string[], selectedOptions?: CascaderOptionType[]) => React.ReactNode;
/** 自定义样式 */
Expand Down Expand Up @@ -110,7 +112,7 @@ export interface CascaderProps {
export interface CascaderState {
inputFocused: boolean;
inputValue: string;
value: string[];
value: CascaderValueType;
popupVisible: boolean | undefined;
flattenOptions: CascaderOptionType[][] | undefined;
prevProps: CascaderProps;
Expand Down Expand Up @@ -264,7 +266,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
};
}

setValue = (value: string[], selectedOptions: CascaderOptionType[] = []) => {
setValue = (value: CascaderValueType, selectedOptions: CascaderOptionType[] = []) => {
if (!('value' in this.props)) {
this.setState({ value });
}
Expand Down
6 changes: 3 additions & 3 deletions components/cascader/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ subtitle: 级联选择
| bordered | 是否有边框 | boolean | true | |
| changeOnSelect | 当此项为 true 时,点选每级菜单选项值都会发生变化,具体见上面的演示 | boolean | false | |
| className | 自定义类名 | string | - | |
| defaultValue | 默认的选中项 | string\[] | \[] | |
| defaultValue | 默认的选中项 | string\[] | number\[] | \[] | |
| disabled | 禁用 | boolean | false | |
| displayRender | 选择后展示的渲染函数 | `(label, selectedOptions) => ReactNode` | `label => label.join(' / ')` | |
| expandTrigger | 次级菜单的展开方式,可选 'click' 和 'hover' | string | 'click' | |
Expand All @@ -43,7 +43,7 @@ subtitle: 级联选择
| size | 输入框大小 | `large` \| `middle` \| `small` | 无 | |
| style | 自定义样式 | CSSProperties | - | |
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
| value | 指定选中项 | string\[] | - | |
| value | 指定选中项 | string\[] | number\[] | - | |
| onChange | 选择完成后的回调 | `(value, selectedOptions) => void` | - | |
| onPopupVisibleChange | 显示/隐藏浮层的回调 | `(value) => void` | - | |

Expand All @@ -61,7 +61,7 @@ subtitle: 级联选择

```typescript
interface Option {
value: string;
value: string | number;
label?: React.ReactNode;
disabled?: boolean;
children?: Option[];
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@
"prop-types": "^15.7.2",
"raf": "^3.4.1",
"rc-animate": "~3.0.0",
"rc-cascader": "~1.0.0",
"rc-cascader": "~1.1.0",
"rc-checkbox": "~2.2.0",
"rc-collapse": "~2.0.0",
"rc-dialog": "~7.7.0",
Expand Down