ukelli-ui
Version:
Base on React's UI lib. Make frontend's dev simpler and faster.
116 lines (115 loc) • 5.03 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
import React, { Component } from 'react';
import { CallFunc } from 'basic-helper';
import classnames from 'classnames';
import Tab from './tab';
import { ToolTip } from '../tooltip';
/**
* 提供多种不同 Tab 切换方式与模版
*
* @export
* @class Tabs
* @extends {PureComponent}
*/
var Tabs = /** @class */ (function (_super) {
__extends(Tabs, _super);
function Tabs(props) {
var _this = _super.call(this, props) || this;
_this.state = {
activeTabIdx: props.activeTabIdx || props.defaultTab || 0
};
_this.isControl = props.hasOwnProperty('activeTabIdx');
return _this;
}
Tabs.prototype.getActiveIdx = function () {
return this.isControl ? this.props.activeTabIdx : this.state.activeTabIdx;
};
// componentDidMount() {
// this.setDefaultTabIdx(this.props);
// }
// setDefaultTabIdx(nextProps) {
// const {activeTabIdx = 0} = nextProps;
// this.setState({
// activeTabIdx: activeTabIdx
// });
// }
Tabs.prototype._onChangeTab = function (tabIdx) {
var activeTabIdx = this.getActiveIdx();
if (activeTabIdx === tabIdx)
return;
this.setState({
activeTabIdx: tabIdx
});
};
Tabs.prototype.onTapTab = function (tapIdx) {
if (!this.isControl)
this._onChangeTab(tapIdx);
var onChangeTab = this.props.onChangeTab;
CallFunc(onChangeTab)(tapIdx);
// if(IsFunc(onChangeTab)) onChangeTab(tapIdx);
};
Tabs.prototype.getTabContents = function () {
var _this = this;
var _a = this.props, children = _a.children, height = _a.height, inRow = _a.inRow, withContent = _a.withContent, closeable = _a.closeable, closeTip = _a.closeTip, onClose = _a.onClose;
var activeTabIdx = this.getActiveIdx();
var tabs = [];
var tabContents = [];
React.Children.map(children, function (tabChild, idx) {
if (!tabChild || typeof tabChild.type !== 'function')
return;
var isActive = (idx === activeTabIdx);
var tabKey = tabChild.key;
var _a = tabChild.props, _b = _a.contentClass, contentClass = _b === void 0 ? '' : _b, _c = _a.labelClass, labelClass = _c === void 0 ? '' : _c, atRight = _a.atRight, label = _a.label;
var _labelClass = "tab " + labelClass + (isActive ? ' active' : '');
_labelClass += atRight ? ' right' : '';
var _tabContent = withContent || (!withContent && isActive) ? (React.createElement("div", { className: "tab-content " + contentClass + (isActive ? '' : ' hide'), key: tabKey || "tab-con-" + idx, style: height ? { height: height } : {} }, tabChild.props.children)) : null;
if (!inRow || withContent)
tabContents.push(_tabContent);
var _con = inRow ? _tabContent : null;
var _tab = (React.createElement("div", { key: tabKey || label, className: _labelClass, draggable: true },
React.createElement("span", { onClick: function (e) { return _this.onTapTab(idx); } }, tabChild),
closeable && (React.createElement(ToolTip, { className: "_close-btn", title: closeTip, clickToClose: true, onClick: function (e) { return onClose && onClose(idx); } }, "x")),
_con));
tabs.push(_tab);
});
return {
tabs: tabs, tabContents: tabContents
};
};
Tabs.prototype.render = function () {
var _a = this.props, _b = _a.tabsClassName, tabsClassName = _b === void 0 ? 'tabs-container' : _b, className = _a.className, inRow = _a.inRow, withContent = _a.withContent, onlyContent = _a.onlyContent;
var _c = this.getTabContents(), tabs = _c.tabs, tabContents = _c.tabContents;
var classes = classnames(tabsClassName, className, inRow && 'in-row', withContent && 'common-mode');
return (React.createElement("div", { className: classes },
!onlyContent && (React.createElement("div", { className: "tab-group" }, tabs)),
inRow ? null : tabContents));
};
/**
* Tab 的引用
*
* @static
* @memberof Tabs
* @public
*/
Tabs.Tab = Tab;
Tabs.defaultProps = {
inRow: false,
withContent: false,
onlyContent: false,
closeable: false,
};
return Tabs;
}(Component));
export default Tabs;