DropdownMenu.js 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. import Menu, { MenuItem } from 'rc-menu';
  2. import * as React from 'react';
  3. import MentionsContext from "./MentionsContext";
  4. /**
  5. * We only use Menu to display the candidate.
  6. * The focus is controlled by textarea to make accessibility easy.
  7. */
  8. function DropdownMenu(props) {
  9. var _React$useContext = React.useContext(MentionsContext),
  10. notFoundContent = _React$useContext.notFoundContent,
  11. activeIndex = _React$useContext.activeIndex,
  12. setActiveIndex = _React$useContext.setActiveIndex,
  13. selectOption = _React$useContext.selectOption,
  14. onFocus = _React$useContext.onFocus,
  15. onBlur = _React$useContext.onBlur,
  16. onScroll = _React$useContext.onScroll;
  17. var prefixCls = props.prefixCls,
  18. options = props.options;
  19. var activeOption = options[activeIndex] || {};
  20. return /*#__PURE__*/React.createElement(Menu, {
  21. prefixCls: "".concat(prefixCls, "-menu"),
  22. activeKey: activeOption.key,
  23. onSelect: function onSelect(_ref) {
  24. var key = _ref.key;
  25. var option = options.find(function (_ref2) {
  26. var optionKey = _ref2.key;
  27. return optionKey === key;
  28. });
  29. selectOption(option);
  30. },
  31. onFocus: onFocus,
  32. onBlur: onBlur,
  33. onScroll: onScroll
  34. }, options.map(function (option, index) {
  35. var key = option.key,
  36. disabled = option.disabled,
  37. className = option.className,
  38. style = option.style,
  39. label = option.label;
  40. return /*#__PURE__*/React.createElement(MenuItem, {
  41. key: key,
  42. disabled: disabled,
  43. className: className,
  44. style: style,
  45. onMouseEnter: function onMouseEnter() {
  46. setActiveIndex(index);
  47. }
  48. }, label);
  49. }), !options.length && /*#__PURE__*/React.createElement(MenuItem, {
  50. disabled: true
  51. }, notFoundContent));
  52. }
  53. export default DropdownMenu;