tntd 1.4.17 → 2.0.0-beta

package/components/QueryListScene/List.js

@@ -1,317 +0,0 @@
-/**
- * @file QueryList
- * @author you.zhang
- */
-import React, { createRef } from 'react';
-import { findDOMNode } from 'react-dom';
-import cn from 'classnames';
-import { get, pickBy, isEmpty, debounce, throttle } from 'lodash';
-import { Spin } from 'antd';
-import Table from '../Table';
-import { getText, getLanguage } from '../locale';
-
-export default class QueryList extends React.PureComponent {
-    constructor(props) {
-        super(props);
-        this.state = {
-            loading: false,
-            dataSource: [],
-            pagination: {
-                // pageSize: 20,
-                current: 1,
-                total: 0
-            },
-            scroll: props.scroll,
-            hasScrollToBottom: !props.scroll?.y
-        };
-
-        this.tableRef = createRef();
-
-        const { actions } = props;
-        actions.on('search', this.onSearch);
-        actions.on('setTableDataSource', this.updateDataSource);
-        actions.on('setPagination', this.updatePagination);
-        actions.on('setFormData', this.onFormChange);
-    }
-
-    render() {
-        const {
-            columns,
-            children,
-            pagination,
-            localPagination = false,
-            paginationSticky = false,
-            className = '',
-            qlsProps,
-            ...rest
-        } = this.props;
-        const {
-            dataSource,
-            loading,
-            expandedRowKeys = [],
-            scroll,
-            hasScrollToBottom,
-        } = this.state;
-        const hasPagination = typeof pagination !== 'undefined' ? pagination : true;
-        const paginationInfo = {
-            ...this.state.pagination,
-            // size: 'small',
-            showQuickJumper: true,
-            showSizeChanger: true,
-            showTotal: total => getText('totalRecords', getLanguage(), total),
-            ...(pagination || {})
-        };
-        const expandProps = {
-            ...(rest.defaultExpandAllRows ? {
-                expandedRowKeys,
-                onExpandedRowsChange: this.onExpandedRowsChange
-            } : {})
-        };
-
-        return (
-            <div className={cn(`tnt-querylistscene-list ${className}`, { paginationSticky, hasScrollToBottom })}>
-                <Spin spinning={loading}>
-                    <Table
-                        ref={this.tableRef}
-                        {...expandProps}
-                        {...rest}
-                        {...(columns ? {
-                            columns
-                        } : {})}
-                        scroll={scroll}
-                        dataSource={dataSource}
-                        pagination={hasPagination ? paginationInfo : localPagination}
-                        onChange={this.onTableChange}
-                    >
-                        {!columns && children}
-                    </Table>
-                </Spin>
-            </div>
-        );
-    }
-
-    onWindowResize = debounce(() => {
-        const { scroll } = this.state;
-
-        this.setState({
-            scroll: {
-                ...scroll,
-                y: window.innerHeight - (this.initialTop || this.props.top || 200)
-            }
-        });
-    }, 50)
-
-    componentDidMount() {
-        const { qlsProps, actions } = this.props;
-
-        this.formData = {
-            ...(actions.getFormData() || {}),
-            // 记住上次查询的分页参数
-            ...(qlsProps.memory ? actions.getPagination() : {})
-        };
-
-        if (!qlsProps.initSearch) {  // 默认进来不请求
-            this.fetchData(this.formData).finally(() => {
-                // 轮询
-                if (qlsProps.interval && !this.isUnmounted) {
-                    const doIntervalQuery = ms => {
-                        // 组件unmounted后，不执行轮训逻辑
-                        if (!this.isUnmounted) {
-                            this.timmer = setTimeout(() => {
-                                // 如果有查询请求还未结束，则该次轮询不执行，重新设置下次轮询
-                                if (!this.isFetching) {
-                                    this.fetchData(actions.getSubmittedFormData(), {
-                                        isInterval: true,
-                                        showLoading: false
-                                    }).then(() => {
-                                        doIntervalQuery(ms);
-                                    });
-                                }
-                                else {
-                                    doIntervalQuery(ms);
-                                }
-                            }, ms);
-                        }
-                    };
-                    doIntervalQuery(qlsProps.interval);
-                }
-            });
-        }
-        if (this.state.scroll?.y) {
-            window.addEventListener('resize', this.onWindowResize);
-
-            if (this.tableRef.current) {
-                // table内垂直滚动，需要动态设置分页组件上阴影样式
-                const tableBody = findDOMNode(this.tableRef.current).querySelector('.ant-table-body');
-                this.initialTop = window.innerHeight - this.state.scroll.y;
-                this.updateIsScrollToBottom(tableBody);
-                tableBody.addEventListener('scroll', this.onTableBodyScroll);
-            }
-        }
-    }
-
-    componentWillUnmount() {
-        const { actions } = this.props;
-
-        this.isUnmounted = true;
-
-        actions.removeListener('search', this.onSearch);
-        actions.removeListener('setTableDataSource', this.updateDataSource);
-        actions.removeListener('setPagination', this.updatePagination);
-        actions.removeListener('setFormData', this.onFormChange);
-        window.removeEventListener('resize', this.onWindowResize);
-        this.timmer && clearTimeout(this.timmer);
-    }
-
-    fetchData = (params = {}, { callback, showLoading = true, isInterval } = {}) => {
-        const {
-            qlsProps: { query },
-            defaultExpandAllRows,
-            rowKey,
-            actions
-        } = this.props;
-        const { pagination } = this.state;
-        const hasPagination = this.props.pagination !== false;
-
-        if (hasPagination) {
-            params = {
-                pageSize: pagination.pageSize,
-                current: pagination.current,
-                ...params
-            };
-        }
-
-        showLoading && this.setState({
-            loading: true
-        });
-
-        // 当用户操作查询还未得到服务端响应前,不要执行轮询请求时序问题导致覆盖
-        if (!isInterval) {
-            this.isFetching = true;
-        }
-
-        actions.setData('submittedFormData', params);
-
-        return query(
-            pickBy(params, val => (val !== '' && val !== null && val !== undefined))
-        ).then(result => {
-            const dataSource = hasPagination ? result.data || [] : result;
-
-            this.setState(
-                {
-                    loading: false,
-                    dataSource,
-                    pagination: hasPagination ? {
-                        pageSize: result.pageSize || pagination.pageSize || 10,
-                        current: result.current || params.current || pagination.current || 1,
-                        total: result.total || 0
-                    } : null,
-                    ...(defaultExpandAllRows ? {
-                        expandedRowKeys: dataSource.map(row => row[rowKey])
-                    } : {})
-                },
-                () => {
-                    actions.setData('pagination', this.state.pagination);
-                    actions.setData('dataSource', this.state.dataSource);
-                }
-            );
-        }).finally(() => {
-            this.isFetching = false;
-            showLoading && this.setState({
-                loading: false
-            });
-            callback && callback();
-        });
-    };
-
-    updateDataSource = dataSource => {
-        this.setState({
-            dataSource
-        });
-        this.props.actions.setData('dataSource', dataSource);
-    };
-
-    updatePagination = pagination => {
-        this.setState({
-            pagination
-        });
-        this.props.actions.setData('pagination', pagination);
-    }
-
-    onFormChange = values => {
-        this.formData = pickBy({
-            ...values,
-            sorter: get(this.formData, 'sorter'),
-            filters: get(this.formData, 'filters')
-        }, val => val !== undefined);
-    }
-
-    onSearch = (values, { callback, showLoading = true } = {}) => {
-        this.formData = {
-            ...this.formData,
-            ...values
-        };
-        // this.props.actions.setData('formData', this.formData);
-        return this.fetchData(this.formData, { callback, showLoading });
-    };
-
-    onTableChange = (pagination, filters, sorter) => {
-        const { actions, localPagination } = this.props;
-        const tableParams = {
-            pageSize: pagination.pageSize,
-            current: pagination.current,
-            filters: isEmpty(filters) ? undefined : filters,
-            sorter: isEmpty(sorter) ? undefined : sorter
-        };
-        console.log('onTableChange...', actions.getSubmittedFormData(), this.formData);
-
-        Object.assign(this.formData, tableParams);
-
-        // 排序变化暂时不处理，因为有时可能是前端sorter不需要走请求
-        // 所以暂时排序有使用者自己处理
-        if (!localPagination) {
-            this.fetchData({
-                ...actions.getSubmittedFormData(),
-                ...tableParams
-            });
-            return;
-        }
-
-        const { dataSource } = this.state;
-
-        // 前端本地分页
-        if (localPagination) {
-            this.setState(
-                {
-                    dataSource,
-                    pagination: {
-                        current: pagination.current,
-                        pageSize: pagination.pageSize,
-                        total: pagination.total
-                    }
-                },
-                () => {
-                    actions.setData('formData', this.formData);
-                    actions.setData('pagination', this.state.pagination);
-                }
-            );
-        }
-    };
-
-    onTableBodyScroll = throttle(evt => {
-        console.log('onTableBodyScroll', evt.target.scrollTop);
-        this.updateIsScrollToBottom(evt.target);
-    }, 50)
-
-    updateIsScrollToBottom = tableBody => {
-        const isScrollToBottom = tableBody => {
-            const { scrollHeight, scrollTop, offsetHeight } = tableBody;
-
-            return scrollHeight === scrollTop + offsetHeight;
-        };
-
-        this.setState({
-            hasScrollToBottom: isScrollToBottom(tableBody)
-        });
-    }
-};

