TabNode.js
2.88 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import * as React from 'react';
import classNames from 'classnames';
import KeyCode from "rc-util/es/KeyCode";
function TabNode(_ref, ref) {
var _classNames;
var prefixCls = _ref.prefixCls,
id = _ref.id,
active = _ref.active,
rtl = _ref.rtl,
_ref$tab = _ref.tab,
key = _ref$tab.key,
tab = _ref$tab.tab,
disabled = _ref$tab.disabled,
closeIcon = _ref$tab.closeIcon,
tabBarGutter = _ref.tabBarGutter,
tabPosition = _ref.tabPosition,
closable = _ref.closable,
renderWrapper = _ref.renderWrapper,
removeAriaLabel = _ref.removeAriaLabel,
editable = _ref.editable,
onClick = _ref.onClick,
onRemove = _ref.onRemove,
onFocus = _ref.onFocus;
var tabPrefix = "".concat(prefixCls, "-tab");
React.useEffect(function () {
return onRemove;
}, []);
var nodeStyle = {};
if (tabPosition === 'top' || tabPosition === 'bottom') {
nodeStyle[rtl ? 'marginLeft' : 'marginRight'] = tabBarGutter;
} else {
nodeStyle.marginBottom = tabBarGutter;
}
var removable = editable && closable !== false && !disabled;
function onInternalClick(e) {
if (disabled) return;
onClick(e);
}
function onRemoveTab(event) {
event.preventDefault();
event.stopPropagation();
editable.onEdit('remove', {
key: key,
event: event
});
}
var node = /*#__PURE__*/React.createElement("div", {
key: key,
ref: ref,
className: classNames(tabPrefix, (_classNames = {}, _defineProperty(_classNames, "".concat(tabPrefix, "-with-remove"), removable), _defineProperty(_classNames, "".concat(tabPrefix, "-active"), active), _defineProperty(_classNames, "".concat(tabPrefix, "-disabled"), disabled), _classNames)),
style: nodeStyle,
onClick: onInternalClick
}, /*#__PURE__*/React.createElement("div", {
role: "tab",
"aria-selected": active,
id: id && "".concat(id, "-tab-").concat(key),
className: "".concat(tabPrefix, "-btn"),
"aria-controls": id && "".concat(id, "-panel-").concat(key),
"aria-disabled": disabled,
tabIndex: disabled ? null : 0,
onClick: function onClick(e) {
e.stopPropagation();
onInternalClick(e);
},
onKeyDown: function onKeyDown(e) {
if ([KeyCode.SPACE, KeyCode.ENTER].includes(e.which)) {
e.preventDefault();
onInternalClick(e);
}
},
onFocus: onFocus
}, tab), removable && /*#__PURE__*/React.createElement("button", {
type: "button",
"aria-label": removeAriaLabel || 'remove',
tabIndex: 0,
className: "".concat(tabPrefix, "-remove"),
onClick: function onClick(e) {
e.stopPropagation();
onRemoveTab(e);
}
}, closeIcon || editable.removeIcon || '×'));
if (renderWrapper) {
node = renderWrapper(node);
}
return node;
}
export default /*#__PURE__*/React.forwardRef(TabNode);