DropdownMenu.js
2.56 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
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
import Menu, { MenuItem } from 'rc-menu';
import * as React from 'react';
import { MentionsContextConsumer } from './MentionsContext';
/**
* We only use Menu to display the candidate.
* The focus is controlled by textarea to make accessibility easy.
*/
var DropdownMenu = /*#__PURE__*/function (_React$Component) {
_inherits(DropdownMenu, _React$Component);
var _super = _createSuper(DropdownMenu);
function DropdownMenu() {
var _this;
_classCallCheck(this, DropdownMenu);
_this = _super.apply(this, arguments);
_this.renderDropdown = function (_ref) {
var notFoundContent = _ref.notFoundContent,
activeIndex = _ref.activeIndex,
setActiveIndex = _ref.setActiveIndex,
selectOption = _ref.selectOption,
onFocus = _ref.onFocus,
onBlur = _ref.onBlur;
var _this$props = _this.props,
prefixCls = _this$props.prefixCls,
options = _this$props.options;
var activeOption = options[activeIndex] || {};
return React.createElement(Menu, {
prefixCls: "".concat(prefixCls, "-menu"),
activeKey: activeOption.key,
onSelect: function onSelect(_ref2) {
var key = _ref2.key;
var option = options.find(function (_ref3) {
var optionKey = _ref3.key;
return optionKey === key;
});
selectOption(option);
},
onFocus: onFocus,
onBlur: onBlur
}, options.map(function (option, index) {
var key = option.key,
disabled = option.disabled,
children = option.children,
className = option.className,
style = option.style;
return React.createElement(MenuItem, {
key: key,
disabled: disabled,
className: className,
style: style,
onMouseEnter: function onMouseEnter() {
setActiveIndex(index);
}
}, children);
}), !options.length && React.createElement(MenuItem, {
disabled: true
}, notFoundContent));
};
return _this;
}
_createClass(DropdownMenu, [{
key: "render",
value: function render() {
return React.createElement(MentionsContextConsumer, null, this.renderDropdown);
}
}]);
return DropdownMenu;
}(React.Component);
export default DropdownMenu;