chore: expose loadData for Cascader, close: #4215

components/cascader/__tests__/__snapshots__/demo.test.js.snap

@@ -129,6 +129,23 @@ exports[`test renders ./components/cascader/demo/hover.md correctly 1`] = `
 </span>
 `;
 
+exports[`test renders ./components/cascader/demo/lazy.md correctly 1`] = `
+<span
+  class="ant-cascader-picker">
+  <input
+    autocomplete="off"
+    class="ant-input ant-cascader-input "
+    placeholder="Please select"
+    readonly=""
+    type="text"
+    value="" />
+  <span
+    class="ant-cascader-picker-label" />
+  <i
+    class="anticon anticon-down ant-cascader-picker-arrow" />
+</span>
+`;
+
 exports[`test renders ./components/cascader/demo/search.md correctly 1`] = `
 <span
   class="ant-cascader-picker">

components/cascader/demo/lazy.md

@@ -0,0 +1,76 @@
+---
+order: 9
+title:
+  zh-CN: 动态加载选项
+  en-US: Load Options Lazily
+---
+
+## zh-CN
+
+使用 `loadData` 实现动态加载选项。
+
+> 注意：`loadData` 与 `showSearch` 无法一起使用。
+
+## en-US
+
+Load options lazily with `loadData`.
+
+> Note: `loadData` cannot work with `showSearch`.
+
+````jsx
+import { Cascader } from 'antd';
+
+const options = [{
+  value: 'zhejiang',
+  label: 'Zhejiang',
+  isLeaf: false,
+}, {
+  value: 'jiangsu',
+  label: 'Jiangsu',
+  isLeaf: false,
+}];
+
+class LazyOptions extends React.Component {
+  state = {
+    inputValue: '',
+    options,
+  };
+  onChange = (value, selectedOptions) => {
+    console.log(value, selectedOptions);
+    this.setState({
+      inputValue: selectedOptions.map(o => o.label).join(', '),
+    });
+  }
+  loadData = (selectedOptions) => {
+    const targetOption = selectedOptions[selectedOptions.length - 1];
+    targetOption.loading = true;
+
+    // load options lazily
+    setTimeout(() => {
+      targetOption.loading = false;
+      targetOption.children = [{
+        label: `${targetOption.label} Dynamic 1`,
+        value: 'dynamic1',
+      }, {
+        label: `${targetOption.label} Dynamic 2`,
+        value: 'dynamic2',
+      }];
+      this.setState({
+        options: [...this.state.options],
+      });
+    }, 1000);
+  }
+  render() {
+    return (
+      <Cascader
+        options={this.state.options}
+        loadData={this.loadData}
+        onChange={this.onChange}
+        changeOnSelect
+      />
+    );
+  }
+}
+
+ReactDOM.render(<LazyOptions />, mountNode);
+````

components/cascader/index.en-US.md

@@ -38,6 +38,7 @@ Cascade selection box.
 | changeOnSelect | change value on each selection if set to true, see above demo for details | boolean | false |
 | showSearch | Whether show search input in single mode. | Boolean or Object | false |
 | notFoundContent | Specify content to show when no result matches. | String | 'Not Found' |
+| loadData  | To load option lazily, and it cannot work with `showSearch` | `(selectedOptions) => void`  | - |
 | getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative.[example](http://codepen.io/anon/pen/xVBOVQ?editors=001) | Function(triggerNode) | () => document.body |
 
 Fields in `showSearch`:

components/cascader/index.tsx

@@ -24,15 +24,15 @@ export interface ShowSearchType {
 
 export interface CascaderProps {
   /** 可选项数据源 */
-  options: Array<CascaderOptionType>;
+  options: CascaderOptionType[];
   /** 默认的选中项 */
-  defaultValue?: Array<CascaderOptionType>;
+  defaultValue?: CascaderOptionType[];
   /** 指定选中项 */
-  value?: Array<CascaderOptionType>;
+  value?: CascaderOptionType[];
   /** 选择完成后的回调 */
-  onChange?: (value: string[], selectedOptions?: Array<CascaderOptionType>) => void;
+  onChange?: (value: string[], selectedOptions?: CascaderOptionType[]) => void;
   /** 选择后展示的渲染函数 */
-  displayRender?: (label: Array<string>, selectedOptions?: Array<CascaderOptionType>) => React.ReactNode;
+  displayRender?: (label: string[], selectedOptions?: CascaderOptionType[]) => React.ReactNode;
   /** 自定义样式 */
   style?: React.CSSProperties;
   /** 自定义类名 */
@@ -51,6 +51,7 @@ export interface CascaderProps {
   allowClear?: boolean;
   showSearch?: boolean | ShowSearchType;
   notFoundContent?: React.ReactNode;
+  loadData?: (selectedOptions?: CascaderOptionType[]) => void;
   /** 次级菜单的展开方式，可选 'click' 和 'hover' */
   expandTrigger?: CascaderExpandTrigger;
   /** 当此项为 true 时，点选每级菜单选项值都会发生变化 */

components/cascader/index.zh-CN.md

@@ -39,6 +39,7 @@ subtitle: 级联选择
 | changeOnSelect | 当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示 | Boolean | false |
 | showSearch | 在选择框中显示搜索框 | Boolean | false |
 | notFoundContent | 当下拉列表为空时显示的内容 | String | 'Not Found' |
+| loadData  | 用于动态加载选项，无法与 `showSearch` 一起使用 | `(selectedOptions) => void`  | - |
 | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](http://codepen.io/anon/pen/xVBOVQ?editors=001) | Function(triggerNode) | () => document.body |
 
 `showSearch` 为对象时，其中的字段：

components/cascader/style/index.less

@@ -178,6 +178,10 @@
         right: 15px;
       }
     }
+    &-loading:after {
+      .iconfont-font("\e64d");
+      animation: loadingCircle 1s infinite linear;
+    }
 
     & &-keyword {
       color: @highlight-color;