1 | import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
2 | import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
3 | import * as React from 'react';
|
4 | import classNames from 'classnames';
|
5 | import { useState, useEffect } from 'react';
|
6 | import KeyCode from "rc-util/es/KeyCode";
|
7 | import Menu, { MenuItem } from 'rc-menu';
|
8 | import Dropdown from 'rc-dropdown';
|
9 | import AddButton from './AddButton';
|
10 |
|
11 | function OperationNode(_ref, ref) {
|
12 | var prefixCls = _ref.prefixCls,
|
13 | id = _ref.id,
|
14 | tabs = _ref.tabs,
|
15 | locale = _ref.locale,
|
16 | mobile = _ref.mobile,
|
17 | _ref$moreIcon = _ref.moreIcon,
|
18 | moreIcon = _ref$moreIcon === void 0 ? 'More' : _ref$moreIcon,
|
19 | moreTransitionName = _ref.moreTransitionName,
|
20 | style = _ref.style,
|
21 | className = _ref.className,
|
22 | editable = _ref.editable,
|
23 | tabBarGutter = _ref.tabBarGutter,
|
24 | rtl = _ref.rtl,
|
25 | onTabClick = _ref.onTabClick;
|
26 |
|
27 |
|
28 | var _useState = useState(false),
|
29 | _useState2 = _slicedToArray(_useState, 2),
|
30 | open = _useState2[0],
|
31 | setOpen = _useState2[1];
|
32 |
|
33 | var _useState3 = useState(null),
|
34 | _useState4 = _slicedToArray(_useState3, 2),
|
35 | selectedKey = _useState4[0],
|
36 | setSelectedKey = _useState4[1];
|
37 |
|
38 | var popupId = "".concat(id, "-more-popup");
|
39 | var dropdownPrefix = "".concat(prefixCls, "-dropdown");
|
40 | var selectedItemId = selectedKey !== null ? "".concat(popupId, "-").concat(selectedKey) : null;
|
41 | var dropdownAriaLabel = locale === null || locale === void 0 ? void 0 : locale.dropdownAriaLabel;
|
42 | var menu = React.createElement(Menu, {
|
43 | onClick: function onClick(_ref2) {
|
44 | var key = _ref2.key,
|
45 | domEvent = _ref2.domEvent;
|
46 | onTabClick(key, domEvent);
|
47 | setOpen(false);
|
48 | },
|
49 | id: popupId,
|
50 | tabIndex: -1,
|
51 | role: "listbox",
|
52 | "aria-activedescendant": selectedItemId,
|
53 | selectedKeys: [selectedKey],
|
54 | "aria-label": dropdownAriaLabel !== undefined ? dropdownAriaLabel : 'expanded dropdown'
|
55 | }, tabs.map(function (tab) {
|
56 | return React.createElement(MenuItem, {
|
57 | key: tab.key,
|
58 | id: "".concat(popupId, "-").concat(tab.key),
|
59 | role: "option",
|
60 | "aria-controls": id && "".concat(id, "-panel-").concat(tab.key),
|
61 | disabled: tab.disabled
|
62 | }, tab.tab);
|
63 | }));
|
64 |
|
65 | function selectOffset(offset) {
|
66 | var enabledTabs = tabs.filter(function (tab) {
|
67 | return !tab.disabled;
|
68 | });
|
69 | var selectedIndex = enabledTabs.findIndex(function (tab) {
|
70 | return tab.key === selectedKey;
|
71 | }) || 0;
|
72 | var len = enabledTabs.length;
|
73 |
|
74 | for (var i = 0; i < len; i += 1) {
|
75 | selectedIndex = (selectedIndex + offset + len) % len;
|
76 | var tab = enabledTabs[selectedIndex];
|
77 |
|
78 | if (!tab.disabled) {
|
79 | setSelectedKey(tab.key);
|
80 | return;
|
81 | }
|
82 | }
|
83 | }
|
84 |
|
85 | function onKeyDown(e) {
|
86 | var which = e.which;
|
87 |
|
88 | if (!open) {
|
89 | if ([KeyCode.DOWN, KeyCode.SPACE, KeyCode.ENTER].includes(which)) {
|
90 | setOpen(true);
|
91 | e.preventDefault();
|
92 | }
|
93 |
|
94 | return;
|
95 | }
|
96 |
|
97 | switch (which) {
|
98 | case KeyCode.UP:
|
99 | selectOffset(-1);
|
100 | e.preventDefault();
|
101 | break;
|
102 |
|
103 | case KeyCode.DOWN:
|
104 | selectOffset(1);
|
105 | e.preventDefault();
|
106 | break;
|
107 |
|
108 | case KeyCode.ESC:
|
109 | setOpen(false);
|
110 | break;
|
111 |
|
112 | case KeyCode.SPACE:
|
113 | case KeyCode.ENTER:
|
114 | if (selectedKey !== null) onTabClick(selectedKey, e);
|
115 | break;
|
116 | }
|
117 | }
|
118 |
|
119 |
|
120 | useEffect(function () {
|
121 |
|
122 | var ele = document.getElementById(selectedItemId);
|
123 |
|
124 | if (ele && ele.scrollIntoView) {
|
125 | ele.scrollIntoView(false);
|
126 | }
|
127 | }, [selectedKey]);
|
128 | useEffect(function () {
|
129 | if (!open) {
|
130 | setSelectedKey(null);
|
131 | }
|
132 | }, [open]);
|
133 |
|
134 | var moreStyle = _defineProperty({}, rtl ? 'marginRight' : 'marginLeft', tabBarGutter);
|
135 |
|
136 | if (!tabs.length) {
|
137 | moreStyle.visibility = 'hidden';
|
138 | moreStyle.order = 1;
|
139 | }
|
140 |
|
141 | var overlayClassName = classNames(_defineProperty({}, "".concat(dropdownPrefix, "-rtl"), rtl));
|
142 | var moreNode = mobile ? null : React.createElement(Dropdown, {
|
143 | prefixCls: dropdownPrefix,
|
144 | overlay: menu,
|
145 | trigger: ['hover'],
|
146 | visible: open,
|
147 | transitionName: moreTransitionName,
|
148 | onVisibleChange: setOpen,
|
149 | overlayClassName: overlayClassName,
|
150 | mouseEnterDelay: 0.1,
|
151 | mouseLeaveDelay: 0.1
|
152 | }, React.createElement("button", {
|
153 | type: "button",
|
154 | className: "".concat(prefixCls, "-nav-more"),
|
155 | style: moreStyle,
|
156 | tabIndex: -1,
|
157 | "aria-hidden": "true",
|
158 | "aria-haspopup": "listbox",
|
159 | "aria-controls": popupId,
|
160 | id: "".concat(id, "-more"),
|
161 | "aria-expanded": open,
|
162 | onKeyDown: onKeyDown
|
163 | }, moreIcon));
|
164 | return React.createElement("div", {
|
165 | className: classNames("".concat(prefixCls, "-nav-operations"), className),
|
166 | style: style,
|
167 | ref: ref
|
168 | }, moreNode, React.createElement(AddButton, {
|
169 | prefixCls: prefixCls,
|
170 | locale: locale,
|
171 | editable: editable
|
172 | }));
|
173 | }
|
174 |
|
175 | export default React.forwardRef(OperationNode); |
\ | No newline at end of file |