fix: cascader component value support number type (ant-design#24247)

add cascader type.test.tsx
waydeechen · May 18, 2020 · a216d6e · a216d6e
1 parent bfd5644
commit a216d6e
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 15 deletions.
diff --git a/components/cascader/__tests__/type.test.tsx 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 = <Cascader options={options} defaultValue={[1, 'hangzhou']} />;
+
+    expect(result).toBeTruthy();
+  });
+});
diff --git 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
@@ -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<CascaderProps, CascaderState> {
     };
   }
 
-  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
@@ -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
@@ -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",