update 响应式处理

web-react/src/components/query-list/index.jsx

@@ -43,6 +43,8 @@ export default class QueryList extends Component {
     state = {
         loading: false,
         dataSource: [],
+
+        ping: [],
     }
 
     // 查询表单实例
@@ -91,6 +93,12 @@ export default class QueryList extends Component {
         if (this.autoLoad) {
             this.onLoadData()
         }
+
+        window.addEventListener('resize', this.onResizeScroll)
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.onResizeScroll)
     }
 
     /**
@@ -108,9 +116,14 @@ export default class QueryList extends Component {
             this.query
         )
 
-        this.setState({
-            dataSource: res.rows || res.data || res.items,
-        })
+        this.setState(
+            {
+                dataSource: res.rows || res.data || res.items,
+            },
+            () => {
+                this.onResizeScroll()
+            }
+        )
 
         this.pagination.total = res.totalCount
 
@@ -174,7 +187,26 @@ export default class QueryList extends Component {
         this.onLoadData()
     }
 
+    onResizeScroll = () => {
+        this.onListScrollX({ target: this.refs['scroll-x'] })
+    }
+
+    onListScrollX(e) {
+        const { offsetWidth, scrollWidth, scrollLeft } = e.target
+        const ping = []
+        if (offsetWidth + scrollLeft < scrollWidth && scrollLeft > 0) {
+            ping.push(...['left', 'right'])
+        } else if (offsetWidth + scrollLeft < scrollWidth) {
+            ping.push('right')
+        } else if (offsetWidth + scrollLeft >= scrollWidth && offsetWidth < scrollWidth) {
+            ping.push('left')
+        }
+        this.setState({ ping })
+    }
+
     render() {
+        const { loading, dataSource, ping } = this.state
+
         const attrs = {}
         Object.keys(this.props).forEach(key => {
             if (!propsMap.includes(key)) {
@@ -206,9 +238,21 @@ export default class QueryList extends Component {
                     </div>
                 </div>
                 <div className="yo-list">
-                    <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
-                        <List {...props} />
-                        {!!this.state.dataSource && !!this.state.dataSource.length && (
+                    <Spin spinning={loading} indicator={<AntIcon type="loading" />}>
+                        <div
+                            className={['yo-list-container', ...ping.map(p => `yo-list--ping-${p}`)]
+                                .filter(p => p)
+                                .join(' ')}
+                        >
+                            <div
+                                className="yo-list--scroll"
+                                ref="scroll-x"
+                                onScroll={e => this.onListScrollX(e)}
+                            >
+                                <List {...props} />
+                            </div>
+                        </div>
+                        {!!dataSource && !!dataSource.length && (
                             <Pagination
                                 size="small"
                                 {...this.pagination}