@douyinfe/semi-ui 2.4.1 → 2.5.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/button/index.tsx +1 -1
- package/cascader/__test__/cascader.test.js +24 -0
- package/cascader/_story/cascader.stories.js +73 -0
- package/cascader/index.tsx +5 -2
- package/datePicker/_story/v2/FixInputRangeFocus.jsx +25 -0
- package/datePicker/_story/v2/index.js +2 -1
- package/datePicker/datePicker.tsx +3 -0
- package/dist/css/semi.css +56 -29
- package/dist/css/semi.min.css +1 -1
- package/dist/umd/semi-ui.js +523 -227
- package/dist/umd/semi-ui.js.map +1 -1
- package/dist/umd/semi-ui.min.js +1 -1
- package/dist/umd/semi-ui.min.js.map +1 -1
- package/form/__test__/formApi.test.js +182 -0
- package/form/_story/FormApi/arrayDemo.jsx +4 -7
- package/form/_story/Layout/slotDemo.jsx +2 -2
- package/form/_story/demo.jsx +18 -1
- package/form/_story/form.stories.js +6 -6
- package/form/baseForm.tsx +2 -2
- package/lib/cjs/autoComplete/index.d.ts +1 -1
- package/lib/cjs/button/Button.d.ts +4 -4
- package/lib/cjs/button/buttonGroup.d.ts +2 -2
- package/lib/cjs/button/index.d.ts +5 -6
- package/lib/cjs/cascader/index.js +6 -0
- package/lib/cjs/datePicker/datePicker.js +4 -0
- package/lib/cjs/dropdown/index.d.ts +1 -1
- package/lib/cjs/form/baseForm.d.ts +1 -1
- package/lib/cjs/form/baseForm.js +2 -2
- package/lib/cjs/form/field.d.ts +1 -1
- package/lib/cjs/iconButton/index.d.ts +2 -2
- package/lib/cjs/select/index.d.ts +3 -3
- package/lib/cjs/select/index.js +32 -28
- package/lib/cjs/select/option.js +2 -2
- package/lib/cjs/select/virtualRow.js +2 -2
- package/lib/cjs/table/Table.d.ts +1 -1
- package/lib/cjs/table/Table.js +8 -2
- package/lib/cjs/table/interface.d.ts +1 -0
- package/lib/cjs/tabs/interface.d.ts +1 -1
- package/lib/cjs/tooltip/index.d.ts +1 -1
- package/lib/cjs/tooltip/index.js +12 -4
- package/lib/cjs/tree/index.d.ts +2 -0
- package/lib/cjs/tree/index.js +15 -8
- package/lib/cjs/treeSelect/index.d.ts +2 -0
- package/lib/cjs/treeSelect/index.js +64 -27
- package/lib/cjs/upload/fileCard.js +31 -22
- package/lib/cjs/upload/index.d.ts +6 -0
- package/lib/cjs/upload/index.js +15 -8
- package/lib/cjs/upload/interface.d.ts +8 -6
- package/lib/es/autoComplete/index.d.ts +1 -1
- package/lib/es/button/Button.d.ts +4 -4
- package/lib/es/button/buttonGroup.d.ts +2 -2
- package/lib/es/button/index.d.ts +5 -6
- package/lib/es/cascader/index.js +5 -0
- package/lib/es/datePicker/datePicker.js +4 -0
- package/lib/es/dropdown/index.d.ts +1 -1
- package/lib/es/form/baseForm.d.ts +1 -1
- package/lib/es/form/baseForm.js +2 -2
- package/lib/es/form/field.d.ts +1 -1
- package/lib/es/iconButton/index.d.ts +2 -2
- package/lib/es/select/index.d.ts +3 -3
- package/lib/es/select/index.js +30 -26
- package/lib/es/select/option.js +2 -2
- package/lib/es/select/virtualRow.js +2 -2
- package/lib/es/table/Table.d.ts +1 -1
- package/lib/es/table/Table.js +10 -2
- package/lib/es/table/interface.d.ts +1 -0
- package/lib/es/tabs/interface.d.ts +1 -1
- package/lib/es/tooltip/index.d.ts +1 -1
- package/lib/es/tooltip/index.js +12 -4
- package/lib/es/tree/index.d.ts +2 -0
- package/lib/es/tree/index.js +15 -8
- package/lib/es/treeSelect/index.d.ts +2 -0
- package/lib/es/treeSelect/index.js +64 -27
- package/lib/es/upload/fileCard.js +31 -24
- package/lib/es/upload/index.d.ts +6 -0
- package/lib/es/upload/index.js +14 -8
- package/lib/es/upload/interface.d.ts +8 -6
- package/package.json +9 -9
- package/select/index.tsx +18 -19
- package/select/option.tsx +2 -2
- package/select/virtualRow.tsx +2 -2
- package/table/Table.tsx +7 -2
- package/table/_story/Perf/Virtualized/index.jsx +6 -0
- package/table/_story/table.stories.js +1 -2
- package/table/_story/v2/FixedHeaderMerge/index.jsx +98 -0
- package/table/_story/v2/FixedResizable/index.jsx +114 -0
- package/table/_story/v2/defaultFilteredValue.tsx +114 -0
- package/table/_story/v2/index.js +5 -0
- package/table/interface.ts +1 -0
- package/tabs/interface.ts +1 -1
- package/tooltip/__test__/tooltip.test.js +48 -4
- package/tooltip/_story/tooltip.stories.js +718 -559
- package/tooltip/index.tsx +6 -6
- package/tree/__test__/treeMultiple.test.js +94 -0
- package/tree/_story/tree.stories.js +169 -0
- package/tree/index.tsx +12 -5
- package/treeSelect/__test__/treeMultiple.test.js +94 -0
- package/treeSelect/_story/treeSelect.stories.js +242 -0
- package/treeSelect/index.tsx +72 -40
- package/upload/_story/upload.stories.js +22 -6
- package/upload/fileCard.tsx +23 -23
- package/upload/index.tsx +15 -6
- package/upload/interface.ts +7 -5
package/lib/cjs/select/index.js
CHANGED
|
@@ -56,7 +56,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
56
56
|
|
|
57
57
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
58
58
|
|
|
59
|
-
var
|
|
59
|
+
var _context16 = _interopRequireDefault(require("../configProvider/context"));
|
|
60
60
|
|
|
61
61
|
var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/select/foundation"));
|
|
62
62
|
|
|
@@ -347,11 +347,19 @@ class Select extends _baseComponent.default {
|
|
|
347
347
|
el.focus();
|
|
348
348
|
} catch (error) {}
|
|
349
349
|
},
|
|
350
|
-
updateScrollTop:
|
|
351
|
-
var
|
|
350
|
+
updateScrollTop: index => {
|
|
351
|
+
var _context10, _context11;
|
|
352
352
|
|
|
353
353
|
// eslint-disable-next-line max-len
|
|
354
|
-
let
|
|
354
|
+
let optionClassName = ".".concat(prefixcls, "-option-selected");
|
|
355
|
+
|
|
356
|
+
if (index !== undefined) {
|
|
357
|
+
var _context9;
|
|
358
|
+
|
|
359
|
+
optionClassName = (0, _concat.default)(_context9 = ".".concat(prefixcls, "-option:nth-child(")).call(_context9, index, ")");
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
let destNode = document.querySelector((0, _concat.default)(_context10 = (0, _concat.default)(_context11 = "#".concat(prefixcls, "-")).call(_context11, this.selectOptionListID, " ")).call(_context10, optionClassName));
|
|
355
363
|
|
|
356
364
|
if ((0, _isArray.default)(destNode)) {
|
|
357
365
|
// eslint-disable-next-line prefer-destructuring
|
|
@@ -379,10 +387,10 @@ class Select extends _baseComponent.default {
|
|
|
379
387
|
}
|
|
380
388
|
|
|
381
389
|
componentDidUpdate(prevProps, prevState) {
|
|
382
|
-
var
|
|
390
|
+
var _context12, _context13;
|
|
383
391
|
|
|
384
|
-
const prevChildrenKeys = (0, _map2.default)(
|
|
385
|
-
const nowChildrenKeys = (0, _map2.default)(
|
|
392
|
+
const prevChildrenKeys = (0, _map2.default)(_context12 = _react.default.Children.toArray(prevProps.children)).call(_context12, child => child.key);
|
|
393
|
+
const nowChildrenKeys = (0, _map2.default)(_context13 = _react.default.Children.toArray(this.props.children)).call(_context13, child => child.key);
|
|
386
394
|
let isOptionsChanged = false;
|
|
387
395
|
|
|
388
396
|
if (!(0, _isEqual2.default)(prevChildrenKeys, nowChildrenKeys) || !(0, _isEqual2.default)(prevProps.optionList, this.props.optionList)) {
|
|
@@ -572,33 +580,29 @@ class Select extends _baseComponent.default {
|
|
|
572
580
|
this.foundation.handleOptionMouseEnter(optionIndex);
|
|
573
581
|
}
|
|
574
582
|
|
|
575
|
-
renderWithGroup(
|
|
583
|
+
renderWithGroup(visibleOptions) {
|
|
576
584
|
const content = [];
|
|
577
585
|
const groupStatus = new _map.default();
|
|
578
|
-
(0, _forEach.default)(
|
|
586
|
+
(0, _forEach.default)(visibleOptions).call(visibleOptions, (option, optionIndex) => {
|
|
579
587
|
const parentGroup = option._parentGroup;
|
|
580
588
|
const optionContent = this.renderOption(option, optionIndex);
|
|
581
589
|
|
|
582
|
-
if (parentGroup && groupStatus.has(parentGroup.label)) {
|
|
583
|
-
// group content already insert
|
|
584
|
-
content.push(optionContent);
|
|
585
|
-
} else if (parentGroup) {
|
|
590
|
+
if (parentGroup && !groupStatus.has(parentGroup.label)) {
|
|
591
|
+
// when use with OptionGroup and group content not already insert
|
|
586
592
|
const groupContent = /*#__PURE__*/_react.default.createElement(_optionGroup.default, (0, _assign.default)({}, parentGroup, {
|
|
587
593
|
key: parentGroup.label
|
|
588
594
|
}));
|
|
589
595
|
|
|
590
596
|
groupStatus.set(parentGroup.label, true);
|
|
591
597
|
content.push(groupContent);
|
|
592
|
-
content.push(optionContent);
|
|
593
|
-
} else {
|
|
594
|
-
// when not use with OptionGroup
|
|
595
|
-
content.push(optionContent);
|
|
596
598
|
}
|
|
599
|
+
|
|
600
|
+
content.push(optionContent);
|
|
597
601
|
});
|
|
598
602
|
return content;
|
|
599
603
|
}
|
|
600
604
|
|
|
601
|
-
renderVirtualizeList(
|
|
605
|
+
renderVirtualizeList(visibleOptions) {
|
|
602
606
|
const {
|
|
603
607
|
virtualize
|
|
604
608
|
} = this.props;
|
|
@@ -613,10 +617,10 @@ class Select extends _baseComponent.default {
|
|
|
613
617
|
return /*#__PURE__*/_react.default.createElement(_reactWindow.FixedSizeList, {
|
|
614
618
|
ref: this.virtualizeListRef,
|
|
615
619
|
height: height || _constants.numbers.LIST_HEIGHT,
|
|
616
|
-
itemCount:
|
|
620
|
+
itemCount: visibleOptions.length,
|
|
617
621
|
itemSize: itemSize,
|
|
618
622
|
itemData: {
|
|
619
|
-
|
|
623
|
+
visibleOptions,
|
|
620
624
|
renderOption: this.renderOption
|
|
621
625
|
},
|
|
622
626
|
width: width || '100%',
|
|
@@ -627,7 +631,7 @@ class Select extends _baseComponent.default {
|
|
|
627
631
|
}
|
|
628
632
|
|
|
629
633
|
renderOptions(children) {
|
|
630
|
-
var
|
|
634
|
+
var _context14;
|
|
631
635
|
|
|
632
636
|
const {
|
|
633
637
|
dropdownMinWidth,
|
|
@@ -647,11 +651,11 @@ class Select extends _baseComponent.default {
|
|
|
647
651
|
multiple
|
|
648
652
|
} = this.props; // Do a filter first, instead of directly judging in forEach, so that the focusIndex can correspond to
|
|
649
653
|
|
|
650
|
-
const
|
|
651
|
-
let listContent = this.renderWithGroup(
|
|
654
|
+
const visibleOptions = (0, _filter.default)(options).call(options, item => item._show);
|
|
655
|
+
let listContent = this.renderWithGroup(visibleOptions);
|
|
652
656
|
|
|
653
657
|
if (virtualize) {
|
|
654
|
-
listContent = this.renderVirtualizeList(
|
|
658
|
+
listContent = this.renderVirtualizeList(visibleOptions);
|
|
655
659
|
}
|
|
656
660
|
|
|
657
661
|
const style = (0, _assign.default)({
|
|
@@ -663,7 +667,7 @@ class Select extends _baseComponent.default {
|
|
|
663
667
|
});
|
|
664
668
|
const isEmpty = !options.length || !(0, _some.default)(options).call(options, item => item._show);
|
|
665
669
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
666
|
-
id: (0, _concat.default)(
|
|
670
|
+
id: (0, _concat.default)(_context14 = "".concat(prefixcls, "-")).call(_context14, this.selectOptionListID),
|
|
667
671
|
className: dropdownClassName,
|
|
668
672
|
style: style
|
|
669
673
|
}, outerTopSlot, /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -891,7 +895,7 @@ class Select extends _baseComponent.default {
|
|
|
891
895
|
}
|
|
892
896
|
|
|
893
897
|
renderSelection() {
|
|
894
|
-
var
|
|
898
|
+
var _context15;
|
|
895
899
|
|
|
896
900
|
const {
|
|
897
901
|
disabled,
|
|
@@ -975,7 +979,7 @@ class Select extends _baseComponent.default {
|
|
|
975
979
|
role: "combobox",
|
|
976
980
|
"aria-disabled": disabled,
|
|
977
981
|
"aria-expanded": isOpen,
|
|
978
|
-
"aria-controls": (0, _concat.default)(
|
|
982
|
+
"aria-controls": (0, _concat.default)(_context15 = "".concat(prefixcls, "-")).call(_context15, this.selectOptionListID),
|
|
979
983
|
"aria-haspopup": "listbox",
|
|
980
984
|
"aria-label": "select value",
|
|
981
985
|
"aria-invalid": this.props['aria-invalid'],
|
|
@@ -1042,7 +1046,7 @@ class Select extends _baseComponent.default {
|
|
|
1042
1046
|
|
|
1043
1047
|
}
|
|
1044
1048
|
|
|
1045
|
-
Select.contextType =
|
|
1049
|
+
Select.contextType = _context16.default;
|
|
1046
1050
|
Select.Option = _option.default;
|
|
1047
1051
|
Select.OptGroup = _optionGroup.default;
|
|
1048
1052
|
Select.propTypes = {
|
package/lib/cjs/select/option.js
CHANGED
|
@@ -65,9 +65,9 @@ class Option extends _react.PureComponent {
|
|
|
65
65
|
const {
|
|
66
66
|
props
|
|
67
67
|
} = this;
|
|
68
|
-
const
|
|
68
|
+
const isDisabled = props.disabled;
|
|
69
69
|
|
|
70
|
-
if (!
|
|
70
|
+
if (!isDisabled) {
|
|
71
71
|
props.onSelect((0, _assign.default)((0, _assign.default)({}, rest), {
|
|
72
72
|
value,
|
|
73
73
|
label: label || children
|
|
@@ -15,9 +15,9 @@ const VirtualRow = _ref => {
|
|
|
15
15
|
style
|
|
16
16
|
} = _ref;
|
|
17
17
|
const {
|
|
18
|
-
|
|
18
|
+
visibleOptions
|
|
19
19
|
} = data;
|
|
20
|
-
const option =
|
|
20
|
+
const option = visibleOptions[index];
|
|
21
21
|
return data.renderOption(option, index, style);
|
|
22
22
|
};
|
|
23
23
|
|
package/lib/cjs/table/Table.d.ts
CHANGED
|
@@ -298,7 +298,7 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
|
|
|
298
298
|
showSizeChanger?: boolean;
|
|
299
299
|
showQuickJumper?: boolean;
|
|
300
300
|
popoverZIndex?: number;
|
|
301
|
-
popoverPosition?: "top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver";
|
|
301
|
+
popoverPosition?: "top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver";
|
|
302
302
|
hideOnSinglePage?: boolean;
|
|
303
303
|
hoverShowPageSelect?: boolean;
|
|
304
304
|
};
|
package/lib/cjs/table/Table.js
CHANGED
|
@@ -566,10 +566,15 @@ class Table extends _baseComponent.default {
|
|
|
566
566
|
titleArr.push(sorter);
|
|
567
567
|
}
|
|
568
568
|
|
|
569
|
+
const stateFilteredValue = (0, _get2.default)(curQuery, 'filteredValue');
|
|
570
|
+
const defaultFilteredValue = (0, _get2.default)(curQuery, 'defaultFilteredValue');
|
|
571
|
+
const filteredValue = stateFilteredValue ? stateFilteredValue : defaultFilteredValue;
|
|
572
|
+
|
|
569
573
|
if ((0, _isArray.default)(column.filters) && column.filters.length || /*#__PURE__*/(0, _react.isValidElement)(column.filterDropdown)) {
|
|
570
574
|
const filter = /*#__PURE__*/_react.default.createElement(_ColumnFilter.default, (0, _assign.default)({
|
|
571
575
|
key: _constants.strings.DEFAULT_KEY_COLUMN_FILTER
|
|
572
576
|
}, curQuery, {
|
|
577
|
+
filteredValue: filteredValue,
|
|
573
578
|
onFilterDropdownVisibleChange: visible => _this.foundation.toggleShowFilter(dataIndex, visible),
|
|
574
579
|
onSelect: data => _this.foundation.handleFilterSelect(dataIndex, data)
|
|
575
580
|
}));
|
|
@@ -1154,11 +1159,12 @@ class Table extends _baseComponent.default {
|
|
|
1154
1159
|
willUpdateStates.cachedColumns = props.columns;
|
|
1155
1160
|
willUpdateStates.cachedChildren = null;
|
|
1156
1161
|
} else if (props.children && props.children !== state.cachedChildren) {
|
|
1157
|
-
const
|
|
1162
|
+
const newNestedColumns = (0, _getColumns.default)(props.children);
|
|
1163
|
+
const newFlattenColumns = (0, _utils.flattenColumns)(newNestedColumns);
|
|
1158
1164
|
const columns = (0, _utils.mergeColumns)(state.queries, newFlattenColumns, null, false);
|
|
1159
1165
|
willUpdateStates.flattenColumns = newFlattenColumns;
|
|
1160
1166
|
willUpdateStates.queries = [...columns];
|
|
1161
|
-
willUpdateStates.cachedColumns = [...
|
|
1167
|
+
willUpdateStates.cachedColumns = [...newNestedColumns];
|
|
1162
1168
|
willUpdateStates.cachedChildren = props.children;
|
|
1163
1169
|
} // Update controlled selection column
|
|
1164
1170
|
|
|
@@ -63,6 +63,7 @@ export interface ColumnProps<RecordType extends Record<string, any> = any> {
|
|
|
63
63
|
className?: string;
|
|
64
64
|
colSpan?: number;
|
|
65
65
|
dataIndex?: string;
|
|
66
|
+
defaultFilteredValue?: any[];
|
|
66
67
|
defaultSortOrder?: SortOrder;
|
|
67
68
|
filterChildrenRecord?: boolean;
|
|
68
69
|
filterDropdown?: React.ReactNode;
|
|
@@ -67,7 +67,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
|
|
|
67
67
|
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
68
68
|
motion: PropTypes.Requireable<boolean | object>;
|
|
69
69
|
autoAdjustOverflow: PropTypes.Requireable<boolean>;
|
|
70
|
-
position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver">;
|
|
70
|
+
position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
|
|
71
71
|
getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
|
|
72
72
|
mouseEnterDelay: PropTypes.Requireable<number>;
|
|
73
73
|
mouseLeaveDelay: PropTypes.Requireable<number>;
|
package/lib/cjs/tooltip/index.js
CHANGED
|
@@ -229,7 +229,9 @@ class Tooltip extends _baseComponent.default {
|
|
|
229
229
|
} = _ref;
|
|
230
230
|
return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
|
|
231
231
|
className: (0, _classnames.default)(className, animateCls),
|
|
232
|
-
style: (0, _assign.default)((0, _assign.default)((0, _assign.default)({
|
|
232
|
+
style: (0, _assign.default)((0, _assign.default)((0, _assign.default)({
|
|
233
|
+
visibility: 'visible'
|
|
234
|
+
}, animateStyle), {
|
|
233
235
|
transformOrigin
|
|
234
236
|
}), style)
|
|
235
237
|
}, portalEventSet, animateEvents, {
|
|
@@ -241,7 +243,9 @@ class Tooltip extends _baseComponent.default {
|
|
|
241
243
|
className: className
|
|
242
244
|
}, portalEventSet, {
|
|
243
245
|
"x-placement": placement,
|
|
244
|
-
style:
|
|
246
|
+
style: (0, _assign.default)({
|
|
247
|
+
visibility: motion ? undefined : 'visible'
|
|
248
|
+
}, style)
|
|
245
249
|
}), content, icon);
|
|
246
250
|
return /*#__PURE__*/_react.default.createElement(_index.default, {
|
|
247
251
|
getPopupContainer: this.props.getPopupContainer,
|
|
@@ -484,11 +488,15 @@ class Tooltip extends _baseComponent.default {
|
|
|
484
488
|
}
|
|
485
489
|
};
|
|
486
490
|
|
|
487
|
-
document.addEventListener('
|
|
491
|
+
document.addEventListener('mousedown', this.clickOutsideHandler, {
|
|
492
|
+
capture: true
|
|
493
|
+
});
|
|
488
494
|
},
|
|
489
495
|
unregisterClickOutsideHandler: () => {
|
|
490
496
|
if (this.clickOutsideHandler) {
|
|
491
|
-
document.removeEventListener('
|
|
497
|
+
document.removeEventListener('mousedown', this.clickOutsideHandler, {
|
|
498
|
+
capture: true
|
|
499
|
+
});
|
|
492
500
|
this.clickOutsideHandler = null;
|
|
493
501
|
}
|
|
494
502
|
},
|
package/lib/cjs/tree/index.d.ts
CHANGED
|
@@ -70,6 +70,7 @@ declare class Tree extends BaseComponent<TreeProps, TreeState> {
|
|
|
70
70
|
onDragStart: PropTypes.Requireable<(...args: any[]) => any>;
|
|
71
71
|
onDrop: PropTypes.Requireable<(...args: any[]) => any>;
|
|
72
72
|
labelEllipsis: PropTypes.Requireable<boolean>;
|
|
73
|
+
checkRelation: PropTypes.Requireable<string>;
|
|
73
74
|
'aria-label': PropTypes.Requireable<string>;
|
|
74
75
|
};
|
|
75
76
|
static defaultProps: {
|
|
@@ -90,6 +91,7 @@ declare class Tree extends BaseComponent<TreeProps, TreeState> {
|
|
|
90
91
|
disableStrictly: boolean;
|
|
91
92
|
draggable: boolean;
|
|
92
93
|
autoExpandWhenDragEnter: boolean;
|
|
94
|
+
checkRelation: string;
|
|
93
95
|
};
|
|
94
96
|
static TreeNode: typeof TreeNode;
|
|
95
97
|
inputRef: React.RefObject<typeof Input>;
|
package/lib/cjs/tree/index.js
CHANGED
|
@@ -236,6 +236,7 @@ class Tree extends _baseComponent.default {
|
|
|
236
236
|
selectedKeys: [],
|
|
237
237
|
checkedKeys: new _set.default(),
|
|
238
238
|
halfCheckedKeys: new _set.default(),
|
|
239
|
+
realCheckedKeys: new _set.default([]),
|
|
239
240
|
motionKeys: new _set.default([]),
|
|
240
241
|
motionType: 'hide',
|
|
241
242
|
expandedKeys: new _set.default(props.expandedKeys),
|
|
@@ -446,12 +447,16 @@ class Tree extends _baseComponent.default {
|
|
|
446
447
|
}
|
|
447
448
|
|
|
448
449
|
if (checkedKeyValues) {
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
450
|
+
if (props.checkRelation === 'unRelated') {
|
|
451
|
+
newState.realCheckedKeys = new _set.default(checkedKeyValues);
|
|
452
|
+
} else if (props.checkRelation === 'related') {
|
|
453
|
+
const {
|
|
454
|
+
checkedKeys,
|
|
455
|
+
halfCheckedKeys
|
|
456
|
+
} = (0, _treeUtil.calcCheckedKeys)(checkedKeyValues, keyEntities);
|
|
457
|
+
newState.checkedKeys = checkedKeys;
|
|
458
|
+
newState.halfCheckedKeys = halfCheckedKeys;
|
|
459
|
+
}
|
|
455
460
|
}
|
|
456
461
|
} // update loadedKeys
|
|
457
462
|
|
|
@@ -461,7 +466,7 @@ class Tree extends _baseComponent.default {
|
|
|
461
466
|
} // update disableStrictly
|
|
462
467
|
|
|
463
468
|
|
|
464
|
-
if (treeData && props.disableStrictly) {
|
|
469
|
+
if (treeData && props.disableStrictly && props.checkRelation === 'related') {
|
|
465
470
|
newState.disabledKeys = (0, _treeUtil.calcDisabledKeys)(keyEntities);
|
|
466
471
|
}
|
|
467
472
|
|
|
@@ -782,6 +787,7 @@ Tree.propTypes = {
|
|
|
782
787
|
onDragStart: _propTypes.default.func,
|
|
783
788
|
onDrop: _propTypes.default.func,
|
|
784
789
|
labelEllipsis: _propTypes.default.bool,
|
|
790
|
+
checkRelation: _propTypes.default.string,
|
|
785
791
|
'aria-label': _propTypes.default.string
|
|
786
792
|
};
|
|
787
793
|
Tree.defaultProps = {
|
|
@@ -801,7 +807,8 @@ Tree.defaultProps = {
|
|
|
801
807
|
expandAction: false,
|
|
802
808
|
disableStrictly: false,
|
|
803
809
|
draggable: false,
|
|
804
|
-
autoExpandWhenDragEnter: true
|
|
810
|
+
autoExpandWhenDragEnter: true,
|
|
811
|
+
checkRelation: 'related'
|
|
805
812
|
};
|
|
806
813
|
Tree.TreeNode = _treeNode.default;
|
|
807
814
|
var _default = Tree;
|
|
@@ -168,6 +168,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
|
|
|
168
168
|
optionListStyle: PropTypes.Requireable<object>;
|
|
169
169
|
searchRender: PropTypes.Requireable<boolean | ((...args: any[]) => any)>;
|
|
170
170
|
renderSelectedItem: PropTypes.Requireable<(...args: any[]) => any>;
|
|
171
|
+
checkRelation: PropTypes.Requireable<string>;
|
|
171
172
|
'aria-label': PropTypes.Requireable<string>;
|
|
172
173
|
};
|
|
173
174
|
static defaultProps: Partial<TreeSelectProps>;
|
|
@@ -192,6 +193,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
|
|
|
192
193
|
removeTag: (removedKey: TreeNodeData['key']) => void;
|
|
193
194
|
handleClick: (e: React.MouseEvent) => void;
|
|
194
195
|
handleSelectionEnterPress: (e: React.KeyboardEvent<HTMLDivElement>) => void;
|
|
196
|
+
hasValue: () => boolean;
|
|
195
197
|
showClearBtn: () => boolean;
|
|
196
198
|
renderTagList: () => React.ReactNode[];
|
|
197
199
|
/**
|
|
@@ -174,34 +174,52 @@ class TreeSelect extends _baseComponent.default {
|
|
|
174
174
|
this.foundation.handleSelectionEnterPress(e);
|
|
175
175
|
};
|
|
176
176
|
|
|
177
|
-
this.
|
|
177
|
+
this.hasValue = () => {
|
|
178
178
|
const {
|
|
179
|
-
|
|
179
|
+
multiple,
|
|
180
|
+
checkRelation
|
|
180
181
|
} = this.props;
|
|
181
182
|
const {
|
|
182
|
-
|
|
183
|
+
realCheckedKeys,
|
|
184
|
+
checkedKeys,
|
|
185
|
+
selectedKeys
|
|
183
186
|
} = this.state;
|
|
184
|
-
|
|
187
|
+
let hasValue = false;
|
|
188
|
+
|
|
189
|
+
if (multiple) {
|
|
190
|
+
if (checkRelation === 'related') {
|
|
191
|
+
hasValue = Boolean(checkedKeys.size);
|
|
192
|
+
} else if (checkRelation === 'unRelated') {
|
|
193
|
+
hasValue = Boolean(realCheckedKeys.size);
|
|
194
|
+
}
|
|
195
|
+
} else {
|
|
196
|
+
hasValue = Boolean(selectedKeys.length);
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
return hasValue;
|
|
200
|
+
};
|
|
201
|
+
|
|
202
|
+
this.showClearBtn = () => {
|
|
185
203
|
const {
|
|
186
204
|
showClear,
|
|
187
205
|
disabled,
|
|
188
|
-
|
|
206
|
+
searchPosition
|
|
189
207
|
} = this.props;
|
|
190
208
|
const {
|
|
191
|
-
|
|
192
|
-
checkedKeys,
|
|
209
|
+
inputValue,
|
|
193
210
|
isOpen,
|
|
194
211
|
isHovering
|
|
195
212
|
} = this.state;
|
|
196
|
-
const
|
|
197
|
-
return showClear && (hasValue || triggerSearchHasInputValue) && !disabled && (isOpen || isHovering);
|
|
213
|
+
const triggerSearchHasInputValue = searchPosition === _constants.strings.SEARCH_POSITION_TRIGGER && inputValue;
|
|
214
|
+
return showClear && (this.hasValue() || triggerSearchHasInputValue) && !disabled && (isOpen || isHovering);
|
|
198
215
|
};
|
|
199
216
|
|
|
200
217
|
this.renderTagList = () => {
|
|
201
218
|
const {
|
|
202
219
|
checkedKeys,
|
|
203
220
|
keyEntities,
|
|
204
|
-
disabledKeys
|
|
221
|
+
disabledKeys,
|
|
222
|
+
realCheckedKeys
|
|
205
223
|
} = this.state;
|
|
206
224
|
const {
|
|
207
225
|
treeNodeLabelProp,
|
|
@@ -209,13 +227,21 @@ class TreeSelect extends _baseComponent.default {
|
|
|
209
227
|
disabled,
|
|
210
228
|
disableStrictly,
|
|
211
229
|
size,
|
|
230
|
+
checkRelation,
|
|
212
231
|
renderSelectedItem: propRenderSelectedItem
|
|
213
232
|
} = this.props;
|
|
214
233
|
const renderSelectedItem = (0, _isFunction2.default)(propRenderSelectedItem) ? propRenderSelectedItem : item => ({
|
|
215
234
|
isRenderInTag: true,
|
|
216
235
|
content: (0, _get2.default)(item, treeNodeLabelProp, null)
|
|
217
236
|
});
|
|
218
|
-
|
|
237
|
+
let renderKeys = [];
|
|
238
|
+
|
|
239
|
+
if (checkRelation === 'related') {
|
|
240
|
+
renderKeys = (0, _treeUtil.normalizeKeyList)([...checkedKeys], keyEntities, leafOnly);
|
|
241
|
+
} else if (checkRelation === 'unRelated') {
|
|
242
|
+
renderKeys = [...realCheckedKeys];
|
|
243
|
+
}
|
|
244
|
+
|
|
219
245
|
const tagList = []; // eslint-disable-next-line @typescript-eslint/no-shadow
|
|
220
246
|
|
|
221
247
|
(0, _forEach.default)(renderKeys).call(renderKeys, key => {
|
|
@@ -303,11 +329,6 @@ class TreeSelect extends _baseComponent.default {
|
|
|
303
329
|
searchPosition,
|
|
304
330
|
filterTreeNode
|
|
305
331
|
} = this.props;
|
|
306
|
-
const {
|
|
307
|
-
selectedKeys,
|
|
308
|
-
checkedKeys
|
|
309
|
-
} = this.state;
|
|
310
|
-
const hasValue = multiple ? Boolean(checkedKeys.size) : Boolean(selectedKeys.length);
|
|
311
332
|
const isTriggerPositionSearch = filterTreeNode && searchPosition === _constants.strings.SEARCH_POSITION_TRIGGER; // searchPosition = trigger
|
|
312
333
|
|
|
313
334
|
if (isTriggerPositionSearch) {
|
|
@@ -315,7 +336,7 @@ class TreeSelect extends _baseComponent.default {
|
|
|
315
336
|
} // searchPosition = dropdown and single seleciton
|
|
316
337
|
|
|
317
338
|
|
|
318
|
-
if (!multiple || !hasValue) {
|
|
339
|
+
if (!multiple || !this.hasValue()) {
|
|
319
340
|
const renderText = this.foundation.getRenderTextInSingle();
|
|
320
341
|
const spanCls = (0, _classnames.default)({
|
|
321
342
|
["".concat(prefixcls, "-selection-placeholder")]: !renderText
|
|
@@ -568,14 +589,23 @@ class TreeSelect extends _baseComponent.default {
|
|
|
568
589
|
size,
|
|
569
590
|
searchAutoFocus,
|
|
570
591
|
placeholder,
|
|
571
|
-
maxTagCount
|
|
592
|
+
maxTagCount,
|
|
593
|
+
checkRelation
|
|
572
594
|
} = this.props;
|
|
573
595
|
const {
|
|
574
596
|
keyEntities,
|
|
575
597
|
checkedKeys,
|
|
576
|
-
inputValue
|
|
598
|
+
inputValue,
|
|
599
|
+
realCheckedKeys
|
|
577
600
|
} = this.state;
|
|
578
|
-
|
|
601
|
+
let keyList = [];
|
|
602
|
+
|
|
603
|
+
if (checkRelation === 'related') {
|
|
604
|
+
keyList = (0, _treeUtil.normalizeKeyList)(checkedKeys, keyEntities, leafOnly);
|
|
605
|
+
} else if (checkRelation === 'unRelated') {
|
|
606
|
+
keyList = [...realCheckedKeys];
|
|
607
|
+
}
|
|
608
|
+
|
|
579
609
|
return /*#__PURE__*/_react.default.createElement(_tagInput.default, {
|
|
580
610
|
maxTagCount: maxTagCount,
|
|
581
611
|
disabled: disabled,
|
|
@@ -900,6 +930,7 @@ class TreeSelect extends _baseComponent.default {
|
|
|
900
930
|
selectedKeys: [],
|
|
901
931
|
checkedKeys: new _set.default(),
|
|
902
932
|
halfCheckedKeys: new _set.default(),
|
|
933
|
+
realCheckedKeys: new _set.default([]),
|
|
903
934
|
disabledKeys: new _set.default(),
|
|
904
935
|
motionKeys: new _set.default([]),
|
|
905
936
|
motionType: 'hide',
|
|
@@ -1020,12 +1051,16 @@ class TreeSelect extends _baseComponent.default {
|
|
|
1020
1051
|
}
|
|
1021
1052
|
|
|
1022
1053
|
if (checkedKeyValues) {
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1054
|
+
if (props.checkRelation === 'unRelated') {
|
|
1055
|
+
newState.realCheckedKeys = new _set.default(checkedKeyValues);
|
|
1056
|
+
} else if (props.checkRelation === 'related') {
|
|
1057
|
+
const {
|
|
1058
|
+
checkedKeys,
|
|
1059
|
+
halfCheckedKeys
|
|
1060
|
+
} = (0, _treeUtil.calcCheckedKeys)(checkedKeyValues, keyEntities);
|
|
1061
|
+
newState.checkedKeys = checkedKeys;
|
|
1062
|
+
newState.halfCheckedKeys = halfCheckedKeys;
|
|
1063
|
+
}
|
|
1029
1064
|
}
|
|
1030
1065
|
} // loadedKeys
|
|
1031
1066
|
|
|
@@ -1040,7 +1075,7 @@ class TreeSelect extends _baseComponent.default {
|
|
|
1040
1075
|
} // ================ disableStrictly =================
|
|
1041
1076
|
|
|
1042
1077
|
|
|
1043
|
-
if (treeData && props.disableStrictly) {
|
|
1078
|
+
if (treeData && props.disableStrictly && props.checkRelation === 'related') {
|
|
1044
1079
|
newState.disabledKeys = (0, _treeUtil.calcDisabledKeys)(keyEntities);
|
|
1045
1080
|
}
|
|
1046
1081
|
|
|
@@ -1307,6 +1342,7 @@ TreeSelect.propTypes = {
|
|
|
1307
1342
|
optionListStyle: _propTypes.default.object,
|
|
1308
1343
|
searchRender: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.bool]),
|
|
1309
1344
|
renderSelectedItem: _propTypes.default.func,
|
|
1345
|
+
checkRelation: _propTypes.default.string,
|
|
1310
1346
|
'aria-label': _propTypes.default.string
|
|
1311
1347
|
};
|
|
1312
1348
|
TreeSelect.defaultProps = {
|
|
@@ -1335,6 +1371,7 @@ TreeSelect.defaultProps = {
|
|
|
1335
1371
|
expandAction: false,
|
|
1336
1372
|
clickToHide: true,
|
|
1337
1373
|
searchAutoFocus: false,
|
|
1374
|
+
checkRelation: 'related',
|
|
1338
1375
|
'aria-label': 'TreeSelect'
|
|
1339
1376
|
};
|
|
1340
1377
|
var _default = TreeSelect;
|