tntd 1.4.17 → 2.0.0-beta

package/components/QueryForm/index.js

@@ -1,336 +0,0 @@
-import React, { createRef } from 'react';
-import classnames from 'classnames';
-import { debounce } from 'lodash';
-import { Form, Button, Drawer, Badge } from 'antd';
-import useForm from './useForm';
-import createActions from './createActions';
-import Icon from '../Icon';
-import Field from './Field';
-import { getText, getLanguage } from '../locale';
-import './index.less';
-
-const clsPrefix = 'tnt-queryform';
-
-class QueryForm extends React.PureComponent {
-    constructor(props) {
-        super(props);
-        const { form, initialValues, showExpand = true, renderActions, defaultExpanded } = props;
-        this.state = {
-            showMore: false,
-            expanded: (defaultExpanded || (!showExpand || renderActions)) ? true : false,
-            drawerVisible: false,
-            drawerFieldsValueCount: 0
-        };
-        this.fieldsRef = createRef();
-        this.formBoxRef = createRef();
-
-        this.form = form || createActions();
-        this.form.setData('initialValues', initialValues);
-        this.form.setData('values', { ...initialValues });
-    }
-
-    render() {
-        const {
-            children,
-            className = '',
-            initialValues = {},
-            renderActions,
-            showSearch = true,
-            showReset = true,
-            showFieldCount,
-            drawerProps = {},
-            size
-        } = this.props;
-        const extraActions = this.props.extraActions;
-        const { expanded, showMore, drawerVisible, drawerFieldsValueCount } = this.state;
-        const renderFormActions = renderActions || (() => (
-            <>
-                {
-                    showFieldCount && (
-                        <Badge count={drawerFieldsValueCount}>
-                            <Button onClick={this.onShowDrawer}>
-                                <Icon type="filter" />
-                                {this.getText('moreFiltering')}
-                            </Button>
-                        </Badge>
-                    )
-                }
-                {
-                    showSearch && (
-                        <Button type="primary" onClick={this.onSearch}>
-                            {this.getText('search')}
-                        </Button>
-                    )
-                }
-                {
-                    showReset && (
-                        <Button onClick={this.onReset}>
-                            {this.getText('reset')}
-                        </Button>
-                    )
-                }
-                {
-                    showMore && !showFieldCount && (
-                        <Button
-                            className="expand-link"
-                            type="link"
-                            onClick={this.onToggleExpand}
-                        >
-                            {this.getText(expanded ? 'collapse' : 'expand')}
-                        </Button>
-                    )
-                }
-                {
-                    React.Children.map(
-                        children,
-                        child => (
-                            child && child?.props?.align === 'right' && React.cloneElement(child)
-                        )
-                    )
-                }
-            </>
-        ));
-
-        return (
-            <div ref={this.formBoxRef} className={classnames(clsPrefix, { [className]: className })}>
-                <Form layout="inline" className={classnames({ expanded: !showMore || expanded, showMore })}>
-                    <div ref={this.fieldsRef}>
-                        {
-                            React.Children.map(
-                                children,
-                                (child, index) => (
-                                    child
-                                    && child?.props?.align !== 'right'
-                                    && (!showFieldCount || showFieldCount > index)
-                                    && React.cloneElement(child, {
-                                        form: this.form,
-                                        initialValue: initialValues?.[child.props.name],
-                                        onChange: this.onFieldChange
-                                    })
-                                )
-                            )
-                        }
-                    </div>
-                    <div className={`${clsPrefix}-actions`}>
-                        {renderFormActions()}
-                    </div>
-                    {
-                        showFieldCount && (
-                            <Drawer
-                                title={this.getText('moreFiltering')}
-                                visible={drawerVisible}
-                                onClose={() => this.setState({ drawerVisible: false })}
-                                width={300}
-                                size={size}
-                                getContainer={false}
-                                {...drawerProps}
-                                className={classnames(`${clsPrefix}-drawer`, { 'large-size': size === 'large', [className]: className })}
-                            >
-                                {
-                                    React.Children.map(
-                                        children,
-                                        (child, index) => (
-                                            child
-                                            && (index >= showFieldCount)
-                                            && React.cloneElement(child, {
-                                                form: this.form,
-                                                isFieldInDrawer: true,
-                                                initialValue: initialValues?.[child.props.name],
-                                                onChange: this.onFieldChange,
-                                                onSearch: this.onSearch
-                                            })
-                                        )
-                                    )
-                                }
-                                <Button type="primary" onClick={this.onSearch}>
-                                    {this.getText('search')}
-                                </Button>
-                                <Button onClick={this.onReset}>
-                                    {this.getText('reset')}
-                                </Button>
-                            </Drawer>
-                        )
-                    }
-                </Form>
-                {
-                    extraActions && (
-                        <div className={`${clsPrefix}-extra`}>
-                            {extraActions}
-                        </div>
-                    )
-                }
-            </div>
-        );
-    }
-
-    getText(key) {
-        return getText(key, this.props.language || getLanguage());
-    }
-
-    isFieldsWidthOverflow() {
-        const { current } = this.fieldsRef;
-
-        if (current) {
-            return current.offsetWidth < [].reduce.call(current.children, (acc, cur) => {
-                const marginArray = window.getComputedStyle(cur).margin.split(' ').map(str => parseInt(str, 10));
-                acc += cur.offsetWidth + marginArray[1];
-                return acc;
-            }, 0);
-        }
-
-        return false;
-    }
-
-    updateFieldHeight() {
-        const { formBoxRef, fieldsRef } = this;
-        const getFieldHeight = () => {
-            const { current } = fieldsRef;
-            let height = '32px';
-
-            if (current && current.children?.[0]) {
-                height = window.getComputedStyle(current.children[0]).height;
-            }
-
-            return height;
-        };
-        const queryFormActionsDom = formBoxRef?.current?.querySelector(`.${clsPrefix}-actions`);
-        const queryFormExtraDom = formBoxRef?.current?.querySelector(`.${clsPrefix}-extra`);
-        const formItemsDomList = fieldsRef?.current?.querySelectorAll('.ant-form-item-control');
-        const fieldHeight = getFieldHeight();
-
-        fieldsRef.current.style.height = fieldHeight;
-        [queryFormActionsDom, queryFormExtraDom].forEach(item => {
-            item && Object.assign(item.style, {
-                height: fieldHeight,
-                lineHeight: fieldHeight
-            });
-        });
-        [].forEach.call(formItemsDomList, item => {
-            item.style.lineHeight = fieldHeight;
-        });
-    }
-
-    onWindowResize = debounce(() => {
-        const { current } = this.fieldsRef;
-
-        if (current) {
-            setTimeout(() => {
-                this.setState({
-                    showMore: this.isFieldsWidthOverflow()
-                });
-            }, 25);
-        }
-    }, 50)
-
-    search = params => {
-        this.props.onSearch({
-            ...this.form.getValues(),
-            ...params
-        });
-    }
-
-    onSearch = () => {
-        this.props.onSearch?.(this.form.getValues());
-    };
-
-
-    onReset = () => {
-        const { initialValues, onReset } = this.props;
-
-        this.form.setValues({ ...initialValues });
-        this.updateDrawerFieldsValueCount();
-        onReset?.(initialValues);
-    };
-
-    onToggleExpand = () => {
-        this.setState({
-            expanded: !this.state.expanded
-        });
-        this.props.onToggleExpand?.(!this.state.expanded);
-    }
-
-    onShowDrawer = () => {
-        this.setState({ drawerVisible: true });
-    }
-
-    onFieldChange = (name, value, ...rest) => {
-        const values = this.form.getValues();
-        const newValues = {
-            ...values,
-            [name]: value
-        };
-        const changedInfo = { name, value, preValue:values?.[name] };
-        const { onChange } = this.props;
-
-        this.form.setData('values', newValues);
-
-        onChange && onChange(
-            newValues,
-            changedInfo,
-            ...rest
-        );
-        this.updateDrawerFieldsValueCount(newValues);
-    }
-
-    updateDrawerFieldsValueCount = () => {
-        const values = this.form.getValues();
-        const { showFieldCount, children } = this.props;
-
-        if (showFieldCount) {
-            const drawerFieldsValueCount = children.reduce((acc, cur, index) => {
-                if (index >= showFieldCount && values?.[cur?.props?.name]) {
-                    acc++;
-                }
-                return acc;
-            }, 0);
-
-            if (drawerFieldsValueCount !== this.state.drawerFieldsValueCount) {
-                this.setState({
-                    drawerFieldsValueCount
-                });
-            }
-        }
-    }
-
-    componentDidMount() {
-        const { current } = this.fieldsRef;
-        const { showFieldCount, showExpand = true, renderActions } = this.props;
-
-        this.updateFieldHeight();
-
-        this.form.on('search', this.search);
-
-        // 未设置第一行显示数量且禁止了展开操作 或 自定义了操作区域，则不需要处理展开计算逻辑
-        // || renderActions
-        if (!showFieldCount && !showExpand) {
-            return;
-        }
-
-        if (!showFieldCount) {
-            if (current && this.isFieldsWidthOverflow()) {
-                this.setState({
-                    showMore: true
-                });
-            }
-
-            window.addEventListener('resize', this.onWindowResize);
-        } else {
-            this.updateDrawerFieldsValueCount();
-            this.form.on('setValues', this.updateDrawerFieldsValueCount);
-            this.form.on('setValue', this.updateDrawerFieldsValueCount);
-        }
-    }
-
-    componentWillUnmount() {
-        window.removeEventListener('resize', this.onWindowResize);
-        this.form.off('setValues', this.updateDrawerFieldsValueCount);
-        this.form.off('setValue', this.updateDrawerFieldsValueCount);
-        this.form.off('search', this.search);
-    }
-};
-
-QueryForm.Field = Field;
-QueryForm.useForm = useForm;
-QueryForm.createForm = createActions;
-
-export default QueryForm;

