/
index.tsx
124 lines (111 loc) · 3.33 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import React, { PureComponent, useContext, forwardRef } from 'react';
import _get from 'lodash/get';
import _omit from 'lodash/omit';
import _filter from 'lodash/filter';
import { WrappedFormUtils } from 'antd/lib/form/Form';
import QueryPanel, { QueryPanelProps } from '../../components/QueryPanel';
import { InternalCurd } from '../../Curd';
import ConfigContext from '../../config-provider/context';
import DataContext from '../../DataContext';
import { searchFieldName } from '../../defaultConfig';
export interface CurdQueryPanelProps extends Omit<QueryPanelProps, 'form' | 'onSearch'> {
reSearchAfterReset?: boolean;
pageFieldName?: string;
__curd__?: InternalCurd<any>;
ref?: React.Ref<CurdQueryPanel>;
};
interface CurdQueryPanelState {
expandForm: boolean;
}
export class CurdQueryPanel extends PureComponent<CurdQueryPanelProps, CurdQueryPanelState> {
form: WrappedFormUtils;
public setFieldsValueAndSearch = (fieldsValue) => {
const { queryArgsConfig } = this.props;
const queryArgs = {};
queryArgsConfig.map(item => item.field).forEach(item => {
queryArgs[item] = undefined;
})
if (this.form) {
console.log('new', { ...queryArgs, ...fieldsValue })
this.form.setFieldsValue({ ...queryArgs, ...fieldsValue });
this.setQueryFormAndSearch(fieldsValue);
}
}
setQueryFormAndSearch = (fieldsValue) => {
const { updateSearchValue, __curd__ } = this.props;
const searchForm = updateSearchValue ? updateSearchValue(fieldsValue) : fieldsValue;
const searchParams = { [this.getPageFieldName()]: 1 };
if (__curd__) {
__curd__.setState({
searchForm,
searchParams,
}, () => {
__curd__ && __curd__.handleSearch();
});
}
}
handleFormReset = () => {
const { onReset = () => { }, onValuesChange, reSearchAfterReset, __curd__ } = this.props;
this.form && this.form.resetFields();
if (onValuesChange) {
onValuesChange({}, {});
}
if (__curd__) {
__curd__.setState(
{
searchForm: {},
searchParams: {}
},
() => {
if (reSearchAfterReset) {
__curd__ && __curd__.handleSearch();
}
}
);
}
onReset();
};
toggleForm = () => {
const { expandForm } = this.state;
this.setState({
expandForm: !expandForm,
});
};
getPageFieldName = () => {
const { pageFieldName } = this.props;
return pageFieldName || searchFieldName.page;
}
getFormInstance = (form: WrappedFormUtils) => {
const { getFormInstance = () => { } } = this.props;
this.form = form;
getFormInstance(form);
}
render() {
const {
reSearchAfterReset,
...rest
} = this.props;
return (
<QueryPanel
{...rest}
onSearch={this.setQueryFormAndSearch}
onReset={this.handleFormReset}
getFormInstance={this.getFormInstance}
/>
);
}
}
const CurdQueryPanelWithContext: React.FC<CurdQueryPanelProps> = forwardRef((props, ref: any) => {
const { searchFieldName: { page } } = useContext(ConfigContext);
const { __curd__ } = useContext(DataContext);
const { pageFieldName, ...rest } = props;
return (
<CurdQueryPanel
{...rest}
ref={ref}
__curd__={__curd__}
pageFieldName={pageFieldName || page}
/>
)
})
export default CurdQueryPanelWithContext;