choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
361 lines (282 loc) • 13.4 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
var _SubMenu = _interopRequireDefault(require("./SubMenu"));
var _util = require("./util");
var _excluded = ["children", "title", "eventKey"],
_excluded2 = ["hiddenClassName", "hidden", "prefixCls", "overflowedIndicator", "mode", "level", "tag", "children", "theme"];
var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
var MENUITEM_OVERFLOWED_CLASSNAME = 'menuitem-overflowed'; // Fix ssr
if (canUseDOM) {
require('mutationobserver-shim');
}
var DOMWrap = /*#__PURE__*/function (_Component) {
(0, _inherits2["default"])(DOMWrap, _Component);
var _super = (0, _createSuper2["default"])(DOMWrap);
function DOMWrap() {
var _this;
(0, _classCallCheck2["default"])(this, DOMWrap);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
lastVisibleIndex: undefined
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getMenuItemNodes", function () {
var prefixCls = _this.props.prefixCls;
var ul = _reactDom["default"].findDOMNode((0, _assertThisInitialized2["default"])(_this));
if (!ul) {
return [];
} // filter out all overflowed indicator placeholder
return [].slice.call(ul.children).filter(function (node) {
return node.className.split(' ').indexOf("".concat(prefixCls, "-overflowed-submenu")) < 0;
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getOverflowedSubMenuItem", function (keyPrefix, overflowedItems, renderPlaceholder) {
var _this$props = _this.props,
overflowedIndicator = _this$props.overflowedIndicator,
level = _this$props.level,
mode = _this$props.mode,
prefixCls = _this$props.prefixCls,
theme = _this$props.theme,
propStyle = _this$props.style;
if (level !== 1 || mode !== 'horizontal') {
return null;
} // put all the overflowed item inside a submenu
// with a title of overflow indicator ('...')
var copy = _this.props.children[0];
var _copy$props = copy.props,
throwAway = _copy$props.children,
title = _copy$props.title,
eventKey = _copy$props.eventKey,
rest = (0, _objectWithoutProperties2["default"])(_copy$props, _excluded);
var style = (0, _objectSpread2["default"])({}, propStyle);
var key = "".concat(keyPrefix, "-overflowed-indicator");
if (overflowedItems.length === 0 && renderPlaceholder !== true) {
style = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), {}, {
display: 'none'
});
} else if (renderPlaceholder) {
style = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), {}, {
visibility: 'hidden',
// prevent from taking normal dom space
position: 'absolute'
});
key = "".concat(key, "-placeholder");
}
var popupClassName = theme ? "".concat(prefixCls, "-").concat(theme) : '';
var props = {};
_util.menuAllProps.forEach(function (k) {
if (rest[k] !== undefined) {
props[k] = rest[k];
}
});
return /*#__PURE__*/_react["default"].createElement(_SubMenu["default"], (0, _extends2["default"])({
title: overflowedIndicator,
className: "".concat(prefixCls, "-overflowed-submenu"),
popupClassName: popupClassName
}, props, {
key: key,
eventKey: "".concat(keyPrefix, "-overflowed-indicator"),
disabled: false,
style: style
}), overflowedItems);
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setChildrenWidthAndResize", function () {
if (_this.props.mode !== 'horizontal') {
return;
}
var ul = _reactDom["default"].findDOMNode((0, _assertThisInitialized2["default"])(_this));
if (!ul) {
return;
}
var ulChildrenNodes = ul.children;
if (!ulChildrenNodes || ulChildrenNodes.length === 0) {
return;
}
var lastOverflowedIndicatorPlaceholder = ul.children[ulChildrenNodes.length - 1]; // need last overflowed indicator for calculating length;
(0, _util.setStyle)(lastOverflowedIndicatorPlaceholder, 'display', 'inline-block');
var menuItemNodes = _this.getMenuItemNodes(); // reset display attribute for all hidden elements caused by overflow to calculate updated width
// and then reset to original state after width calculation
var overflowedItems = menuItemNodes.filter(function (c) {
return c.className.split(' ').indexOf(MENUITEM_OVERFLOWED_CLASSNAME) >= 0;
});
overflowedItems.forEach(function (c) {
(0, _util.setStyle)(c, 'display', 'inline-block');
});
_this.menuItemSizes = menuItemNodes.map(function (c) {
return (0, _util.getWidth)(c);
});
overflowedItems.forEach(function (c) {
(0, _util.setStyle)(c, 'display', 'none');
});
_this.overflowedIndicatorWidth = (0, _util.getWidth)(ul.children[ul.children.length - 1]);
_this.originalTotalWidth = _this.menuItemSizes.reduce(function (acc, cur) {
return acc + cur;
}, 0);
_this.handleResize(); // prevent the overflowed indicator from taking space;
(0, _util.setStyle)(lastOverflowedIndicatorPlaceholder, 'display', 'none');
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "resizeObserver", null);
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "mutationObserver", null);
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "originalTotalWidth", 0);
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "overflowedItems", []);
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "menuItemSizes", []);
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleResize", function () {
if (_this.props.mode !== 'horizontal') {
return;
}
var ul = _reactDom["default"].findDOMNode((0, _assertThisInitialized2["default"])(_this));
if (!ul) {
return;
}
var width = (0, _util.getWidth)(ul);
_this.overflowedItems = [];
var currentSumWidth = 0; // index for last visible child in horizontal mode
var lastVisibleIndex = undefined;
if (_this.originalTotalWidth > width) {
lastVisibleIndex = -1;
_this.menuItemSizes.forEach(function (liWidth) {
currentSumWidth += liWidth;
if (currentSumWidth + _this.overflowedIndicatorWidth <= width) {
lastVisibleIndex++;
}
});
}
_this.setState({
lastVisibleIndex: lastVisibleIndex
});
});
return _this;
}
(0, _createClass2["default"])(DOMWrap, [{
key: "componentDidMount",
value: function componentDidMount() {
var _this2 = this;
this.setChildrenWidthAndResize();
if (this.props.level === 1 && this.props.mode === 'horizontal') {
var menuUl = _reactDom["default"].findDOMNode(this);
if (!menuUl) {
return;
}
this.resizeObserver = new _resizeObserverPolyfill["default"](function (entries) {
entries.forEach(_this2.setChildrenWidthAndResize);
});
[].slice.call(menuUl.children).concat(menuUl).forEach(function (el) {
_this2.resizeObserver.observe(el);
});
if (typeof MutationObserver !== 'undefined') {
this.mutationObserver = new MutationObserver(function () {
_this2.resizeObserver.disconnect();
[].slice.call(menuUl.children).concat(menuUl).forEach(function (el) {
_this2.resizeObserver.observe(el);
});
_this2.setChildrenWidthAndResize();
});
this.mutationObserver.observe(menuUl, {
attributes: false,
childList: true,
subTree: false
});
}
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
if (this.resizeObserver) {
this.resizeObserver.disconnect();
}
if (this.mutationObserver) {
this.resizeObserver.disconnect();
}
} // get all valid menuItem nodes
}, {
key: "renderChildren",
value: function renderChildren(children) {
var _this3 = this;
// need to take care of overflowed items in horizontal mode
var lastVisibleIndex = this.state.lastVisibleIndex;
return (children || []).reduce(function (acc, childNode, index) {
var item = childNode;
if (_this3.props.mode === 'horizontal') {
var overflowed = _this3.getOverflowedSubMenuItem(childNode.props.eventKey, []);
if (lastVisibleIndex !== undefined && _this3.props.className.indexOf("".concat(_this3.props.prefixCls, "-root")) !== -1) {
if (index > lastVisibleIndex) {
item = /*#__PURE__*/(0, _react.cloneElement)(childNode, // 这里修改 eventKey 是为了防止隐藏状态下还会触发 openkeys 事件
{
style: {
display: 'none'
},
eventKey: "".concat(childNode.props.eventKey, "-hidden"),
className: "".concat(childNode.className, " ").concat(MENUITEM_OVERFLOWED_CLASSNAME)
});
}
if (index === lastVisibleIndex + 1) {
_this3.overflowedItems = children.slice(lastVisibleIndex + 1).map(function (c) {
return /*#__PURE__*/(0, _react.cloneElement)(c, // children[index].key will become '.$key' in clone by default,
// we have to overwrite with the correct key explicitly
{
key: c.props.eventKey,
mode: 'vertical-left'
});
});
overflowed = _this3.getOverflowedSubMenuItem(childNode.props.eventKey, _this3.overflowedItems);
}
}
var ret = [].concat((0, _toConsumableArray2["default"])(acc), [overflowed, item]);
if (index === children.length - 1) {
// need a placeholder for calculating overflowed indicator width
ret.push(_this3.getOverflowedSubMenuItem(childNode.props.eventKey, [], true));
}
return ret;
}
return [].concat((0, _toConsumableArray2["default"])(acc), [item]);
}, []);
}
}, {
key: "render",
value: function render() {
var _this$props2 = this.props,
hiddenClassName = _this$props2.hiddenClassName,
hidden = _this$props2.hidden,
prefixCls = _this$props2.prefixCls,
overflowedIndicator = _this$props2.overflowedIndicator,
mode = _this$props2.mode,
level = _this$props2.level,
Tag = _this$props2.tag,
children = _this$props2.children,
theme = _this$props2.theme,
rest = (0, _objectWithoutProperties2["default"])(_this$props2, _excluded2);
if (hidden) {
rest.className += " ".concat(hiddenClassName);
}
return /*#__PURE__*/_react["default"].createElement(Tag, rest, this.renderChildren(this.props.children));
}
}]);
return DOMWrap;
}(_react.Component);
exports["default"] = DOMWrap;
(0, _defineProperty2["default"])(DOMWrap, "defaultProps", {
tag: 'div',
className: ''
});
//# sourceMappingURL=DOMWrap.js.map