package/components/QueryForm/index.less

@@ -1,133 +0,0 @@
-.tnt-queryform {
-    display: flex;
-
-    &-extra {
-        line-height: 32px;
-        margin-left: 12px;
-        & > * {
-            margin-left: 8px;
-        }
-    }
-
-    &-actions {
-        align-items: center;
-        display: inline-block;
-        height: 32px;
-        line-height: 32px;
-        
-        & > *:not(.expand-link) {
-            margin-right: 10px;
-        }
-        & > .expand-link {
-            padding: 0;
-            margin-right: 0;
-        }
-        & > .ant-badge {
-            .tnt-icon {
-                margin-right: 8px;
-            }
-        }
-    }
-
-    .ant-form {
-        display: inline-block;
-        margin-bottom: 12px;
-        display: flex;
-        flex: 1;
-        &.ant-form-inline {
-            flex-wrap: unset;
-        }
-
-        & > div:nth-child(1) {
-            height: 32px;
-            overflow: hidden;
-            .ant-form-item-label {
-                label {
-                    // bottom: 4px;
-                }
-            }
-        }
-
-        &.expanded {
-            & > div:nth-child(1) {
-                height: auto !important;
-            }
-        }
-
-        &.showMore {
-            & > div:nth-child(1) {
-                .ant-form-item {
-                    margin-bottom: 12px;
-                }
-            }
-        }
-
-        & > div:nth-child(2) {
-            display: flex;
-        }
-
-        &.ant-form-inline .ant-form-item {
-            margin-right: 10px;
-            display: inline-block;
-        }
-
-        .ant-form-item-control {
-            // min-width: 160px;
-            line-height: unset;
-            .ant-calendar-picker-input {
-                padding: 0 11px;
-            }
-            .ant-form-item-children {
-                & > .ant-input,
-                & > .ant-input-affix-wrapper {
-                    width: 160px;
-                    // width: 200px;
-                }
-            }
-        }
-    }
-
-    &-drawer {
-        margin-top: 50px;
-        &.large-size {
-            margin-top: 60px;
-        }
-
-        &.ant-drawer.ant-drawer-open {
-            .ant-drawer-mask {
-                opacity: 0;
-                background: unset;
-            }
-        }
-        .ant-drawer-body {
-            .ant-form-item {
-                display: block;
-                margin-right: 0;
-                margin-bottom: 20px;
-                width: 100%;
-            }
-            .ant-form-item-label {
-                display: block;
-                text-align: left;
-                line-height: 22px;
-                margin-bottom: 10px;
-            }
-            .ant-form-item-control-wrapper,
-            .ant-form-item-control,
-            .ant-calendar-picker,
-            .ant-input {
-                min-width: 100%;
-                width: 100%;
-            }
-
-            & > .ant-btn {
-                display: block;
-                width: 100%;
-                margin-bottom: 10px;
-                &.ant-btn-primary {
-                    margin-top: 20px;
-                }
-            }
-        }
-    }
-}

package/components/QueryForm/useForm.js

@@ -1,8 +0,0 @@
-import { useRef } from 'react';
-import createActions from './createActions';
-
-export default function useForm() {
-    const form = useRef(createActions());
-
-    return [form.current];
-};