@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.
Files changed (59) hide show
  1. package/CHANGELOG.json +25 -8
  2. package/CHANGELOG.md +12 -5
  3. package/es/components/DateTimePicker/Base/index.d.ts +6 -1
  4. package/es/components/DateTimePicker/Base/index.js +44 -17
  5. package/es/components/DateTimePicker/Base/relativeTimePicker.js +10 -7
  6. package/es/components/DateTimePicker/constants.d.ts +57 -1
  7. package/es/components/DateTimePicker/constants.js +3 -5
  8. package/es/components/DateTimePicker/time.js +2 -2
  9. package/es/components/DateTimePicker/transform.d.ts +5 -1
  10. package/es/components/DateTimePicker/transform.js +3 -2
  11. package/es/components/Drawer/index.d.ts +21 -1
  12. package/es/components/Drawer/index.js +74 -13
  13. package/es/components/Drawer/style.css +11 -0
  14. package/es/components/Drawer/style.less +13 -0
  15. package/es/components/RadioGroup/style.css +7 -0
  16. package/es/components/RadioGroup/style.less +9 -0
  17. package/es/components/Table/ColumnSetting/index.d.ts +16 -0
  18. package/es/components/Table/ColumnSetting/index.js +91 -0
  19. package/es/components/Table/ColumnSetting/style.css +47 -0
  20. package/es/components/Table/ColumnSetting/style.less +46 -0
  21. package/es/components/Table/index.d.ts +27 -2
  22. package/es/components/Table/index.js +127 -3
  23. package/es/components/Table/style.css +4 -0
  24. package/es/components/Table/style.less +7 -0
  25. package/es/constants/language/table/en.js +4 -1
  26. package/es/constants/language/table/type.d.ts +3 -0
  27. package/es/constants/language/table/zh.js +4 -1
  28. package/es/index.css +2758 -2689
  29. package/es/index.less +5 -4
  30. package/es/style/theme.less +5 -0
  31. package/lib/components/DateTimePicker/Base/index.d.ts +6 -1
  32. package/lib/components/DateTimePicker/Base/index.js +43 -16
  33. package/lib/components/DateTimePicker/Base/relativeTimePicker.js +8 -5
  34. package/lib/components/DateTimePicker/constants.d.ts +57 -1
  35. package/lib/components/DateTimePicker/constants.js +3 -5
  36. package/lib/components/DateTimePicker/time.js +1 -1
  37. package/lib/components/DateTimePicker/transform.d.ts +5 -1
  38. package/lib/components/DateTimePicker/transform.js +3 -2
  39. package/lib/components/Drawer/index.d.ts +21 -1
  40. package/lib/components/Drawer/index.js +74 -13
  41. package/lib/components/Drawer/style.css +11 -0
  42. package/lib/components/Drawer/style.less +13 -0
  43. package/lib/components/RadioGroup/style.css +7 -0
  44. package/lib/components/RadioGroup/style.less +9 -0
  45. package/lib/components/Table/ColumnSetting/index.d.ts +16 -0
  46. package/lib/components/Table/ColumnSetting/index.js +104 -0
  47. package/lib/components/Table/ColumnSetting/style.css +47 -0
  48. package/lib/components/Table/ColumnSetting/style.less +46 -0
  49. package/lib/components/Table/index.d.ts +27 -2
  50. package/lib/components/Table/index.js +126 -2
  51. package/lib/components/Table/style.css +4 -0
  52. package/lib/components/Table/style.less +7 -0
  53. package/lib/constants/language/table/en.js +4 -1
  54. package/lib/constants/language/table/type.d.ts +3 -0
  55. package/lib/constants/language/table/zh.js +4 -1
  56. package/lib/index.css +2295 -2226
  57. package/lib/index.less +3 -2
  58. package/lib/style/theme.less +5 -0
  59. 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 = 640;
57
- var SMALL_WIDTH = 480;
58
- var LARGE_WIDTH = 960;
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, onClose = _a.onClose;
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
- React.createElement(CloseIcon, { className: SDK_PREFIX + "-drawer-close-icon", onClick: onClose })));
93
+ fullIcon,
94
+ React.createElement(CloseIcon, { className: SDK_PREFIX + "-drawer-close-icon", onClick: this.handleClose })));
90
95
  }
91
- return this.props.extra;
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 = this.props, mask = _a.mask, maskClosable = _a.maskClosable, nonCloseSelector = _a.nonCloseSelector, onClose = _a.onClose, visible = _a.visible;
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
- onClose === null || onClose === void 0 ? void 0 : onClose(null);
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[SDK_PREFIX + "-drawer-size-small"] = size === 'small',
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 ITableProps<T> extends TableProps<T> {
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;