tntd 1.4.6 → 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.
Files changed (86) hide show
  1. package/components/Layout/HeaderActions.js +90 -128
  2. package/components/LoadingButton/index.js +11 -15
  3. package/dist/stats.json +4958 -4958
  4. package/dist/tntd.js +1 -1
  5. package/es/Layout/HeaderActions.js +10 -10
  6. package/es/LoadingButton/index.js +20 -10
  7. package/lib/ArrayInput/icon.js +27 -31
  8. package/lib/ArrayInput/index.js +211 -298
  9. package/lib/AuthContext.js +2 -13
  10. package/lib/Columns/index.js +71 -100
  11. package/lib/DevelopmentLogin/LoginModal.js +79 -141
  12. package/lib/DevelopmentLogin/index.js +28 -55
  13. package/lib/Ellipsis/Svg/CopySVG.js +23 -71
  14. package/lib/Ellipsis/Svg/TickSVG.js +17 -49
  15. package/lib/Ellipsis/index.js +148 -154
  16. package/lib/Handle/index.js +72 -109
  17. package/lib/Icon/fonts/iconfont.js +1 -43
  18. package/lib/Icon/iconList.js +119 -8
  19. package/lib/Icon/index.js +13 -45
  20. package/lib/Img/Contain.js +49 -81
  21. package/lib/Img/Cover.js +88 -136
  22. package/lib/Img/index.js +36 -89
  23. package/lib/Layout/ActionsContext.js +2 -11
  24. package/lib/Layout/AppList.js +262 -256
  25. package/lib/Layout/Application.js +119 -135
  26. package/lib/Layout/Avatar.js +137 -137
  27. package/lib/Layout/CompatibleLanguage.js +214 -195
  28. package/lib/Layout/EnterpriseLayout/Avatar.js +156 -168
  29. package/lib/Layout/EnterpriseLayout/Language.js +75 -100
  30. package/lib/Layout/EnterpriseLayout/Theme.js +96 -94
  31. package/lib/Layout/EnterpriseLayout/index.js +32 -45
  32. package/lib/Layout/GlobalNavigation/NavigationPopup.js +335 -407
  33. package/lib/Layout/GlobalNavigation/index.js +110 -158
  34. package/lib/Layout/Header.js +165 -116
  35. package/lib/Layout/HeaderActions.js +132 -129
  36. package/lib/Layout/HeaderNavs.js +90 -113
  37. package/lib/Layout/HeaderTabs.js +312 -278
  38. package/lib/Layout/Iconfont.js +2 -15
  39. package/lib/Layout/Language.js +63 -102
  40. package/lib/Layout/Layout.js +272 -261
  41. package/lib/Layout/Logo.js +132 -87
  42. package/lib/Layout/OrgAppList.js +440 -319
  43. package/lib/Layout/SideMenu.js +429 -343
  44. package/lib/Layout/Theme.js +95 -124
  45. package/lib/Layout/checkAuth.js +21 -35
  46. package/lib/Layout/createActions.js +38 -51
  47. package/lib/Layout/images/index.js +33 -41
  48. package/lib/Layout/index.js +110 -161
  49. package/lib/Layout/paaslayout/CompactSideMenu.js +200 -178
  50. package/lib/Layout/paaslayout/Header.js +84 -90
  51. package/lib/Layout/paaslayout/Logo.js +27 -32
  52. package/lib/Layout/paaslayout/SideMenu.js +161 -174
  53. package/lib/Layout/paaslayout/index.js +240 -261
  54. package/lib/Layout/storage.js +20 -78
  55. package/lib/Layout/utils.js +93 -143
  56. package/lib/LoadingButton/index.js +25 -57
  57. package/lib/Modal/index.js +83 -108
  58. package/lib/Page/Box.js +56 -81
  59. package/lib/Page/index.js +151 -173
  60. package/lib/Page/utils.js +12 -30
  61. package/lib/QueryForm/Field/Checkbox.js +11 -33
  62. package/lib/QueryForm/Field/Select.js +63 -99
  63. package/lib/QueryForm/Field/SelectInput.js +69 -114
  64. package/lib/QueryForm/Field/fieldsMap.js +30 -52
  65. package/lib/QueryForm/Field/index.js +76 -158
  66. package/lib/QueryForm/createActions.js +50 -65
  67. package/lib/QueryForm/index.js +304 -383
  68. package/lib/QueryForm/useForm.js +6 -17
  69. package/lib/QueryListScene/List.js +290 -366
  70. package/lib/QueryListScene/QueryForm.js +93 -161
  71. package/lib/QueryListScene/QueryListScene.js +33 -87
  72. package/lib/QueryListScene/Title.js +10 -20
  73. package/lib/QueryListScene/Toolbar.js +8 -31
  74. package/lib/QueryListScene/createActions.js +64 -79
  75. package/lib/QueryListScene/index.js +23 -40
  76. package/lib/QueryListScene/useActions.js +6 -17
  77. package/lib/Select/DropDownWrap.js +60 -124
  78. package/lib/Select/index.js +425 -561
  79. package/lib/Table/ResizableTable/index.js +77 -121
  80. package/lib/Table/index.js +19 -51
  81. package/lib/Title/index.js +34 -52
  82. package/lib/index.js +19 -159
  83. package/lib/locale.js +48 -63
  84. package/package.json +1 -1
  85. package/lib/Layout/EnterpriseLayout/Header.js +0 -113
  86. package/lib/Layout/EnterpriseLayout/HeaderActions.js +0 -104