package/components/QueryListScene/QueryForm.js

@@ -1,113 +0,0 @@
-import React from 'react';
-import classnames from 'classnames';
-import Form from '../QueryForm';
-
-const clsPrefix = 'tnt-querylistscene-queryform';
-
-export default class QueryForm extends React.PureComponent {
-    constructor(props) {
-        super(props);
-        const { actions, form } = props;
-
-        this.form = form || Form.createForm();
-
-        actions.on('setFormData', this.setFormData);
-        actions.on('resetFormData', this.resetFormData);
-    }
-
-    render() {
-        const {
-            className,
-            actions,
-            extraActions,
-            extralActions,
-            qlsProps,
-            ...props
-        } = this.props;
-
-        return (
-            <Form
-                {...props}
-                form={this.form}
-                className={classnames(clsPrefix, { [className]: className })}
-                // 前期拼写错误，导致需要兼容错误的api
-                extraActions={extraActions || extralActions}
-                onChange={this.onChange}
-                onSearch={this.onSearch}
-                onReset={this.onReset}
-            />
-        );
-    }
-
-    componentDidMount() {
-        const { initialValues = {}, actions, qlsProps } = this.props;
-
-        if (qlsProps.memory) {
-            actions.setFormData({
-                ...initialValues,
-                ...actions.getFormData()
-            }, false);
-        } else {
-            actions.setData('formData', initialValues);
-        }
-    }
-
-    onSearch = () => {
-        const {
-            onSearch,
-            actions
-        } = this.props;
-        const values = actions.getFormData();
-        const params = { ...values, current: 1 };
-
-        // memory 与 url解析setForm时 监听事件异步
-        actions.setData('formData', values);
-        Promise.resolve().then(()=>{
-            onSearch && onSearch(params);
-            actions.emit('search', params);
-        });
-    };
-
-    onReset = () => {
-        const { initialValues, onReset, actions } = this.props;
-
-        actions.setFormData(initialValues, false);
-
-        onReset && onReset(initialValues);
-        this.onSearch();
-    };
-
-    onChange = (newValues, changedInfo, ...rest) => {
-        const { onChange, actions } = this.props;
-
-        onChange && onChange(
-            newValues,
-            changedInfo,
-            ...rest
-        );
-        actions.setFormData(newValues, false);
-    }
-
-    setFormData = (data, needSearch) => {
-        const { actions } = this.props;
-        actions.setData('formData', data);
-        this.form.setValues(data);
-        needSearch && this.onSearch();
-    }
-
-    resetFormData = (needSearch) => {
-        const { initialValues, actions } = this.props;
-
-        actions.setFormData(initialValues, needSearch);
-        this.form.resetValues();
-    }
-
-    componentWillUnmount() {
-        const { actions } = this.props;
-
-        actions.removeListener('setFormData', this.setFormData);
-        actions.removeListener('resetFormData', this.resetFormData);
-    }
-};
-
-QueryForm.Field = Form.Field;

package/components/QueryListScene/QueryListScene.js

@@ -1,35 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-import Title from './Title';
-import Toolbar from './Toolbar';
-import createActions from './createActions';
-
-export default class QueryListScene extends React.Component {
-    constructor(props) {
-        super(props);
-        this.actions = props.actions || createActions();
-    }
-
-    render() {
-        const { title, children, size, className = '' } = this.props;
-        const hasToolbar = [].some.call(children || [], child => child?.type === Toolbar);
-
-        return (
-            <div className={cn('tnt-querylistscene', { [className]: className, 'large-size': size === 'large', hasToolbar })}>
-                {
-                    title && <Title title={title} size={size} />
-                }
-                <div className="tnt-querylistscene-content">
-                    {
-                        React.Children.map(
-                            children, child => child && React.cloneElement(child, {
-                                qlsProps: this.props,
-                                actions: this.actions
-                            })
-                        )
-                    }
-                </div>
-            </div>
-        );
-    }
-}