choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
241 lines (210 loc) • 7.75 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _createReactClass = _interopRequireDefault(require("create-react-class"));
var _singleton = require("choerodon-ui/pro/lib/tooltip/singleton");
var _util = _interopRequireDefault(require("choerodon-ui/pro/lib/overflow-tip/util"));
var _KeyCode = _interopRequireDefault(require("../../_util/KeyCode"));
var _classnames = _interopRequireDefault(require("classnames"));
var _miniStore = require("mini-store");
var _noop = _interopRequireDefault(require("lodash/noop"));
var _Checkbox = _interopRequireDefault(require("../../checkbox/Checkbox"));
var _ripple = _interopRequireDefault(require("../../ripple"));
/* eslint react/no-is-mounted:0 */
var MenuItem = (0, _createReactClass["default"])({
displayName: 'MenuItem',
propTypes: {
rootPrefixCls: _propTypes["default"].string,
eventKey: _propTypes["default"].string,
active: _propTypes["default"].bool,
children: _propTypes["default"].any,
selectedKeys: _propTypes["default"].array,
disabled: _propTypes["default"].bool,
checkable: _propTypes["default"].bool,
title: _propTypes["default"].string,
onItemHover: _propTypes["default"].func,
onSelect: _propTypes["default"].func,
onClick: _propTypes["default"].func,
onDeselect: _propTypes["default"].func,
parentMenu: _propTypes["default"].object,
onDestroy: _propTypes["default"].func,
onMouseEnter: _propTypes["default"].func,
onMouseLeave: _propTypes["default"].func,
onMouseDown: _propTypes["default"].func
},
getDefaultProps: function getDefaultProps() {
return {
onSelect: _noop["default"],
onMouseEnter: _noop["default"],
onMouseLeave: _noop["default"],
onMouseDown: _noop["default"]
};
},
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["default"].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,
tooltipPlacement = _this$props3.tooltipPlacement,
children = _this$props3.children,
mode = _this$props3.mode;
var currentTarget = e.currentTarget;
if (children && (tooltip === 'always' || tooltip === 'overflow' && (0, _util["default"])(currentTarget))) {
(0, _singleton.show)(currentTarget, {
title: children,
placement: tooltipPlacement || 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 = (0, _classnames["default"])(this.getPrefixCls(), props.className, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, this.getActiveClassName(), !props.disabled && props.active), (0, _defineProperty2["default"])(_classNames, this.getSelectedClassName(), props.isSelected), (0, _defineProperty2["default"])(_classNames, this.getDisabledClassName(), props.disabled), _classNames));
var attrs = (0, _objectSpread2["default"])({}, 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 = (0, _objectSpread2["default"])({}, props.style);
if (props.mode === 'inline') {
style.paddingLeft = props.inlineIndent * props.level;
}
var checkbox = props.multiple && props.checkable !== false ? _react["default"].createElement(_Checkbox["default"], {
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 = _singleton.hide;
}
return _react["default"].createElement(_ripple["default"], rippleProps, _react["default"].createElement("li", (0, _extends2["default"])({}, attrs, mouseEvent, {
style: style
}), checkbox, props.children));
}
});
MenuItem.isMenuItem = 1;
var _default = (0, _miniStore.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);
exports["default"] = _default;
//# sourceMappingURL=MenuItem.js.map