index.js 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. import React, { Component } from 'react';
  2. import { ContextMenu, MenuItem, SubMenu } from 'react-contextmenu';
  3. class ContextMenuLayout extends Component {
  4. getItem(item, index) {
  5. const { onTriggerClick } = this.props;
  6. return (
  7. <MenuItem key={index} onClick={onTriggerClick} disabled={item.disabled} data={item}>
  8. {item.name}
  9. </MenuItem>
  10. );
  11. }
  12. getSubItem(item, index) {
  13. return (
  14. <SubMenu key={index} title={item.name}>
  15. {item.list.map((_item, _index) => {
  16. return this.getItem(_item, _index);
  17. })}
  18. </SubMenu>
  19. );
  20. }
  21. render() {
  22. const { id, itemTrigger = [], onTriggerShow, onTriggerHide } = this.props;
  23. if (itemTrigger.length === 0) {
  24. itemTrigger.push({ key: 'none', disabled: true, name: '无' });
  25. }
  26. return (
  27. <ContextMenu id={id} onShow={onTriggerShow} onHide={onTriggerHide}>
  28. {itemTrigger.map((item, index) => {
  29. if (item.type === 'divider') {
  30. return <MenuItem divider />;
  31. }
  32. if (item.list && item.list.length > 0) {
  33. return this.getSubItem(item, index);
  34. }
  35. return this.getItem(item, index);
  36. })}
  37. </ContextMenu>
  38. );
  39. }
  40. }
  41. export default ContextMenuLayout;