@qn-pandora/pandora-component 4.1.7 → 4.3.0
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/CHANGELOG.json +25 -8
- package/CHANGELOG.md +12 -5
- package/es/components/DateTimePicker/Base/index.d.ts +6 -1
- package/es/components/DateTimePicker/Base/index.js +44 -17
- package/es/components/DateTimePicker/Base/relativeTimePicker.js +10 -7
- package/es/components/DateTimePicker/constants.d.ts +57 -1
- package/es/components/DateTimePicker/constants.js +3 -5
- package/es/components/DateTimePicker/time.js +2 -2
- package/es/components/DateTimePicker/transform.d.ts +5 -1
- package/es/components/DateTimePicker/transform.js +3 -2
- package/es/components/Drawer/index.d.ts +21 -1
- package/es/components/Drawer/index.js +74 -13
- package/es/components/Drawer/style.css +11 -0
- package/es/components/Drawer/style.less +13 -0
- package/es/components/RadioGroup/style.css +7 -0
- package/es/components/RadioGroup/style.less +9 -0
- package/es/components/Table/ColumnSetting/index.d.ts +16 -0
- package/es/components/Table/ColumnSetting/index.js +91 -0
- package/es/components/Table/ColumnSetting/style.css +47 -0
- package/es/components/Table/ColumnSetting/style.less +46 -0
- package/es/components/Table/index.d.ts +27 -2
- package/es/components/Table/index.js +127 -3
- package/es/components/Table/style.css +4 -0
- package/es/components/Table/style.less +7 -0
- package/es/constants/language/table/en.js +4 -1
- package/es/constants/language/table/type.d.ts +3 -0
- package/es/constants/language/table/zh.js +4 -1
- package/es/index.css +2758 -2689
- package/es/index.less +5 -4
- package/es/style/theme.less +5 -0
- package/lib/components/DateTimePicker/Base/index.d.ts +6 -1
- package/lib/components/DateTimePicker/Base/index.js +43 -16
- package/lib/components/DateTimePicker/Base/relativeTimePicker.js +8 -5
- package/lib/components/DateTimePicker/constants.d.ts +57 -1
- package/lib/components/DateTimePicker/constants.js +3 -5
- package/lib/components/DateTimePicker/time.js +1 -1
- package/lib/components/DateTimePicker/transform.d.ts +5 -1
- package/lib/components/DateTimePicker/transform.js +3 -2
- package/lib/components/Drawer/index.d.ts +21 -1
- package/lib/components/Drawer/index.js +74 -13
- package/lib/components/Drawer/style.css +11 -0
- package/lib/components/Drawer/style.less +13 -0
- package/lib/components/RadioGroup/style.css +7 -0
- package/lib/components/RadioGroup/style.less +9 -0
- package/lib/components/Table/ColumnSetting/index.d.ts +16 -0
- package/lib/components/Table/ColumnSetting/index.js +104 -0
- package/lib/components/Table/ColumnSetting/style.css +47 -0
- package/lib/components/Table/ColumnSetting/style.less +46 -0
- package/lib/components/Table/index.d.ts +27 -2
- package/lib/components/Table/index.js +126 -2
- package/lib/components/Table/style.css +4 -0
- package/lib/components/Table/style.less +7 -0
- package/lib/constants/language/table/en.js +4 -1
- package/lib/constants/language/table/type.d.ts +3 -0
- package/lib/constants/language/table/zh.js +4 -1
- package/lib/index.css +2295 -2226
- package/lib/index.less +3 -2
- package/lib/style/theme.less +5 -0
- package/package.json +6 -5
@@ -48,14 +48,16 @@ import { throttle } from 'lodash';
|
|
48
48
|
import { observer } from 'mobx-react';
|
49
49
|
import { observable, action, computed } from 'mobx';
|
50
50
|
import { Drawer as BaseDrawer } from 'antd';
|
51
|
+
import screenfull from 'screenfull';
|
52
|
+
import { FullscreenExitOutlined, FullscreenOutlined } from '@qn-pandora/pandora-component-icons';
|
51
53
|
import { doesDOMMatchSelector } from '../../utils/dom';
|
52
54
|
import { SDK_PREFIX, ANT_PREFIX } from '../../constants/style';
|
53
55
|
import modalPopupContainerWrapper from '../../hoc/modalPopupContainer';
|
54
56
|
import bind from '../../utils/bind';
|
55
57
|
import CloseIcon from './CloseIcon';
|
56
|
-
var DEFAULT_WIDTH =
|
57
|
-
var SMALL_WIDTH =
|
58
|
-
var LARGE_WIDTH =
|
58
|
+
var DEFAULT_WIDTH = '50%';
|
59
|
+
var SMALL_WIDTH = '38%';
|
60
|
+
var LARGE_WIDTH = '75%';
|
59
61
|
var MAX_WIDTH = 6000;
|
60
62
|
var MIN_WIDTH = 300;
|
61
63
|
var Drawer = /** @class */ (function (_super) {
|
@@ -65,6 +67,7 @@ var Drawer = /** @class */ (function (_super) {
|
|
65
67
|
_this.drawerId = "drawer-id-" + Math.floor(Math.random() * 10000);
|
66
68
|
_this.isResizing = false;
|
67
69
|
_this.realWidth = _this.initWidth(_this.props.width, _this.props.size);
|
70
|
+
_this.isFullscreen = false;
|
68
71
|
_this.throttleMouseMove = throttle(function (e) { return _this.onMouseMove(e); }, 100);
|
69
72
|
return _this;
|
70
73
|
}
|
@@ -82,13 +85,17 @@ var Drawer = /** @class */ (function (_super) {
|
|
82
85
|
});
|
83
86
|
Object.defineProperty(Drawer.prototype, "extra", {
|
84
87
|
get: function () {
|
85
|
-
var _a = this.props, closable = _a.closable, closeIconPlacement = _a.closeIconPlacement,
|
88
|
+
var _a = this.props, closable = _a.closable, closeIconPlacement = _a.closeIconPlacement, showFullScreen = _a.showFullScreen;
|
89
|
+
var fullIcon = showFullScreen === true ? (this.isFullscreen ? (React.createElement(FullscreenExitOutlined, { onClick: this.handleFull, className: SDK_PREFIX + "-drawer-header-full-icon" })) : (React.createElement(FullscreenOutlined, { onClick: this.handleFull, className: SDK_PREFIX + "-drawer-header-full-icon" }))) : null;
|
86
90
|
if (closable !== false && closeIconPlacement === 'right') {
|
87
91
|
return (React.createElement(React.Fragment, null,
|
88
92
|
this.props.extra,
|
89
|
-
|
93
|
+
fullIcon,
|
94
|
+
React.createElement(CloseIcon, { className: SDK_PREFIX + "-drawer-close-icon", onClick: this.handleClose })));
|
90
95
|
}
|
91
|
-
return
|
96
|
+
return (React.createElement(React.Fragment, null,
|
97
|
+
fullIcon,
|
98
|
+
this.props.extra));
|
92
99
|
},
|
93
100
|
enumerable: true,
|
94
101
|
configurable: true
|
@@ -100,6 +107,17 @@ var Drawer = /** @class */ (function (_super) {
|
|
100
107
|
Drawer.prototype.setRealWidth = function (realWidth) {
|
101
108
|
this.realWidth = realWidth;
|
102
109
|
};
|
110
|
+
Drawer.prototype.setIsFullscreen = function (isFullscreen) {
|
111
|
+
this.isFullscreen = isFullscreen;
|
112
|
+
};
|
113
|
+
Drawer.prototype.handleFull = function () {
|
114
|
+
var draw = document.querySelector("." + this.drawerId);
|
115
|
+
if (!screenfull || !draw) {
|
116
|
+
return;
|
117
|
+
}
|
118
|
+
this.setIsFullscreen(!this.isFullscreen);
|
119
|
+
screenfull.toggle(draw);
|
120
|
+
};
|
103
121
|
Drawer.prototype.onMouseDown = function () {
|
104
122
|
this.setIsResizing(true);
|
105
123
|
};
|
@@ -118,7 +136,10 @@ var Drawer = /** @class */ (function (_super) {
|
|
118
136
|
}
|
119
137
|
};
|
120
138
|
Drawer.prototype.onMouseClick = function (e) {
|
121
|
-
var _a
|
139
|
+
var _a;
|
140
|
+
var _b = this.props, mask = _b.mask, maskClosable = _b.maskClosable, nonCloseSelector = _b.nonCloseSelector, visible = _b.visible;
|
141
|
+
if (this.isResizing)
|
142
|
+
return;
|
122
143
|
if (mask === false && maskClosable && visible) {
|
123
144
|
var currentEl = e.target;
|
124
145
|
var shouldClose = true;
|
@@ -137,7 +158,7 @@ var Drawer = /** @class */ (function (_super) {
|
|
137
158
|
currentEl = currentEl.parentElement;
|
138
159
|
}
|
139
160
|
if (shouldClose) {
|
140
|
-
|
161
|
+
(_a = this.handleClose) === null || _a === void 0 ? void 0 : _a.call(this, null);
|
141
162
|
}
|
142
163
|
}
|
143
164
|
};
|
@@ -151,12 +172,32 @@ var Drawer = /** @class */ (function (_super) {
|
|
151
172
|
return LARGE_WIDTH;
|
152
173
|
return DEFAULT_WIDTH;
|
153
174
|
};
|
175
|
+
Drawer.prototype.handleClose = function (e) {
|
176
|
+
var _a = this.props, onClose = _a.onClose, showFullScreen = _a.showFullScreen;
|
177
|
+
if (onClose) {
|
178
|
+
onClose(e);
|
179
|
+
// 如果在全屏的状态下关闭抽屉,需要将关闭全屏
|
180
|
+
if (showFullScreen && this.isFullscreen) {
|
181
|
+
this.handleFull();
|
182
|
+
}
|
183
|
+
}
|
184
|
+
};
|
154
185
|
Drawer.prototype.componentDidMount = function () {
|
186
|
+
document.body.addEventListener('mousedown', this.onMouseClick);
|
187
|
+
var onScreenFullChange = this.props.onScreenFullChange;
|
188
|
+
if (this.props.showFullScreen) {
|
189
|
+
if (screenfull && onScreenFullChange) {
|
190
|
+
screenfull.on('change', function () {
|
191
|
+
if (screenfull) {
|
192
|
+
onScreenFullChange(screenfull.isFullscreen);
|
193
|
+
}
|
194
|
+
});
|
195
|
+
}
|
196
|
+
}
|
155
197
|
if (this.props.canDrag) {
|
156
198
|
document.addEventListener('mousemove', this.throttleMouseMove);
|
157
199
|
document.addEventListener('mouseup', this.onMouseUp);
|
158
200
|
}
|
159
|
-
document.body.addEventListener('click', this.onMouseClick);
|
160
201
|
};
|
161
202
|
Drawer.prototype.UNSAFE_componentWillUpdate = function (nextProps) {
|
162
203
|
if (nextProps.canDrag && !this.props.canDrag) {
|
@@ -174,10 +215,7 @@ var Drawer = /** @class */ (function (_super) {
|
|
174
215
|
var _b = this.props, width = _b.width, className = _b.className, children = _b.children, canDrag = _b.canDrag, visible = _b.visible, closable = _b.closable, extra = _b.extra, size = _b.size, onClose = _b.onClose, other = __rest(_b, ["width", "className", "children", "canDrag", "visible", "closable", "extra", "size", "onClose"]);
|
175
216
|
return (React.createElement(BaseDrawer, __assign({ className: classnames(this.drawerId, SDK_PREFIX + "-drawer", className, (_a = {},
|
176
217
|
_a[SDK_PREFIX + "-drawer-no-mask"] = this.props.mask === false,
|
177
|
-
_a
|
178
|
-
_a[SDK_PREFIX + "-drawer-size-default"] = size === 'default',
|
179
|
-
_a[SDK_PREFIX + "-drawer-size-large"] = size === 'large',
|
180
|
-
_a)), width: this.realWidth || 800, zIndex: 1200, visible: visible, closable: this.closable, extra: this.extra, closeIcon: React.createElement(CloseIcon, { className: SDK_PREFIX + "-drawer-close-icon", onClick: onClose }), onClose: onClose }, other),
|
218
|
+
_a)), width: this.realWidth || 800, zIndex: 1200, visible: visible, closable: this.closable, extra: this.extra, closeIcon: React.createElement(CloseIcon, { className: SDK_PREFIX + "-drawer-close-icon", onClick: this.handleClose }), onClose: this.handleClose }, other),
|
181
219
|
canDrag && (React.createElement("div", { className: SDK_PREFIX + "-scroll-handler", onMouseDown: this.onMouseDown })),
|
182
220
|
children));
|
183
221
|
};
|
@@ -189,6 +227,10 @@ var Drawer = /** @class */ (function (_super) {
|
|
189
227
|
observable,
|
190
228
|
__metadata("design:type", Object)
|
191
229
|
], Drawer.prototype, "realWidth", void 0);
|
230
|
+
__decorate([
|
231
|
+
observable,
|
232
|
+
__metadata("design:type", Boolean)
|
233
|
+
], Drawer.prototype, "isFullscreen", void 0);
|
192
234
|
__decorate([
|
193
235
|
computed,
|
194
236
|
__metadata("design:type", Object),
|
@@ -213,6 +255,19 @@ var Drawer = /** @class */ (function (_super) {
|
|
213
255
|
__metadata("design:paramtypes", [Object]),
|
214
256
|
__metadata("design:returntype", void 0)
|
215
257
|
], Drawer.prototype, "setRealWidth", null);
|
258
|
+
__decorate([
|
259
|
+
bind,
|
260
|
+
action,
|
261
|
+
__metadata("design:type", Function),
|
262
|
+
__metadata("design:paramtypes", [Boolean]),
|
263
|
+
__metadata("design:returntype", void 0)
|
264
|
+
], Drawer.prototype, "setIsFullscreen", null);
|
265
|
+
__decorate([
|
266
|
+
bind,
|
267
|
+
__metadata("design:type", Function),
|
268
|
+
__metadata("design:paramtypes", []),
|
269
|
+
__metadata("design:returntype", void 0)
|
270
|
+
], Drawer.prototype, "handleFull", null);
|
216
271
|
__decorate([
|
217
272
|
bind,
|
218
273
|
__metadata("design:type", Function),
|
@@ -243,6 +298,12 @@ var Drawer = /** @class */ (function (_super) {
|
|
243
298
|
__metadata("design:paramtypes", [Object, String]),
|
244
299
|
__metadata("design:returntype", void 0)
|
245
300
|
], Drawer.prototype, "initWidth", null);
|
301
|
+
__decorate([
|
302
|
+
bind,
|
303
|
+
__metadata("design:type", Function),
|
304
|
+
__metadata("design:paramtypes", [Object]),
|
305
|
+
__metadata("design:returntype", void 0)
|
306
|
+
], Drawer.prototype, "handleClose", null);
|
246
307
|
Drawer = __decorate([
|
247
308
|
observer
|
248
309
|
], Drawer);
|
@@ -263,6 +263,9 @@
|
|
263
263
|
height: 60px;
|
264
264
|
line-height: 60px;
|
265
265
|
}
|
266
|
+
.pandora-sdk-drawer .ant-drawer-header-title {
|
267
|
+
overflow: hidden;
|
268
|
+
}
|
266
269
|
.pandora-sdk-drawer-size-small {
|
267
270
|
max-width: 38%;
|
268
271
|
}
|
@@ -288,3 +291,11 @@
|
|
288
291
|
.pandora-sdk-drawer-close-icon {
|
289
292
|
margin-left: 24px;
|
290
293
|
}
|
294
|
+
.pandora-sdk-drawer-header-full-icon {
|
295
|
+
margin-left: 24px;
|
296
|
+
color: #333;
|
297
|
+
font-size: 14px;
|
298
|
+
}
|
299
|
+
.pandora-sdk-drawer-no-mask {
|
300
|
+
background-color: #ffffff;
|
301
|
+
}
|
@@ -14,6 +14,9 @@
|
|
14
14
|
height: 60px;
|
15
15
|
line-height: 60px;
|
16
16
|
}
|
17
|
+
.@{ant-prefix}-drawer-header-title {
|
18
|
+
overflow: hidden;
|
19
|
+
}
|
17
20
|
}
|
18
21
|
|
19
22
|
.@{sdk-prefix}-drawer-size-small {
|
@@ -46,3 +49,13 @@
|
|
46
49
|
.@{sdk-prefix}-drawer-close-icon {
|
47
50
|
margin-left: 24px;
|
48
51
|
}
|
52
|
+
|
53
|
+
.@{sdk-prefix}-drawer-header-full-icon {
|
54
|
+
margin-left: 24px;
|
55
|
+
color: @font-color-7;
|
56
|
+
font-size: 14px;
|
57
|
+
}
|
58
|
+
|
59
|
+
.@{sdk-prefix}-drawer-no-mask {
|
60
|
+
background-color: @normal-color;
|
61
|
+
}
|
@@ -377,12 +377,19 @@ span.ant-radio + * {
|
|
377
377
|
.ant-radio-button-wrapper.ant-radio-button-wrapper-rtl.ant-radio-button-wrapper-disabled:first-child {
|
378
378
|
border-right-color: #e5e5e5;
|
379
379
|
}
|
380
|
+
.pandora-sdk-solid-radio-group .ant-radio-button-wrapper:not(.pandora-sdk-solid-radio-group .ant-radio-button-wrapper-checked)::before {
|
381
|
+
background-color: #bfbfbf;
|
382
|
+
}
|
380
383
|
.pandora-sdk-solid-radio-group .ant-radio-button-wrapper {
|
381
384
|
padding: 0 12px;
|
382
385
|
}
|
383
386
|
.pandora-sdk-solid-radio-group .ant-radio-button-wrapper:not(.pandora-sdk-solid-radio-group .ant-radio-button-wrapper-checked) {
|
384
387
|
border-color: #bfbfbf;
|
385
388
|
}
|
389
|
+
.pandora-sdk-solid-radio-group .ant-radio-button-wrapper:focus-within {
|
390
|
+
-webkit-box-shadow: unset;
|
391
|
+
box-shadow: unset;
|
392
|
+
}
|
386
393
|
.pandora-sdk-solid-radio-group .ant-radio:not(.pandora-sdk-solid-radio-group .ant-radio-checked) .ant-radio-inner {
|
387
394
|
border-color: #bfbfbf;
|
388
395
|
}
|
@@ -2,11 +2,20 @@
|
|
2
2
|
@import '../../style/theme.less';
|
3
3
|
|
4
4
|
.@{sdk-prefix}-solid-radio-group {
|
5
|
+
.@{ant-prefix}-radio-button-wrapper:not(.@{sdk-prefix}-solid-radio-group
|
6
|
+
.@{ant-prefix}-radio-button-wrapper-checked) {
|
7
|
+
&::before {
|
8
|
+
background-color: @border-color-2;
|
9
|
+
}
|
10
|
+
}
|
5
11
|
.@{ant-prefix}-radio-button-wrapper {
|
6
12
|
padding: 0 12px;
|
7
13
|
&:not(&-checked) {
|
8
14
|
border-color: @input-border-color;
|
9
15
|
}
|
16
|
+
&:focus-within {
|
17
|
+
box-shadow: unset;
|
18
|
+
}
|
10
19
|
}
|
11
20
|
|
12
21
|
.@{ant-prefix}-radio {
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
export declare const All = "_all";
|
3
|
+
export interface IOption {
|
4
|
+
label: string | React.ReactNode;
|
5
|
+
value: string;
|
6
|
+
}
|
7
|
+
export interface ISettingBtnProps {
|
8
|
+
overlayClass?: string;
|
9
|
+
onHiddenKeysChange?: (value: string[]) => void;
|
10
|
+
hiddenKeys?: string[];
|
11
|
+
options?: IOption[];
|
12
|
+
loading?: boolean;
|
13
|
+
}
|
14
|
+
export declare function ColumnSetting(props: ISettingBtnProps): JSX.Element;
|
15
|
+
declare const _default: React.MemoExoticComponent<typeof ColumnSetting>;
|
16
|
+
export default _default;
|
@@ -0,0 +1,91 @@
|
|
1
|
+
var __read = (this && this.__read) || function (o, n) {
|
2
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
3
|
+
if (!m) return o;
|
4
|
+
var i = m.call(o), r, ar = [], e;
|
5
|
+
try {
|
6
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
7
|
+
}
|
8
|
+
catch (error) { e = { error: error }; }
|
9
|
+
finally {
|
10
|
+
try {
|
11
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
12
|
+
}
|
13
|
+
finally { if (e) throw e.error; }
|
14
|
+
}
|
15
|
+
return ar;
|
16
|
+
};
|
17
|
+
var __spread = (this && this.__spread) || function () {
|
18
|
+
for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
|
19
|
+
return ar;
|
20
|
+
};
|
21
|
+
import React, { useMemo, useCallback, useState, useContext } from 'react';
|
22
|
+
import classnames from 'classnames';
|
23
|
+
import { includes } from 'lodash';
|
24
|
+
import { Popover, Checkbox, Spin } from 'antd';
|
25
|
+
import { SettingOutlined } from '@ant-design/icons';
|
26
|
+
import { ConfigContext } from 'antd/es/config-provider';
|
27
|
+
import { formatString } from '../../../utils/language';
|
28
|
+
import { TableLocale } from '../../../constants/language/table/type';
|
29
|
+
import { SDK_PREFIX } from '../../../constants/style';
|
30
|
+
import NameLimiter from '../../NameLimiter';
|
31
|
+
import Input from '../../Input';
|
32
|
+
export var All = '_all';
|
33
|
+
export function ColumnSetting(props) {
|
34
|
+
var overlayClass = props.overlayClass, _a = props.hiddenKeys, hiddenKeys = _a === void 0 ? [] : _a, onHiddenKeysChange = props.onHiddenKeysChange, _b = props.options, options = _b === void 0 ? [] : _b, loading = props.loading;
|
35
|
+
var locale = useContext(ConfigContext).locale;
|
36
|
+
var _c = __read(useState(''), 2), prefix = _c[0], setPrefix = _c[1];
|
37
|
+
var allKeys = useMemo(function () {
|
38
|
+
return options.map(function (item) { return item.value; });
|
39
|
+
}, [options]);
|
40
|
+
var realOptions = useMemo(function () {
|
41
|
+
if (!prefix || prefix.length === 0)
|
42
|
+
return options;
|
43
|
+
return options.filter(function (item) {
|
44
|
+
if (typeof item.label === 'string' &&
|
45
|
+
item.label.toLowerCase().indexOf(prefix.toLowerCase()) !== -1) {
|
46
|
+
return true;
|
47
|
+
}
|
48
|
+
return false;
|
49
|
+
});
|
50
|
+
}, [prefix, options]);
|
51
|
+
var realValues = useMemo(function () {
|
52
|
+
return allKeys.filter(function (item) { return !includes(hiddenKeys, item); });
|
53
|
+
}, [hiddenKeys, allKeys]);
|
54
|
+
var allCheckChange = useCallback(function (e) {
|
55
|
+
if (e.target.checked) {
|
56
|
+
onHiddenKeysChange === null || onHiddenKeysChange === void 0 ? void 0 : onHiddenKeysChange([]);
|
57
|
+
return;
|
58
|
+
}
|
59
|
+
onHiddenKeysChange === null || onHiddenKeysChange === void 0 ? void 0 : onHiddenKeysChange(allKeys);
|
60
|
+
}, [onHiddenKeysChange, allKeys]);
|
61
|
+
var handlePrefixChange = useCallback(function (value) {
|
62
|
+
setPrefix(value || '');
|
63
|
+
}, [setPrefix]);
|
64
|
+
var handleChange = useCallback(function (e) {
|
65
|
+
var v = e.target.value;
|
66
|
+
var checked = e.target.checked;
|
67
|
+
// 添加
|
68
|
+
if (checked) {
|
69
|
+
var checkedValues_1 = Array.from(new Set(__spread(realValues, [v])));
|
70
|
+
onHiddenKeysChange === null || onHiddenKeysChange === void 0 ? void 0 : onHiddenKeysChange(allKeys.filter(function (item) { return !includes(checkedValues_1, item); }));
|
71
|
+
return;
|
72
|
+
}
|
73
|
+
// 删除
|
74
|
+
var restValues = realValues.filter(function (item) { return item !== v; });
|
75
|
+
onHiddenKeysChange === null || onHiddenKeysChange === void 0 ? void 0 : onHiddenKeysChange(allKeys.filter(function (item) { return !includes(restValues, item); }));
|
76
|
+
}, [onHiddenKeysChange, realValues, allKeys]);
|
77
|
+
return (React.createElement(Popover, { trigger: "click", placement: "bottomRight", content: React.createElement(Spin, { spinning: !!loading },
|
78
|
+
React.createElement("div", { className: classnames(SDK_PREFIX + "-table-column-setting-popover", overlayClass) },
|
79
|
+
React.createElement("div", { className: SDK_PREFIX + "-table-column-setting-header" },
|
80
|
+
React.createElement(Checkbox, { value: All, checked: hiddenKeys.length === 0, onChange: allCheckChange, className: SDK_PREFIX + "-table-column-setting-all-check" }, formatString(TableLocale.check_all, locale)),
|
81
|
+
React.createElement(Input, { value: prefix, allowClear: true, onChange: handlePrefixChange, placeholder: formatString(TableLocale.search, locale), className: SDK_PREFIX + "-table-column-setting-search-input" })),
|
82
|
+
React.createElement("div", null,
|
83
|
+
React.createElement("div", { className: SDK_PREFIX + "-table-column-setting-content" }, realOptions.map(function (item) {
|
84
|
+
return (React.createElement("div", { key: item.value },
|
85
|
+
React.createElement("div", { className: SDK_PREFIX + "-table-column-setting-checkbox-container" },
|
86
|
+
React.createElement(Checkbox, { checked: !!realValues.find(function (v) { return v === item.value; }), value: item.value, className: SDK_PREFIX + "-table-column-setting-checkbox", onChange: handleChange },
|
87
|
+
React.createElement("span", { className: SDK_PREFIX + "-table-column-setting-value" }, typeof item.label === 'string' ? (React.createElement(NameLimiter, { name: item.label })) : (item.label))))));
|
88
|
+
}))))) },
|
89
|
+
React.createElement(SettingOutlined, { className: SDK_PREFIX + "-table-column-setting-icon" })));
|
90
|
+
}
|
91
|
+
export default React.memo(ColumnSetting);
|
@@ -0,0 +1,47 @@
|
|
1
|
+
.pandora-sdk-table-column-setting-popover {
|
2
|
+
padding: 10px;
|
3
|
+
width: 100%;
|
4
|
+
width: 600px;
|
5
|
+
max-height: 300px;
|
6
|
+
overflow-y: auto;
|
7
|
+
}
|
8
|
+
.pandora-sdk-table-column-setting-popover .pandora-sdk-table-column-setting-header {
|
9
|
+
border-bottom: 1px solid #e5e5e5;
|
10
|
+
display: -webkit-box;
|
11
|
+
display: -ms-flexbox;
|
12
|
+
display: flex;
|
13
|
+
padding-bottom: 10px;
|
14
|
+
}
|
15
|
+
.pandora-sdk-table-column-setting-popover .pandora-sdk-table-column-setting-header .pandora-sdk-table-column-setting-all-check {
|
16
|
+
line-height: 32px;
|
17
|
+
}
|
18
|
+
.pandora-sdk-table-column-setting-popover .pandora-sdk-table-column-setting-header .pandora-sdk-table-column-setting-search-input {
|
19
|
+
width: 200px;
|
20
|
+
}
|
21
|
+
.pandora-sdk-table-column-setting-icon {
|
22
|
+
color: #333;
|
23
|
+
}
|
24
|
+
.pandora-sdk-table-column-setting-content {
|
25
|
+
display: -webkit-box;
|
26
|
+
display: -ms-flexbox;
|
27
|
+
display: flex;
|
28
|
+
-ms-flex-wrap: wrap;
|
29
|
+
flex-wrap: wrap;
|
30
|
+
}
|
31
|
+
.pandora-sdk-table-column-setting-content > div {
|
32
|
+
-webkit-box-flex: 0;
|
33
|
+
-ms-flex: 0 0 33.33%;
|
34
|
+
flex: 0 0 33.33%;
|
35
|
+
-webkit-box-sizing: border-box;
|
36
|
+
box-sizing: border-box;
|
37
|
+
position: relative;
|
38
|
+
overflow: hidden;
|
39
|
+
text-overflow: ellipsis;
|
40
|
+
}
|
41
|
+
.pandora-sdk-table-column-setting-content > div .pandora-sdk-table-column-setting-checkbox-container .pandora-sdk-table-column-setting-checkbox {
|
42
|
+
width: 100%;
|
43
|
+
overflow: hidden;
|
44
|
+
}
|
45
|
+
.pandora-sdk-table-column-setting-content > div .pandora-sdk-table-column-setting-checkbox-container .pandora-sdk-table-column-setting-checkbox > span:nth-child(2) {
|
46
|
+
overflow: hidden;
|
47
|
+
}
|
@@ -0,0 +1,46 @@
|
|
1
|
+
@import '../../../style/theme.less';
|
2
|
+
|
3
|
+
.@{sdk-prefix}-table-column-setting-popover {
|
4
|
+
padding: 10px;
|
5
|
+
width: 100%;
|
6
|
+
width: 600px;
|
7
|
+
.@{sdk-prefix}-table-column-setting-header {
|
8
|
+
border-bottom: 1px solid @border-color-base;
|
9
|
+
display: flex;
|
10
|
+
padding-bottom: 10px;
|
11
|
+
.@{sdk-prefix}-table-column-setting-all-check {
|
12
|
+
line-height: 32px;
|
13
|
+
}
|
14
|
+
.@{sdk-prefix}-table-column-setting-search-input {
|
15
|
+
width: 200px;
|
16
|
+
}
|
17
|
+
}
|
18
|
+
max-height: 300px;
|
19
|
+
overflow-y: auto;
|
20
|
+
}
|
21
|
+
|
22
|
+
.@{sdk-prefix}-table-column-setting-icon {
|
23
|
+
color: @font-color-7;
|
24
|
+
}
|
25
|
+
|
26
|
+
.@{sdk-prefix}-table-column-setting-content {
|
27
|
+
display: flex;
|
28
|
+
flex-wrap: wrap;
|
29
|
+
}
|
30
|
+
|
31
|
+
.@{sdk-prefix}-table-column-setting-content > div {
|
32
|
+
flex: 0 0 33.33%;
|
33
|
+
box-sizing: border-box;
|
34
|
+
position: relative;
|
35
|
+
overflow: hidden;
|
36
|
+
text-overflow: ellipsis;
|
37
|
+
.@{sdk-prefix}-table-column-setting-checkbox-container {
|
38
|
+
.@{sdk-prefix}-table-column-setting-checkbox {
|
39
|
+
width: 100%;
|
40
|
+
overflow: hidden;
|
41
|
+
}
|
42
|
+
.@{sdk-prefix}-table-column-setting-checkbox > span:nth-child(2) {
|
43
|
+
overflow: hidden;
|
44
|
+
}
|
45
|
+
}
|
46
|
+
}
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import { TableProps } from 'antd/es/table';
|
2
|
+
import { TableProps, ColumnType, ColumnGroupType } from 'antd/es/table';
|
3
3
|
import { TableRowSelection } from 'antd/es/table/interface';
|
4
|
+
import { IOption } from './ColumnSetting';
|
4
5
|
/**
|
5
6
|
* 表格提供自定义多选, 通过 rowSelection对象的selectedRowKeys和onChange来控制多选的状态
|
6
7
|
* 需要注意的是, 当在外部进行增删改或者外部需要控制选择状态时, 例如删除之后清空全选状态, 需要受控
|
@@ -20,7 +21,17 @@ export interface IOptionItem {
|
|
20
21
|
*/
|
21
22
|
disabled?: boolean | ((selectItems: any[]) => boolean);
|
22
23
|
}
|
23
|
-
export interface
|
24
|
+
export interface IColumnType<T> extends ColumnType<T> {
|
25
|
+
colTitle?: string | React.ReactNode;
|
26
|
+
configurable?: boolean;
|
27
|
+
}
|
28
|
+
export interface IColumnGroupType<T> extends ColumnGroupType<T> {
|
29
|
+
colTitle?: string | React.ReactNode;
|
30
|
+
configurable?: boolean;
|
31
|
+
}
|
32
|
+
export declare type IColumnsType<T> = Array<IColumnGroupType<T> | IColumnType<T>>;
|
33
|
+
export interface ITableProps<T> extends Omit<TableProps<T>, 'columns'> {
|
34
|
+
columns?: IColumnsType<T>;
|
24
35
|
/**
|
25
36
|
* 设置selectedRow选项, 可以获取当前选中的所有
|
26
37
|
* 数据.
|
@@ -30,6 +41,10 @@ export interface ITableProps<T> extends TableProps<T> {
|
|
30
41
|
/** 如果支持多选,则batchOptions为多选时的一些批量操作,如删除、添加等 */
|
31
42
|
batchOptions?: IOptionItem[];
|
32
43
|
emptyText?: React.ReactNode;
|
44
|
+
showColumnSetting?: boolean;
|
45
|
+
hiddenColumns?: string[];
|
46
|
+
onHiddenColumnsChange?: (keys: string[]) => void;
|
47
|
+
columnSettingOverlayClass?: string;
|
33
48
|
}
|
34
49
|
/**
|
35
50
|
* pandora2.0风格的表格
|
@@ -44,15 +59,25 @@ declare class Table<T = any> extends React.Component<ITableProps<T>, any> {
|
|
44
59
|
static contextType: React.Context<import("antd/es/config-provider").ConfigConsumerProps>;
|
45
60
|
indeterminate: boolean;
|
46
61
|
checkAll: boolean;
|
62
|
+
hiddenColumn: string[] | undefined;
|
47
63
|
UNSAFE_componentWillReceiveProps(nextProps: ITableProps<T>): void;
|
48
64
|
get selectedRowKeys(): React.ReactText[];
|
49
65
|
get rowSelection(): TableRowSelection<T> | undefined;
|
50
66
|
get undisabledData(): readonly T[];
|
51
67
|
get keysOfCurrentPage(): any[];
|
52
68
|
get emptyTextComp(): {};
|
69
|
+
get columnsSettingOptions(): IOption[];
|
70
|
+
get columnKeys(): {
|
71
|
+
allKeys: string[];
|
72
|
+
unconfigableKeys: string[];
|
73
|
+
resetKeys: string[];
|
74
|
+
};
|
75
|
+
handleHideColumnsChange(keys: string[]): Promise<void> | undefined;
|
76
|
+
getColumns(): IColumnsType<T> | undefined;
|
53
77
|
getRowKey(row: any, index: number): any;
|
54
78
|
setIndeterminate(indeterminate: boolean): void;
|
55
79
|
setCheckAll(checkAll: boolean): void;
|
80
|
+
setHiddenColumn(hiddenColumn?: string[]): void;
|
56
81
|
setCheckboxStatus(selectedRowsOfCurrentPage?: T[], dataSource?: T[]): void;
|
57
82
|
handleSelectionChange(selectedRowKeys: React.Key[], selectedRowsOfCurrentPage: any[]): void;
|
58
83
|
onRowSelectionChange(selectedRowKeys: React.Key[], selectedRowsOfCurrentPage: any[]): void;
|