feat: add lazyDataSource

DTStack · Sep 10, 2020 · 5a31c1f · 5a31c1f
1 parent 4c8aab3
commit 5a31c1f
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -155,4 +155,4 @@
     "react-router": "3.0.4",
     "showdown": "^1.9.0"
   }
-}
+}
diff --git a/src/components/easy-select/index.tsx b/src/components/easy-select/index.tsx
@@ -4,17 +4,21 @@ import debounce from 'lodash/debounce';
 
 const { Option } = Select;
 class EasySelect extends React.Component<any, any> {
-    constructor (props: any) {
-        super(props);
-        const { dataSource = [] } = this.props;
-        this.state = {
-            dataSource
-        };
-    }
+
+    state = {
+        dataSource: [],
+        str: '',
+        scrollPage: 1,
+        allData: []
+    };
 
     componentDidMount = () => {
-        const { autoValue = '' } = this.props;
-        this.getDataSource(autoValue);
+        const { autoValue = '', dataSource = [] } = this.props;
+        if (dataSource.length > 0) {
+            this.lazyDataSource(dataSource)
+        } else {
+            this.getDataSource(autoValue);
+        }
     }
 
     onSearch = (str: any) => {
@@ -28,14 +32,44 @@ class EasySelect extends React.Component<any, any> {
         }
     }
 
+    lazyDataSource = (data: any) => {
+        const { scrollPage = 1 } = this.state;
+        if (data.length > (scrollPage * 100)) {
+            this.setState({
+                dataSource: data.slice(0, scrollPage * 100) || [],
+                allData: data
+            })
+        } else {
+            this.setState({
+                dataSource: data || []
+            })
+        }
+    }
+
     getDataSource = async (str: any) => {
         const { servise } = this.props;
-        servise && await servise(str).then((res: any) => {
-            this.setState({
-                dataSource: res || []
+        if (servise) {
+            await servise(str).then((res: any) => {
+                this.setState({
+                    str
+                }, () => {
+                    this.lazyDataSource(res)
+                })
             })
-        })
+        } else {
+            const { allData } = this.state;
+            this.lazyDataSource(allData)
+        }
     }
+    companyScroll = (e: { persist?: any; target?: any; }) => {
+        e.persist();
+        const { target } = e;
+        const { str, scrollPage, allData } = this.state;
+        if (target.scrollTop + target.offsetHeight === target.scrollHeight && allData.length > 0) {
+            const nextScrollPage = scrollPage + 1;
+            this.setState({ scrollPage: nextScrollPage },() => this.getDataSource(str));
+        }
+    };
     render () {
         const { allowClear = true, showSearch = true, filterLocal, servise, ...others } = this.props;
         const { dataSource } = this.state;
@@ -44,12 +78,13 @@ class EasySelect extends React.Component<any, any> {
                 allowClear={allowClear} // 默认支持清除
                 showSearch={showSearch} // 默认支持查询
                 style={{ minWidth: 120 }} // todo: 暂时样式，有待商榷
-                onSearch={ servise && !filterLocal && this.onSearch }
+                onSearch={ servise && !filterLocal ? this.onSearch : null }
                 filterOption={ !filterLocal ? null : (input, option) =>
                     // 兼容数字和字符串等模糊查询
                     option.props.children.toString().toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
                     option.props.value.toString().toLowerCase().indexOf(input.toLowerCase()) >= 0
                 }
+                onPopupScroll={this.companyScroll}
                 { ...others }
             >
                 {

diff --git a/src/stories/easySelect.stories.tsx b/src/stories/easySelect.stories.tsx
@@ -15,6 +15,11 @@ const servise = (str: any) =>
             label: item[0],
             value: item[1]
         })));
+const options = [];
+for (let i = 0; i < 100000; i++) {
+    const value = i.toString(36);
+    options.push(value);
+}
 const propDefinitions = [
     {
         property: 'dataSource',
@@ -106,6 +111,13 @@ stories.add('EasySelect', () => (
             servise={servise}
             onChange={(val: any, option: any) => { console.log(val, option) }}
         />
+        <p className="strory-dt_easy_select_p">6、大数据(虚拟滚动)</p>
+        <EasySelect
+            style={{ width: '100%' }}
+            filterLocal
+            dataSource={options}
+            onChange={(val: any, option: any) => { console.log(val, option) }}
+        />
     </div>
 ), {
     info: {
@@ -161,6 +173,20 @@ stories.add('EasySelect', () => (
                 onChange={(val: any, option: any) => { console.log(val, option) }}
             />
             ~~~
+            ~~~js
+            // 大数据(虚拟滚动)
+            <EasySelect
+                style={{ width: '100%' }}
+                filterLocal
+                dataSource={options} 
+                // const options = [];
+                // for (let i = 0; i < 100000; i++) {
+                //     const value = i.toString(36)
+                //     options.push(value);
+                // }
+                onChange={(val: any, option: any) => { console.log(val, option) }}
+            />
+            ~~~
         `
     }
 })