ming-demo1
Version:
mdf metaui web
262 lines (227 loc) • 9.21 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.MenuControl = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _baseui = require("@mdf/baseui");
var _addEventListener = _interopRequireDefault(require("rc-util/lib/Dom/addEventListener"));
var SubMenu = _baseui.Menu.SubMenu;
var MenuItem = _baseui.Menu.Item;
var MenuItemGroup = _baseui.Menu.ItemGroup;
var MenuControl = function (_React$Component) {
(0, _inherits2["default"])(MenuControl, _React$Component);
function MenuControl(props) {
var _this;
(0, _classCallCheck2["default"])(this, MenuControl);
_this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(MenuControl).call(this, props));
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onDocumentClick", function (event) {
var parent = cb.dom(event.target).parents('.ant-menu');
if (parent.length) return;
_this.setState({
openKeys: []
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onTitleClick", function (subMenuNode) {
_this.setState({
openKeys: [subMenuNode.key]
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onOpenChange", function (openKeys) {
if (_this.state.trigger !== 'hover') _this.setState({
openKeys: openKeys
});
if (!openKeys.length) return;
setTimeout(function () {
var current = cb.dom('.left-menu .ant-menu-submenu-open');
if (!current.length) return;
var scrollElement = current.children('ul').children('li').children('ul')[0];
scrollElement.style.maxHeight = "".concat(window && document.documentElement.clientHeight - 80, "px");
scrollElement.style.overflowY = 'auto';
var subMenu = current.children('ul')[0];
var offset = window.innerHeight - current[0].getBoundingClientRect().top - subMenu.offsetHeight - 10;
var styleObj = document.styleSheets[document.styleSheets.length - 1].rules[0].style;
if (offset > 0) {
if (styleObj[0] === 'top') styleObj.top = '15px';
return;
}
subMenu.style.marginTop = "".concat(offset, "px");
var top = "".concat(15 + Math.abs(offset), "px");
if (styleObj[0] === 'top') {
styleObj.top = top;
} else {
var style = document.createElement('style');
style.innerText = ".left-menu .ant-menu-submenu-vertical > .ant-menu:after{top:".concat(top, "}");
document.body.appendChild(style);
}
}, 100);
});
_this.state = {
trigger: props.trigger || 'hover',
mode: props.mode || "vertical",
theme: props.theme || "light",
selectedKeys: props.selectedKeys || '',
dataSource: props.dataSource || [],
id: props.id,
keyField: props.keyField,
titleField: props.titleField
};
_this.subData = [];
return _this;
}
(0, _createClass2["default"])(MenuControl, [{
key: "componentDidMount",
value: function componentDidMount() {
if (this.props.model) this.props.model.addListener(this);
if (this.state.trigger !== 'hover') this.clickOutsideHandler = (0, _addEventListener["default"])(document, 'mousedown', this.onDocumentClick);
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
if (this.props.model) this.props.model.removeListener(this);
if (this.state.trigger !== 'hover') {
this.clickOutsideHandler.remove();
this.clickOutsideHandler = null;
}
}
}, {
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps) {
if (!nextProps.dataSource || this.props.id === nextProps.id) return;
var states = {
dataSource: nextProps.dataSource
};
this.setState(states);
}
}, {
key: "onMenuClick",
value: function onMenuClick(item) {
var selectedKeys = [];
selectedKeys.push(item.key);
if (this.props.onSelect) this.props.onSelect(selectedKeys, item);
if (this.props.model) this.props.model.select(selectedKeys);
}
}, {
key: "loopMenu",
value: function loopMenu(dataSource) {
var keyField = this.state.keyField;
var titleField = this.state.titleField;
var menuData = [];
var subMenuProps = {};
if (this.state.trigger !== 'hover') subMenuProps.onTitleClick = this.onTitleClick;
if (dataSource.length > 0) {
dataSource.forEach(function (element) {
var icon = element.icon;
var iconElement = icon && icon.indexOf('.') > -1 ? _react["default"].createElement("img", {
style: {
"float": 'left',
width: 16,
height: 16,
marginTop: 14,
marginBottom: 14,
marginLeft: 2,
marginRight: 9
},
src: icon
}) : _react["default"].createElement("i", {
className: "iconfont icon-" + element.icon
});
var title = _react["default"].createElement("span", null, iconElement, _react["default"].createElement("span", null, element[titleField]));
var ele;
if (element.children) {
var subMenuData = this.loopSubMenu(element.children);
ele = _react["default"].createElement(SubMenu, (0, _extends2["default"])({}, subMenuProps, {
data: element,
key: element[keyField],
title: title
}), _react["default"].createElement(MenuItemGroup, {
className: "_warpSubMenu",
data: element,
key: element[keyField],
title: "\u5197\u4F59"
}, subMenuData));
} else {
ele = _react["default"].createElement(MenuItem, {
data: element,
key: element[keyField],
disabled: element.disabled
}, title);
}
menuData.push(ele);
}, this);
return menuData;
} else {
return "";
}
}
}, {
key: "loopSubMenu",
value: function loopSubMenu(dataSource) {
var keyField = this.state.keyField;
var titleField = this.state.titleField;
var menuData = [];
if (dataSource.length > 0) {
dataSource.forEach(function (element) {
var ele;
if (element.children) {
var subMenuData = this.loopSubMenu(element.children);
var className = 'menu-group-cols-' + (element.cols || 3);
ele = _react["default"].createElement(MenuItemGroup, {
className: className,
data: element,
key: element[keyField],
title: element[titleField]
}, subMenuData);
} else {
ele = _react["default"].createElement(MenuItem, {
data: element,
key: element[keyField],
disabled: element.disabled,
title: element[titleField]
}, element[titleField]);
}
menuData.push(ele);
}, this);
return menuData;
} else {
return "";
}
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var subMenuNodes = this.loopMenu(this.state.dataSource);
var menuProps = {};
if (this.state.trigger !== 'hover') {
menuProps.openKeys = this.state.openKeys;
menuProps.openSubMenuOnMouseEnter = false;
menuProps.closeSubMenuOnMouseLeave = false;
}
return _react["default"].createElement(_baseui.Menu, (0, _extends2["default"])({}, menuProps, {
onOpenChange: this.onOpenChange,
defaultSelectedKeys: this.props.defaultSelectedKeys,
theme: this.state.theme,
onClick: function onClick(item, key, keyPath) {
return _this2.onMenuClick(item, key, keyPath);
},
mode: this.state.mode
}), subMenuNodes);
}
}]);
return MenuControl;
}(_react["default"].Component);
exports.MenuControl = MenuControl;
;
var _default = MenuControl;
exports["default"] = _default;
//# sourceMappingURL=menu.js.map