185 lines
6.5 KiB
JavaScript
185 lines
6.5 KiB
JavaScript
"use strict";
|
|
"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 _DownOutlined = _interopRequireDefault(require("@ant-design/icons/DownOutlined"));
|
|
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 = 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,
|
|
dropdownIcon,
|
|
...restProps
|
|
} = props;
|
|
const {
|
|
getPrefixCls,
|
|
direction,
|
|
className: contextClassName,
|
|
style: contextStyle,
|
|
classNames: contextClassNames,
|
|
styles: contextStyles,
|
|
separator: contextSeparator,
|
|
dropdownIcon: contextDropdownIcon
|
|
} = (0, _context.useComponentConfig)('breadcrumb');
|
|
const mergedSeparator = separator ?? contextSeparator ?? '/';
|
|
const mergedDropdownIcon = dropdownIcon ?? contextDropdownIcon ?? /*#__PURE__*/React.createElement(_DownOutlined.default, null);
|
|
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,
|
|
dropdownIcon: mergedDropdownIcon,
|
|
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)));
|
|
};
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
Breadcrumb.displayName = 'Breadcrumb';
|
|
}
|
|
var _default = exports.default = Breadcrumb; |