All files / src/breadcrumb Breadcrumb.tsx

100% Statements 10/10
87.5% Branches 7/8
100% Functions 3/3
100% Lines 10/10

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86                                      1x   1x 1x               3x       1x       2x                                         3x   3x   1x     3x                                      
import React from "react";
import classNames from "classnames";
import { isChildOfType } from "../_util/is-child-of-type";
import { StyledProps } from "../_type";
import { withStatics } from "../_util/with-statics";
import { useConfig } from "../_util/config-context";
 
export interface BreadcrumbProps extends StyledProps {
  /**
   * 导航内容
   */
  children?: React.ReactNode;
 
  /**
   * 较大字号的样式,可用于 Layout.Content 标题处
   */
  large?: boolean;
}
 
export const Breadcrumb = withStatics(
  function Breadcrumb({ large, children, className, style }: BreadcrumbProps) {
    const { classPrefix } = useConfig();
    return (
      <ol
        className={classNames(`${classPrefix}-breadcrumb`, className, {
          [`${classPrefix}-breadcrumb--fz-large`]: large,
        })}
        style={style}
      >
        {React.Children.map(children, (child, index) => {
          if (
            isChildOfType(child, BreadcrumbItem) &&
            index === React.Children.count(children) - 1
          ) {
            return React.cloneElement(child, {
              current: true,
            });
          }
          return child;
        })}
      </ol>
    );
  },
  {
    Item: BreadcrumbItem,
  }
);
 
interface BreadcrumbItemProps extends StyledProps {
  current?: boolean;
  children?: React.ReactNode;
}
 
export function BreadcrumbItem({
  current,
  children,
  className,
  style,
}: BreadcrumbItemProps) {
  const { classPrefix } = useConfig();
 
  if (typeof children === "string") {
    // eslint-disable-next-line no-param-reassign
    children = <span>{children}</span>;
  }
 
  return (
    <li
      className={classNames(`${classPrefix}-breadcrumb__item`, className)}
      style={style}
    >
      {React.isValidElement<StyledProps>(children)
        ? React.cloneElement(children, {
            className: classNames(
              children.props.className,
              `${classPrefix}-breadcrumb__item-title`,
              {
                "is-current": current,
              }
            ),
          })
        : children}
    </li>
  );
}