tdesign-react
Version:
TDesign Component for React
167 lines (163 loc) • 7.5 kB
JavaScript
/**
* tdesign v1.13.2
* (c) 2025 tdesign
* @license MIT
*/
import { _ as _defineProperty } from '../_chunks/dep-8618a2f1.js';
import { _ as _slicedToArray } from '../_chunks/dep-118954e6.js';
import { _ as _objectWithoutProperties } from '../_chunks/dep-30ed04a0.js';
import React, { forwardRef, useContext, useRef, useState, useMemo, useEffect } from 'react';
import classNames from 'classnames';
import { ChevronRightIcon } from 'tdesign-icons-react';
import { isFunction } from 'lodash-es';
import useConfig from '../hooks/useConfig.js';
import useGlobalIcon from '../hooks/useGlobalIcon.js';
import useCommonClassName from '../hooks/useCommonClassName.js';
import { BreadcrumbContext } from './BreadcrumbContext.js';
import parseTNode from '../_util/parseTNode.js';
import { breadcrumbItemDefaultProps } from './defaultProps.js';
import { TooltipLite } from '../tooltip/index.js';
import useDefaultProps from '../hooks/useDefaultProps.js';
import { isNodeOverflow } from '../_util/scroll.js';
import '../_chunks/dep-c37cc2fd.js';
import '../_chunks/dep-61f5e3d1.js';
import '../config-provider/ConfigContext.js';
import '../_chunks/dep-698f8ddd.js';
import '../_chunks/dep-09955460.js';
import 'dayjs';
import '../_chunks/dep-d104053f.js';
import '../tooltip/Tooltip.js';
import '../popup/index.js';
import '../popup/Popup.js';
import 'react-transition-group';
import '../_util/ref.js';
import 'react-is';
import '../_util/isFragment.js';
import '../_chunks/dep-82b8abc2.js';
import '../common/Portal.js';
import 'react-dom';
import '../hooks/useLayoutEffect.js';
import '../hooks/useAnimation.js';
import '../hooks/useAttach.js';
import '../hooks/useControlled.js';
import '../_util/noop.js';
import '../hooks/useMutationObserver.js';
import '../hooks/useLatest.js';
import '../hooks/usePopper.js';
import '../_chunks/dep-132961ab.js';
import '@popperjs/core';
import 'react-fast-compare';
import '../hooks/useWindowSize.js';
import '../popup/defaultProps.js';
import '../popup/hooks/useTrigger.js';
import '../_util/composeRefs.js';
import '../_util/listener.js';
import '../popup/utils/transition.js';
import '../popup/PopupPlugin.js';
import '../_chunks/dep-e78f641d.js';
import '../_util/react-render.js';
import '../common/PluginContainer.js';
import '../config-provider/ConfigProvider.js';
import '../tooltip/defaultProps.js';
import '../tooltip/TooltipLite.js';
import '../hooks/useSwitch.js';
import '../hooks/usePersistFn.js';
import 'raf';
import '../_util/easing.js';
var _excluded = ["children", "separator", "disabled", "maxItemWidth", "maxWidth", "icon", "href", "to", "target", "router", "replace", "className", "content", "onClick", "tooltipProps", "readOnly"];
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(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 BreadcrumbItem = /*#__PURE__*/forwardRef(function (props, ref) {
var _useConfig = useConfig(),
classPrefix = _useConfig.classPrefix;
var commonClassNames = useCommonClassName();
var _useGlobalIcon = useGlobalIcon({
ChevronRightIcon: ChevronRightIcon
}),
ChevronRightIcon$1 = _useGlobalIcon.ChevronRightIcon;
var _useDefaultProps = useDefaultProps(props, breadcrumbItemDefaultProps),
children = _useDefaultProps.children,
separator = _useDefaultProps.separator,
disabled = _useDefaultProps.disabled,
maxItemWidth = _useDefaultProps.maxItemWidth,
maxWidth = _useDefaultProps.maxWidth,
icon = _useDefaultProps.icon,
href = _useDefaultProps.href,
to = _useDefaultProps.to,
target = _useDefaultProps.target,
router = _useDefaultProps.router,
replace = _useDefaultProps.replace,
className = _useDefaultProps.className,
content = _useDefaultProps.content,
onClick = _useDefaultProps.onClick,
tooltipProps = _useDefaultProps.tooltipProps,
readonly = _useDefaultProps.readOnly,
restProps = _objectWithoutProperties(_useDefaultProps, _excluded);
var _useContext = useContext(BreadcrumbContext),
maxItemWidthInContext = _useContext.maxItemWidthInContext,
separatorInContext = _useContext.separator;
var breadcrumbText = useRef(null);
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
isCutOff = _useState2[0],
setIsCutOff = _useState2[1];
var breadcrumbItemClassNames = classNames("".concat(classPrefix, "-breadcrumb__item"));
var textWrapperClassName = "".concat(classPrefix, "-breadcrumb__inner");
var textClassName = "".concat(classPrefix, "-breadcrumb__inner-text");
var textClassNames = classNames(_defineProperty(_defineProperty({}, "".concat(classPrefix, "-breadcrumb--text-overflow"), !readonly), commonClassNames.STATUS.disabled, disabled));
var separatorClassName = "".concat(classPrefix, "-breadcrumb__separator");
var linkClassName = "".concat(classPrefix, "-link");
var maxWidthForItem = useMemo(function () {
return {
maxWidth: maxWidth || maxItemWidth || maxItemWidthInContext || "120px"
};
}, [maxItemWidth, maxWidth, maxItemWidthInContext]);
useEffect(function () {
if (!breadcrumbText.current) return;
return setIsCutOff(isNodeOverflow(breadcrumbText.current));
}, [breadcrumbText]);
var textContent = /* @__PURE__ */React.createElement("span", {
className: textWrapperClassName,
style: maxWidthForItem
}, isFunction(icon) ? icon() : icon, /* @__PURE__ */React.createElement("span", {
ref: breadcrumbText,
className: textClassName
}, children || content));
var itemContent = /* @__PURE__ */React.createElement("span", {
className: textClassNames
}, textContent);
if ((href || to) && !disabled) {
var handleRouting = function handleRouting() {
if (href || !router) return;
replace ? router.replace(to) : router.push(to);
};
itemContent = /* @__PURE__ */React.createElement("a", {
className: classNames(textClassNames, linkClassName),
href: href,
target: target,
onClick: handleRouting
}, textContent);
}
var separatorInProps = parseTNode(separator);
var separatorContent = separatorInProps || separatorInContext || /* @__PURE__ */React.createElement(ChevronRightIcon$1, {
style: {
opacity: ".5"
}
});
var handleClick = function handleClick(e) {
if (disabled) return;
onClick === null || onClick === void 0 || onClick(e);
};
return /* @__PURE__ */React.createElement("div", _objectSpread({
className: classNames(breadcrumbItemClassNames, className),
ref: ref,
onClick: handleClick
}, restProps), isCutOff ? /* @__PURE__ */React.createElement(TooltipLite, _objectSpread({
content: children || content
}, tooltipProps), itemContent) : itemContent, /* @__PURE__ */React.createElement("span", {
className: separatorClassName
}, separatorContent));
});
BreadcrumbItem.displayName = "BreadcrumbItem";
export { BreadcrumbItem as default };
//# sourceMappingURL=BreadcrumbItem.js.map