antd
Version:
An enterprise-class UI design language and React components implementation
182 lines (181 loc) • 6.49 kB
JavaScript
;
"use client";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _util = require("@rc-component/util");
var _pickAttrs = _interopRequireDefault(require("@rc-component/util/lib/pickAttrs"));
var _clsx = require("clsx");
var _hooks = require("../_util/hooks");
var _reactNode = require("../_util/reactNode");
var _warning = require("../_util/warning");
var _context = require("../config-provider/context");
var _BreadcrumbContext = _interopRequireDefault(require("./BreadcrumbContext"));
var _BreadcrumbItem = _interopRequireWildcard(require("./BreadcrumbItem"));
var _BreadcrumbSeparator = _interopRequireDefault(require("./BreadcrumbSeparator"));
var _style = _interopRequireDefault(require("./style"));
var _useItemRender = _interopRequireDefault(require("./useItemRender"));
var _useItems = _interopRequireDefault(require("./useItems"));
const getPath = (params, path) => {
if (path === undefined) {
return path;
}
let mergedPath = (path || '').replace(/^\//, '');
Object.keys(params).forEach(key => {
mergedPath = mergedPath.replace(`:${key}`, params[key]);
});
return mergedPath;
};
const Breadcrumb = props => {
const {
prefixCls: customizePrefixCls,
separator,
style,
className,
rootClassName,
routes: legacyRoutes,
items,
children,
itemRender,
params = {},
classNames,
styles,
...restProps
} = props;
const {
getPrefixCls,
direction,
className: contextClassName,
style: contextStyle,
classNames: contextClassNames,
styles: contextStyles,
separator: contextSeparator
} = (0, _context.useComponentConfig)('breadcrumb');
const mergedSeparator = separator ?? contextSeparator ?? '/';
let crumbs;
const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
const [hashId, cssVarCls] = (0, _style.default)(prefixCls);
const mergedItems = (0, _useItems.default)(items, legacyRoutes);
// =========== Merged Props for Semantic ==========
const mergedProps = React.useMemo(() => {
return {
...props,
separator: mergedSeparator
};
}, [props, mergedSeparator]);
// ========================= Style ==========================
const [mergedClassNames, mergedStyles] = (0, _hooks.useMergeSemantic)([contextClassNames, classNames], [contextStyles, styles], {
props: mergedProps
});
if (process.env.NODE_ENV !== 'production') {
const warning = (0, _warning.devUseWarning)('Breadcrumb');
warning.deprecated(!legacyRoutes, 'routes', 'items');
// Deprecated warning for breadcrumb children
if (!mergedItems || mergedItems.length === 0) {
const childList = (0, _util.toArray)(children);
warning.deprecated(childList.length === 0, 'Breadcrumb.Item and Breadcrumb.Separator', 'items');
childList.forEach(element => {
if (element) {
process.env.NODE_ENV !== "production" ? warning(element.type && (element.type.__ANT_BREADCRUMB_ITEM === true || element.type.__ANT_BREADCRUMB_SEPARATOR === true), 'usage', "Only accepts Breadcrumb.Item and Breadcrumb.Separator as it's children") : void 0;
}
});
}
}
const mergedItemRender = (0, _useItemRender.default)(prefixCls, itemRender);
if (mergedItems && mergedItems.length > 0) {
// generated by route
const paths = [];
const itemRenderRoutes = items || legacyRoutes;
crumbs = mergedItems.map((item, index) => {
const {
path,
key,
type,
menu,
onClick,
className: itemClassName,
style,
separator: itemSeparator,
dropdownProps
} = item;
const mergedPath = getPath(params, path);
if (mergedPath !== undefined) {
paths.push(mergedPath);
}
const mergedKey = key ?? index;
if (type === 'separator') {
return /*#__PURE__*/React.createElement(_BreadcrumbSeparator.default, {
key: mergedKey
}, itemSeparator);
}
const itemProps = {};
const isLastItem = index === mergedItems.length - 1;
if (menu) {
itemProps.menu = menu;
}
let {
href
} = item;
if (paths.length && mergedPath !== undefined) {
href = `#/${paths.join('/')}`;
}
return /*#__PURE__*/React.createElement(_BreadcrumbItem.InternalBreadcrumbItem, {
key: mergedKey,
...itemProps,
...(0, _pickAttrs.default)(item, {
data: true,
aria: true
}),
className: itemClassName,
style: style,
dropdownProps: dropdownProps,
href: href,
separator: isLastItem ? '' : mergedSeparator,
onClick: onClick,
prefixCls: prefixCls
}, mergedItemRender(item, params, itemRenderRoutes, paths, href));
});
} else if (children) {
const childrenLength = (0, _util.toArray)(children).length;
crumbs = (0, _util.toArray)(children).map((element, index) => {
if (!element) {
return element;
}
const isLastItem = index === childrenLength - 1;
return (0, _reactNode.cloneElement)(element, {
separator: isLastItem ? '' : mergedSeparator,
// eslint-disable-next-line react/no-array-index-key
key: index
});
});
}
const breadcrumbClassName = (0, _clsx.clsx)(prefixCls, contextClassName, {
[`${prefixCls}-rtl`]: direction === 'rtl'
}, className, rootClassName, mergedClassNames.root, hashId, cssVarCls);
const mergedStyle = {
...mergedStyles.root,
...contextStyle,
...style
};
const memoizedValue = React.useMemo(() => ({
classNames: mergedClassNames,
styles: mergedStyles
}), [mergedClassNames, mergedStyles]);
return /*#__PURE__*/React.createElement(_BreadcrumbContext.default.Provider, {
value: memoizedValue
}, /*#__PURE__*/React.createElement("nav", {
className: breadcrumbClassName,
style: mergedStyle,
...restProps
}, /*#__PURE__*/React.createElement("ol", null, crumbs)));
};
Breadcrumb.Item = _BreadcrumbItem.default;
Breadcrumb.Separator = _BreadcrumbSeparator.default;
if (process.env.NODE_ENV !== 'production') {
Breadcrumb.displayName = 'Breadcrumb';
}
var _default = exports.default = Breadcrumb;