@douyinfe/semi-ui 2.27.0-beta.0 → 2.27.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/dist/umd/semi-ui.js +52 -33
- 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/lib/cjs/select/index.js +14 -2
- package/lib/cjs/tabs/TabBar.js +3 -1
- package/lib/cjs/tooltip/index.js +1 -1
- package/lib/cjs/transfer/index.js +29 -29
- package/lib/es/select/index.js +14 -2
- package/lib/es/tabs/TabBar.js +3 -1
- package/lib/es/tooltip/index.js +1 -1
- package/lib/es/transfer/index.js +29 -29
- package/package.json +8 -8
package/lib/cjs/select/index.js
CHANGED
|
@@ -746,7 +746,10 @@ class Select extends _baseComponent.default {
|
|
|
746
746
|
style: style,
|
|
747
747
|
ref: this.setOptionContainerEl,
|
|
748
748
|
onKeyDown: e => this.foundation.handleContainerKeyDown(e)
|
|
749
|
-
}, outerTopSlot
|
|
749
|
+
}, outerTopSlot ? /*#__PURE__*/_react.default.createElement("div", {
|
|
750
|
+
className: "".concat(prefixcls, "-option-list-outer-top-slot"),
|
|
751
|
+
onMouseEnter: () => this.foundation.handleSlotMouseEnter()
|
|
752
|
+
}, outerTopSlot) : null, /*#__PURE__*/_react.default.createElement("div", {
|
|
750
753
|
style: {
|
|
751
754
|
maxHeight: "".concat(maxHeight, "px")
|
|
752
755
|
},
|
|
@@ -754,7 +757,16 @@ class Select extends _baseComponent.default {
|
|
|
754
757
|
role: "listbox",
|
|
755
758
|
"aria-multiselectable": multiple,
|
|
756
759
|
onScroll: e => this.foundation.handleListScroll(e)
|
|
757
|
-
}, innerTopSlot
|
|
760
|
+
}, innerTopSlot ? /*#__PURE__*/_react.default.createElement("div", {
|
|
761
|
+
className: "".concat(prefixcls, "-option-list-inner-top-slot"),
|
|
762
|
+
onMouseEnter: () => this.foundation.handleSlotMouseEnter()
|
|
763
|
+
}, innerTopSlot) : null, loading ? this.renderLoading() : isEmpty ? this.renderEmpty() : listContent, innerBottomSlot ? /*#__PURE__*/_react.default.createElement("div", {
|
|
764
|
+
className: "".concat(prefixcls, "-option-list-inner-bottom-slot"),
|
|
765
|
+
onMouseEnter: () => this.foundation.handleSlotMouseEnter()
|
|
766
|
+
}, innerBottomSlot) : null), outerBottomSlot ? /*#__PURE__*/_react.default.createElement("div", {
|
|
767
|
+
className: "".concat(prefixcls, "-option-list-outer-bottom-slot"),
|
|
768
|
+
onMouseEnter: () => this.foundation.handleSlotMouseEnter()
|
|
769
|
+
}, outerBottomSlot) : null)
|
|
758
770
|
);
|
|
759
771
|
}
|
|
760
772
|
|
package/lib/cjs/tabs/TabBar.js
CHANGED
|
@@ -177,7 +177,9 @@ class TabBar extends _react.default.Component {
|
|
|
177
177
|
render: disabled ? null : menu,
|
|
178
178
|
showTick: true,
|
|
179
179
|
style: dropdownStyle,
|
|
180
|
-
trigger: 'hover'
|
|
180
|
+
trigger: 'hover',
|
|
181
|
+
disableFocusListener // prevent the panel from popping up again after clicking
|
|
182
|
+
: true
|
|
181
183
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
182
184
|
role: "presentation",
|
|
183
185
|
className: arrowCls,
|
package/lib/cjs/tooltip/index.js
CHANGED
|
@@ -481,7 +481,7 @@ class Tooltip extends _baseComponent.default {
|
|
|
481
481
|
el = _reactDom.default.findDOMNode(el);
|
|
482
482
|
popupEl = _reactDom.default.findDOMNode(popupEl);
|
|
483
483
|
|
|
484
|
-
if (el && !el.contains(e.target) && popupEl && !popupEl.contains(e.target) || this.props.clickTriggerToHide) {
|
|
484
|
+
if (el && !el.contains(e.target) && popupEl && !popupEl.contains(e.target) || this.props.clickTriggerToHide && el && el.contains(e.target)) {
|
|
485
485
|
this.props.onClickOutSide(e);
|
|
486
486
|
cb();
|
|
487
487
|
}
|
|
@@ -49,7 +49,7 @@ var _semiIcons = require("@douyinfe/semi-icons");
|
|
|
49
49
|
|
|
50
50
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
51
51
|
|
|
52
|
-
const
|
|
52
|
+
const prefixCls = _constants.cssClasses.PREFIX; // SortableItem & SortableList should not be assigned inside of the render function
|
|
53
53
|
|
|
54
54
|
const SortableItem = (0, _reactSortableHoc.SortableElement)(props => props.item.node);
|
|
55
55
|
const SortableList = (0, _reactSortableHoc.SortableContainer)(_ref => {
|
|
@@ -57,7 +57,7 @@ const SortableList = (0, _reactSortableHoc.SortableContainer)(_ref => {
|
|
|
57
57
|
items
|
|
58
58
|
} = _ref;
|
|
59
59
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
60
|
-
className: "".concat(
|
|
60
|
+
className: "".concat(prefixCls, "-right-list"),
|
|
61
61
|
role: "list",
|
|
62
62
|
"aria-label": "Selected list"
|
|
63
63
|
}, items.map((item, index) =>
|
|
@@ -209,7 +209,7 @@ class Transfer extends _baseComponent.default {
|
|
|
209
209
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
210
210
|
role: "search",
|
|
211
211
|
"aria-label": "Transfer filter",
|
|
212
|
-
className: "".concat(
|
|
212
|
+
className: "".concat(prefixCls, "-filter")
|
|
213
213
|
}, /*#__PURE__*/_react.default.createElement(_index2.default, Object.assign({
|
|
214
214
|
prefix: /*#__PURE__*/_react.default.createElement(_semiIcons.IconSearch, null),
|
|
215
215
|
placeholder: locale.placeholder,
|
|
@@ -232,20 +232,20 @@ class Transfer extends _baseComponent.default {
|
|
|
232
232
|
showButton
|
|
233
233
|
} = headerConfig;
|
|
234
234
|
const headerCls = (0, _classnames.default)({
|
|
235
|
-
["".concat(
|
|
236
|
-
["".concat(
|
|
237
|
-
["".concat(
|
|
235
|
+
["".concat(prefixCls, "-header")]: true,
|
|
236
|
+
["".concat(prefixCls, "-right-header")]: type === 'right',
|
|
237
|
+
["".concat(prefixCls, "-left-header")]: type === 'left'
|
|
238
238
|
});
|
|
239
239
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
240
240
|
className: headerCls
|
|
241
241
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
242
|
-
className: "".concat(
|
|
242
|
+
className: "".concat(prefixCls, "-header-total")
|
|
243
243
|
}, totalContent), showButton ? /*#__PURE__*/_react.default.createElement(_button.default, {
|
|
244
244
|
theme: "borderless",
|
|
245
245
|
disabled: disabled,
|
|
246
246
|
type: "tertiary",
|
|
247
247
|
size: "small",
|
|
248
|
-
className: "".concat(
|
|
248
|
+
className: "".concat(prefixCls, "-header-all"),
|
|
249
249
|
onClick: onAllClick
|
|
250
250
|
}, allContent) : null);
|
|
251
251
|
}
|
|
@@ -268,8 +268,8 @@ class Transfer extends _baseComponent.default {
|
|
|
268
268
|
}
|
|
269
269
|
|
|
270
270
|
const leftItemCls = (0, _classnames.default)({
|
|
271
|
-
["".concat(
|
|
272
|
-
["".concat(
|
|
271
|
+
["".concat(prefixCls, "-item")]: true,
|
|
272
|
+
["".concat(prefixCls, "-item-disabled")]: item.disabled
|
|
273
273
|
});
|
|
274
274
|
return /*#__PURE__*/_react.default.createElement(_index.Checkbox, {
|
|
275
275
|
key: index,
|
|
@@ -376,12 +376,12 @@ class Transfer extends _baseComponent.default {
|
|
|
376
376
|
}
|
|
377
377
|
|
|
378
378
|
return /*#__PURE__*/_react.default.createElement("section", {
|
|
379
|
-
className: "".concat(
|
|
379
|
+
className: "".concat(prefixCls, "-left")
|
|
380
380
|
}, inputCom, content);
|
|
381
381
|
}
|
|
382
382
|
|
|
383
383
|
renderGroupTitle(group, index) {
|
|
384
|
-
const groupCls = (0, _classnames.default)("".concat(
|
|
384
|
+
const groupCls = (0, _classnames.default)("".concat(prefixCls, "-group-title"));
|
|
385
385
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
386
386
|
className: groupCls,
|
|
387
387
|
key: "title-".concat(index)
|
|
@@ -448,7 +448,7 @@ class Transfer extends _baseComponent.default {
|
|
|
448
448
|
}
|
|
449
449
|
});
|
|
450
450
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
451
|
-
className: "".concat(
|
|
451
|
+
className: "".concat(prefixCls, "-left-list"),
|
|
452
452
|
role: "list",
|
|
453
453
|
"aria-label": "Option list"
|
|
454
454
|
}, content);
|
|
@@ -465,9 +465,9 @@ class Transfer extends _baseComponent.default {
|
|
|
465
465
|
const onRemove = () => this.foundation.handleSelectOrRemove(item);
|
|
466
466
|
|
|
467
467
|
const rightItemCls = (0, _classnames.default)({
|
|
468
|
-
["".concat(
|
|
469
|
-
["".concat(
|
|
470
|
-
["".concat(
|
|
468
|
+
["".concat(prefixCls, "-item")]: true,
|
|
469
|
+
["".concat(prefixCls, "-right-item")]: true,
|
|
470
|
+
["".concat(prefixCls, "-right-item-draggable")]: draggable
|
|
471
471
|
});
|
|
472
472
|
const shouldShowPath = type === _constants.strings.TYPE_TREE_TO_LIST && showPath === true;
|
|
473
473
|
const label = shouldShowPath ? this.foundation._generatePath(item) : item.label;
|
|
@@ -482,7 +482,7 @@ class Transfer extends _baseComponent.default {
|
|
|
482
482
|
const DragHandle = (0, _reactSortableHoc.SortableHandle)(() => /*#__PURE__*/_react.default.createElement(_semiIcons.IconHandle, {
|
|
483
483
|
role: "button",
|
|
484
484
|
"aria-label": "Drag and sort",
|
|
485
|
-
className: "".concat(
|
|
485
|
+
className: "".concat(prefixCls, "-right-item-drag-handler")
|
|
486
486
|
}));
|
|
487
487
|
return (
|
|
488
488
|
/*#__PURE__*/
|
|
@@ -492,12 +492,12 @@ class Transfer extends _baseComponent.default {
|
|
|
492
492
|
className: rightItemCls,
|
|
493
493
|
key: item.key
|
|
494
494
|
}, draggable ? /*#__PURE__*/_react.default.createElement(DragHandle, null) : null, /*#__PURE__*/_react.default.createElement("div", {
|
|
495
|
-
className: "".concat(
|
|
495
|
+
className: "".concat(prefixCls, "-right-item-text")
|
|
496
496
|
}, label), /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
|
|
497
497
|
onClick: onRemove,
|
|
498
498
|
"aria-disabled": item.disabled,
|
|
499
|
-
className: (0, _classnames.default)("".concat(
|
|
500
|
-
["".concat(
|
|
499
|
+
className: (0, _classnames.default)("".concat(prefixCls, "-item-close-icon"), {
|
|
500
|
+
["".concat(prefixCls, "-item-close-icon-disabled")]: item.disabled
|
|
501
501
|
})
|
|
502
502
|
}))
|
|
503
503
|
);
|
|
@@ -505,9 +505,9 @@ class Transfer extends _baseComponent.default {
|
|
|
505
505
|
|
|
506
506
|
renderEmpty(type, emptyText) {
|
|
507
507
|
const emptyCls = (0, _classnames.default)({
|
|
508
|
-
["".concat(
|
|
509
|
-
["".concat(
|
|
510
|
-
["".concat(
|
|
508
|
+
["".concat(prefixCls, "-empty")]: true,
|
|
509
|
+
["".concat(prefixCls, "-right-empty")]: type === 'right',
|
|
510
|
+
["".concat(prefixCls, "-left-empty")]: type === 'left'
|
|
511
511
|
});
|
|
512
512
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
513
513
|
"aria-label": "empty",
|
|
@@ -523,7 +523,7 @@ class Transfer extends _baseComponent.default {
|
|
|
523
523
|
|
|
524
524
|
const sortList = /*#__PURE__*/_react.default.createElement(SortableList, {
|
|
525
525
|
useDragHandle: true,
|
|
526
|
-
helperClass: "".concat(
|
|
526
|
+
helperClass: "".concat(prefixCls, "-right-item-drag-item-move"),
|
|
527
527
|
onSortEnd: this.onSortEnd,
|
|
528
528
|
items: sortableListItems
|
|
529
529
|
});
|
|
@@ -565,7 +565,7 @@ class Transfer extends _baseComponent.default {
|
|
|
565
565
|
};
|
|
566
566
|
const headerCom = this.renderHeader(headerConfig);
|
|
567
567
|
const emptyCom = this.renderEmpty('right', emptyContent.right ? emptyContent.right : locale.emptyRight);
|
|
568
|
-
const panelCls = "".concat(
|
|
568
|
+
const panelCls = "".concat(prefixCls, "-right");
|
|
569
569
|
let content = null;
|
|
570
570
|
|
|
571
571
|
switch (true) {
|
|
@@ -576,7 +576,7 @@ class Transfer extends _baseComponent.default {
|
|
|
576
576
|
|
|
577
577
|
case selectedData.length && !draggable:
|
|
578
578
|
const list = /*#__PURE__*/_react.default.createElement("div", {
|
|
579
|
-
className: "".concat(
|
|
579
|
+
className: "".concat(prefixCls, "-right-list"),
|
|
580
580
|
role: "list",
|
|
581
581
|
"aria-label": "Selected list"
|
|
582
582
|
}, selectedData.map(item => this.renderRightItem(Object.assign({}, item))));
|
|
@@ -605,9 +605,9 @@ class Transfer extends _baseComponent.default {
|
|
|
605
605
|
renderSelectedPanel,
|
|
606
606
|
renderSourcePanel
|
|
607
607
|
} = this.props;
|
|
608
|
-
const transferCls = (0, _classnames.default)(
|
|
609
|
-
["".concat(
|
|
610
|
-
["".concat(
|
|
608
|
+
const transferCls = (0, _classnames.default)(prefixCls, className, {
|
|
609
|
+
["".concat(prefixCls, "-disabled")]: disabled,
|
|
610
|
+
["".concat(prefixCls, "-custom-panel")]: renderSelectedPanel && renderSourcePanel
|
|
611
611
|
});
|
|
612
612
|
return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
|
|
613
613
|
componentName: "Transfer"
|
package/lib/es/select/index.js
CHANGED
|
@@ -699,7 +699,10 @@ class Select extends BaseComponent {
|
|
|
699
699
|
style: style,
|
|
700
700
|
ref: this.setOptionContainerEl,
|
|
701
701
|
onKeyDown: e => this.foundation.handleContainerKeyDown(e)
|
|
702
|
-
}, outerTopSlot
|
|
702
|
+
}, outerTopSlot ? /*#__PURE__*/React.createElement("div", {
|
|
703
|
+
className: "".concat(prefixcls, "-option-list-outer-top-slot"),
|
|
704
|
+
onMouseEnter: () => this.foundation.handleSlotMouseEnter()
|
|
705
|
+
}, outerTopSlot) : null, /*#__PURE__*/React.createElement("div", {
|
|
703
706
|
style: {
|
|
704
707
|
maxHeight: "".concat(maxHeight, "px")
|
|
705
708
|
},
|
|
@@ -707,7 +710,16 @@ class Select extends BaseComponent {
|
|
|
707
710
|
role: "listbox",
|
|
708
711
|
"aria-multiselectable": multiple,
|
|
709
712
|
onScroll: e => this.foundation.handleListScroll(e)
|
|
710
|
-
}, innerTopSlot
|
|
713
|
+
}, innerTopSlot ? /*#__PURE__*/React.createElement("div", {
|
|
714
|
+
className: "".concat(prefixcls, "-option-list-inner-top-slot"),
|
|
715
|
+
onMouseEnter: () => this.foundation.handleSlotMouseEnter()
|
|
716
|
+
}, innerTopSlot) : null, loading ? this.renderLoading() : isEmpty ? this.renderEmpty() : listContent, innerBottomSlot ? /*#__PURE__*/React.createElement("div", {
|
|
717
|
+
className: "".concat(prefixcls, "-option-list-inner-bottom-slot"),
|
|
718
|
+
onMouseEnter: () => this.foundation.handleSlotMouseEnter()
|
|
719
|
+
}, innerBottomSlot) : null), outerBottomSlot ? /*#__PURE__*/React.createElement("div", {
|
|
720
|
+
className: "".concat(prefixcls, "-option-list-outer-bottom-slot"),
|
|
721
|
+
onMouseEnter: () => this.foundation.handleSlotMouseEnter()
|
|
722
|
+
}, outerBottomSlot) : null)
|
|
711
723
|
);
|
|
712
724
|
}
|
|
713
725
|
|
package/lib/es/tabs/TabBar.js
CHANGED
|
@@ -157,7 +157,9 @@ class TabBar extends React.Component {
|
|
|
157
157
|
render: disabled ? null : menu,
|
|
158
158
|
showTick: true,
|
|
159
159
|
style: dropdownStyle,
|
|
160
|
-
trigger: 'hover'
|
|
160
|
+
trigger: 'hover',
|
|
161
|
+
disableFocusListener // prevent the panel from popping up again after clicking
|
|
162
|
+
: true
|
|
161
163
|
}, /*#__PURE__*/React.createElement("div", {
|
|
162
164
|
role: "presentation",
|
|
163
165
|
className: arrowCls,
|
package/lib/es/tooltip/index.js
CHANGED
|
@@ -450,7 +450,7 @@ export default class Tooltip extends BaseComponent {
|
|
|
450
450
|
el = ReactDOM.findDOMNode(el);
|
|
451
451
|
popupEl = ReactDOM.findDOMNode(popupEl);
|
|
452
452
|
|
|
453
|
-
if (el && !el.contains(e.target) && popupEl && !popupEl.contains(e.target) || this.props.clickTriggerToHide) {
|
|
453
|
+
if (el && !el.contains(e.target) && popupEl && !popupEl.contains(e.target) || this.props.clickTriggerToHide && el && el.contains(e.target)) {
|
|
454
454
|
this.props.onClickOutSide(e);
|
|
455
455
|
cb();
|
|
456
456
|
}
|
package/lib/es/transfer/index.js
CHANGED
|
@@ -19,7 +19,7 @@ import Spin from '../spin';
|
|
|
19
19
|
import Button from '../button';
|
|
20
20
|
import Tree from '../tree';
|
|
21
21
|
import { IconClose, IconSearch, IconHandle } from '@douyinfe/semi-icons';
|
|
22
|
-
const
|
|
22
|
+
const prefixCls = cssClasses.PREFIX; // SortableItem & SortableList should not be assigned inside of the render function
|
|
23
23
|
|
|
24
24
|
const SortableItem = SortableElement(props => props.item.node);
|
|
25
25
|
const SortableList = SortableContainer(_ref => {
|
|
@@ -27,7 +27,7 @@ const SortableList = SortableContainer(_ref => {
|
|
|
27
27
|
items
|
|
28
28
|
} = _ref;
|
|
29
29
|
return /*#__PURE__*/React.createElement("div", {
|
|
30
|
-
className: "".concat(
|
|
30
|
+
className: "".concat(prefixCls, "-right-list"),
|
|
31
31
|
role: "list",
|
|
32
32
|
"aria-label": "Selected list"
|
|
33
33
|
}, items.map((item, index) =>
|
|
@@ -179,7 +179,7 @@ class Transfer extends BaseComponent {
|
|
|
179
179
|
return /*#__PURE__*/React.createElement("div", {
|
|
180
180
|
role: "search",
|
|
181
181
|
"aria-label": "Transfer filter",
|
|
182
|
-
className: "".concat(
|
|
182
|
+
className: "".concat(prefixCls, "-filter")
|
|
183
183
|
}, /*#__PURE__*/React.createElement(Input, Object.assign({
|
|
184
184
|
prefix: /*#__PURE__*/React.createElement(IconSearch, null),
|
|
185
185
|
placeholder: locale.placeholder,
|
|
@@ -202,20 +202,20 @@ class Transfer extends BaseComponent {
|
|
|
202
202
|
showButton
|
|
203
203
|
} = headerConfig;
|
|
204
204
|
const headerCls = cls({
|
|
205
|
-
["".concat(
|
|
206
|
-
["".concat(
|
|
207
|
-
["".concat(
|
|
205
|
+
["".concat(prefixCls, "-header")]: true,
|
|
206
|
+
["".concat(prefixCls, "-right-header")]: type === 'right',
|
|
207
|
+
["".concat(prefixCls, "-left-header")]: type === 'left'
|
|
208
208
|
});
|
|
209
209
|
return /*#__PURE__*/React.createElement("div", {
|
|
210
210
|
className: headerCls
|
|
211
211
|
}, /*#__PURE__*/React.createElement("span", {
|
|
212
|
-
className: "".concat(
|
|
212
|
+
className: "".concat(prefixCls, "-header-total")
|
|
213
213
|
}, totalContent), showButton ? /*#__PURE__*/React.createElement(Button, {
|
|
214
214
|
theme: "borderless",
|
|
215
215
|
disabled: disabled,
|
|
216
216
|
type: "tertiary",
|
|
217
217
|
size: "small",
|
|
218
|
-
className: "".concat(
|
|
218
|
+
className: "".concat(prefixCls, "-header-all"),
|
|
219
219
|
onClick: onAllClick
|
|
220
220
|
}, allContent) : null);
|
|
221
221
|
}
|
|
@@ -238,8 +238,8 @@ class Transfer extends BaseComponent {
|
|
|
238
238
|
}
|
|
239
239
|
|
|
240
240
|
const leftItemCls = cls({
|
|
241
|
-
["".concat(
|
|
242
|
-
["".concat(
|
|
241
|
+
["".concat(prefixCls, "-item")]: true,
|
|
242
|
+
["".concat(prefixCls, "-item-disabled")]: item.disabled
|
|
243
243
|
});
|
|
244
244
|
return /*#__PURE__*/React.createElement(Checkbox, {
|
|
245
245
|
key: index,
|
|
@@ -344,12 +344,12 @@ class Transfer extends BaseComponent {
|
|
|
344
344
|
}
|
|
345
345
|
|
|
346
346
|
return /*#__PURE__*/React.createElement("section", {
|
|
347
|
-
className: "".concat(
|
|
347
|
+
className: "".concat(prefixCls, "-left")
|
|
348
348
|
}, inputCom, content);
|
|
349
349
|
}
|
|
350
350
|
|
|
351
351
|
renderGroupTitle(group, index) {
|
|
352
|
-
const groupCls = cls("".concat(
|
|
352
|
+
const groupCls = cls("".concat(prefixCls, "-group-title"));
|
|
353
353
|
return /*#__PURE__*/React.createElement("div", {
|
|
354
354
|
className: groupCls,
|
|
355
355
|
key: "title-".concat(index)
|
|
@@ -417,7 +417,7 @@ class Transfer extends BaseComponent {
|
|
|
417
417
|
}
|
|
418
418
|
});
|
|
419
419
|
return /*#__PURE__*/React.createElement("div", {
|
|
420
|
-
className: "".concat(
|
|
420
|
+
className: "".concat(prefixCls, "-left-list"),
|
|
421
421
|
role: "list",
|
|
422
422
|
"aria-label": "Option list"
|
|
423
423
|
}, content);
|
|
@@ -434,9 +434,9 @@ class Transfer extends BaseComponent {
|
|
|
434
434
|
const onRemove = () => this.foundation.handleSelectOrRemove(item);
|
|
435
435
|
|
|
436
436
|
const rightItemCls = cls({
|
|
437
|
-
["".concat(
|
|
438
|
-
["".concat(
|
|
439
|
-
["".concat(
|
|
437
|
+
["".concat(prefixCls, "-item")]: true,
|
|
438
|
+
["".concat(prefixCls, "-right-item")]: true,
|
|
439
|
+
["".concat(prefixCls, "-right-item-draggable")]: draggable
|
|
440
440
|
});
|
|
441
441
|
const shouldShowPath = type === strings.TYPE_TREE_TO_LIST && showPath === true;
|
|
442
442
|
const label = shouldShowPath ? this.foundation._generatePath(item) : item.label;
|
|
@@ -451,7 +451,7 @@ class Transfer extends BaseComponent {
|
|
|
451
451
|
const DragHandle = SortableHandle(() => /*#__PURE__*/React.createElement(IconHandle, {
|
|
452
452
|
role: "button",
|
|
453
453
|
"aria-label": "Drag and sort",
|
|
454
|
-
className: "".concat(
|
|
454
|
+
className: "".concat(prefixCls, "-right-item-drag-handler")
|
|
455
455
|
}));
|
|
456
456
|
return (
|
|
457
457
|
/*#__PURE__*/
|
|
@@ -461,12 +461,12 @@ class Transfer extends BaseComponent {
|
|
|
461
461
|
className: rightItemCls,
|
|
462
462
|
key: item.key
|
|
463
463
|
}, draggable ? /*#__PURE__*/React.createElement(DragHandle, null) : null, /*#__PURE__*/React.createElement("div", {
|
|
464
|
-
className: "".concat(
|
|
464
|
+
className: "".concat(prefixCls, "-right-item-text")
|
|
465
465
|
}, label), /*#__PURE__*/React.createElement(IconClose, {
|
|
466
466
|
onClick: onRemove,
|
|
467
467
|
"aria-disabled": item.disabled,
|
|
468
|
-
className: cls("".concat(
|
|
469
|
-
["".concat(
|
|
468
|
+
className: cls("".concat(prefixCls, "-item-close-icon"), {
|
|
469
|
+
["".concat(prefixCls, "-item-close-icon-disabled")]: item.disabled
|
|
470
470
|
})
|
|
471
471
|
}))
|
|
472
472
|
);
|
|
@@ -474,9 +474,9 @@ class Transfer extends BaseComponent {
|
|
|
474
474
|
|
|
475
475
|
renderEmpty(type, emptyText) {
|
|
476
476
|
const emptyCls = cls({
|
|
477
|
-
["".concat(
|
|
478
|
-
["".concat(
|
|
479
|
-
["".concat(
|
|
477
|
+
["".concat(prefixCls, "-empty")]: true,
|
|
478
|
+
["".concat(prefixCls, "-right-empty")]: type === 'right',
|
|
479
|
+
["".concat(prefixCls, "-left-empty")]: type === 'left'
|
|
480
480
|
});
|
|
481
481
|
return /*#__PURE__*/React.createElement("div", {
|
|
482
482
|
"aria-label": "empty",
|
|
@@ -492,7 +492,7 @@ class Transfer extends BaseComponent {
|
|
|
492
492
|
|
|
493
493
|
const sortList = /*#__PURE__*/React.createElement(SortableList, {
|
|
494
494
|
useDragHandle: true,
|
|
495
|
-
helperClass: "".concat(
|
|
495
|
+
helperClass: "".concat(prefixCls, "-right-item-drag-item-move"),
|
|
496
496
|
onSortEnd: this.onSortEnd,
|
|
497
497
|
items: sortableListItems
|
|
498
498
|
});
|
|
@@ -533,7 +533,7 @@ class Transfer extends BaseComponent {
|
|
|
533
533
|
};
|
|
534
534
|
const headerCom = this.renderHeader(headerConfig);
|
|
535
535
|
const emptyCom = this.renderEmpty('right', emptyContent.right ? emptyContent.right : locale.emptyRight);
|
|
536
|
-
const panelCls = "".concat(
|
|
536
|
+
const panelCls = "".concat(prefixCls, "-right");
|
|
537
537
|
let content = null;
|
|
538
538
|
|
|
539
539
|
switch (true) {
|
|
@@ -544,7 +544,7 @@ class Transfer extends BaseComponent {
|
|
|
544
544
|
|
|
545
545
|
case selectedData.length && !draggable:
|
|
546
546
|
const list = /*#__PURE__*/React.createElement("div", {
|
|
547
|
-
className: "".concat(
|
|
547
|
+
className: "".concat(prefixCls, "-right-list"),
|
|
548
548
|
role: "list",
|
|
549
549
|
"aria-label": "Selected list"
|
|
550
550
|
}, selectedData.map(item => this.renderRightItem(Object.assign({}, item))));
|
|
@@ -572,9 +572,9 @@ class Transfer extends BaseComponent {
|
|
|
572
572
|
renderSelectedPanel,
|
|
573
573
|
renderSourcePanel
|
|
574
574
|
} = this.props;
|
|
575
|
-
const transferCls = cls(
|
|
576
|
-
["".concat(
|
|
577
|
-
["".concat(
|
|
575
|
+
const transferCls = cls(prefixCls, className, {
|
|
576
|
+
["".concat(prefixCls, "-disabled")]: disabled,
|
|
577
|
+
["".concat(prefixCls, "-custom-panel")]: renderSelectedPanel && renderSourcePanel
|
|
578
578
|
});
|
|
579
579
|
return /*#__PURE__*/React.createElement(LocaleConsumer, {
|
|
580
580
|
componentName: "Transfer"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@douyinfe/semi-ui",
|
|
3
|
-
"version": "2.27.0
|
|
3
|
+
"version": "2.27.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es/index.js",
|
|
@@ -17,12 +17,12 @@
|
|
|
17
17
|
"lib/*"
|
|
18
18
|
],
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@douyinfe/semi-animation": "2.27.0
|
|
21
|
-
"@douyinfe/semi-animation-react": "2.27.0
|
|
22
|
-
"@douyinfe/semi-foundation": "2.27.0
|
|
23
|
-
"@douyinfe/semi-icons": "2.27.0
|
|
24
|
-
"@douyinfe/semi-illustrations": "2.27.0
|
|
25
|
-
"@douyinfe/semi-theme-default": "2.27.0
|
|
20
|
+
"@douyinfe/semi-animation": "2.27.0",
|
|
21
|
+
"@douyinfe/semi-animation-react": "2.27.0",
|
|
22
|
+
"@douyinfe/semi-foundation": "2.27.0",
|
|
23
|
+
"@douyinfe/semi-icons": "2.27.0",
|
|
24
|
+
"@douyinfe/semi-illustrations": "2.27.0",
|
|
25
|
+
"@douyinfe/semi-theme-default": "2.27.0",
|
|
26
26
|
"async-validator": "^3.5.0",
|
|
27
27
|
"classnames": "^2.2.6",
|
|
28
28
|
"copy-text-to-clipboard": "^2.1.1",
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
],
|
|
70
70
|
"author": "",
|
|
71
71
|
"license": "MIT",
|
|
72
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "a7a3f537ef48f75e3824c156e9b25a084e562dd6",
|
|
73
73
|
"devDependencies": {
|
|
74
74
|
"@babel/plugin-proposal-decorators": "^7.15.8",
|
|
75
75
|
"@babel/plugin-transform-runtime": "^7.15.8",
|