[React Ocean 组件库] 实现 Breadcrumb 面包屑导航

交互展示

使用

import { Breadcrumb, BreadcrumbItem } from 'Ocean';
import React from 'react';
const Basic = () => {
  return (
    <div>
      <Breadcrumb>
        <BreadcrumbItem>Application1</BreadcrumbItem>
        <BreadcrumbItem>Application2</BreadcrumbItem>
      </Breadcrumb>
    </div>
  );
};

需求

• 支持自定义字体大小
• 支持背景，及 hover 效果
• 每组的最后一个导航，保持 hover 效果
• 支持下划线导航
• 支持图标导航
• 支持自定义分隔符导航

实现

const Breadcrumb = (props: Breadcrumb) => {
  const {
    children,
    separator = '/',
    fontSize = '13px',
    outline = false,
    underline = false,
  } = props;
  const breadcrumbList = Children.toArray(children);
  const isLastItem = (index: number) => index === breadcrumbList.length - 1;

  return (
    <BreadcrumbContext.Provider value={{ fontSize, outline, underline }}>
      <BreadcrumbWrapper className="ocean-bread-crumb-wrapper">
        {Children.map(breadcrumbList, (breadcrumb: any, index) => {
          let lastBreadcrumb;
          const isLast = isLastItem(index);
          if (isLast) {
            lastBreadcrumb = React.cloneElement(
              <BreadcrumbItem>{breadcrumb.props.children}</BreadcrumbItem>,
              {
                ...breadcrumb.props,
                last: true,
              },
            );
          }

          return (
            <Fragment key={index}>
              {!isLast ? breadcrumb : lastBreadcrumb}
              {!isLast && (
                <span className="ocean-breadcrumb-separator">{separator}</span>
              )}
            </Fragment>
          );
        })}
      </BreadcrumbWrapper>
    </BreadcrumbContext.Provider>
  );
};