zent
Version:
一套前端设计语言和基于React的实现
176 lines (175 loc) • 8.23 kB
JavaScript
import { __assign, __extends, __spreadArray } from "tslib";
import { createElement as _createElement } from "react";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Component, createRef } from 'react';
import cx from 'classnames';
import { WindowResizeHandler } from '../utils/component/WindowResizeHandler';
import Item from './Item';
import Icon from '../icon';
import isEqual from '../utils/isEqual';
var MIN_FOLD_COUNT = 2;
var MOVE_ICON_WIDTH = 24;
var BREADCRUMB_ITEM_MARGIN_RIGHT = 24;
var MOVING_DURATION = 200;
var Breadcrumb = (function (_super) {
__extends(Breadcrumb, _super);
function Breadcrumb() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
isFolded: true,
overflowLeft: false,
overflowRight: false,
contentStyleLeft: 0,
};
_this.breadcrumbRef = createRef();
_this.contentRef = createRef();
_this.isMoving = false;
_this.getOverflowStatus = function () {
var contentStyleLeft = _this.state.contentStyleLeft;
if (!_this.breadcrumbWidth || !_this.contentWidth)
return;
if (contentStyleLeft < 0) {
_this.setState({ overflowLeft: true });
}
else {
_this.setState({ overflowLeft: false });
}
if (_this.breadcrumbWidth - contentStyleLeft < _this.contentWidth) {
_this.setState({ overflowRight: true });
}
else {
_this.setState({ overflowRight: false });
}
};
_this.componentDidMount = function () {
_this.getOverflowStatus();
};
_this.componentDidUpdate = function (prevProps) {
if (!isEqual(_this.props.breads, prevProps.breads)) {
_this.getOverflowStatus();
}
};
_this.handleClickMoveLeft = function () {
var contentStyleLeft = _this.state.contentStyleLeft;
if (_this.isMoving)
return;
_this.isMoving = true;
var contentEle = _this.contentRef.current;
var moveStep = 0;
for (var i = contentEle.childElementCount - 1; i >= 0; i--) {
var childNode = contentEle.children.item(i);
var childLeft = childNode.getBoundingClientRect().left;
if (childLeft < _this.breadcrumbLeft) {
moveStep = _this.breadcrumbLeft - childLeft + MOVE_ICON_WIDTH;
break;
}
}
var nextLeft = contentStyleLeft + moveStep < 0 ? contentStyleLeft + moveStep : 0;
_this.setState({ contentStyleLeft: nextLeft }, function () {
_this.getOverflowStatus();
setTimeout(function () {
_this.isMoving = false;
}, MOVING_DURATION);
});
};
_this.handleClickMoveRight = function () {
var contentStyleLeft = _this.state.contentStyleLeft;
if (_this.isMoving)
return;
_this.isMoving = true;
var contentEle = _this.contentRef.current;
var moveStep = 0;
for (var i = 0; i < contentEle.childElementCount; i++) {
var childNode = contentEle.children.item(i);
var childLeft = childNode.getBoundingClientRect().left;
var childWidth = childNode.getBoundingClientRect().width;
if (childLeft + childWidth > _this.breadcrumbLeft + _this.breadcrumbWidth) {
moveStep =
childLeft +
childWidth -
(_this.breadcrumbLeft + _this.breadcrumbWidth) +
MOVE_ICON_WIDTH -
BREADCRUMB_ITEM_MARGIN_RIGHT;
break;
}
}
var offsetWidth = _this.contentWidth - _this.breadcrumbWidth;
var nextLeft = Math.abs(contentStyleLeft - moveStep) > offsetWidth
? -offsetWidth
: contentStyleLeft - moveStep;
_this.setState({ contentStyleLeft: nextLeft }, function () {
_this.getOverflowStatus();
setTimeout(function () {
_this.isMoving = false;
}, MOVING_DURATION);
});
};
_this.unfoldBreads = function () {
_this.setState({ isFolded: false }, function () {
_this.getOverflowStatus();
});
};
_this.getFoldItems = function () {
var isFolded = _this.state.isFolded;
var _a = _this.props, maxItemCount = _a.maxItemCount, breads = _a.breads;
if (!maxItemCount || maxItemCount < MIN_FOLD_COUNT)
return breads;
if (!isFolded || (breads === null || breads === void 0 ? void 0 : breads.length) <= maxItemCount)
return breads;
var result = __spreadArray([], breads);
result.splice(1, breads.length - maxItemCount, {
name: '...',
className: 'zent-breadcrumb__fold',
onClick: _this.unfoldBreads,
});
return result;
};
return _this;
}
Object.defineProperty(Breadcrumb.prototype, "breadcrumbWidth", {
get: function () {
var breadcrumbEle = this.breadcrumbRef.current;
return breadcrumbEle === null || breadcrumbEle === void 0 ? void 0 : breadcrumbEle.getBoundingClientRect().width;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Breadcrumb.prototype, "breadcrumbLeft", {
get: function () {
var breadcrumbEle = this.breadcrumbRef.current;
return breadcrumbEle === null || breadcrumbEle === void 0 ? void 0 : breadcrumbEle.getBoundingClientRect().left;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Breadcrumb.prototype, "contentWidth", {
get: function () {
var contentEle = this.contentRef.current;
return contentEle === null || contentEle === void 0 ? void 0 : contentEle.getBoundingClientRect().width;
},
enumerable: false,
configurable: true
});
Breadcrumb.prototype.render = function () {
var _a = this.props, className = _a.className, _b = _a.children, children = _b === void 0 ? null : _b, style = _a.style;
var _c = this.state, overflowLeft = _c.overflowLeft, overflowRight = _c.overflowRight, contentStyleLeft = _c.contentStyleLeft;
var breadList = this.getFoldItems();
var hasChildren = children || (breadList && breadList.length > 0);
return (_jsxs("div", __assign({ className: cx('zent-breadcrumb', className, {
'zent-breadcrumb--overflow-left': overflowLeft,
'zent-breadcrumb--overflow-right': overflowRight,
}), ref: this.breadcrumbRef, style: style, "data-zv": '10.0.17' }, { children: [overflowLeft && (_jsx(Icon, { type: "left", className: "zent-breadcrumb__move-left", onClick: this.handleClickMoveLeft }, void 0)), hasChildren && (_jsxs("div", __assign({ className: "zent-breadcrumb__content", style: { left: contentStyleLeft + "px" }, ref: this.contentRef, "data-zv": '10.0.17' }, { children: [children, breadList &&
breadList.length > 0 &&
breadList.map(function (item, index) {
return _createElement(Item, __assign({}, item, { key: index }));
})] }), void 0)), overflowRight && (_jsx(Icon, { type: "right", className: "zent-breadcrumb__move-right", onClick: this.handleClickMoveRight }, void 0)), _jsx(WindowResizeHandler, { onResize: this.getOverflowStatus }, void 0)] }), void 0));
};
Breadcrumb.defaultProps = {
className: '',
breads: [],
};
Breadcrumb.Item = Item;
return Breadcrumb;
}(Component));
export { Breadcrumb };
export default Breadcrumb;