@uiw/react-tabs
Version:
Tabs component
215 lines (214 loc) • 8.18 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {};
exports["default"] = Tabs;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _Pane = _interopRequireWildcard(require("./Pane"));
Object.keys(_Pane).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _Pane[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function get() {
return _Pane[key];
}
});
});
var _reactPopover = _interopRequireDefault(require("@uiw/react-popover"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["prefixCls", "className", "children", "type", "activeKey", "onTabClick"];
Tabs.Pane = _Pane["default"];
function Tabs(props) {
var _flowNav$nav;
var _props$prefixCls = props.prefixCls,
prefixCls = _props$prefixCls === void 0 ? 'w-tabs' : _props$prefixCls,
className = props.className,
children = props.children,
_props$type = props.type,
type = _props$type === void 0 ? 'default' : _props$type,
_ = props.activeKey,
onTabClick = props.onTabClick,
elementProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
var _useState = (0, _react.useState)(props.activeKey),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
activeKey = _useState2[0],
setActiveKey = _useState2[1];
var _useState3 = (0, _react.useState)({
width: 0,
left: 0
}),
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
slideStyle = _useState4[0],
setSlideStyle = _useState4[1];
var activeItem = (0, _react.useRef)();
var cls = [prefixCls, className, type ? "".concat(prefixCls, "-").concat(type) : null].filter(Boolean).join(' ').trim();
var _useState5 = (0, _react.useState)({
content: 0,
nav: [],
flowLeft: -1,
displayStart: 0,
displayEnd: 0
}),
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
flowNav = _useState6[0],
flowNavSet = _useState6[1];
var _useState7 = (0, _react.useState)([]),
_useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
hiddenNav = _useState8[0],
hiddenNavSet = _useState8[1];
var deviation = 15;
var _useState9 = (0, _react.useState)(),
_useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
nodes = _useState10[0],
nodesSet = _useState10[1];
var divContentRef = (0, _react.useCallback)(function (node) {
if (node !== null) {
nodesSet(nodes);
node.addEventListener('scroll', function (e) {
var _e$target = e.target,
clientWidth = _e$target.clientWidth,
scrollLeft = _e$target.scrollLeft;
flowNav.displayStart = scrollLeft;
flowNav.displayEnd = clientWidth + scrollLeft;
flowNavSet((0, _objectSpread2["default"])({}, flowNav));
});
flowNav.displayEnd = node.getBoundingClientRect().width;
flowNavSet((0, _objectSpread2["default"])({}, flowNav));
}
}, []);
var divNavRef = (0, _react.useCallback)(function (node, key, itemKey, activeKey) {
if (node !== null) {
// node.addEventListener('click', (e: any) => {
// activeItem.current = node;
// });
divNavWidthChange(node.getBoundingClientRect().width, key);
if (itemKey === activeKey) {
activeItem.current = node;
}
}
}, []);
var divNavWidthChange = function divNavWidthChange(width, index) {
var curWidth = 0;
flowNav.nav.slice(0, index + 1).forEach(function (nav) {
return curWidth += nav.width;
});
flowNav.nav[index] = {
width: width,
curWidth: Math.floor(curWidth),
index: index
};
flowNavSet(flowNav);
};
(0, _react.useEffect)(function () {
showHideenNav();
}, [flowNav.displayEnd > ((_flowNav$nav = flowNav.nav[flowNav.nav.length - 1]) === null || _flowNav$nav === void 0 ? void 0 : _flowNav$nav.curWidth)]);
var showHideenNav = function showHideenNav() {
var hiddenNav = [];
if (flowNav.nav.length > 0) {
flowNav.nav.forEach(function (item) {
var curWidth = item.curWidth - deviation;
if (flowNav.displayStart > 0 || flowNav.displayEnd > 0) {
if (curWidth < flowNav.displayStart || curWidth > flowNav.displayEnd) {
hiddenNav.push(item.index);
}
}
});
hiddenNavSet(hiddenNav);
}
};
(0, _react.useEffect)(function () {
return setActiveKey((props === null || props === void 0 ? void 0 : props.activeKey) || '');
}, [props.activeKey]);
(0, _react.useEffect)(function () {
return calcSlideStyle();
}, [activeKey]);
function calcSlideStyle() {
if (activeItem.current && type === 'line') {
setSlideStyle({
width: activeItem.current.clientWidth,
left: activeItem.current.offsetLeft
});
}
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
className: cls
}, elementProps), {}, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
style: {
display: 'flex'
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
style: {
overflow: 'hidden'
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "".concat(prefixCls, "-bar"),
ref: divContentRef,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "".concat(prefixCls, "-nav"),
style: {
width: 'max-content'
},
children: [renderNav(children), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
style: slideStyle,
className: "".concat(prefixCls, "-slide")
})]
})
})
}), hiddenNav.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactPopover["default"], {
trigger: "click",
placement: "bottomRight",
visibleArrow: false,
content: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "".concat(prefixCls, "-nav-hidden"),
children: renderNav(hiddenNav.map(function (idx) {
return children[idx];
}))
}),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
onClick: showHideenNav,
className: "".concat(prefixCls, "-flow-content"),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
children: "\u2026"
})
})
})]
}), _react["default"].Children.map(children, function (item) {
if (!item || activeKey !== item.key) {
return null;
}
return /*#__PURE__*/_react["default"].cloneElement(item, Object.assign({}, item.props, {}));
})]
}));
function renderNav(children) {
return _react["default"].Children.map(children, function (item, key) {
if (!item) {
return null;
}
var divProps = {
className: ["".concat(prefixCls, "-item"), item.key === activeKey ? 'active' : null, item.props.disabled ? 'disabled' : null].filter(Boolean).join(' ').trim(),
children: item.props.label
};
if (!item.props.disabled) {
divProps.onClick = function (e) {
setActiveKey(item.key);
onTabClick && onTabClick(item.key, item, e);
calcSlideStyle();
};
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2["default"])({
ref: function ref(_ref) {
return divNavRef(_ref, key, item.key, activeKey);
}
}, divProps), key);
});
}
}