Merge pull request alibaba-fusion#47 from myronliu347/master

Feature Cacader loadData add source argument
fty1990 · Nov 16, 2018 · e5c2819 · e5c2819
2 parents be16d82 + f9512f8
commit e5c2819
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 9 deletions.
diff --git a/docs/cascader/demo/source.md b/docs/cascader/demo/source.md
@@ -0,0 +1,73 @@
+# 异步加载数据
+
+- order: 7
+
+展示动态获取数据的用法。
+
+:::lang=en-us
+# Loading data asynchronously
+
+- order: 7
+
+Demon loading data asynchronously.
+:::
+
+---
+
+````jsx
+import { Cascader } from '@alifd/next';
+import 'whatwg-fetch';
+
+const dataSource = [{
+    value: '2974',
+    label: '西安'
+}, {
+    value: '2980',
+    label: '铜川'
+}];
+
+class Demo extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            dataSource
+        };
+
+        this.onLoadData = this.onLoadData.bind(this);
+    }
+
+    onLoadData(data, source) {
+        console.log(data, source);
+
+        return new Promise(resolve => {
+            source.children = source.value == '2974' ? [
+                { value: '2975', label: '西安市', isLeaf: true },
+                { value: '2976', label: '高陵县', isLeaf: true }
+            ] : [
+                { value: '2981', label: '铜川市', isLeaf: true },
+                { value: '2982', label: '宜君县', isLeaf: true }
+            ];
+            setTimeout(() => {
+                this.setState({
+                    dataSource: this.state.dataSource
+                }, resolve);
+            }, 500);
+        });
+    }
+
+    render() {
+        return <Cascader canOnlySelectLeaf dataSource={this.state.dataSource} loadData={this.onLoadData} />;
+    }
+}
+
+ReactDOM.render(<Demo />, mountNode);
+````
+
+```` css
+.cascader-value {
+    margin-bottom: 10px;
+    font-size: 14px;
+    color: #666;
+}
+````
diff --git a/src/cascader/cascader.jsx b/src/cascader/cascader.jsx
@@ -92,6 +92,7 @@ export default class Cascader extends Component {
         /**
          * 异步加载数据函数
          * @param {Object} data 当前点击异步加载的数据
+         * @param {Object} source 当前点击数据
          */
         loadData: PropTypes.func,
         searchValue: PropTypes.string,
@@ -211,20 +212,22 @@ export default class Cascader extends Component {
         }
     }
 
-    updateCache(dataSource) {
-        this._v2n = {};
-        this._p2n = {};
-        const loop = (data, prefix = '0') => data.forEach((item, index) => {
+    setCache(data, prefix = '0') {
+        data.forEach((item, index) => {
             const { value, children } = item;
             const pos = `${prefix}-${index}`;
-            this._v2n[value] = this._p2n[pos] = { ...item, pos };
+            this._v2n[value] = this._p2n[pos] = { ...item, pos, _source: item };
 
             if (children && children.length) {
-                loop(children, pos);
+                this.setCache(children, pos);
             }
         });
+    }
 
-        loop(dataSource);
+    updateCache(dataSource) {
+        this._v2n = {};
+        this._p2n = {};
+        this.setCache(dataSource);
     }
 
     normalizeValue(value) {
@@ -490,7 +493,8 @@ export default class Cascader extends Component {
 
             const { loadData } = this.props;
             if (canExpand && loadData) {
-                return loadData(this._v2n[value]).then(callback);
+                const data = this._v2n[value];
+                return loadData(data, data._source).then(callback);
             } else {
                 callback();
             }

diff --git a/src/tree-select/tree-select.jsx b/src/tree-select/tree-select.jsx
@@ -288,7 +288,7 @@ export default class TreeSelect extends Component {
 
     getData(value, forSelect) {
         return value.reduce((ret, v) => {
-            const k = this._v2n[v].key;
+            const k = this._v2n[v] && this._v2n[v].key;
             if (k) {
                 const { label, pos, disabled, checkboxDisabled } = this._k2n[k];
                 const d = {