From 6e17a24d8bb8e0695254b78031339aebd7700b3e Mon Sep 17 00:00:00 2001 From: Loogeek Date: Sun, 17 May 2020 16:54:18 +0800 Subject: [PATCH] fix: cascader component value support number type add cascader type.test.tsx --- components/cascader/__tests__/type.test.tsx | 46 +++++++++++++++++++++ components/cascader/index.en-US.md | 6 +-- components/cascader/index.tsx | 18 ++++---- components/cascader/index.zh-CN.md | 6 +-- package.json | 2 +- 5 files changed, 63 insertions(+), 15 deletions(-) create mode 100644 components/cascader/__tests__/type.test.tsx diff --git a/components/cascader/__tests__/type.test.tsx b/components/cascader/__tests__/type.test.tsx new file mode 100644 index 000000000000..d401efeae5e1 --- /dev/null +++ b/components/cascader/__tests__/type.test.tsx @@ -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 = ; + + expect(result).toBeTruthy(); + }); +}); diff --git a/components/cascader/index.en-US.md b/components/cascader/index.en-US.md index 6a2faad1a7b9..459e96141d45 100644 --- a/components/cascader/index.en-US.md +++ b/components/cascader/index.en-US.md @@ -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\[] | \[] | | | 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' | | @@ -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\[] | - | | | onChange | callback when finishing cascader select | `(value, selectedOptions) => void` | - | | | onPopupVisibleChange | callback when popup shown or hidden | `(value) => void` | - | | @@ -60,7 +60,7 @@ Fields in `showSearch`: ```typescript interface Option { - value: string; + value: string | number; label?: React.ReactNode; disabled?: boolean; children?: Option[]; diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx index dd98ef9f19e3..2afcd3964bd8 100644 --- a/components/cascader/index.tsx +++ b/components/cascader/index.tsx @@ -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; @@ -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?: ( @@ -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; /** 自定义样式 */ @@ -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; @@ -264,7 +266,7 @@ class Cascader extends React.Component { }; } - setValue = (value: string[], selectedOptions: CascaderOptionType[] = []) => { + setValue = (value: CascaderValueType, selectedOptions: CascaderOptionType[] = []) => { if (!('value' in this.props)) { this.setState({ value }); } diff --git a/components/cascader/index.zh-CN.md b/components/cascader/index.zh-CN.md index 3d4b08906091..0769884c7274 100644 --- a/components/cascader/index.zh-CN.md +++ b/components/cascader/index.zh-CN.md @@ -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' | | @@ -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` | - | | @@ -61,7 +61,7 @@ subtitle: 级联选择 ```typescript interface Option { - value: string; + value: string | number; label?: React.ReactNode; disabled?: boolean; children?: Option[]; diff --git a/package.json b/package.json index 3a9e36d9b871..e37e834e0470 100644 --- a/package.json +++ b/package.json @@ -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",