@qn-pandora/pandora-component 2.2.0 → 3.0.1
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 +45 -0
- package/CHANGELOG.md +19 -0
- package/es/components/AutoComplete/style.css +7 -7
- package/es/components/Button/style.css +0 -1
- package/es/components/Button/style.less +0 -1
- package/es/components/Card/index.js +2 -1
- package/es/components/CheckTransformList/Item/index.js +1 -1
- package/es/components/CheckTransformList/style.css +16 -8
- package/es/components/CheckboxList/index.d.ts +1 -0
- package/es/components/CheckboxList/index.js +3 -2
- package/es/components/Collapse/index.js +2 -1
- package/es/components/CollapsiblePanel/index.d.ts +2 -2
- package/es/components/ConfigProvider/index.js +2 -1
- package/es/components/DateTimePicker/Base/index.js +2 -2
- package/es/components/DateTimePicker/Base/style.css +4 -4
- package/es/components/DateTimePicker/BaseMobile/index.d.ts +1 -0
- package/es/components/DateTimePicker/BaseMobile/index.js +2 -2
- package/es/components/DateTimePicker/DisplayInput/style.css +7 -7
- package/es/components/DateTimePicker/index.d.ts +6 -1
- package/es/components/DateTimePicker/index.js +2 -2
- package/es/components/Input/index.js +2 -1
- package/es/components/Input/style.css +7 -7
- package/es/components/InputNumber/style.css +2 -2
- package/es/components/Menu/index.d.ts +2 -2
- package/es/components/NameLimiter/index.d.ts +3 -13
- package/es/components/NameLimiter/index.js +30 -39
- package/es/components/NameLimiter/style.css +9 -1
- package/es/components/NameLimiter/style.less +10 -1
- package/es/components/OptionList/index.js +2 -1
- package/es/components/RangeInput/style.css +9 -9
- package/es/components/RemarkName/index.d.ts +0 -2
- package/es/components/RemarkName/index.js +2 -4
- package/es/components/RemarkName/style.css +9 -5
- package/es/components/RemarkName/style.less +0 -5
- package/es/components/Selector/style.css +7 -7
- package/es/components/SolidRadioGroup/index.js +7 -4
- package/es/components/SolidRadioGroup/style.css +6 -2
- package/es/components/SolidRadioGroup/style.less +5 -0
- package/es/components/Steps/index.js +2 -1
- package/es/components/Table/index.d.ts +9 -24
- package/es/components/Table/index.js +40 -8
- package/es/components/Table/style.css +5 -5
- package/es/components/TagList/Tag/style.css +3 -3
- package/es/components/TagList/Tag/style.less +3 -3
- package/es/components/TagList/index.js +3 -2
- package/es/components/TagList/style.css +3 -3
- package/es/components/TagList/style.less +8 -8
- package/es/index.css +2252 -2245
- package/es/index.d.ts +1 -1
- package/es/index.js +1 -1
- package/es/index.less +6 -6
- package/es/style/theme.less +8 -6
- package/lib/components/AutoComplete/style.css +7 -7
- package/lib/components/Button/style.css +0 -1
- package/lib/components/Button/style.less +0 -1
- package/lib/components/Card/index.js +1 -1
- package/lib/components/CheckTransformList/Item/index.js +1 -1
- package/lib/components/CheckTransformList/style.css +16 -8
- package/lib/components/CheckboxList/index.d.ts +1 -0
- package/lib/components/CheckboxList/index.js +3 -2
- package/lib/components/Collapse/index.js +1 -1
- package/lib/components/CollapsiblePanel/index.d.ts +2 -2
- package/lib/components/ConfigProvider/index.js +1 -1
- package/lib/components/DateTimePicker/Base/index.js +2 -2
- package/lib/components/DateTimePicker/Base/style.css +4 -4
- package/lib/components/DateTimePicker/BaseMobile/index.d.ts +1 -0
- package/lib/components/DateTimePicker/BaseMobile/index.js +2 -2
- package/lib/components/DateTimePicker/DisplayInput/style.css +7 -7
- package/lib/components/DateTimePicker/index.d.ts +6 -1
- package/lib/components/DateTimePicker/index.js +2 -2
- package/lib/components/Input/index.js +1 -1
- package/lib/components/Input/style.css +7 -7
- package/lib/components/InputNumber/style.css +2 -2
- package/lib/components/Menu/index.d.ts +2 -2
- package/lib/components/NameLimiter/index.d.ts +3 -13
- package/lib/components/NameLimiter/index.js +30 -38
- package/lib/components/NameLimiter/style.css +9 -1
- package/lib/components/NameLimiter/style.less +10 -1
- package/lib/components/OptionList/index.js +1 -1
- package/lib/components/RangeInput/style.css +9 -9
- package/lib/components/RemarkName/index.d.ts +0 -2
- package/lib/components/RemarkName/index.js +2 -4
- package/lib/components/RemarkName/style.css +9 -5
- package/lib/components/RemarkName/style.less +0 -5
- package/lib/components/Selector/style.css +7 -7
- package/lib/components/SolidRadioGroup/index.js +6 -3
- package/lib/components/SolidRadioGroup/style.css +6 -2
- package/lib/components/SolidRadioGroup/style.less +5 -0
- package/lib/components/Steps/index.js +1 -1
- package/lib/components/Table/index.d.ts +9 -24
- package/lib/components/Table/index.js +39 -7
- package/lib/components/Table/style.css +5 -5
- package/lib/components/TagList/Tag/style.css +3 -3
- package/lib/components/TagList/Tag/style.less +3 -3
- package/lib/components/TagList/index.js +2 -2
- package/lib/components/TagList/style.css +3 -3
- package/lib/components/TagList/style.less +8 -8
- package/lib/index.css +19 -12
- package/lib/index.d.ts +1 -1
- package/lib/index.js +0 -1
- package/lib/style/theme.less +8 -6
- package/package.json +23 -23
- package/es/components/NameLimiter/transformer.d.ts +0 -6
- package/es/components/NameLimiter/transformer.js +0 -84
- package/lib/components/NameLimiter/transformer.d.ts +0 -6
- package/lib/components/NameLimiter/transformer.js +0 -91
@@ -1,42 +1,33 @@
|
|
1
|
-
var
|
2
|
-
var
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
}
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
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
|
+
import React, { useLayoutEffect, useRef, useState } from 'react';
|
15
18
|
import { Tooltip } from 'antd';
|
16
19
|
import { SDK_PREFIX } from '../../constants/style';
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
function NameLimiter() {
|
26
|
-
return _super !== null && _super.apply(this, arguments) || this;
|
27
|
-
}
|
28
|
-
NameLimiter.prototype.render = function () {
|
29
|
-
var _a = this.props, name = _a.name, length = _a.length, title = _a.title, type = _a.type;
|
30
|
-
var displayName = name;
|
31
|
-
var needFormat = getBytes(displayName) > length;
|
32
|
-
var nameSpan = (React.createElement("span", null, needFormat
|
33
|
-
? getTransformerString(displayName, length, type)
|
34
|
-
: displayName));
|
35
|
-
if (title || needFormat) {
|
36
|
-
return (React.createElement(Tooltip, { overlayClassName: SDK_PREFIX + "-name-tooltip", placement: "top", title: title || displayName }, nameSpan));
|
20
|
+
export default function NameLimiter(_a) {
|
21
|
+
var name = _a.name, title = _a.title;
|
22
|
+
var _b = __read(useState(false), 2), ellipsis = _b[0], setEllipsis = _b[1];
|
23
|
+
var _c = __read(useState(false), 2), visible = _c[0], setVisible = _c[1];
|
24
|
+
var ref = useRef(null);
|
25
|
+
useLayoutEffect(function () {
|
26
|
+
if (!ref.current) {
|
27
|
+
return;
|
37
28
|
}
|
38
|
-
|
39
|
-
};
|
40
|
-
return
|
41
|
-
|
42
|
-
|
29
|
+
setEllipsis(ref.current.clientWidth < ref.current.scrollWidth);
|
30
|
+
});
|
31
|
+
return (React.createElement(Tooltip, { overlayClassName: SDK_PREFIX + "-name-limit-tooltip", placement: "top", title: title || name, visible: (!!title || ellipsis) && visible, onVisibleChange: setVisible },
|
32
|
+
React.createElement("span", { className: SDK_PREFIX + "-name-limit", ref: ref }, name)));
|
33
|
+
}
|
@@ -268,7 +268,15 @@
|
|
268
268
|
.ant-btn-sm {
|
269
269
|
padding: 0 7px;
|
270
270
|
}
|
271
|
-
.pandora-sdk-name-
|
271
|
+
.pandora-sdk-name-limit {
|
272
|
+
max-width: 100%;
|
273
|
+
display: inline-block;
|
274
|
+
vertical-align: top;
|
275
|
+
white-space: nowrap;
|
276
|
+
text-overflow: ellipsis;
|
277
|
+
overflow: hidden;
|
278
|
+
}
|
279
|
+
.pandora-sdk-name-limit-tooltip .ant-tooltip-inner {
|
272
280
|
max-width: 400px !important;
|
273
281
|
max-height: 200px !important;
|
274
282
|
overflow: auto;
|
@@ -1,7 +1,16 @@
|
|
1
1
|
@import 'antd/lib/tooltip/style/index.less';
|
2
2
|
@import '../../style/theme.less';
|
3
3
|
|
4
|
-
.@{sdk-prefix}-name-
|
4
|
+
.@{sdk-prefix}-name-limit {
|
5
|
+
max-width: 100%;
|
6
|
+
display: inline-block;
|
7
|
+
vertical-align: top;
|
8
|
+
white-space: nowrap;
|
9
|
+
text-overflow: ellipsis;
|
10
|
+
overflow: hidden;
|
11
|
+
}
|
12
|
+
|
13
|
+
.@{sdk-prefix}-name-limit-tooltip {
|
5
14
|
.@{ant-prefix}-tooltip-inner {
|
6
15
|
max-width: 400px !important;
|
7
16
|
max-height: 200px !important;
|
@@ -28,7 +28,7 @@ export * from './constants';
|
|
28
28
|
/**
|
29
29
|
* 资源列表页面表格中操作列表
|
30
30
|
*/
|
31
|
-
|
31
|
+
function OptionList(props) {
|
32
32
|
var mode = props.mode, _a = props.options, options = _a === void 0 ? [] : _a, placement = props.placement, className = props.className, popupClassName = props.popupClassName, other = __rest(props, ["mode", "options", "placement", "className", "popupClassName"]);
|
33
33
|
var globalShowMode = mode === 'popover' ? EShowMode.POPOVER : EShowMode.INLINE;
|
34
34
|
var showingOptions = options.filter(function (op) { return !op.hidden; });
|
@@ -51,3 +51,4 @@ export default function OptionList(props) {
|
|
51
51
|
OptionList.EShowMode = EShowMode;
|
52
52
|
OptionList.InlineOptionList = InlineOptionList;
|
53
53
|
OptionList.PopoverOptionList = PopoverOptionList;
|
54
|
+
export default OptionList;
|
@@ -98,7 +98,7 @@ textarea.ant-input-affix-wrapper {
|
|
98
98
|
transition: all 0.3s, height 0s;
|
99
99
|
}
|
100
100
|
.ant-input-affix-wrapper-lg {
|
101
|
-
padding:
|
101
|
+
padding: 6.5px 11px;
|
102
102
|
font-size: 16px;
|
103
103
|
}
|
104
104
|
.ant-input-affix-wrapper-sm {
|
@@ -291,7 +291,7 @@ textarea.ant-input {
|
|
291
291
|
transition: all 0.3s, height 0s;
|
292
292
|
}
|
293
293
|
.ant-input-lg {
|
294
|
-
padding:
|
294
|
+
padding: 6.5px 11px;
|
295
295
|
font-size: 16px;
|
296
296
|
}
|
297
297
|
.ant-input-sm {
|
@@ -427,7 +427,7 @@ textarea.ant-input {
|
|
427
427
|
}
|
428
428
|
.ant-input-group-lg .ant-input,
|
429
429
|
.ant-input-group-lg > .ant-input-group-addon {
|
430
|
-
padding:
|
430
|
+
padding: 6.5px 11px;
|
431
431
|
font-size: 16px;
|
432
432
|
}
|
433
433
|
.ant-input-group-sm .ant-input,
|
@@ -435,7 +435,7 @@ textarea.ant-input {
|
|
435
435
|
padding: 1px 7px;
|
436
436
|
}
|
437
437
|
.ant-input-group-lg .ant-select-single .ant-select-selector {
|
438
|
-
height:
|
438
|
+
height: 40px;
|
439
439
|
}
|
440
440
|
.ant-input-group-sm .ant-select-single .ant-select-selector {
|
441
441
|
height: 26px;
|
@@ -624,7 +624,7 @@ textarea.ant-input {
|
|
624
624
|
height: 32px;
|
625
625
|
}
|
626
626
|
.ant-input[type='color'].ant-input-lg {
|
627
|
-
height:
|
627
|
+
height: 40px;
|
628
628
|
}
|
629
629
|
.ant-input[type='color'].ant-input-sm {
|
630
630
|
height: 26px;
|
@@ -679,7 +679,7 @@ textarea.ant-input {
|
|
679
679
|
z-index: 1;
|
680
680
|
}
|
681
681
|
.ant-input-search-large .ant-input-search-button {
|
682
|
-
height:
|
682
|
+
height: 40px;
|
683
683
|
}
|
684
684
|
.ant-input-search-small .ant-input-search-button {
|
685
685
|
height: 26px;
|
@@ -738,7 +738,7 @@ textarea.ant-input {
|
|
738
738
|
height: 32px;
|
739
739
|
}
|
740
740
|
.ant-input-lg {
|
741
|
-
height:
|
741
|
+
height: 40px;
|
742
742
|
}
|
743
743
|
.ant-input-sm {
|
744
744
|
height: 26px;
|
@@ -851,7 +851,7 @@ textarea.ant-input-number {
|
|
851
851
|
transition: all 0.3s, height 0s;
|
852
852
|
}
|
853
853
|
.ant-input-number-lg {
|
854
|
-
padding:
|
854
|
+
padding: 6.5px 11px;
|
855
855
|
font-size: 16px;
|
856
856
|
}
|
857
857
|
.ant-input-number-sm {
|
@@ -1000,7 +1000,7 @@ textarea.ant-input-number {
|
|
1000
1000
|
font-size: 16px;
|
1001
1001
|
}
|
1002
1002
|
.ant-input-number-lg input {
|
1003
|
-
height:
|
1003
|
+
height: 38px;
|
1004
1004
|
}
|
1005
1005
|
.ant-input-number-sm {
|
1006
1006
|
padding: 0;
|
@@ -1,17 +1,15 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import { SDK_PREFIX } from '../../constants/style';
|
3
2
|
import NameLimiter from '../../components/NameLimiter';
|
4
3
|
export var IgnoreDesString = '由logkit';
|
5
4
|
/**
|
6
5
|
* 资源名称展示位'名称(备注)'
|
7
6
|
*/
|
8
7
|
export default function RemarkName(props) {
|
9
|
-
var name = props.name, remark = props.remark
|
8
|
+
var name = props.name, remark = props.remark;
|
10
9
|
var getTooltip = function () {
|
11
10
|
return remark && remark !== name && !remark.startsWith(IgnoreDesString)
|
12
11
|
? name + "(" + (remark && remark.trim()) + ")"
|
13
12
|
: '';
|
14
13
|
};
|
15
|
-
return
|
16
|
-
React.createElement(NameLimiter, { name: name, title: getTooltip(), length: length })));
|
14
|
+
return React.createElement(NameLimiter, { name: name, title: getTooltip() });
|
17
15
|
}
|
@@ -262,7 +262,15 @@
|
|
262
262
|
.ant-tooltip-rtl .ant-tooltip-inner {
|
263
263
|
text-align: right;
|
264
264
|
}
|
265
|
-
.pandora-sdk-name-
|
265
|
+
.pandora-sdk-name-limit {
|
266
|
+
max-width: 100%;
|
267
|
+
display: inline-block;
|
268
|
+
vertical-align: top;
|
269
|
+
white-space: nowrap;
|
270
|
+
text-overflow: ellipsis;
|
271
|
+
overflow: hidden;
|
272
|
+
}
|
273
|
+
.pandora-sdk-name-limit-tooltip .ant-tooltip-inner {
|
266
274
|
max-width: 400px !important;
|
267
275
|
max-height: 200px !important;
|
268
276
|
overflow: auto;
|
@@ -275,7 +283,3 @@
|
|
275
283
|
.ant-btn-sm {
|
276
284
|
padding: 0 7px;
|
277
285
|
}
|
278
|
-
.pandora-sdk-remark-name {
|
279
|
-
word-break: break-all;
|
280
|
-
white-space: nowrap;
|
281
|
-
}
|
@@ -299,20 +299,20 @@
|
|
299
299
|
transition: all 0.3s;
|
300
300
|
}
|
301
301
|
.ant-select-multiple.ant-select-lg .ant-select-selector::after {
|
302
|
-
line-height:
|
302
|
+
line-height: 32px;
|
303
303
|
}
|
304
304
|
.ant-select-multiple.ant-select-lg .ant-select-selection-item {
|
305
|
-
height:
|
306
|
-
line-height:
|
305
|
+
height: 32px;
|
306
|
+
line-height: 30px;
|
307
307
|
}
|
308
308
|
.ant-select-multiple.ant-select-lg .ant-select-selection-search {
|
309
|
-
height:
|
310
|
-
line-height:
|
309
|
+
height: 32px;
|
310
|
+
line-height: 32px;
|
311
311
|
}
|
312
312
|
.ant-select-multiple.ant-select-lg .ant-select-selection-search-input,
|
313
313
|
.ant-select-multiple.ant-select-lg .ant-select-selection-search-mirror {
|
314
|
-
height:
|
315
|
-
line-height:
|
314
|
+
height: 32px;
|
315
|
+
line-height: 30px;
|
316
316
|
}
|
317
317
|
.ant-select-multiple.ant-select-sm .ant-select-selector::after {
|
318
318
|
line-height: 18px;
|
@@ -1,11 +1,11 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import { isArray } from 'lodash';
|
2
|
+
import { isArray, isUndefined } from 'lodash';
|
3
3
|
import Radio from 'antd/es/radio';
|
4
4
|
import classnames from 'classnames';
|
5
5
|
import { SDK_PREFIX } from '../../constants/style';
|
6
6
|
var useCallback = React.useCallback, useMemo = React.useMemo;
|
7
7
|
export default function SolidRadioGroup(props) {
|
8
|
-
var className = props.className, buttonClassName = props.buttonClassName, value = props.value, size = props.size, onChange = props.onChange, children = props.children, _a = props.options, options = _a === void 0 ? {} : _a;
|
8
|
+
var className = props.className, buttonClassName = props.buttonClassName, value = props.value, size = props.size, onChange = props.onChange, children = props.children, disabled = props.disabled, _a = props.options, options = _a === void 0 ? {} : _a;
|
9
9
|
var handleChange = useCallback(function (e) {
|
10
10
|
if (onChange) {
|
11
11
|
onChange(e.target.value);
|
@@ -19,8 +19,11 @@ export default function SolidRadioGroup(props) {
|
|
19
19
|
return (React.createElement(Radio.Group, { className: classnames(SDK_PREFIX + "-solid-radio-group", className), value: value, onChange: handleChange, size: size },
|
20
20
|
radioOptions.map(function (option) {
|
21
21
|
var _a;
|
22
|
-
var value = option.value, item = option.item
|
23
|
-
|
22
|
+
var value = option.value, item = option.item;
|
23
|
+
var disableRealVal = isUndefined(option.disabled)
|
24
|
+
? disabled
|
25
|
+
: option.disabled;
|
26
|
+
return (React.createElement(Radio.Button, { key: value.toString(), value: value, disabled: disableRealVal, className: classnames((_a = {}, _a[SDK_PREFIX + "-solid-radio-item"] = !disableRealVal, _a), buttonClassName) }, item));
|
24
27
|
}),
|
25
28
|
children));
|
26
29
|
}
|
@@ -204,9 +204,9 @@ span.ant-radio + * {
|
|
204
204
|
height: 100%;
|
205
205
|
}
|
206
206
|
.ant-radio-group-large .ant-radio-button-wrapper {
|
207
|
-
height:
|
207
|
+
height: 40px;
|
208
208
|
font-size: 16px;
|
209
|
-
line-height:
|
209
|
+
line-height: 38px;
|
210
210
|
}
|
211
211
|
.ant-radio-group-small .ant-radio-button-wrapper {
|
212
212
|
height: 26px;
|
@@ -399,6 +399,10 @@ span.ant-radio + * {
|
|
399
399
|
border-color: #2c6dd2 !important;
|
400
400
|
color: #2c6dd2 !important;
|
401
401
|
}
|
402
|
+
.pandora-sdk-solid-radio-group .ant-radio-button-wrapper-checked.ant-radio-button-wrapper-disabled {
|
403
|
+
border-color: #bfbfbf !important;
|
404
|
+
color: #333 !important;
|
405
|
+
}
|
402
406
|
.pandora-sdk-solid-radio-group .ant-radio-button-wrapper:not(:first-child)::before {
|
403
407
|
background-color: #bfbfbf;
|
404
408
|
}
|
@@ -18,6 +18,11 @@
|
|
18
18
|
color: @theme-color !important;
|
19
19
|
}
|
20
20
|
|
21
|
+
.@{ant-prefix}-radio-button-wrapper-checked.@{ant-prefix}-radio-button-wrapper-disabled {
|
22
|
+
border-color: @input-border-color !important;
|
23
|
+
color: @heading-color!important;
|
24
|
+
}
|
25
|
+
|
21
26
|
.@{ant-prefix}-radio-button-wrapper {
|
22
27
|
&:not(:first-child) {
|
23
28
|
&::before {
|
@@ -44,7 +44,7 @@ import Step from './Step';
|
|
44
44
|
import ControlButton from './ControlButton';
|
45
45
|
import { Provider } from './context';
|
46
46
|
var useMemo = React.useMemo, useState = React.useState, useCallback = React.useCallback;
|
47
|
-
|
47
|
+
function Steps(props) {
|
48
48
|
var _a = __read(useState(0), 2), stepLength = _a[0], setStepLength = _a[1];
|
49
49
|
var current = props.current, _b = props.steps, steps = _b === void 0 ? [] : _b, className = props.className, children = props.children, otherProps = __rest(props, ["current", "steps", "className", "children"]);
|
50
50
|
var handleAddSteps = useCallback(function () {
|
@@ -70,3 +70,4 @@ export default function Steps(props) {
|
|
70
70
|
}
|
71
71
|
Steps.Step = Step;
|
72
72
|
Steps.ControlButton = ControlButton;
|
73
|
+
export default Steps;
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import { TableProps } from 'antd/es/table';
|
3
|
+
import { TableRowSelection } from 'antd/es/table/interface';
|
3
4
|
/**
|
4
5
|
* 表格提供自定义多选, 通过 rowSelection对象的selectedRowKeys和onChange来控制多选的状态
|
5
6
|
* 需要注意的是, 当在外部进行增删改或者外部需要控制选择状态时, 例如删除之后清空全选状态, 需要受控
|
@@ -17,7 +18,7 @@ export interface IOptionItem {
|
|
17
18
|
/**
|
18
19
|
* 禁用当前操作
|
19
20
|
*/
|
20
|
-
disabled?: boolean;
|
21
|
+
disabled?: boolean | ((selectItems: any[]) => boolean);
|
21
22
|
}
|
22
23
|
export interface ITableProps<T> extends TableProps<T> {
|
23
24
|
/**
|
@@ -32,7 +33,7 @@ export interface ITableProps<T> extends TableProps<T> {
|
|
32
33
|
/**
|
33
34
|
* pandora2.0风格的表格
|
34
35
|
*/
|
35
|
-
|
36
|
+
declare class Table<T = any> extends React.Component<ITableProps<T>, any> {
|
36
37
|
static Column: typeof import("antd/lib/table/Column").default;
|
37
38
|
static ColumnTag: (props: {
|
38
39
|
tags: any[];
|
@@ -43,35 +44,19 @@ export default class Table<T = any> extends React.Component<ITableProps<T>, any>
|
|
43
44
|
checkAll: boolean;
|
44
45
|
UNSAFE_componentWillReceiveProps(nextProps: ITableProps<T>): void;
|
45
46
|
get selectedRowKeys(): React.ReactText[];
|
46
|
-
get rowSelection():
|
47
|
-
|
48
|
-
onChange: (selectedRowKeys: string[] | number[], selectedRowsOfCurrentPage: any[]) => void;
|
49
|
-
preserveSelectedRowKeys?: boolean | undefined;
|
50
|
-
type?: "checkbox" | "radio" | undefined;
|
51
|
-
defaultSelectedRowKeys?: React.ReactText[] | undefined;
|
52
|
-
getCheckboxProps?: ((record: T) => Partial<Pick<import("antd/es/checkbox").CheckboxProps, "type" | "onClick" | "className" | "id" | "style" | "tabIndex" | "children" | "onChange" | "onKeyDown" | "onKeyPress" | "onMouseEnter" | "onMouseLeave" | "autoFocus" | "disabled" | "name" | "value" | "prefixCls" | "indeterminate" | "skipGroup">>) | undefined;
|
53
|
-
onSelect?: import("antd/es/table/interface").SelectionSelectFn<T> | undefined;
|
54
|
-
onSelectMultiple?: ((selected: boolean, selectedRows: T[], changeRows: T[]) => void) | undefined;
|
55
|
-
onSelectAll?: ((selected: boolean, selectedRows: T[], changeRows: T[]) => void) | undefined;
|
56
|
-
onSelectInvert?: ((selectedRowKeys: React.ReactText[]) => void) | undefined;
|
57
|
-
onSelectNone?: (() => void) | undefined;
|
58
|
-
selections?: boolean | import("antd/es/table/hooks/useSelection").INTERNAL_SELECTION_ITEM[] | undefined;
|
59
|
-
hideSelectAll?: boolean | undefined;
|
60
|
-
fixed?: boolean | undefined;
|
61
|
-
columnWidth?: string | number | undefined;
|
62
|
-
columnTitle?: React.ReactNode;
|
63
|
-
checkStrictly?: boolean | undefined;
|
64
|
-
renderCell?: ((value: boolean, record: T, index: number, originNode: React.ReactNode) => string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | import("rc-table/lib/interface").RenderedCell<T> | null | undefined) | undefined;
|
65
|
-
} | undefined;
|
47
|
+
get rowSelection(): TableRowSelection<T> | undefined;
|
48
|
+
get undisabledData(): readonly T[];
|
66
49
|
get keysOfCurrentPage(): any[];
|
67
50
|
getRowKey(row: any, index: number): any;
|
68
51
|
setIndeterminate(indeterminate: boolean): void;
|
69
52
|
setCheckAll(checkAll: boolean): void;
|
70
53
|
setCheckboxStatus(selectedRowsOfCurrentPage?: T[], dataSource?: T[]): void;
|
71
|
-
handleSelectionChange(selectedRowKeys:
|
72
|
-
onRowSelectionChange(selectedRowKeys:
|
54
|
+
handleSelectionChange(selectedRowKeys: React.Key[], selectedRowsOfCurrentPage: any[]): void;
|
55
|
+
onRowSelectionChange(selectedRowKeys: React.Key[], selectedRowsOfCurrentPage: any[]): void;
|
73
56
|
handleCheckAllChange(e: any): void;
|
74
57
|
handleBatchOptionClick(option: IOptionItem): void;
|
75
58
|
getRowClassName(record: any, index: number, indent: number): string;
|
59
|
+
getDisabledStatus(option: IOptionItem): boolean | undefined;
|
76
60
|
render(): JSX.Element;
|
77
61
|
}
|
62
|
+
export default Table;
|
@@ -66,7 +66,7 @@ import * as React from 'react';
|
|
66
66
|
import { Table as AntTable, Checkbox } from 'antd';
|
67
67
|
import classnames from 'classnames';
|
68
68
|
import { observable, action, computed } from 'mobx';
|
69
|
-
import { size, xor, union, unionBy, differenceBy, get
|
69
|
+
import { size, xor, union, unionBy, differenceBy, get } from 'lodash';
|
70
70
|
import { observer } from 'mobx-react';
|
71
71
|
import bind from '../../utils/bind';
|
72
72
|
import { SDK_PREFIX } from '../../constants/style';
|
@@ -126,10 +126,23 @@ var Table = /** @class */ (function (_super) {
|
|
126
126
|
enumerable: true,
|
127
127
|
configurable: true
|
128
128
|
});
|
129
|
+
Object.defineProperty(Table.prototype, "undisabledData", {
|
130
|
+
get: function () {
|
131
|
+
var _a = this.props, dataSource = _a.dataSource, rowSelection = _a.rowSelection;
|
132
|
+
var getCheckboxProps = (rowSelection || {}).getCheckboxProps;
|
133
|
+
var undisabledData = dataSource || [];
|
134
|
+
if (getCheckboxProps) {
|
135
|
+
// 如果checkbox有disabled的,要去掉这些rowItem
|
136
|
+
undisabledData = undisabledData.filter(function (data) { return !getCheckboxProps(data).disabled; });
|
137
|
+
}
|
138
|
+
return undisabledData;
|
139
|
+
},
|
140
|
+
enumerable: true,
|
141
|
+
configurable: true
|
142
|
+
});
|
129
143
|
Object.defineProperty(Table.prototype, "keysOfCurrentPage", {
|
130
144
|
get: function () {
|
131
|
-
|
132
|
-
return (dataSource || []).map(this.getRowKey);
|
145
|
+
return this.undisabledData.map(this.getRowKey);
|
133
146
|
},
|
134
147
|
enumerable: true,
|
135
148
|
configurable: true
|
@@ -205,19 +218,29 @@ var Table = /** @class */ (function (_super) {
|
|
205
218
|
? rowClassName
|
206
219
|
: rowClassName(record, index, indent));
|
207
220
|
};
|
221
|
+
Table.prototype.getDisabledStatus = function (option) {
|
222
|
+
var noneSelected = this.selectedRowKeys.length === 0;
|
223
|
+
var disabled = typeof option.disabled === 'function'
|
224
|
+
? option.disabled(__spread(this.undisabledData))
|
225
|
+
: option.disabled;
|
226
|
+
return noneSelected || disabled;
|
227
|
+
};
|
208
228
|
Table.prototype.render = function () {
|
209
229
|
var _a, _b;
|
210
230
|
var _this = this;
|
211
231
|
var _c = this.props, className = _c.className, batchOptions = _c.batchOptions, scroll = _c.scroll, restProps = __rest(_c, ["className", "batchOptions", "scroll"]);
|
212
232
|
return (React.createElement("div", null,
|
213
|
-
React.createElement(AntTable, __assign({ scroll: scroll }, restProps, { className: classnames(SDK_PREFIX + "-table-wrapper", (_a = {}, _a[SDK_PREFIX + "-table-scrollX"] = get(scroll, 'x'), _a), (_b = {}, _b[SDK_PREFIX + "-table-scrollY"] = get(scroll, 'y'), _b), className),
|
233
|
+
React.createElement(AntTable, __assign({ scroll: scroll }, restProps, { className: classnames(SDK_PREFIX + "-table-wrapper", (_a = {}, _a[SDK_PREFIX + "-table-scrollX"] = get(scroll, 'x'), _a), (_b = {}, _b[SDK_PREFIX + "-table-scrollY"] = get(scroll, 'y'), _b), className),
|
234
|
+
// 涉及到权限
|
235
|
+
// getCheckboxProps只能放到tableBatchWrapper里,因为selectedRowKeys在那个组件计算
|
236
|
+
rowSelection: batchOptions && this.props.rowSelection
|
214
237
|
? this.rowSelection
|
215
238
|
: this.props.rowSelection, rowClassName: this.getRowClassName })),
|
216
239
|
this.props.batchOptions &&
|
217
240
|
this.props.rowSelection &&
|
218
241
|
this.props.dataSource &&
|
219
242
|
this.props.dataSource.length > 0 ? (React.createElement("div", { className: SDK_PREFIX + "-table-batch-opt" },
|
220
|
-
React.createElement(Checkbox, { indeterminate: this.indeterminate, onChange: this.handleCheckAllChange, checked: this.checkAll, disabled: size(this.
|
243
|
+
React.createElement(Checkbox, { indeterminate: this.indeterminate, onChange: this.handleCheckAllChange, checked: this.checkAll, disabled: size(this.undisabledData) === 0 }),
|
221
244
|
React.createElement("span", { className: SDK_PREFIX + "-table-batch-opt-label" },
|
222
245
|
"\u5DF2\u9009 ",
|
223
246
|
this.selectedRowKeys.length),
|
@@ -225,9 +248,7 @@ var Table = /** @class */ (function (_super) {
|
|
225
248
|
var _a;
|
226
249
|
return (React.createElement("span", { key: index, className: classnames((_a = {},
|
227
250
|
_a[SDK_PREFIX + "-table-batch-opt-item"] = true,
|
228
|
-
_a[SDK_PREFIX + "-table-batch-opt-disabled"] =
|
229
|
-
? _this.selectedRowKeys.length === 0
|
230
|
-
: option.disabled,
|
251
|
+
_a[SDK_PREFIX + "-table-batch-opt-disabled"] = _this.getDisabledStatus(option),
|
231
252
|
_a)), onClick: function () { return _this.handleBatchOptionClick(option); } }, option.text));
|
232
253
|
})))) : null));
|
233
254
|
};
|
@@ -251,6 +272,11 @@ var Table = /** @class */ (function (_super) {
|
|
251
272
|
__metadata("design:type", Object),
|
252
273
|
__metadata("design:paramtypes", [])
|
253
274
|
], Table.prototype, "rowSelection", null);
|
275
|
+
__decorate([
|
276
|
+
computed,
|
277
|
+
__metadata("design:type", Object),
|
278
|
+
__metadata("design:paramtypes", [])
|
279
|
+
], Table.prototype, "undisabledData", null);
|
254
280
|
__decorate([
|
255
281
|
computed,
|
256
282
|
__metadata("design:type", Object),
|
@@ -312,6 +338,12 @@ var Table = /** @class */ (function (_super) {
|
|
312
338
|
__metadata("design:paramtypes", [Object, Number, Number]),
|
313
339
|
__metadata("design:returntype", void 0)
|
314
340
|
], Table.prototype, "getRowClassName", null);
|
341
|
+
__decorate([
|
342
|
+
bind,
|
343
|
+
__metadata("design:type", Function),
|
344
|
+
__metadata("design:paramtypes", [Object]),
|
345
|
+
__metadata("design:returntype", void 0)
|
346
|
+
], Table.prototype, "getDisabledStatus", null);
|
315
347
|
Table = __decorate([
|
316
348
|
observer
|
317
349
|
], Table);
|
@@ -264,7 +264,7 @@
|
|
264
264
|
border-radius: 0;
|
265
265
|
}
|
266
266
|
.ant-table-tbody > tr.ant-table-row:hover > td {
|
267
|
-
background:
|
267
|
+
background: #e9f0fa;
|
268
268
|
}
|
269
269
|
.ant-table-tbody > tr.ant-table-row-selected > td {
|
270
270
|
background: #2c6dd2;
|
@@ -1221,7 +1221,7 @@ textarea.ant-pagination-options-quick-jumper input {
|
|
1221
1221
|
transition: all 0.3s, height 0s;
|
1222
1222
|
}
|
1223
1223
|
.ant-pagination-options-quick-jumper input-lg {
|
1224
|
-
padding:
|
1224
|
+
padding: 6.5px 11px;
|
1225
1225
|
font-size: 16px;
|
1226
1226
|
}
|
1227
1227
|
.ant-pagination-options-quick-jumper input-sm {
|
@@ -1512,10 +1512,10 @@ textarea.ant-pagination-options-quick-jumper input {
|
|
1512
1512
|
background: #ffffff !important;
|
1513
1513
|
}
|
1514
1514
|
.pandora-sdk-table-wrapper .ant-table-row:hover {
|
1515
|
-
background:
|
1515
|
+
background: #e9f0fa;
|
1516
1516
|
}
|
1517
1517
|
.pandora-sdk-table-wrapper .ant-table-row-hover {
|
1518
|
-
background:
|
1518
|
+
background: #e9f0fa;
|
1519
1519
|
}
|
1520
1520
|
.pandora-sdk-table-wrapper .ant-table-placeholder {
|
1521
1521
|
border: none;
|
@@ -1608,7 +1608,7 @@ textarea.ant-pagination-options-quick-jumper input {
|
|
1608
1608
|
max-height: 200px;
|
1609
1609
|
}
|
1610
1610
|
.pandora-sdk-table-wrapper .ant-table-tbody > tr.ant-table-row:hover > td {
|
1611
|
-
background-color:
|
1611
|
+
background-color: #e9f0fa;
|
1612
1612
|
}
|
1613
1613
|
.pandora-sdk-table-wrapper .ant-table-filter-trigger {
|
1614
1614
|
display: block;
|
@@ -9,7 +9,7 @@
|
|
9
9
|
line-height: 24px;
|
10
10
|
margin-right: 8px;
|
11
11
|
border-radius: 1px;
|
12
|
-
color: #
|
12
|
+
color: #333;
|
13
13
|
text-align: center;
|
14
14
|
vertical-align: middle;
|
15
15
|
border-radius: 2px;
|
@@ -47,8 +47,8 @@
|
|
47
47
|
border-left: 1px solid rgba(44, 109, 210, 0.1);
|
48
48
|
}
|
49
49
|
.pandora-sdk-root .pandora-sdk-content {
|
50
|
-
padding: 0
|
51
|
-
max-width:
|
50
|
+
padding: 0 8px;
|
51
|
+
max-width: 150px;
|
52
52
|
vertical-align: middle;
|
53
53
|
overflow: hidden;
|
54
54
|
white-space: nowrap;
|
@@ -5,7 +5,7 @@
|
|
5
5
|
line-height: 24px;
|
6
6
|
margin-right: 8px;
|
7
7
|
border-radius: 1px;
|
8
|
-
color: @font-color-
|
8
|
+
color: @font-color-7;
|
9
9
|
text-align: center;
|
10
10
|
vertical-align: middle;
|
11
11
|
border-radius: @border-radius-base;
|
@@ -45,8 +45,8 @@
|
|
45
45
|
}
|
46
46
|
|
47
47
|
.@{sdk-prefix}-content {
|
48
|
-
padding: 0
|
49
|
-
max-width:
|
48
|
+
padding: 0 8px;
|
49
|
+
max-width: 150px;
|
50
50
|
vertical-align: middle;
|
51
51
|
overflow: hidden;
|
52
52
|
white-space: nowrap;
|
@@ -26,7 +26,7 @@ import { MoreCircle } from '@qn-pandora/pandora-component-icons';
|
|
26
26
|
import Tag from './Tag';
|
27
27
|
import TagSwitch from './TagSwitch';
|
28
28
|
import { SDK_PREFIX } from '../../constants/style';
|
29
|
-
|
29
|
+
function TagList(props) {
|
30
30
|
var _a = props.mode, mode = _a === void 0 ? 'tag' : _a, className = props.className;
|
31
31
|
var handleSwitchChange = function (active, value) {
|
32
32
|
var values = props.values, onChange = props.onChange;
|
@@ -57,10 +57,11 @@ export default function TagList(props) {
|
|
57
57
|
}
|
58
58
|
return (React.createElement("div", { className: classnames(SDK_PREFIX + "-simplify", props.className) },
|
59
59
|
React.Children.toArray(children).slice(0, simplifyTo),
|
60
|
-
React.createElement(Popover, { content: React.createElement("div", { className: SDK_PREFIX + "-popover" }, children), getPopupContainer: getPopupContainer },
|
60
|
+
React.createElement(Popover, { content: React.createElement("div", { className: SDK_PREFIX + "-popover" }, React.Children.toArray(children).slice(simplifyTo, childSize)), getPopupContainer: getPopupContainer },
|
61
61
|
React.createElement(MoreCircle, { className: SDK_PREFIX + "-icon" }))));
|
62
62
|
};
|
63
63
|
return (React.createElement("div", { className: classnames(SDK_PREFIX + "-taglist-containter", className) }, mode === 'tag' ? getTagList() : getTagSwitchList()));
|
64
64
|
}
|
65
65
|
TagList.Tag = Tag;
|
66
66
|
TagList.TagSwitch = TagSwitch;
|
67
|
+
export default TagList;
|