choerodon-ui/es/rc-components/menu/MenuItem.js

An enterprise-class UI design language and React-based implementation

import _extends from "@babel/runtime/helpers/extends";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React from 'react';
import PropTypes from 'prop-types';
import createReactClass from 'create-react-class';
import { hide, show } from 'choerodon-ui/pro/lib/tooltip/singleton';
import isOverflow from 'choerodon-ui/pro/lib/overflow-tip/util';
import KeyCode from '../../_util/KeyCode';
import classNames from 'classnames';
import { connect } from 'mini-store';
import noop from 'lodash/noop';
import Checkbox from '../../checkbox/Checkbox';
import Ripple from '../../ripple';
/* eslint react/no-is-mounted:0 */

var MenuItem = createReactClass({
  displayName: 'MenuItem',
  propTypes: {
    rootPrefixCls: PropTypes.string,
    eventKey: PropTypes.string,
    active: PropTypes.bool,
    children: PropTypes.any,
    selectedKeys: PropTypes.array,
    disabled: PropTypes.bool,
    checkable: PropTypes.bool,
    title: PropTypes.string,
    onItemHover: PropTypes.func,
    onSelect: PropTypes.func,
    onClick: PropTypes.func,
    onDeselect: PropTypes.func,
    parentMenu: PropTypes.object,
    onDestroy: PropTypes.func,
    onMouseEnter: PropTypes.func,
    onMouseLeave: PropTypes.func,
    onMouseDown: PropTypes.func
  },
  getDefaultProps: function getDefaultProps() {
    return {
      onSelect: noop,
      onMouseEnter: noop,
      onMouseLeave: noop,
      onMouseDown: noop
    };
  },
  componentWillUnmount: function componentWillUnmount() {
    var props = this.props;

    if (props.onDestroy) {
      props.onDestroy(props.eventKey);
    }
  },
  componentDidMount: function componentDidMount() {
    // invoke customized ref to expose component to mixin
    if (this.props.manualRef) {
      this.props.manualRef(this);
    }
  },
  componentDidUpdate: function componentDidUpdate() {
    // invoke customized ref to expose component to mixin
    if (this.props.manualRef) {
      this.props.manualRef(this);
    }
  },
  onKeyDown: function onKeyDown(e) {
    var keyCode = e.keyCode;

    if (keyCode === KeyCode.ENTER) {
      this.onClick(e);
      return true;
    }
  },
  onMouseLeave: function onMouseLeave(e) {
    var _this$props = this.props,
        eventKey = _this$props.eventKey,
        onItemHover = _this$props.onItemHover,
        onMouseLeave = _this$props.onMouseLeave;
    onItemHover({
      key: eventKey,
      hover: false
    });
    onMouseLeave({
      key: eventKey,
      domEvent: e
    });
  },
  onMouseEnter: function onMouseEnter(e) {
    var _this$props2 = this.props,
        eventKey = _this$props2.eventKey,
        onItemHover = _this$props2.onItemHover,
        onMouseEnter = _this$props2.onMouseEnter;
    onItemHover({
      key: eventKey,
      hover: true
    });
    onMouseEnter({
      key: eventKey,
      domEvent: e
    });
  },
  handleRippleMouseEnter: function handleRippleMouseEnter(e) {
    var _this$props3 = this.props,
        tooltip = _this$props3.tooltip,
        tooltipTheme = _this$props3.tooltipTheme,
        children = _this$props3.children,
        mode = _this$props3.mode;
    var currentTarget = e.currentTarget;

    if (children && (tooltip === 'always' || tooltip === 'overflow' && isOverflow(currentTarget))) {
      show(currentTarget, {
        title: children,
        placement: mode === 'horizontal' ? 'top' : 'right',
        theme: tooltipTheme
      });
    }
  },
  onClick: function onClick(e) {
    var _this$props4 = this.props,
        eventKey = _this$props4.eventKey,
        multiple = _this$props4.multiple,
        onClick = _this$props4.onClick,
        onSelect = _this$props4.onSelect,
        onDeselect = _this$props4.onDeselect,
        isSelected = _this$props4.isSelected;
    var info = {
      key: eventKey,
      keyPath: [eventKey],
      item: this,
      domEvent: e
    };
    onClick(info);

    if (multiple) {
      if (isSelected) {
        onDeselect(info);
      } else {
        onSelect(info);
      }
    } else if (!isSelected) {
      onSelect(info);
    }
  },
  getPrefixCls: function getPrefixCls() {
    return "".concat(this.props.rootPrefixCls, "-item");
  },
  getActiveClassName: function getActiveClassName() {
    return "".concat(this.getPrefixCls(), "-active");
  },
  getSelectedClassName: function getSelectedClassName() {
    return "".concat(this.getPrefixCls(), "-selected");
  },
  getDisabledClassName: function getDisabledClassName() {
    return "".concat(this.getPrefixCls(), "-disabled");
  },
  render: function render() {
    var _classNames;

    var props = this.props;
    var className = classNames(this.getPrefixCls(), props.className, (_classNames = {}, _defineProperty(_classNames, this.getActiveClassName(), !props.disabled && props.active), _defineProperty(_classNames, this.getSelectedClassName(), props.isSelected), _defineProperty(_classNames, this.getDisabledClassName(), props.disabled), _classNames));

    var attrs = _objectSpread({}, props.attribute, {
      title: props.title,
      className: className,
      role: 'menuitem',
      'aria-selected': props.isSelected,
      'aria-disabled': props.disabled
    });

    var mouseEvent = {};

    if (!props.disabled) {
      mouseEvent = {
        onClick: this.onClick,
        onMouseLeave: this.onMouseLeave,
        onMouseEnter: this.onMouseEnter,
        onMouseDown: this.props.onMouseDown
      };
    }

    var style = _objectSpread({}, props.style);

    if (props.mode === 'inline') {
      style.paddingLeft = props.inlineIndent * props.level;
    }

    var checkbox = props.multiple && props.checkable !== false ? React.createElement(Checkbox, {
      disabled: props.disabled,
      checked: props.isSelected,
      tabIndex: -1
    }) : null;
    var rippleProps = {
      disabled: props.disabled
    };

    if (['overflow', 'always'].includes(props.tooltip)) {
      rippleProps.onMouseEnter = this.handleRippleMouseEnter;
      rippleProps.onMouseLeave = hide;
    }

    return React.createElement(Ripple, rippleProps, React.createElement("li", _extends({}, attrs, mouseEvent, {
      style: style
    }), checkbox, props.children));
  }
});
MenuItem.isMenuItem = 1;
export default connect(function (_ref, _ref2) {
  var activeKey = _ref.activeKey,
      selectedKeys = _ref.selectedKeys;
  var eventKey = _ref2.eventKey,
      subMenuKey = _ref2.subMenuKey;
  return {
    active: activeKey[subMenuKey] === eventKey,
    isSelected: selectedKeys.indexOf(eventKey) !== -1
  };
})(MenuItem);
//# sourceMappingURL=MenuItem.js.map