tdesign-react
Version:
TDesign Component for React
391 lines (382 loc) • 17.4 kB
JavaScript
/**
* tdesign v1.15.1
* (c) 2025 tdesign
* @license MIT
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var defineProperty = require('../_chunks/dep-0006fcfa.js');
var slicedToArray = require('../_chunks/dep-8e4d656d.js');
var React = require('react');
var classNames = require('classnames');
var tdesignIconsReact = require('tdesign-icons-react');
var _util_noop = require('../_util/noop.js');
var tabs_useTabClass = require('./useTabClass.js');
var tabs_TabNavItem = require('./TabNavItem.js');
var tabs_TabBar = require('./TabBar.js');
var hooks_useGlobalIcon = require('../hooks/useGlobalIcon.js');
var _util_parseTNode = require('../_util/parseTNode.js');
var debounce = require('../_chunks/dep-a231fdc5.js');
var omit = require('../_chunks/dep-d5e8c967.js');
require('../_chunks/dep-667ac7af.js');
require('../_chunks/dep-00b49251.js');
require('../hooks/useConfig.js');
require('../config-provider/ConfigContext.js');
require('../_chunks/dep-1df1dad8.js');
require('../_chunks/dep-5b5ab11b.js');
require('dayjs');
require('../_chunks/dep-f32c03f1.js');
require('../_chunks/dep-31c4bc3d.js');
require('../_chunks/dep-eea2872a.js');
require('../_chunks/dep-25585736.js');
require('../_chunks/dep-62e73936.js');
require('../_chunks/dep-64577888.js');
require('../_chunks/dep-71455db7.js');
require('../_chunks/dep-9e5a468d.js');
require('../_chunks/dep-ec8d2dca.js');
require('../_chunks/dep-fc596d16.js');
require('../_chunks/dep-f26edb7b.js');
require('../_chunks/dep-f33c1939.js');
require('../_chunks/dep-21ece627.js');
require('../_chunks/dep-25e4aa84.js');
require('../_chunks/dep-e1fbe1c3.js');
require('../_chunks/dep-df2b541f.js');
require('../_chunks/dep-edd366db.js');
require('../_chunks/dep-a56c4939.js');
require('../_chunks/dep-6c297e20.js');
require('../_chunks/dep-b7ad4d54.js');
require('../_chunks/dep-a2cb9299.js');
require('../_chunks/dep-f981815b.js');
require('../hooks/useRipple.js');
require('../_chunks/dep-dc4ce063.js');
require('../hooks/useAnimation.js');
require('../_chunks/dep-381fa848.js');
require('../_chunks/dep-4ed9eda4.js');
require('../hooks/useDomRefCallback.js');
require('../hooks/useMutationObserver.js');
require('../hooks/useLatest.js');
require('../_chunks/dep-eb6d55c1.js');
require('../_chunks/dep-014b9b78.js');
require('../_chunks/dep-abdd786a.js');
require('../_chunks/dep-3d4656ee.js');
require('../_chunks/dep-0ffc9d96.js');
require('../_chunks/dep-efe6d243.js');
require('../_chunks/dep-4b18243f.js');
require('../_chunks/dep-bff2c990.js');
require('../_chunks/dep-cf14666e.js');
require('../_chunks/dep-79629634.js');
require('../hooks/useResizeObserver.js');
require('../hooks/useLayoutEffect.js');
require('../_chunks/dep-59671c87.js');
require('../_chunks/dep-255ceed8.js');
require('../_chunks/dep-a48c7e8b.js');
require('../_chunks/dep-9a375a19.js');
require('../_chunks/dep-3398c1f2.js');
require('../_chunks/dep-d915c90f.js');
require('../_chunks/dep-7a148045.js');
require('../_chunks/dep-373af7a2.js');
require('../_chunks/dep-fc29b8b5.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
var getDomWidth = function getDomWidth(dom) {
return (dom === null || dom === void 0 ? void 0 : dom.offsetWidth) || 0;
};
var getDomOffsetLeft = function getDomOffsetLeft(dom) {
return (dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0;
};
function calculateOffset(depElement, offset, scrollPosition) {
var navsContainer = depElement.navsContainer,
activeTab = depElement.activeTab,
rightOperations = depElement.rightOperations,
leftOperations = depElement.leftOperations;
var tabWidth = getDomWidth(activeTab);
var wrapWidth = getDomWidth(navsContainer);
var tabOffset = getDomOffsetLeft(activeTab);
var rightOperationsWidth = getDomWidth(rightOperations);
var leftOperationsWidth = getDomWidth(leftOperations);
if (scrollPosition === "auto") {
if (tabOffset - leftOperationsWidth < offset) {
return tabOffset - leftOperationsWidth;
}
if (tabOffset + tabWidth > offset + wrapWidth - rightOperationsWidth) {
return tabOffset + tabWidth - wrapWidth + rightOperationsWidth;
}
} else if (scrollPosition === "start") {
return tabOffset - leftOperationsWidth;
} else if (scrollPosition === "center") {
return tabOffset + (tabWidth - wrapWidth) / 2;
} else if (scrollPosition === "end") {
return tabOffset + tabWidth - wrapWidth + rightOperationsWidth;
}
return offset;
}
function calcPrevOrNextOffset(elements, offset, action) {
var navsContainer = elements.navsContainer,
activeTab = elements.activeTab;
var navsContainerWidth = getDomWidth(navsContainer);
var activeTabWidth = getDomWidth(activeTab);
var diffWidth = Math.abs(navsContainerWidth - activeTabWidth);
if (action === "next") {
return offset + diffWidth;
}
return offset - diffWidth;
}
function calcMaxOffset(elements) {
var navsWrap = elements.navsWrap,
navsContainer = elements.navsContainer,
rightOperations = elements.rightOperations,
toRightBtn = elements.toRightBtn;
var wrapWidth = getDomWidth(navsWrap);
var containerWidth = getDomWidth(navsContainer);
var rightOperationsWidth = getDomWidth(rightOperations);
var toRightBtnWidth = getDomWidth(toRightBtn);
return wrapWidth - containerWidth + rightOperationsWidth - toRightBtnWidth;
}
function calcValidOffset(offset, maxOffset) {
return Math.max(0, Math.min(offset, maxOffset));
}
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { defineProperty._defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var TabNav = function TabNav(props) {
var _props$placement = props.placement,
placement = _props$placement === void 0 ? "top" : _props$placement,
_props$itemList = props.itemList,
itemList = _props$itemList === void 0 ? [] : _props$itemList,
theme = props.theme,
addable = props.addable,
onAdd = props.onAdd,
_props$scrollPosition = props.scrollPosition,
scrollPosition = _props$scrollPosition === void 0 ? "auto" : _props$scrollPosition,
_props$size = props.size,
size = _props$size === void 0 ? "medium" : _props$size,
_props$disabled = props.disabled,
disabled = _props$disabled === void 0 ? false : _props$disabled,
_props$onRemove = props.onRemove,
onRemove = _props$onRemove === void 0 ? _util_noop["default"] : _props$onRemove,
_props$onChange = props.onChange,
onChange = _props$onChange === void 0 ? _util_noop["default"] : _props$onChange,
activeValue = props.activeValue,
children = props.children,
action = props.action,
getDragProps = props.getDragProps;
var _useGlobalIcon = hooks_useGlobalIcon["default"]({
AddIcon: tdesignIconsReact.AddIcon,
ChevronLeftIcon: tdesignIconsReact.ChevronLeftIcon,
ChevronRightIcon: tdesignIconsReact.ChevronRightIcon
}),
AddIcon = _useGlobalIcon.AddIcon,
ChevronLeftIcon = _useGlobalIcon.ChevronLeftIcon,
ChevronRightIcon = _useGlobalIcon.ChevronRightIcon;
var isCard = theme === "card";
var _useTabClass = tabs_useTabClass.useTabClass(),
tdTabsClassGenerator = _useTabClass.tdTabsClassGenerator,
tdClassGenerator = _useTabClass.tdClassGenerator,
tdSizeClassGenerator = _useTabClass.tdSizeClassGenerator;
var navsContainerRef = React.useRef(null);
var navsWrapRef = React.useRef(null);
var getIndex = React.useCallback(function (value) {
var index = itemList.findIndex(function (item) {
return item.value === value;
});
return index > -1 ? index : -1;
}, [itemList]);
var activeIndex = getIndex(activeValue);
var _useState = React.useState(false),
_useState2 = slicedToArray._slicedToArray(_useState, 2),
canToLeft = _useState2[0],
setToLeftBtnVisible = _useState2[1];
var _useState3 = React.useState(false),
_useState4 = slicedToArray._slicedToArray(_useState3, 2),
canToRight = _useState4[0],
setToRightBtnVisible = _useState4[1];
var scrollBarRef = React.useRef(null);
var leftOperationsRef = React.useRef(null);
var rightOperationsRef = React.useRef(null);
var toLeftBtnRef = React.useRef(null);
var toRightBtnRef = React.useRef(null);
var _useState5 = React.useState(0),
_useState6 = slicedToArray._slicedToArray(_useState5, 2),
scrollLeft = _useState6[0],
setScrollLeft = _useState6[1];
var _useState7 = React.useState(0),
_useState8 = slicedToArray._slicedToArray(_useState7, 2),
maxScrollLeft = _useState8[0],
setMaxScrollLeft = _useState8[1];
var _useState9 = React.useState(null),
_useState0 = slicedToArray._slicedToArray(_useState9, 2),
activeTab = _useState0[0],
setActiveTab = _useState0[1];
var setOffset = function setOffset(offset) {
setScrollLeft(calcValidOffset(offset, maxScrollLeft));
};
var getMaxScrollLeft = React.useCallback(function () {
if (["top", "bottom"].includes(placement.toLowerCase())) {
var maxOffset = calcMaxOffset({
navsWrap: navsWrapRef.current,
navsContainer: navsContainerRef.current,
rightOperations: rightOperationsRef.current,
toRightBtn: toRightBtnRef.current
});
setMaxScrollLeft(maxOffset);
}
}, [placement]);
var moveActiveTabIntoView = function moveActiveTabIntoView() {
var offset = calculateOffset({
activeTab: activeTab,
navsContainer: navsContainerRef.current,
leftOperations: leftOperationsRef.current,
rightOperations: rightOperationsRef.current
}, scrollLeft, scrollPosition);
setOffset(offset);
};
React.useEffect(function () {
var timeout = setTimeout(function () {
moveActiveTabIntoView();
}, 100);
return function () {
return clearTimeout(timeout);
};
}, [activeTab, maxScrollLeft, scrollPosition]);
React.useEffect(function () {
if (["top", "bottom"].includes(placement.toLowerCase())) {
var canToLeft2 = scrollLeft > 1;
var canToRight2 = scrollLeft < maxScrollLeft - 1;
setToLeftBtnVisible(canToLeft2);
setToRightBtnVisible(canToRight2);
}
}, [placement, scrollLeft, maxScrollLeft]);
var handleScroll = function handleScroll(action2) {
var offset = calcPrevOrNextOffset({
activeTab: activeTab,
navsContainer: navsContainerRef.current
}, scrollLeft, action2);
setOffset(offset);
};
React.useEffect(function () {
var scrollBar = scrollBarRef.current;
if (!scrollBar) return;
var handleWheel = function handleWheel(e) {
if (!canToLeft && !canToRight) return;
e.preventDefault();
var deltaX = e.deltaX,
deltaY = e.deltaY;
if (Math.abs(deltaX) > Math.abs(deltaY)) {
setOffset(scrollLeft + deltaX);
} else {
setOffset(scrollLeft + deltaY);
}
};
scrollBar.addEventListener("wheel", handleWheel, {
passive: false
});
return function () {
scrollBar === null || scrollBar === void 0 || scrollBar.removeEventListener("wheel", handleWheel);
};
});
React.useEffect(function () {
var onResize = debounce.debounce(getMaxScrollLeft, 300);
window.addEventListener("resize", onResize);
return function () {
window.removeEventListener("resize", onResize);
onResize.cancel();
};
});
React.useEffect(function () {
getMaxScrollLeft();
}, [itemList.length, children, getMaxScrollLeft]);
var TabBarCom = isCard ? null : /* @__PURE__ */React__default["default"].createElement(tabs_TabBar["default"], {
tabPosition: placement,
activeId: activeIndex,
containerRef: navsWrapRef,
navsWrapRef: navsWrapRef
});
var handleTabItemRemove = function handleTabItemRemove(removeItem) {
var removeValue = removeItem.value,
removeIndex = removeItem.index;
if (removeValue === activeValue) {
var _itemList;
onChange(removeIndex === 0 ? (_itemList = itemList[removeIndex + 1]) === null || _itemList === void 0 ? void 0 : _itemList.value : itemList[removeIndex - 1].value);
}
onRemove(removeItem);
};
var handleTabItemClick = function handleTabItemClick(clickItem) {
var _clickItem$onClick;
if (activeValue !== clickItem.value) {
onChange(clickItem.value);
}
clickItem === null || clickItem === void 0 || (_clickItem$onClick = clickItem.onClick) === null || _clickItem$onClick === void 0 || _clickItem$onClick.call(clickItem, clickItem.value);
};
var handleTabAdd = function handleTabAdd(e) {
onAdd({
e: e
});
};
return /* @__PURE__ */React__default["default"].createElement("div", {
ref: navsContainerRef,
className: classNames__default["default"](tdTabsClassGenerator("nav")),
style: {
minHeight: 48
}
}, /* @__PURE__ */React__default["default"].createElement("div", {
ref: leftOperationsRef,
className: classNames__default["default"](tdTabsClassGenerator("operations"), tdTabsClassGenerator("operations--left"))
}, canToLeft ? /* @__PURE__ */React__default["default"].createElement("div", {
onClick: function onClick() {
handleScroll("prev");
},
className: classNames__default["default"](tdTabsClassGenerator("btn"), tdTabsClassGenerator("btn--left"), tdSizeClassGenerator(size)),
ref: toLeftBtnRef
}, /* @__PURE__ */React__default["default"].createElement(ChevronLeftIcon, null)) : null), /* @__PURE__ */React__default["default"].createElement("div", {
ref: rightOperationsRef,
className: classNames__default["default"](tdTabsClassGenerator("operations"), tdTabsClassGenerator("operations--right"))
}, canToRight ? /* @__PURE__ */React__default["default"].createElement("div", {
onClick: function onClick() {
handleScroll("next");
},
className: classNames__default["default"](tdTabsClassGenerator("btn"), tdTabsClassGenerator("btn--right"), tdSizeClassGenerator(size)),
ref: toRightBtnRef
}, /* @__PURE__ */React__default["default"].createElement(ChevronRightIcon, null)) : null, addable ? /* @__PURE__ */React__default["default"].createElement("div", {
className: classNames__default["default"](tdTabsClassGenerator("add-btn"), tdTabsClassGenerator("btn"), tdSizeClassGenerator(size)),
onClick: handleTabAdd
}, /* @__PURE__ */React__default["default"].createElement(AddIcon, null)) : null, action ? /* @__PURE__ */React__default["default"].createElement("div", {
className: classNames__default["default"](tdTabsClassGenerator("btn"), tdTabsClassGenerator("nav-action"), tdSizeClassGenerator(size))
}, _util_parseTNode["default"](action)) : null), /* @__PURE__ */React__default["default"].createElement("div", {
className: classNames__default["default"](tdTabsClassGenerator("nav-container"), isCard ? tdTabsClassGenerator("nav--card") : "", tdClassGenerator("is-".concat(placement)), addable ? tdClassGenerator("is-addable") : "")
}, /* @__PURE__ */React__default["default"].createElement("div", {
className: classNames__default["default"](tdTabsClassGenerator("nav-scroll"), canToLeft || canToRight ? tdClassGenerator("is-scrollable") : ""),
ref: scrollBarRef
}, /* @__PURE__ */React__default["default"].createElement("div", {
className: classNames__default["default"](tdTabsClassGenerator("nav-wrap"), ["left", "right"].includes(placement) ? tdClassGenerator("is-vertical") : "", tdClassGenerator("is-smooth")),
style: {
transform: "translate(".concat(-scrollLeft, "px, 0)")
},
ref: navsWrapRef
}, placement !== "bottom" ? TabBarCom : null, !isCard && /* @__PURE__ */React__default["default"].createElement("div", {
className: classNames__default["default"](tdTabsClassGenerator("bar"), tdClassGenerator("is-".concat(placement)))
}), itemList.map(function (v, index) {
return /* @__PURE__ */React__default["default"].createElement(tabs_TabNavItem["default"], _objectSpread(_objectSpread(_objectSpread({}, omit.omit(props, ["className", "style"])), v), {}, {
dragProps: _objectSpread({}, getDragProps === null || getDragProps === void 0 ? void 0 : getDragProps(index, v)),
onRemove: v.onRemove,
key: v.value,
label: v.label,
isActive: activeValue === v.value,
theme: theme,
placement: placement,
index: index,
disabled: disabled || v.disabled,
onClick: function onClick() {
return handleTabItemClick(v);
},
onTabRemove: handleTabItemRemove,
innerRef: function innerRef(ref) {
if (activeValue === v.value) {
setActiveTab(ref);
}
}
}));
}), placement === "bottom" ? TabBarCom : null))));
};
TabNav.displayName = "TabNav";
exports["default"] = TabNav;
//# sourceMappingURL=TabNav.js.map