tntd 1.4.4 → 1.4.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Layout/HeaderActions.js +90 -128
- package/components/LoadingButton/index.js +11 -15
- package/components/QueryListScene/QueryForm.js +7 -4
- package/dist/stats.json +4990 -4990
- package/dist/tntd.js +1 -1
- package/es/Layout/HeaderActions.js +10 -10
- package/es/LoadingButton/index.js +20 -10
- package/es/QueryListScene/QueryForm.js +6 -3
- package/lib/ArrayInput/icon.js +27 -31
- package/lib/ArrayInput/index.js +211 -298
- package/lib/AuthContext.js +2 -13
- package/lib/Columns/index.js +71 -100
- package/lib/DevelopmentLogin/LoginModal.js +79 -141
- package/lib/DevelopmentLogin/index.js +28 -55
- package/lib/Ellipsis/Svg/CopySVG.js +23 -71
- package/lib/Ellipsis/Svg/TickSVG.js +17 -49
- package/lib/Ellipsis/index.js +148 -154
- package/lib/Handle/index.js +72 -109
- package/lib/Icon/fonts/iconfont.js +1 -43
- package/lib/Icon/iconList.js +119 -8
- package/lib/Icon/index.js +13 -45
- package/lib/Img/Contain.js +49 -81
- package/lib/Img/Cover.js +88 -136
- package/lib/Img/index.js +36 -89
- package/lib/Layout/ActionsContext.js +2 -11
- package/lib/Layout/AppList.js +262 -256
- package/lib/Layout/Application.js +119 -135
- package/lib/Layout/Avatar.js +137 -137
- package/lib/Layout/CompatibleLanguage.js +214 -195
- package/lib/Layout/EnterpriseLayout/Avatar.js +156 -168
- package/lib/Layout/EnterpriseLayout/Language.js +75 -100
- package/lib/Layout/EnterpriseLayout/Theme.js +96 -94
- package/lib/Layout/EnterpriseLayout/index.js +32 -45
- package/lib/Layout/GlobalNavigation/NavigationPopup.js +335 -407
- package/lib/Layout/GlobalNavigation/index.js +110 -158
- package/lib/Layout/Header.js +165 -116
- package/lib/Layout/HeaderActions.js +132 -129
- package/lib/Layout/HeaderNavs.js +90 -113
- package/lib/Layout/HeaderTabs.js +312 -278
- package/lib/Layout/Iconfont.js +2 -15
- package/lib/Layout/Language.js +63 -102
- package/lib/Layout/Layout.js +272 -261
- package/lib/Layout/Logo.js +132 -87
- package/lib/Layout/OrgAppList.js +440 -319
- package/lib/Layout/SideMenu.js +429 -343
- package/lib/Layout/Theme.js +95 -124
- package/lib/Layout/checkAuth.js +21 -35
- package/lib/Layout/createActions.js +38 -51
- package/lib/Layout/images/index.js +33 -41
- package/lib/Layout/index.js +110 -161
- package/lib/Layout/paaslayout/CompactSideMenu.js +200 -178
- package/lib/Layout/paaslayout/Header.js +84 -90
- package/lib/Layout/paaslayout/Logo.js +27 -32
- package/lib/Layout/paaslayout/SideMenu.js +161 -174
- package/lib/Layout/paaslayout/index.js +240 -261
- package/lib/Layout/storage.js +20 -78
- package/lib/Layout/utils.js +93 -143
- package/lib/LoadingButton/index.js +25 -57
- package/lib/Modal/index.js +83 -108
- package/lib/Page/Box.js +56 -81
- package/lib/Page/index.js +151 -173
- package/lib/Page/utils.js +12 -30
- package/lib/QueryForm/Field/Checkbox.js +11 -33
- package/lib/QueryForm/Field/Select.js +63 -99
- package/lib/QueryForm/Field/SelectInput.js +69 -114
- package/lib/QueryForm/Field/fieldsMap.js +30 -52
- package/lib/QueryForm/Field/index.js +76 -158
- package/lib/QueryForm/createActions.js +50 -65
- package/lib/QueryForm/index.js +304 -383
- package/lib/QueryForm/useForm.js +6 -17
- package/lib/QueryListScene/List.js +290 -366
- package/lib/QueryListScene/QueryForm.js +93 -158
- package/lib/QueryListScene/QueryListScene.js +33 -87
- package/lib/QueryListScene/Title.js +10 -20
- package/lib/QueryListScene/Toolbar.js +8 -31
- package/lib/QueryListScene/createActions.js +64 -79
- package/lib/QueryListScene/index.js +23 -40
- package/lib/QueryListScene/useActions.js +6 -17
- package/lib/Select/DropDownWrap.js +60 -124
- package/lib/Select/index.js +425 -561
- package/lib/Table/ResizableTable/index.js +77 -121
- package/lib/Table/index.js +19 -51
- package/lib/Title/index.js +34 -52
- package/lib/index.js +19 -159
- package/lib/locale.js +48 -63
- package/package.json +1 -1
- package/lib/Layout/EnterpriseLayout/Header.js +0 -113
- package/lib/Layout/EnterpriseLayout/HeaderActions.js +0 -104
package/lib/QueryForm/index.js
CHANGED
|
@@ -1,415 +1,336 @@
|
|
|
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
|
-
var _createActions = _interopRequireDefault(require("./createActions"));
|
|
33
|
-
|
|
34
|
-
var _Icon = _interopRequireDefault(require("../Icon"));
|
|
35
|
-
|
|
36
|
-
var _Field = _interopRequireDefault(require("./Field"));
|
|
37
|
-
|
|
38
|
-
var _locale = require("../locale");
|
|
39
|
-
|
|
40
|
-
require("./index.less");
|
|
41
|
-
|
|
42
|
-
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
|
|
43
|
-
|
|
44
|
-
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
45
|
-
|
|
46
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
47
|
-
|
|
48
|
-
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
49
|
-
|
|
50
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
51
|
-
|
|
52
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
53
|
-
|
|
54
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
55
|
-
|
|
56
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
57
|
-
|
|
58
|
-
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
59
|
-
|
|
60
|
-
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|
61
|
-
|
|
62
|
-
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
|
63
|
-
|
|
64
|
-
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
|
|
65
|
-
|
|
66
|
-
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
67
|
-
|
|
68
|
-
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
69
|
-
|
|
70
|
-
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
71
|
-
|
|
72
|
-
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
73
|
-
|
|
74
|
-
var clsPrefix = 'tnt-queryform';
|
|
75
|
-
|
|
76
|
-
var QueryForm =
|
|
77
|
-
/*#__PURE__*/
|
|
78
|
-
function (_React$PureComponent) {
|
|
79
|
-
_inherits(QueryForm, _React$PureComponent);
|
|
80
|
-
|
|
81
|
-
function QueryForm(props) {
|
|
82
|
-
var _this;
|
|
83
|
-
|
|
84
|
-
_classCallCheck(this, QueryForm);
|
|
85
|
-
|
|
86
|
-
_this = _possibleConstructorReturn(this, _getPrototypeOf(QueryForm).call(this, props));
|
|
87
|
-
_this.onWindowResize = (0, _lodash.debounce)(function () {
|
|
88
|
-
var current = _this.fieldsRef.current;
|
|
1
|
+
import React, { createRef } from 'react';
|
|
2
|
+
import classnames from 'classnames';
|
|
3
|
+
import { debounce } from 'lodash';
|
|
4
|
+
import { Form, Button, Drawer, Badge } from 'antd';
|
|
5
|
+
import useForm from './useForm';
|
|
6
|
+
import createActions from './createActions';
|
|
7
|
+
import Icon from '../Icon';
|
|
8
|
+
import Field from './Field';
|
|
9
|
+
import { getText, getLanguage } from '../locale';
|
|
10
|
+
import './index.less';
|
|
11
|
+
|
|
12
|
+
const clsPrefix = 'tnt-queryform';
|
|
13
|
+
|
|
14
|
+
class QueryForm extends React.PureComponent {
|
|
15
|
+
constructor(props) {
|
|
16
|
+
super(props);
|
|
17
|
+
const { form, initialValues, showExpand = true, renderActions, defaultExpanded } = props;
|
|
18
|
+
this.state = {
|
|
19
|
+
showMore: false,
|
|
20
|
+
expanded: (defaultExpanded || (!showExpand || renderActions)) ? true : false,
|
|
21
|
+
drawerVisible: false,
|
|
22
|
+
drawerFieldsValueCount: 0
|
|
23
|
+
};
|
|
24
|
+
this.fieldsRef = createRef();
|
|
25
|
+
this.formBoxRef = createRef();
|
|
26
|
+
|
|
27
|
+
this.form = form || createActions();
|
|
28
|
+
this.form.setData('initialValues', initialValues);
|
|
29
|
+
this.form.setData('values', { ...initialValues });
|
|
30
|
+
}
|
|
89
31
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
32
|
+
render() {
|
|
33
|
+
const {
|
|
34
|
+
children,
|
|
35
|
+
className = '',
|
|
36
|
+
initialValues = {},
|
|
37
|
+
renderActions,
|
|
38
|
+
showSearch = true,
|
|
39
|
+
showReset = true,
|
|
40
|
+
showFieldCount,
|
|
41
|
+
drawerProps = {},
|
|
42
|
+
size
|
|
43
|
+
} = this.props;
|
|
44
|
+
const extraActions = this.props.extraActions;
|
|
45
|
+
const { expanded, showMore, drawerVisible, drawerFieldsValueCount } = this.state;
|
|
46
|
+
const renderFormActions = renderActions || (() => (
|
|
47
|
+
<>
|
|
48
|
+
{
|
|
49
|
+
showFieldCount && (
|
|
50
|
+
<Badge count={drawerFieldsValueCount}>
|
|
51
|
+
<Button onClick={this.onShowDrawer}>
|
|
52
|
+
<Icon type="filter" />
|
|
53
|
+
{this.getText('moreFiltering')}
|
|
54
|
+
</Button>
|
|
55
|
+
</Badge>
|
|
56
|
+
)
|
|
57
|
+
}
|
|
58
|
+
{
|
|
59
|
+
showSearch && (
|
|
60
|
+
<Button type="primary" onClick={this.onSearch}>
|
|
61
|
+
{this.getText('search')}
|
|
62
|
+
</Button>
|
|
63
|
+
)
|
|
64
|
+
}
|
|
65
|
+
{
|
|
66
|
+
showReset && (
|
|
67
|
+
<Button onClick={this.onReset}>
|
|
68
|
+
{this.getText('reset')}
|
|
69
|
+
</Button>
|
|
70
|
+
)
|
|
71
|
+
}
|
|
72
|
+
{
|
|
73
|
+
showMore && !showFieldCount && (
|
|
74
|
+
<Button
|
|
75
|
+
className="expand-link"
|
|
76
|
+
type="link"
|
|
77
|
+
onClick={this.onToggleExpand}
|
|
78
|
+
>
|
|
79
|
+
{this.getText(expanded ? 'collapse' : 'expand')}
|
|
80
|
+
</Button>
|
|
81
|
+
)
|
|
82
|
+
}
|
|
83
|
+
{
|
|
84
|
+
React.Children.map(
|
|
85
|
+
children,
|
|
86
|
+
child => (
|
|
87
|
+
child && child?.props?.align === 'right' && React.cloneElement(child)
|
|
88
|
+
)
|
|
89
|
+
)
|
|
90
|
+
}
|
|
91
|
+
</>
|
|
92
|
+
));
|
|
93
|
+
|
|
94
|
+
return (
|
|
95
|
+
<div ref={this.formBoxRef} className={classnames(clsPrefix, { [className]: className })}>
|
|
96
|
+
<Form layout="inline" className={classnames({ expanded: !showMore || expanded, showMore })}>
|
|
97
|
+
<div ref={this.fieldsRef}>
|
|
98
|
+
{
|
|
99
|
+
React.Children.map(
|
|
100
|
+
children,
|
|
101
|
+
(child, index) => (
|
|
102
|
+
child
|
|
103
|
+
&& child?.props?.align !== 'right'
|
|
104
|
+
&& (!showFieldCount || showFieldCount > index)
|
|
105
|
+
&& React.cloneElement(child, {
|
|
106
|
+
form: this.form,
|
|
107
|
+
initialValue: initialValues?.[child.props.name],
|
|
108
|
+
onChange: this.onFieldChange
|
|
109
|
+
})
|
|
110
|
+
)
|
|
111
|
+
)
|
|
112
|
+
}
|
|
113
|
+
</div>
|
|
114
|
+
<div className={`${clsPrefix}-actions`}>
|
|
115
|
+
{renderFormActions()}
|
|
116
|
+
</div>
|
|
117
|
+
{
|
|
118
|
+
showFieldCount && (
|
|
119
|
+
<Drawer
|
|
120
|
+
title={this.getText('moreFiltering')}
|
|
121
|
+
visible={drawerVisible}
|
|
122
|
+
onClose={() => this.setState({ drawerVisible: false })}
|
|
123
|
+
width={300}
|
|
124
|
+
size={size}
|
|
125
|
+
getContainer={false}
|
|
126
|
+
{...drawerProps}
|
|
127
|
+
className={classnames(`${clsPrefix}-drawer`, { 'large-size': size === 'large', [className]: className })}
|
|
128
|
+
>
|
|
129
|
+
{
|
|
130
|
+
React.Children.map(
|
|
131
|
+
children,
|
|
132
|
+
(child, index) => (
|
|
133
|
+
child
|
|
134
|
+
&& (index >= showFieldCount)
|
|
135
|
+
&& React.cloneElement(child, {
|
|
136
|
+
form: this.form,
|
|
137
|
+
isFieldInDrawer: true,
|
|
138
|
+
initialValue: initialValues?.[child.props.name],
|
|
139
|
+
onChange: this.onFieldChange,
|
|
140
|
+
onSearch: this.onSearch
|
|
141
|
+
})
|
|
142
|
+
)
|
|
143
|
+
)
|
|
144
|
+
}
|
|
145
|
+
<Button type="primary" onClick={this.onSearch}>
|
|
146
|
+
{this.getText('search')}
|
|
147
|
+
</Button>
|
|
148
|
+
<Button onClick={this.onReset}>
|
|
149
|
+
{this.getText('reset')}
|
|
150
|
+
</Button>
|
|
151
|
+
</Drawer>
|
|
152
|
+
)
|
|
153
|
+
}
|
|
154
|
+
</Form>
|
|
155
|
+
{
|
|
156
|
+
extraActions && (
|
|
157
|
+
<div className={`${clsPrefix}-extra`}>
|
|
158
|
+
{extraActions}
|
|
159
|
+
</div>
|
|
160
|
+
)
|
|
161
|
+
}
|
|
162
|
+
</div>
|
|
163
|
+
);
|
|
164
|
+
}
|
|
98
165
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
}
|
|
166
|
+
getText(key) {
|
|
167
|
+
return getText(key, this.props.language || getLanguage());
|
|
168
|
+
}
|
|
102
169
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
};
|
|
170
|
+
isFieldsWidthOverflow() {
|
|
171
|
+
const { current } = this.fieldsRef;
|
|
106
172
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
173
|
+
if (current) {
|
|
174
|
+
return current.offsetWidth < [].reduce.call(current.children, (acc, cur) => {
|
|
175
|
+
const marginArray = window.getComputedStyle(cur).margin.split(' ').map(str => parseInt(str, 10));
|
|
176
|
+
acc += cur.offsetWidth + marginArray[1];
|
|
177
|
+
return acc;
|
|
178
|
+
}, 0);
|
|
179
|
+
}
|
|
111
180
|
|
|
112
|
-
|
|
181
|
+
return false;
|
|
182
|
+
}
|
|
113
183
|
|
|
114
|
-
|
|
184
|
+
updateFieldHeight() {
|
|
185
|
+
const { formBoxRef, fieldsRef } = this;
|
|
186
|
+
const getFieldHeight = () => {
|
|
187
|
+
const { current } = fieldsRef;
|
|
188
|
+
let height = '32px';
|
|
189
|
+
|
|
190
|
+
if (current && current.children?.[0]) {
|
|
191
|
+
height = window.getComputedStyle(current.children[0]).height;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
return height;
|
|
195
|
+
};
|
|
196
|
+
const queryFormActionsDom = formBoxRef?.current?.querySelector(`.${clsPrefix}-actions`);
|
|
197
|
+
const queryFormExtraDom = formBoxRef?.current?.querySelector(`.${clsPrefix}-extra`);
|
|
198
|
+
const formItemsDomList = fieldsRef?.current?.querySelectorAll('.ant-form-item-control');
|
|
199
|
+
const fieldHeight = getFieldHeight();
|
|
200
|
+
|
|
201
|
+
fieldsRef.current.style.height = fieldHeight;
|
|
202
|
+
[queryFormActionsDom, queryFormExtraDom].forEach(item => {
|
|
203
|
+
item && Object.assign(item.style, {
|
|
204
|
+
height: fieldHeight,
|
|
205
|
+
lineHeight: fieldHeight
|
|
206
|
+
});
|
|
207
|
+
});
|
|
208
|
+
[].forEach.call(formItemsDomList, item => {
|
|
209
|
+
item.style.lineHeight = fieldHeight;
|
|
210
|
+
});
|
|
211
|
+
}
|
|
115
212
|
|
|
116
|
-
|
|
117
|
-
|
|
213
|
+
onWindowResize = debounce(() => {
|
|
214
|
+
const { current } = this.fieldsRef;
|
|
118
215
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
216
|
+
if (current) {
|
|
217
|
+
setTimeout(() => {
|
|
218
|
+
this.setState({
|
|
219
|
+
showMore: this.isFieldsWidthOverflow()
|
|
220
|
+
});
|
|
221
|
+
}, 25);
|
|
222
|
+
}
|
|
223
|
+
}, 50)
|
|
123
224
|
|
|
124
|
-
|
|
125
|
-
|
|
225
|
+
search = params => {
|
|
226
|
+
this.props.onSearch({
|
|
227
|
+
...this.form.getValues(),
|
|
228
|
+
...params
|
|
229
|
+
});
|
|
230
|
+
}
|
|
126
231
|
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
drawerVisible: true
|
|
130
|
-
});
|
|
232
|
+
onSearch = () => {
|
|
233
|
+
this.props.onSearch?.(this.form.getValues());
|
|
131
234
|
};
|
|
132
235
|
|
|
133
|
-
_this.onFieldChange = function (name, value) {
|
|
134
|
-
var values = _this.form.getValues();
|
|
135
|
-
|
|
136
|
-
var newValues = _objectSpread({}, values, _defineProperty({}, name, value));
|
|
137
|
-
|
|
138
|
-
var changedInfo = {
|
|
139
|
-
name: name,
|
|
140
|
-
value: value,
|
|
141
|
-
preValue: values == null ? void 0 : values[name]
|
|
142
|
-
};
|
|
143
|
-
var onChange = _this.props.onChange;
|
|
144
|
-
|
|
145
|
-
_this.form.setData('values', newValues);
|
|
146
|
-
|
|
147
|
-
for (var _len = arguments.length, rest = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
|
|
148
|
-
rest[_key - 2] = arguments[_key];
|
|
149
|
-
}
|
|
150
236
|
|
|
151
|
-
|
|
237
|
+
onReset = () => {
|
|
238
|
+
const { initialValues, onReset } = this.props;
|
|
152
239
|
|
|
153
|
-
|
|
240
|
+
this.form.setValues({ ...initialValues });
|
|
241
|
+
this.updateDrawerFieldsValueCount();
|
|
242
|
+
onReset?.(initialValues);
|
|
154
243
|
};
|
|
155
244
|
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
if (showFieldCount) {
|
|
164
|
-
var drawerFieldsValueCount = children.reduce(function (acc, cur, index) {
|
|
165
|
-
var _cur$props;
|
|
245
|
+
onToggleExpand = () => {
|
|
246
|
+
this.setState({
|
|
247
|
+
expanded: !this.state.expanded
|
|
248
|
+
});
|
|
249
|
+
this.props.onToggleExpand?.(!this.state.expanded);
|
|
250
|
+
}
|
|
166
251
|
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
252
|
+
onShowDrawer = () => {
|
|
253
|
+
this.setState({ drawerVisible: true });
|
|
254
|
+
}
|
|
170
255
|
|
|
171
|
-
|
|
172
|
-
|
|
256
|
+
onFieldChange = (name, value, ...rest) => {
|
|
257
|
+
const values = this.form.getValues();
|
|
258
|
+
const newValues = {
|
|
259
|
+
...values,
|
|
260
|
+
[name]: value
|
|
261
|
+
};
|
|
262
|
+
const changedInfo = { name, value, preValue:values?.[name] };
|
|
263
|
+
const { onChange } = this.props;
|
|
264
|
+
|
|
265
|
+
this.form.setData('values', newValues);
|
|
266
|
+
|
|
267
|
+
onChange && onChange(
|
|
268
|
+
newValues,
|
|
269
|
+
changedInfo,
|
|
270
|
+
...rest
|
|
271
|
+
);
|
|
272
|
+
this.updateDrawerFieldsValueCount(newValues);
|
|
273
|
+
}
|
|
173
274
|
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
275
|
+
updateDrawerFieldsValueCount = () => {
|
|
276
|
+
const values = this.form.getValues();
|
|
277
|
+
const { showFieldCount, children } = this.props;
|
|
278
|
+
|
|
279
|
+
if (showFieldCount) {
|
|
280
|
+
const drawerFieldsValueCount = children.reduce((acc, cur, index) => {
|
|
281
|
+
if (index >= showFieldCount && values?.[cur?.props?.name]) {
|
|
282
|
+
acc++;
|
|
283
|
+
}
|
|
284
|
+
return acc;
|
|
285
|
+
}, 0);
|
|
286
|
+
|
|
287
|
+
if (drawerFieldsValueCount !== this.state.drawerFieldsValueCount) {
|
|
288
|
+
this.setState({
|
|
289
|
+
drawerFieldsValueCount
|
|
290
|
+
});
|
|
291
|
+
}
|
|
178
292
|
}
|
|
179
|
-
}
|
|
180
|
-
};
|
|
181
|
-
|
|
182
|
-
var form = props.form,
|
|
183
|
-
_initialValues = props.initialValues,
|
|
184
|
-
_props$showExpand = props.showExpand,
|
|
185
|
-
showExpand = _props$showExpand === void 0 ? true : _props$showExpand,
|
|
186
|
-
renderActions = props.renderActions,
|
|
187
|
-
defaultExpanded = props.defaultExpanded;
|
|
188
|
-
_this.state = {
|
|
189
|
-
showMore: false,
|
|
190
|
-
expanded: defaultExpanded || !showExpand || renderActions ? true : false,
|
|
191
|
-
drawerVisible: false,
|
|
192
|
-
drawerFieldsValueCount: 0
|
|
193
|
-
};
|
|
194
|
-
_this.fieldsRef = (0, _react.createRef)();
|
|
195
|
-
_this.formBoxRef = (0, _react.createRef)();
|
|
196
|
-
_this.form = form || (0, _createActions["default"])();
|
|
197
|
-
|
|
198
|
-
_this.form.setData('initialValues', _initialValues);
|
|
199
|
-
|
|
200
|
-
_this.form.setData('values', _objectSpread({}, _initialValues));
|
|
201
|
-
|
|
202
|
-
return _this;
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
_createClass(QueryForm, [{
|
|
206
|
-
key: "render",
|
|
207
|
-
value: function render() {
|
|
208
|
-
var _this2 = this;
|
|
209
|
-
|
|
210
|
-
var _this$props3 = this.props,
|
|
211
|
-
children = _this$props3.children,
|
|
212
|
-
_this$props3$classNam = _this$props3.className,
|
|
213
|
-
className = _this$props3$classNam === void 0 ? '' : _this$props3$classNam,
|
|
214
|
-
_this$props3$initialV = _this$props3.initialValues,
|
|
215
|
-
initialValues = _this$props3$initialV === void 0 ? {} : _this$props3$initialV,
|
|
216
|
-
renderActions = _this$props3.renderActions,
|
|
217
|
-
_this$props3$showSear = _this$props3.showSearch,
|
|
218
|
-
showSearch = _this$props3$showSear === void 0 ? true : _this$props3$showSear,
|
|
219
|
-
_this$props3$showRese = _this$props3.showReset,
|
|
220
|
-
showReset = _this$props3$showRese === void 0 ? true : _this$props3$showRese,
|
|
221
|
-
showFieldCount = _this$props3.showFieldCount,
|
|
222
|
-
_this$props3$drawerPr = _this$props3.drawerProps,
|
|
223
|
-
drawerProps = _this$props3$drawerPr === void 0 ? {} : _this$props3$drawerPr,
|
|
224
|
-
size = _this$props3.size;
|
|
225
|
-
var extraActions = this.props.extraActions;
|
|
226
|
-
var _this$state = this.state,
|
|
227
|
-
expanded = _this$state.expanded,
|
|
228
|
-
showMore = _this$state.showMore,
|
|
229
|
-
drawerVisible = _this$state.drawerVisible,
|
|
230
|
-
drawerFieldsValueCount = _this$state.drawerFieldsValueCount;
|
|
231
|
-
|
|
232
|
-
var renderFormActions = renderActions || function () {
|
|
233
|
-
return _react["default"].createElement(_react["default"].Fragment, null, showFieldCount && _react["default"].createElement(_badge["default"], {
|
|
234
|
-
count: drawerFieldsValueCount
|
|
235
|
-
}, _react["default"].createElement(_button["default"], {
|
|
236
|
-
onClick: _this2.onShowDrawer
|
|
237
|
-
}, _react["default"].createElement(_Icon["default"], {
|
|
238
|
-
type: "filter"
|
|
239
|
-
}), _this2.getText('moreFiltering'))), showSearch && _react["default"].createElement(_button["default"], {
|
|
240
|
-
type: "primary",
|
|
241
|
-
onClick: _this2.onSearch
|
|
242
|
-
}, _this2.getText('search')), showReset && _react["default"].createElement(_button["default"], {
|
|
243
|
-
onClick: _this2.onReset
|
|
244
|
-
}, _this2.getText('reset')), showMore && !showFieldCount && _react["default"].createElement(_button["default"], {
|
|
245
|
-
className: "expand-link",
|
|
246
|
-
type: "link",
|
|
247
|
-
onClick: _this2.onToggleExpand
|
|
248
|
-
}, _this2.getText(expanded ? 'collapse' : 'expand')), _react["default"].Children.map(children, function (child) {
|
|
249
|
-
var _child$props;
|
|
250
|
-
|
|
251
|
-
return child && (child == null ? void 0 : (_child$props = child.props) == null ? void 0 : _child$props.align) === 'right' && _react["default"].cloneElement(child);
|
|
252
|
-
}));
|
|
253
|
-
};
|
|
254
|
-
|
|
255
|
-
return _react["default"].createElement("div", {
|
|
256
|
-
ref: this.formBoxRef,
|
|
257
|
-
className: (0, _classnames3["default"])(clsPrefix, _defineProperty({}, className, className))
|
|
258
|
-
}, _react["default"].createElement(_form["default"], {
|
|
259
|
-
layout: "inline",
|
|
260
|
-
className: (0, _classnames3["default"])({
|
|
261
|
-
expanded: !showMore || expanded,
|
|
262
|
-
showMore: showMore
|
|
263
|
-
})
|
|
264
|
-
}, _react["default"].createElement("div", {
|
|
265
|
-
ref: this.fieldsRef
|
|
266
|
-
}, _react["default"].Children.map(children, function (child, index) {
|
|
267
|
-
var _child$props2;
|
|
268
|
-
|
|
269
|
-
return child && (child == null ? void 0 : (_child$props2 = child.props) == null ? void 0 : _child$props2.align) !== 'right' && (!showFieldCount || showFieldCount > index) && _react["default"].cloneElement(child, {
|
|
270
|
-
form: _this2.form,
|
|
271
|
-
initialValue: initialValues == null ? void 0 : initialValues[child.props.name],
|
|
272
|
-
onChange: _this2.onFieldChange
|
|
273
|
-
});
|
|
274
|
-
})), _react["default"].createElement("div", {
|
|
275
|
-
className: "".concat(clsPrefix, "-actions")
|
|
276
|
-
}, renderFormActions()), showFieldCount && _react["default"].createElement(_drawer["default"], _extends({
|
|
277
|
-
title: this.getText('moreFiltering'),
|
|
278
|
-
visible: drawerVisible,
|
|
279
|
-
onClose: function onClose() {
|
|
280
|
-
return _this2.setState({
|
|
281
|
-
drawerVisible: false
|
|
282
|
-
});
|
|
283
|
-
},
|
|
284
|
-
width: 300,
|
|
285
|
-
size: size,
|
|
286
|
-
getContainer: false
|
|
287
|
-
}, drawerProps, {
|
|
288
|
-
className: (0, _classnames3["default"])("".concat(clsPrefix, "-drawer"), _defineProperty({
|
|
289
|
-
'large-size': size === 'large'
|
|
290
|
-
}, className, className))
|
|
291
|
-
}), _react["default"].Children.map(children, function (child, index) {
|
|
292
|
-
return child && index >= showFieldCount && _react["default"].cloneElement(child, {
|
|
293
|
-
form: _this2.form,
|
|
294
|
-
isFieldInDrawer: true,
|
|
295
|
-
initialValue: initialValues == null ? void 0 : initialValues[child.props.name],
|
|
296
|
-
onChange: _this2.onFieldChange,
|
|
297
|
-
onSearch: _this2.onSearch
|
|
298
|
-
});
|
|
299
|
-
}), _react["default"].createElement(_button["default"], {
|
|
300
|
-
type: "primary",
|
|
301
|
-
onClick: this.onSearch
|
|
302
|
-
}, this.getText('search')), _react["default"].createElement(_button["default"], {
|
|
303
|
-
onClick: this.onReset
|
|
304
|
-
}, this.getText('reset')))), extraActions && _react["default"].createElement("div", {
|
|
305
|
-
className: "".concat(clsPrefix, "-extra")
|
|
306
|
-
}, extraActions));
|
|
307
|
-
}
|
|
308
|
-
}, {
|
|
309
|
-
key: "getText",
|
|
310
|
-
value: function getText(key) {
|
|
311
|
-
return (0, _locale.getText)(key, this.props.language || (0, _locale.getLanguage)());
|
|
312
293
|
}
|
|
313
|
-
}, {
|
|
314
|
-
key: "isFieldsWidthOverflow",
|
|
315
|
-
value: function isFieldsWidthOverflow() {
|
|
316
|
-
var current = this.fieldsRef.current;
|
|
317
|
-
|
|
318
|
-
if (current) {
|
|
319
|
-
return current.offsetWidth < [].reduce.call(current.children, function (acc, cur) {
|
|
320
|
-
var marginArray = window.getComputedStyle(cur).margin.split(' ').map(function (str) {
|
|
321
|
-
return parseInt(str, 10);
|
|
322
|
-
});
|
|
323
|
-
acc += cur.offsetWidth + marginArray[1];
|
|
324
|
-
return acc;
|
|
325
|
-
}, 0);
|
|
326
|
-
}
|
|
327
|
-
|
|
328
|
-
return false;
|
|
329
|
-
}
|
|
330
|
-
}, {
|
|
331
|
-
key: "updateFieldHeight",
|
|
332
|
-
value: function updateFieldHeight() {
|
|
333
|
-
var _formBoxRef$current, _formBoxRef$current2, _fieldsRef$current;
|
|
334
294
|
|
|
335
|
-
|
|
336
|
-
|
|
295
|
+
componentDidMount() {
|
|
296
|
+
const { current } = this.fieldsRef;
|
|
297
|
+
const { showFieldCount, showExpand = true, renderActions } = this.props;
|
|
337
298
|
|
|
338
|
-
|
|
339
|
-
var _current$children;
|
|
299
|
+
this.updateFieldHeight();
|
|
340
300
|
|
|
341
|
-
|
|
342
|
-
var height = '32px';
|
|
301
|
+
this.form.on('search', this.search);
|
|
343
302
|
|
|
344
|
-
|
|
345
|
-
|
|
303
|
+
// 未设置第一行显示数量且禁止了展开操作 或 自定义了操作区域,则不需要处理展开计算逻辑
|
|
304
|
+
// || renderActions
|
|
305
|
+
if (!showFieldCount && !showExpand) {
|
|
306
|
+
return;
|
|
346
307
|
}
|
|
347
308
|
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
});
|
|
361
|
-
});
|
|
362
|
-
[].forEach.call(formItemsDomList, function (item) {
|
|
363
|
-
item.style.lineHeight = fieldHeight;
|
|
364
|
-
});
|
|
365
|
-
}
|
|
366
|
-
}, {
|
|
367
|
-
key: "componentDidMount",
|
|
368
|
-
value: function componentDidMount() {
|
|
369
|
-
var current = this.fieldsRef.current;
|
|
370
|
-
var _this$props4 = this.props,
|
|
371
|
-
showFieldCount = _this$props4.showFieldCount,
|
|
372
|
-
_this$props4$showExpa = _this$props4.showExpand,
|
|
373
|
-
showExpand = _this$props4$showExpa === void 0 ? true : _this$props4$showExpa,
|
|
374
|
-
renderActions = _this$props4.renderActions;
|
|
375
|
-
this.updateFieldHeight();
|
|
376
|
-
this.form.on('search', this.search); // 未设置第一行显示数量且禁止了展开操作 或 自定义了操作区域,则不需要处理展开计算逻辑
|
|
377
|
-
// || renderActions
|
|
378
|
-
|
|
379
|
-
if (!showFieldCount && !showExpand) {
|
|
380
|
-
return;
|
|
381
|
-
}
|
|
382
|
-
|
|
383
|
-
if (!showFieldCount) {
|
|
384
|
-
if (current && this.isFieldsWidthOverflow()) {
|
|
385
|
-
this.setState({
|
|
386
|
-
showMore: true
|
|
387
|
-
});
|
|
309
|
+
if (!showFieldCount) {
|
|
310
|
+
if (current && this.isFieldsWidthOverflow()) {
|
|
311
|
+
this.setState({
|
|
312
|
+
showMore: true
|
|
313
|
+
});
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
window.addEventListener('resize', this.onWindowResize);
|
|
317
|
+
} else {
|
|
318
|
+
this.updateDrawerFieldsValueCount();
|
|
319
|
+
this.form.on('setValues', this.updateDrawerFieldsValueCount);
|
|
320
|
+
this.form.on('setValue', this.updateDrawerFieldsValueCount);
|
|
388
321
|
}
|
|
389
|
-
|
|
390
|
-
window.addEventListener('resize', this.onWindowResize);
|
|
391
|
-
} else {
|
|
392
|
-
this.updateDrawerFieldsValueCount();
|
|
393
|
-
this.form.on('setValues', this.updateDrawerFieldsValueCount);
|
|
394
|
-
this.form.on('setValue', this.updateDrawerFieldsValueCount);
|
|
395
|
-
}
|
|
396
322
|
}
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
this.form.off('search', this.search);
|
|
323
|
+
|
|
324
|
+
componentWillUnmount() {
|
|
325
|
+
window.removeEventListener('resize', this.onWindowResize);
|
|
326
|
+
this.form.off('setValues', this.updateDrawerFieldsValueCount);
|
|
327
|
+
this.form.off('setValue', this.updateDrawerFieldsValueCount);
|
|
328
|
+
this.form.off('search', this.search);
|
|
404
329
|
}
|
|
405
|
-
|
|
330
|
+
};
|
|
406
331
|
|
|
407
|
-
|
|
408
|
-
|
|
332
|
+
QueryForm.Field = Field;
|
|
333
|
+
QueryForm.useForm = useForm;
|
|
334
|
+
QueryForm.createForm = createActions;
|
|
409
335
|
|
|
410
|
-
;
|
|
411
|
-
QueryForm.Field = _Field["default"];
|
|
412
|
-
QueryForm.useForm = _useForm["default"];
|
|
413
|
-
QueryForm.createForm = _createActions["default"];
|
|
414
|
-
var _default = QueryForm;
|
|
415
|
-
exports["default"] = _default;
|
|
336
|
+
export default QueryForm;
|