tntd 1.3.56 → 1.3.60
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/babel.config.js +2 -2
- package/components/Layout/OrgAppList.js +1 -1
- package/components/QueryListScene/List.js +17 -13
- package/lib/0645cf743e4e44ca9da321d689897f07.png +0 -0
- package/lib/09db77de0c24fa0f45f8a5cf299a3d11.png +0 -0
- package/lib/1d0b52448de217857b270af807e9360d.png +0 -0
- package/lib/25d78d77c9c2f0d403e5d899ceb5b1ef.png +0 -0
- package/lib/27fa44ff0c98e1594d79b73045aabedf.png +0 -0
- package/lib/2c95075adb68d6131b59cae9fa554ec2.png +0 -0
- package/lib/377c871d922a25c773a9e7c2f42ed7c0.png +0 -0
- package/lib/3d901589b40bd56ff1fde2bbb700bfe1.png +0 -0
- package/lib/4abe481e130d7be0574e45573de8beb7.png +0 -0
- package/lib/95ee2260a509cd630d89c5367ed1973b.png +0 -0
- package/lib/ArrayInput/icon.js +31 -27
- package/lib/ArrayInput/index.js +298 -211
- package/lib/AuthContext.js +13 -2
- package/lib/BlockHeader/README.md +83 -0
- package/lib/BlockHeader/fonts/OswaldLight.ttf +0 -0
- package/lib/BlockHeader/index.js +42 -0
- package/lib/BlockHeader/index.less +141 -0
- package/lib/Columns/index.js +100 -71
- package/lib/DevelopmentLogin/LoginModal.js +141 -79
- package/lib/DevelopmentLogin/index.js +55 -28
- package/lib/Ellipsis/Svg/CopySVG.js +71 -23
- package/lib/Ellipsis/Svg/TickSVG.js +49 -17
- package/lib/Ellipsis/index.js +155 -149
- package/lib/Handle/index.js +109 -72
- package/lib/Icon/fonts/iconfont.js +43 -1
- package/lib/Icon/iconList.js +8 -119
- package/lib/Icon/index.js +45 -13
- package/lib/Img/Contain.js +81 -49
- package/lib/Img/Cover.js +136 -88
- package/lib/Img/index.js +89 -36
- package/lib/Layout/ActionsContext.js +11 -2
- package/lib/Layout/AppList.js +256 -262
- package/lib/Layout/Application.js +135 -119
- package/lib/Layout/Avatar.js +137 -137
- package/lib/Layout/CompatibleLanguage.js +195 -214
- package/lib/Layout/EnterpriseLayout/Avatar.js +168 -156
- package/lib/Layout/EnterpriseLayout/Language.js +100 -75
- package/lib/Layout/EnterpriseLayout/Theme.js +94 -96
- package/lib/Layout/EnterpriseLayout/index.js +45 -32
- package/lib/Layout/GlobalNavigation/NavigationPopup.js +407 -335
- package/lib/Layout/GlobalNavigation/index.js +158 -110
- package/lib/Layout/Header.js +116 -165
- package/lib/Layout/HeaderActions.js +129 -170
- package/lib/Layout/HeaderNavs.js +113 -90
- package/lib/Layout/HeaderTabs.js +278 -312
- package/lib/Layout/Iconfont.js +15 -2
- package/lib/Layout/Language.js +102 -63
- package/lib/Layout/Layout.js +261 -272
- package/lib/Layout/Logo.js +87 -132
- package/lib/Layout/OrgAppList.js +319 -440
- package/lib/Layout/SideMenu.js +343 -429
- package/lib/Layout/Theme.js +124 -95
- package/lib/Layout/checkAuth.js +35 -21
- package/lib/Layout/createActions.js +51 -38
- package/lib/Layout/images/index.js +41 -33
- package/lib/Layout/index.js +161 -110
- package/lib/Layout/locale.js +53 -0
- package/lib/Layout/paaslayout/CompactSideMenu.js +178 -200
- package/lib/Layout/paaslayout/Header.js +90 -84
- package/lib/Layout/paaslayout/Logo.js +32 -27
- package/lib/Layout/paaslayout/SideMenu.js +174 -161
- package/lib/Layout/paaslayout/index.js +261 -240
- package/lib/Layout/paaslayout/index.less +75 -0
- package/lib/Layout/storage.js +78 -20
- package/lib/Layout/utils.js +143 -93
- package/lib/LoadingButton/index.js +57 -29
- package/lib/Modal/index.js +108 -83
- package/lib/Page/Box.js +81 -56
- package/lib/Page/index.js +173 -151
- package/lib/Page/utils.js +30 -12
- package/lib/QueryForm/Field/Checkbox.js +33 -11
- package/lib/QueryForm/Field/Select.js +99 -63
- package/lib/QueryForm/Field/SelectInput.js +114 -69
- package/lib/QueryForm/Field/fieldsMap.js +52 -30
- package/lib/QueryForm/Field/index.js +156 -75
- package/lib/QueryForm/createActions.js +65 -50
- package/lib/QueryForm/index.js +382 -303
- package/lib/QueryForm/useForm.js +17 -6
- package/lib/QueryListScene/Field/SelectInput.js +115 -0
- package/lib/QueryListScene/Field/fieldsMap.js +52 -0
- package/lib/QueryListScene/Field/index.js +159 -0
- package/lib/QueryListScene/Field/select.js +100 -0
- package/lib/QueryListScene/List.js +362 -285
- package/lib/QueryListScene/QueryForm/index.js +423 -0
- package/lib/QueryListScene/QueryForm/index.less +141 -0
- package/lib/QueryListScene/QueryForm.js +159 -91
- package/lib/QueryListScene/QueryListScene.js +87 -33
- package/lib/QueryListScene/Title.js +20 -10
- package/lib/QueryListScene/Toolbar.js +31 -8
- package/lib/QueryListScene/createActions.js +79 -64
- package/lib/QueryListScene/index.js +40 -23
- package/lib/QueryListScene/useActions.js +17 -6
- package/lib/Select/DropDownWrap.js +124 -60
- package/lib/Select/index.js +563 -426
- package/lib/Table/ResizableTable/index.js +121 -77
- package/lib/Table/index.js +51 -19
- package/lib/Title/index.js +52 -34
- package/lib/b9dd5ff3622296fbee51ed68f4bca1bf.png +0 -0
- package/lib/bd2921989f9296089ba58efb7a76f3ef.png +0 -0
- package/lib/index.html +6 -0
- package/lib/index.js +159 -19
- package/lib/locale.js +63 -48
- package/lib/main.css +16420 -0
- package/lib/tntd.js +2 -0
- package/lib/tntd.js.LICENSE.txt +36 -0
- package/package.json +2 -2
package/lib/QueryForm/index.js
CHANGED
|
@@ -1,335 +1,414 @@
|
|
|
1
|
-
|
|
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
|
-
}
|
|
1
|
+
"use strict";
|
|
31
2
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
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
|
-
}
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
165
7
|
|
|
166
|
-
|
|
167
|
-
return getText(key, this.props.language || getLanguage());
|
|
168
|
-
}
|
|
8
|
+
require("antd/es/form/style");
|
|
169
9
|
|
|
170
|
-
|
|
171
|
-
const { current } = this.fieldsRef;
|
|
10
|
+
var _form = _interopRequireDefault(require("antd/es/form"));
|
|
172
11
|
|
|
173
|
-
|
|
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
|
-
}
|
|
12
|
+
require("antd/es/drawer/style");
|
|
180
13
|
|
|
181
|
-
|
|
182
|
-
}
|
|
14
|
+
var _drawer = _interopRequireDefault(require("antd/es/drawer"));
|
|
183
15
|
|
|
184
|
-
|
|
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
|
-
}
|
|
16
|
+
require("antd/es/badge/style");
|
|
212
17
|
|
|
213
|
-
|
|
214
|
-
const { current } = this.fieldsRef;
|
|
18
|
+
var _badge = _interopRequireDefault(require("antd/es/badge"));
|
|
215
19
|
|
|
216
|
-
|
|
217
|
-
setTimeout(() => {
|
|
218
|
-
this.setState({
|
|
219
|
-
showMore: this.isFieldsWidthOverflow()
|
|
220
|
-
});
|
|
221
|
-
}, 25);
|
|
222
|
-
}
|
|
223
|
-
}, 50)
|
|
20
|
+
require("antd/es/button/style");
|
|
224
21
|
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
22
|
+
var _button = _interopRequireDefault(require("antd/es/button"));
|
|
23
|
+
|
|
24
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
25
|
+
|
|
26
|
+
var _classnames3 = _interopRequireDefault(require("classnames"));
|
|
27
|
+
|
|
28
|
+
var _lodash = require("lodash");
|
|
29
|
+
|
|
30
|
+
var _useForm = _interopRequireDefault(require("./useForm"));
|
|
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;
|
|
231
83
|
|
|
232
|
-
|
|
233
|
-
|
|
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;
|
|
89
|
+
|
|
90
|
+
if (current) {
|
|
91
|
+
setTimeout(function () {
|
|
92
|
+
_this.setState({
|
|
93
|
+
showMore: _this.isFieldsWidthOverflow()
|
|
94
|
+
});
|
|
95
|
+
}, 25);
|
|
96
|
+
}
|
|
97
|
+
}, 50);
|
|
98
|
+
|
|
99
|
+
_this.search = function (params) {
|
|
100
|
+
_this.props.onSearch(_objectSpread({}, _this.form.getValues(), {}, params));
|
|
234
101
|
};
|
|
235
102
|
|
|
103
|
+
_this.onSearch = function () {
|
|
104
|
+
_this.props.onSearch == null ? void 0 : _this.props.onSearch(_this.form.getValues());
|
|
105
|
+
};
|
|
236
106
|
|
|
237
|
-
onReset = ()
|
|
238
|
-
|
|
107
|
+
_this.onReset = function () {
|
|
108
|
+
var _this$props = _this.props,
|
|
109
|
+
initialValues = _this$props.initialValues,
|
|
110
|
+
onReset = _this$props.onReset;
|
|
239
111
|
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
112
|
+
_this.form.setValues(_objectSpread({}, initialValues));
|
|
113
|
+
|
|
114
|
+
_this.updateDrawerFieldsValueCount();
|
|
115
|
+
|
|
116
|
+
onReset == null ? void 0 : onReset(initialValues);
|
|
243
117
|
};
|
|
244
118
|
|
|
245
|
-
onToggleExpand = ()
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
this.props.onToggleExpand?.(!this.state.expanded);
|
|
250
|
-
}
|
|
119
|
+
_this.onToggleExpand = function () {
|
|
120
|
+
_this.setState({
|
|
121
|
+
expanded: !_this.state.expanded
|
|
122
|
+
});
|
|
251
123
|
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
}
|
|
124
|
+
_this.props.onToggleExpand == null ? void 0 : _this.props.onToggleExpand(!_this.state.expanded);
|
|
125
|
+
};
|
|
255
126
|
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
127
|
+
_this.onShowDrawer = function () {
|
|
128
|
+
_this.setState({
|
|
129
|
+
drawerVisible: true
|
|
130
|
+
});
|
|
131
|
+
};
|
|
132
|
+
|
|
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
|
+
|
|
151
|
+
onChange && onChange.apply(void 0, [newValues, changedInfo].concat(rest));
|
|
274
152
|
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
153
|
+
_this.updateDrawerFieldsValueCount(newValues);
|
|
154
|
+
};
|
|
155
|
+
|
|
156
|
+
_this.updateDrawerFieldsValueCount = function () {
|
|
157
|
+
var values = _this.form.getValues();
|
|
158
|
+
|
|
159
|
+
var _this$props2 = _this.props,
|
|
160
|
+
showFieldCount = _this$props2.showFieldCount,
|
|
161
|
+
children = _this$props2.children;
|
|
162
|
+
|
|
163
|
+
if (showFieldCount) {
|
|
164
|
+
var drawerFieldsValueCount = children.reduce(function (acc, cur, index) {
|
|
165
|
+
var _cur$props;
|
|
166
|
+
|
|
167
|
+
if (index >= showFieldCount && (values == null ? void 0 : values[cur == null ? void 0 : (_cur$props = cur.props) == null ? void 0 : _cur$props.name])) {
|
|
168
|
+
acc++;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
return acc;
|
|
172
|
+
}, 0);
|
|
173
|
+
|
|
174
|
+
if (drawerFieldsValueCount !== _this.state.drawerFieldsValueCount) {
|
|
175
|
+
_this.setState({
|
|
176
|
+
drawerFieldsValueCount: drawerFieldsValueCount
|
|
177
|
+
});
|
|
292
178
|
}
|
|
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)());
|
|
293
312
|
}
|
|
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;
|
|
294
334
|
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
const { showFieldCount, showExpand = true, renderActions } = this.props;
|
|
335
|
+
var formBoxRef = this.formBoxRef,
|
|
336
|
+
fieldsRef = this.fieldsRef;
|
|
298
337
|
|
|
299
|
-
|
|
338
|
+
var getFieldHeight = function getFieldHeight() {
|
|
339
|
+
var _current$children;
|
|
300
340
|
|
|
301
|
-
|
|
341
|
+
var current = fieldsRef.current;
|
|
342
|
+
var height = '32px';
|
|
302
343
|
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
return;
|
|
344
|
+
if (current && ((_current$children = current.children) == null ? void 0 : _current$children[0])) {
|
|
345
|
+
height = window.getComputedStyle(current.children[0]).height;
|
|
306
346
|
}
|
|
307
347
|
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
}
|
|
348
|
+
return height;
|
|
349
|
+
};
|
|
350
|
+
|
|
351
|
+
var queryFormActionsDom = formBoxRef == null ? void 0 : (_formBoxRef$current = formBoxRef.current) == null ? void 0 : _formBoxRef$current.querySelector(".".concat(clsPrefix, "-actions"));
|
|
352
|
+
var queryFormExtraDom = formBoxRef == null ? void 0 : (_formBoxRef$current2 = formBoxRef.current) == null ? void 0 : _formBoxRef$current2.querySelector(".".concat(clsPrefix, "-extra"));
|
|
353
|
+
var formItemsDomList = fieldsRef == null ? void 0 : (_fieldsRef$current = fieldsRef.current) == null ? void 0 : _fieldsRef$current.querySelectorAll('.ant-form-item-control');
|
|
354
|
+
var fieldHeight = getFieldHeight();
|
|
355
|
+
fieldsRef.current.style.height = fieldHeight;
|
|
356
|
+
[queryFormActionsDom, queryFormExtraDom].forEach(function (item) {
|
|
357
|
+
item && Object.assign(item.style, {
|
|
358
|
+
height: fieldHeight,
|
|
359
|
+
lineHeight: fieldHeight
|
|
360
|
+
});
|
|
361
|
+
});
|
|
362
|
+
[].forEach.call(formItemsDomList, function (item) {
|
|
363
|
+
item.style.lineHeight = fieldHeight;
|
|
364
|
+
});
|
|
321
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
|
+
|
|
378
|
+
if (!showFieldCount && !showExpand || renderActions) {
|
|
379
|
+
return;
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
if (!showFieldCount) {
|
|
383
|
+
if (current && this.isFieldsWidthOverflow()) {
|
|
384
|
+
this.setState({
|
|
385
|
+
showMore: true
|
|
386
|
+
});
|
|
387
|
+
}
|
|
322
388
|
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
this.
|
|
326
|
-
this.form.
|
|
327
|
-
this.form.
|
|
389
|
+
window.addEventListener('resize', this.onWindowResize);
|
|
390
|
+
} else {
|
|
391
|
+
this.updateDrawerFieldsValueCount();
|
|
392
|
+
this.form.on('setValues', this.updateDrawerFieldsValueCount);
|
|
393
|
+
this.form.on('setValue', this.updateDrawerFieldsValueCount);
|
|
394
|
+
}
|
|
395
|
+
}
|
|
396
|
+
}, {
|
|
397
|
+
key: "componentWillUnmount",
|
|
398
|
+
value: function componentWillUnmount() {
|
|
399
|
+
window.removeEventListener('resize', this.onWindowResize);
|
|
400
|
+
this.form.off('setValues', this.updateDrawerFieldsValueCount);
|
|
401
|
+
this.form.off('setValue', this.updateDrawerFieldsValueCount);
|
|
402
|
+
this.form.off('search', this.search);
|
|
328
403
|
}
|
|
329
|
-
};
|
|
404
|
+
}]);
|
|
330
405
|
|
|
331
|
-
QueryForm
|
|
332
|
-
|
|
333
|
-
QueryForm.createForm = createActions;
|
|
406
|
+
return QueryForm;
|
|
407
|
+
}(_react["default"].PureComponent);
|
|
334
408
|
|
|
335
|
-
|
|
409
|
+
;
|
|
410
|
+
QueryForm.Field = _Field["default"];
|
|
411
|
+
QueryForm.useForm = _useForm["default"];
|
|
412
|
+
QueryForm.createForm = _createActions["default"];
|
|
413
|
+
var _default = QueryForm;
|
|
414
|
+
exports["default"] = _default;
|