tntd
Version:
tntd是基于 TNT Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品。
86 lines (85 loc) • 3.23 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.Item = void 0;
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireDefault(require("react"));
var _ = require("../");
require("./index.less");
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
"default": e
};
}
var __rest = void 0 && (void 0).__rest || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
var clsPrefix = 'tnt-columns';
var Item = exports.Item = function Item(props) {
var children = props.children,
span = props.span,
extra = props.extra,
title = props.title,
tabList = props.tabList,
defaultActiveTabKey = props.defaultActiveTabKey,
activeTabKey = props.activeTabKey,
tabType = props.tabType,
onTabChange = props.onTabChange;
var realActiveKey = activeTabKey || defaultActiveTabKey;
return _react["default"].createElement(_.Col, {
className: "".concat(clsPrefix, "-col"),
span: span < 4 ? 4 : span
}, _react["default"].createElement("div", null, (!tabList || tabList.length < 0) && _react["default"].createElement("div", {
className: "".concat(clsPrefix, "-col-header")
}, _react["default"].createElement("div", {
className: "title-left"
}, title), extra && _react["default"].createElement("div", {
className: "title-extra"
}, extra)), (tabList === null || tabList === void 0 ? void 0 : tabList.length) > 0 && _react["default"].createElement("div", {
className: "".concat(clsPrefix, "-col-tabs"),
tabType: tabType,
tabList: tabList
}, tabList.map(function (_ref) {
var tab = _ref.tab,
key = _ref.key;
return _react["default"].createElement("span", {
className: (0, _classnames["default"])('tab-item', {
'active-tab': realActiveKey === key
}),
style: {
width: tabList && tabType === 'default' ? 'auto' : "".concat(100 / tabList.length, "%")
},
key: key,
onClick: function onClick() {
return onTabChange(key);
}
}, tab);
})), _react["default"].createElement("div", {
className: "".concat(clsPrefix, "-col-body")
}, children)));
};
var Columns = function Columns(props) {
var children = props.children,
height = props.height,
_props$gutter = props.gutter,
gutter = _props$gutter === void 0 ? 0 : _props$gutter,
style = props.style,
rest = __rest(props, ["children", "height", "gutter", "style"]);
var rowStyle = Object.assign(Object.assign({}, style), {
height: props.height ? "".concat(props.height, "px") : 'calc(100vh)'
});
return _react["default"].createElement(_.Row, Object.assign({
className: (0, _classnames["default"])(clsPrefix, {
gutter: gutter
}),
style: rowStyle
}, rest), children);
};
Columns.Item = Item;
var _default = exports["default"] = Columns;