amis
Version:
一种MIS页面生成工具
318 lines (317 loc) • 15.8 kB
JavaScript
"use strict";
/**
* @file Tabs
* @description 选项卡
* @author fex
*/
var _a;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tabs = exports.Tab = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var Transition_1 = tslib_1.__importStar(require("react-transition-group/Transition"));
var theme_1 = require("../theme");
var uncontrollable_1 = require("uncontrollable");
var icon_1 = require("../utils/icon");
var helper_1 = require("../utils/helper");
var debounce_1 = (0, tslib_1.__importDefault)(require("lodash/debounce"));
var transitionStyles = (_a = {},
_a[Transition_1.ENTERING] = 'in',
_a[Transition_1.ENTERED] = 'in',
_a);
var TabComponent = /** @class */ (function (_super) {
(0, tslib_1.__extends)(TabComponent, _super);
function TabComponent() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.contentRef = function (ref) { return (_this.contentDom = ref); };
return _this;
}
TabComponent.prototype.render = function () {
var _this = this;
var _a = this.props, cx = _a.classnames, mountOnEnter = _a.mountOnEnter, reload = _a.reload, unmountOnExit = _a.unmountOnExit, eventKey = _a.eventKey, activeKey = _a.activeKey, children = _a.children, className = _a.className;
return (react_1.default.createElement(Transition_1.default, { in: activeKey === eventKey, mountOnEnter: mountOnEnter, unmountOnExit: typeof reload === 'boolean' ? reload : unmountOnExit, timeout: 500 }, function (status) {
if (status === Transition_1.ENTERING) {
_this.contentDom.offsetWidth;
}
return (react_1.default.createElement("div", { ref: _this.contentRef, className: cx(transitionStyles[status], activeKey === eventKey ? 'is-active' : '', 'Tabs-pane', className) }, children));
}));
};
return TabComponent;
}(react_1.default.PureComponent));
exports.Tab = (0, theme_1.themeable)(TabComponent);
var Tabs = /** @class */ (function (_super) {
(0, tslib_1.__extends)(Tabs, _super);
function Tabs(props) {
var _this = _super.call(this, props) || this;
_this.navMain = react_1.default.createRef();
_this.scroll = false;
_this.checkArrowStatus = (0, debounce_1.default)(function () {
var _a = _this.navMain.current
|| {
scrollLeft: 0,
scrollWidth: 0,
clientWidth: 0
}, scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
var _b = _this.state, arrowRightDisabled = _b.arrowRightDisabled, arrowLeftDisabled = _b.arrowLeftDisabled;
if (scrollLeft === 0 && !arrowLeftDisabled) {
_this.setState({
arrowRightDisabled: false,
arrowLeftDisabled: true
});
}
else if (scrollWidth === scrollLeft + clientWidth && !arrowRightDisabled) {
_this.setState({
arrowRightDisabled: true,
arrowLeftDisabled: false
});
}
else if (scrollLeft !== 0 && arrowLeftDisabled) {
_this.setState({
arrowLeftDisabled: false
});
}
else if (scrollWidth !== scrollLeft + clientWidth && arrowRightDisabled) {
_this.setState({
arrowRightDisabled: false
});
}
}, 100, {
trailing: true,
leading: false
});
_this.state = {
isOverflow: false,
arrowLeftDisabled: false,
arrowRightDisabled: false,
};
return _this;
}
Tabs.prototype.componentDidMount = function () {
var _a;
this.computedWidth();
if (this.navMain) {
(_a = this.navMain.current) === null || _a === void 0 ? void 0 : _a.addEventListener('wheel', this.handleWheel, { passive: false });
this.checkArrowStatus();
}
};
Tabs.prototype.componentDidUpdate = function () {
// 判断是否是由滚动触发的数据更新，如果是则不需要再次判断容器与内容的关系
if (!this.scroll) {
this.computedWidth();
}
this.scroll = false;
};
Tabs.prototype.componentWillUnmount = function () {
this.checkArrowStatus.cancel();
};
/**
* 处理内容与容器之间的位置关系
*/
Tabs.prototype.computedWidth = function () {
var _a = this.props, dMode = _a.mode, tabsMode = _a.tabsMode, scrollable = _a.scrollable;
var mode = tabsMode || dMode;
if (!scrollable || mode === 'vertical') {
return;
}
var navMainRef = this.navMain.current;
var clientWidth = (navMainRef === null || navMainRef === void 0 ? void 0 : navMainRef.clientWidth) || 0;
var scrollWidth = (navMainRef === null || navMainRef === void 0 ? void 0 : navMainRef.scrollWidth) || 0;
var isOverflow = scrollWidth > clientWidth;
// 内容超出容器长度标记溢出
if (isOverflow !== this.state.isOverflow) {
this.setState({ isOverflow: isOverflow });
}
if (isOverflow) {
this.showSelected();
}
};
/**
* 保证选中的tab始终显示在可视区域
*/
Tabs.prototype.showSelected = function (key) {
var _a, _b, _c, _d, _e, _f, _g;
var _h = this.props, dMode = _h.mode, tabsMode = _h.tabsMode, scrollable = _h.scrollable;
var isOverflow = this.state.isOverflow;
var mode = tabsMode || dMode;
if (!scrollable || mode === 'vertical' || !isOverflow) {
return;
}
var _j = this.props, activeKey = _j.activeKey, children = _j.children;
var currentKey = key !== undefined ? key : activeKey;
var currentIndex = (_a = children) === null || _a === void 0 ? void 0 : _a.findIndex(function (item) { return item.props.eventKey === currentKey; });
var li = ((_c = (_b = this.navMain.current) === null || _b === void 0 ? void 0 : _b.children[0]) === null || _c === void 0 ? void 0 : _c.children) || [];
var currentLi = li[currentIndex];
var liOffsetLeft = (currentLi === null || currentLi === void 0 ? void 0 : currentLi.offsetLeft) - 20;
var liClientWidth = currentLi === null || currentLi === void 0 ? void 0 : currentLi.clientWidth;
var scrollLeft = ((_d = this.navMain.current) === null || _d === void 0 ? void 0 : _d.scrollLeft) || 0;
var clientWidth = ((_e = this.navMain.current) === null || _e === void 0 ? void 0 : _e.clientWidth) || 0;
// 左边被遮住了
if (scrollLeft > liOffsetLeft) {
(_f = this.navMain.current) === null || _f === void 0 ? void 0 : _f.scrollTo({
left: liOffsetLeft,
behavior: 'smooth'
});
}
// 右边被遮住了
if (liOffsetLeft + liClientWidth > scrollLeft + clientWidth) {
(_g = this.navMain.current) === null || _g === void 0 ? void 0 : _g.scrollTo({
left: liOffsetLeft + liClientWidth - clientWidth,
behavior: 'smooth'
});
}
};
Tabs.prototype.handleSelect = function (key) {
var _this = this;
var onSelect = this.props.onSelect;
this.showSelected(key);
setTimeout(function () {
_this.checkArrowStatus();
}, 500);
onSelect && onSelect(key);
};
Tabs.prototype.handleArrow = function (type) {
var _a, _b, _c;
var _d = this.navMain.current
|| {
scrollLeft: 0,
scrollWidth: 0,
clientWidth: 0
}, scrollLeft = _d.scrollLeft, scrollWidth = _d.scrollWidth, clientWidth = _d.clientWidth;
if (type === 'left' && scrollLeft > 0) {
(_a = this.navMain.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
left: 0,
behavior: 'smooth'
});
this.setState({
arrowRightDisabled: false,
arrowLeftDisabled: true
});
}
else if (type === 'right' && scrollWidth > scrollLeft + clientWidth) {
(_b = this.navMain.current) === null || _b === void 0 ? void 0 : _b.scrollTo({
left: (_c = this.navMain.current) === null || _c === void 0 ? void 0 : _c.scrollWidth,
behavior: 'smooth'
});
this.setState({
arrowRightDisabled: true,
arrowLeftDisabled: false
});
}
this.scroll = true;
};
/**
* 监听导航上的滚动事件
*/
Tabs.prototype.handleWheel = function (e) {
var _a, _b;
var deltaY = e.deltaY, deltaX = e.deltaX;
var absX = Math.abs(deltaX);
var absY = Math.abs(deltaY);
// 当鼠标上下滚动时转换为左右滚动
if (absY > absX) {
(_a = this.navMain.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
left: ((_b = this.navMain.current) === null || _b === void 0 ? void 0 : _b.scrollLeft) + deltaY
});
e.preventDefault();
}
this.checkArrowStatus();
this.scroll = true;
};
Tabs.prototype.renderNav = function (child, index) {
var _this = this;
if (!child) {
return;
}
var _a = this.props, cx = _a.classnames, activeKeyProp = _a.activeKey, mode = _a.mode;
var _b = child.props, eventKey = _b.eventKey, disabled = _b.disabled, icon = _b.icon, iconPosition = _b.iconPosition, title = _b.title, toolbar = _b.toolbar, tabClassName = _b.tabClassName;
var activeKey = activeKeyProp === undefined && index === 0 ? eventKey : activeKeyProp;
var iconElement = (0, icon_1.generateIcon)(cx, icon, 'Icon');
return (react_1.default.createElement("li", { className: cx('Tabs-link', activeKey === eventKey ? 'is-active' : '', disabled ? 'is-disabled' : '', tabClassName), key: eventKey !== null && eventKey !== void 0 ? eventKey : index, onClick: function () { return (disabled ? '' : _this.handleSelect(eventKey)); } },
react_1.default.createElement("a", null,
icon ? (iconPosition === 'right' ? (react_1.default.createElement(react_1.default.Fragment, null,
title,
" ",
iconElement)) : (react_1.default.createElement(react_1.default.Fragment, null,
iconElement,
" ",
title))) : (title),
react_1.default.isValidElement(toolbar) ? toolbar : null),
mode === 'chrome' ? (react_1.default.createElement("div", { className: "chrome-tab-background" },
react_1.default.createElement("svg", { viewBox: "0 0 124 124", className: "chrome-tab-background--right" },
react_1.default.createElement("path", { d: "M0,0 C0,68.483309 55.516691,124 124,124 L0,124 L0,-1 C0.00132103964,-0.667821298 0,-0.334064922 0,0 Z" })),
react_1.default.createElement("svg", { viewBox: "0 0 124 124", className: "chrome-tab-background--left" },
react_1.default.createElement("path", { d: "M124,0 L124,125 L0,125 L0,125 C68.483309,125 124,69.483309 124,1 L123.992,0 L124,0 Z" })))) : null));
};
Tabs.prototype.renderTab = function (child, index) {
if (!child) {
return;
}
var _a = this.props, activeKeyProp = _a.activeKey, classnames = _a.classnames;
var eventKey = child.props.eventKey;
var activeKey = activeKeyProp === undefined && index === 0 ? eventKey : activeKeyProp;
return react_1.default.cloneElement(child, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, child.props), { key: eventKey, classnames: classnames, activeKey: activeKey }));
};
Tabs.prototype.renderArrow = function (type) {
var _this = this;
var _a = this.props, dMode = _a.mode, tabsMode = _a.tabsMode;
var mode = tabsMode || dMode;
if (mode === 'vertical') {
return;
}
var cx = this.props.classnames;
var _b = this.state, isOverflow = _b.isOverflow, arrowLeftDisabled = _b.arrowLeftDisabled, arrowRightDisabled = _b.arrowRightDisabled;
var disabled = type === 'left' ? arrowLeftDisabled : arrowRightDisabled;
return (isOverflow
? (react_1.default.createElement("div", { onClick: function () { return _this.handleArrow(type); }, className: cx('Tabs-linksContainer-arrow', 'Tabs-linksContainer-arrow--' + type, disabled && 'Tabs-linksContainer-arrow--disabled') },
react_1.default.createElement("i", { className: 'iconfont icon-arrow-' + type })))
: null);
};
Tabs.prototype.render = function () {
var _a;
var _this = this;
var _b = this.props, cx = _b.classnames, contentClassName = _b.contentClassName, className = _b.className, dMode = _b.mode, tabsMode = _b.tabsMode, children = _b.children, additionBtns = _b.additionBtns, toolbar = _b.toolbar, linksClassName = _b.linksClassName, scrollable = _b.scrollable;
var isOverflow = this.state.isOverflow;
if (!Array.isArray(children)) {
return null;
}
var mode = tabsMode || dMode;
return (react_1.default.createElement("div", { className: cx("Tabs", (_a = {},
_a["Tabs--" + mode] = mode,
_a), className) },
scrollable && !['vertical', 'chrome'].includes(mode) ?
(react_1.default.createElement("div", { className: cx('Tabs-linksContainer', isOverflow && 'Tabs-linksContainer--overflow') },
this.renderArrow('left'),
react_1.default.createElement("div", { className: cx('Tabs-linksContainer-main'), ref: this.navMain },
react_1.default.createElement("ul", { className: cx('Tabs-links', linksClassName), role: "tablist" },
children.map(function (tab, index) { return _this.renderNav(tab, index); }),
additionBtns,
toolbar)),
this.renderArrow('right')))
: (react_1.default.createElement("ul", { className: cx('Tabs-links', linksClassName), role: "tablist" },
children.map(function (tab, index) { return _this.renderNav(tab, index); }),
additionBtns,
toolbar)),
react_1.default.createElement("div", { className: cx('Tabs-content', contentClassName) }, children.map(function (child, index) {
return _this.renderTab(child, index);
}))));
};
var _b;
Tabs.defaultProps = {
mode: '',
contentClassName: ''
};
Tabs.Tab = exports.Tab;
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", [typeof (_b = typeof WheelEvent !== "undefined" && WheelEvent) === "function" ? _b : Object]),
(0, tslib_1.__metadata)("design:returntype", void 0)
], Tabs.prototype, "handleWheel", null);
return Tabs;
}(react_1.default.Component));
exports.Tabs = Tabs;
var ThemedTabs = (0, theme_1.themeable)((0, uncontrollable_1.uncontrollable)(Tabs, {
activeKey: 'onSelect'
}));
exports.default = ThemedTabs;
//# sourceMappingURL=./components/Tabs.js.map