@@ -1,415 +1,336 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports["default"] = void 0;
7
-
8
- require("antd/lib/form/style");
9
-
10
- var _form = _interopRequireDefault(require("antd/lib/form"));
11
-
12
- require("antd/lib/drawer/style");
13
-
14
- var _drawer = _interopRequireDefault(require("antd/lib/drawer"));
15
-
16
- require("antd/lib/badge/style");
17
-
18
- var _badge = _interopRequireDefault(require("antd/lib/badge"));
19
-
20
- require("antd/lib/button/style");
21
-
22
- var _button = _interopRequireDefault(require("antd/lib/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;
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
- if (current) {
91
- setTimeout(function () {
92
- _this.setState({
93
- showMore: _this.isFieldsWidthOverflow()
94
- });
95
- }, 25);
96
- }
97
- }, 50);
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
- _this.search = function (params) {
100
- _this.props.onSearch(_objectSpread({}, _this.form.getValues(), {}, params));
101
- };
166
+ getText(key) {
167
+ return getText(key, this.props.language || getLanguage());
168
+ }
102
169
 
103
- _this.onSearch = function () {
104
- _this.props.onSearch == null ? void 0 : _this.props.onSearch(_this.form.getValues());
105
- };
170
+ isFieldsWidthOverflow() {
171
+ const { current } = this.fieldsRef;
106
172
 
107
- _this.onReset = function () {
108
- var _this$props = _this.props,
109
- initialValues = _this$props.initialValues,
110
- onReset = _this$props.onReset;
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
- _this.form.setValues(_objectSpread({}, initialValues));
181
+ return false;
182
+ }
113
183
 
114
- _this.updateDrawerFieldsValueCount();
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
- onReset == null ? void 0 : onReset(initialValues);
117
- };
213
+ onWindowResize = debounce(() => {
214
+ const { current } = this.fieldsRef;
118
215
 
119
- _this.onToggleExpand = function () {
120
- _this.setState({
121
- expanded: !_this.state.expanded
122
- });
216
+ if (current) {
217
+ setTimeout(() => {
218
+ this.setState({
219
+ showMore: this.isFieldsWidthOverflow()
220
+ });
221
+ }, 25);
222
+ }
223
+ }, 50)
123
224
 
124
- _this.props.onToggleExpand == null ? void 0 : _this.props.onToggleExpand(!_this.state.expanded);
125
- };
225
+ search = params => {
226
+ this.props.onSearch({
227
+ ...this.form.getValues(),
228
+ ...params
229
+ });
230
+ }
126
231
 
127
- _this.onShowDrawer = function () {
128
- _this.setState({
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
- onChange && onChange.apply(void 0, [newValues, changedInfo].concat(rest));
237
+ onReset = () => {
238
+ const { initialValues, onReset } = this.props;
152
239
 
153
- _this.updateDrawerFieldsValueCount(newValues);
240
+ this.form.setValues({ ...initialValues });
241
+ this.updateDrawerFieldsValueCount();
242
+ onReset?.(initialValues);
154
243
  };
155
244
 
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;
245
+ onToggleExpand = () => {
246
+ this.setState({
247
+ expanded: !this.state.expanded
248
+ });
249
+ this.props.onToggleExpand?.(!this.state.expanded);
250
+ }
166
251
 
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
- }
252
+ onShowDrawer = () => {
253
+ this.setState({ drawerVisible: true });
254
+ }
170
255
 
171
- return acc;
172
- }, 0);
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
- if (drawerFieldsValueCount !== _this.state.drawerFieldsValueCount) {
175
- _this.setState({
176
- drawerFieldsValueCount: drawerFieldsValueCount
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
- var formBoxRef = this.formBoxRef,
336
- fieldsRef = this.fieldsRef;
295
+ componentDidMount() {
296
+ const { current } = this.fieldsRef;
297
+ const { showFieldCount, showExpand = true, renderActions } = this.props;
337
298
 
338
- var getFieldHeight = function getFieldHeight() {
339
- var _current$children;
299
+ this.updateFieldHeight();
340
300
 
341
- var current = fieldsRef.current;
342
- var height = '32px';
301
+ this.form.on('search', this.search);
343
302
 
344
- if (current && ((_current$children = current.children) == null ? void 0 : _current$children[0])) {
345
- height = window.getComputedStyle(current.children[0]).height;
303
+ // 未设置第一行显示数量且禁止了展开操作 自定义了操作区域,则不需要处理展开计算逻辑
304
+ // || renderActions
305
+ if (!showFieldCount && !showExpand) {
306
+ return;
346
307
  }
347
308
 
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
- });
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
- key: "componentWillUnmount",
399
- value: function componentWillUnmount() {
400
- window.removeEventListener('resize', this.onWindowResize);
401
- this.form.off('setValues', this.updateDrawerFieldsValueCount);
402
- this.form.off('setValue', this.updateDrawerFieldsValueCount);
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
- return QueryForm;
408
- }(_react["default"].PureComponent);
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;