Merge pull request #579 from LittlehorseXie/feature/breadcrumb

feat(breadcrumb): 增加自定义 children 时对 separator 的支持
Tencent · Apr 6, 2022 · db6b79c · db6b79c
2 parents def964b + 1ffcadb
commit db6b79c
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 62 deletions.
diff --git a/src/breadcrumb/Breadcrumb.tsx b/src/breadcrumb/Breadcrumb.tsx
@@ -35,6 +35,7 @@ const Breadcrumb = forwardRefWithStatics(
         value={{
           maxItemWidthInContext: maxItemWidth,
           theme,
+          separator,
         }}
       >
         <div ref={ref} className={`${classPrefix}-breadcrumb`} {...restProps}>

diff --git a/src/breadcrumb/BreadcrumbContext.tsx b/src/breadcrumb/BreadcrumbContext.tsx
@@ -1,11 +1,14 @@
 import { createContext } from 'react';
+import { TdBreadcrumbProps } from './type';
 
 export interface BreadcrumbContextType {
   maxItemWidthInContext;
   theme: string;
+  separator: TdBreadcrumbProps['separator'];
 }
 
 export const BreadcrumbContext = createContext<BreadcrumbContextType>({
   maxItemWidthInContext: '',
   theme: 'light',
+  separator: null,
 });
diff --git a/src/breadcrumb/BreadcrumbItem.tsx b/src/breadcrumb/BreadcrumbItem.tsx
@@ -9,21 +9,10 @@ import { BreadcrumbItemProps } from './BreadcrumbProps';
 import { BreadcrumbContext } from './BreadcrumbContext';
 
 export const BreadcrumbItem = forwardRef<HTMLDivElement, BreadcrumbItemProps>((props, ref) => {
-  const {
-    children,
-    separator = <ChevronRightIcon style={{ color: 'rgba(0,0,0,.3)' }} />,
-    disabled,
-    maxItemWidth,
-    maxWidth,
-    href,
-    to,
-    target,
-    router,
-    replace,
-    ...restProps
-  } = props;
+  const { children, separator, disabled, maxItemWidth, maxWidth, href, to, target, router, replace, ...restProps } =
+    props;
 
-  const { maxItemWidthInContext, theme } = useContext(BreadcrumbContext);
+  const { maxItemWidthInContext, theme, separator: separatorInContext } = useContext(BreadcrumbContext);
 
   const { classPrefix } = useConfig();
   const commonClassNames = useCommonClassName();
@@ -63,7 +52,10 @@ export const BreadcrumbItem = forwardRef<HTMLDivElement, BreadcrumbItemProps>((p
     );
   }
 
-  const separatorContent = typeof separator === 'function' ? separator() : separator;
+  const separatorInProps = typeof separator === 'function' ? separator() : separator;
+  const separatorContent = separatorInProps || separatorInContext || (
+    <ChevronRightIcon style={{ color: 'rgba(0,0,0,.3)' }} />
+  );
 
   return (
     <div className={classNames(breadcrumbItemClassNames, theme)} ref={ref} {...restProps}>

diff --git a/src/breadcrumb/__tests__/__snapshots__/breadcrumb.test.tsx.snap b/src/breadcrumb/__tests__/__snapshots__/breadcrumb.test.tsx.snap
@@ -126,20 +126,7 @@ exports[`custom.jsx 1`] = `
       <span
         class="t-breadcrumb__separator"
       >
-        <svg
-          class="t-icon t-icon-chevron-right"
-          fill="none"
-          height="1em"
-          style="color: rgba(0, 0, 0, 0.3);"
-          viewBox="0 0 16 16"
-          width="1em"
-        >
-          <path
-            d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
+        &gt;&gt;
       </span>
     </div>
     <div
@@ -158,20 +145,7 @@ exports[`custom.jsx 1`] = `
       <span
         class="t-breadcrumb__separator"
       >
-        <svg
-          class="t-icon t-icon-chevron-right"
-          fill="none"
-          height="1em"
-          style="color: rgba(0, 0, 0, 0.3);"
-          viewBox="0 0 16 16"
-          width="1em"
-        >
-          <path
-            d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
+        &gt;&gt;
       </span>
     </div>
     <div
@@ -190,20 +164,68 @@ exports[`custom.jsx 1`] = `
       <span
         class="t-breadcrumb__separator"
       >
-        <svg
-          class="t-icon t-icon-chevron-right"
-          fill="none"
-          height="1em"
-          style="color: rgba(0, 0, 0, 0.3);"
-          viewBox="0 0 16 16"
-          width="1em"
+        &gt;&gt;
+      </span>
+    </div>
+  </div>
+  <div
+    class="t-breadcrumb"
+  >
+    <div
+      class="t-breadcrumb__item"
+    >
+      <span
+        class="t-breadcrumb--text-overflow"
+      >
+        <span
+          class="t-breadcrumb__inner"
+          style="max-width: 150;"
         >
-          <path
-            d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
+          页面1
+        </span>
+      </span>
+      <span
+        class="t-breadcrumb__separator"
+      >
+        /////
+      </span>
+    </div>
+    <div
+      class="t-breadcrumb__item"
+    >
+      <span
+        class="t-breadcrumb--text-overflow"
+      >
+        <span
+          class="t-breadcrumb__inner"
+          style="max-width: 150;"
+        >
+          页面2
+        </span>
+      </span>
+      <span
+        class="t-breadcrumb__separator"
+      >
+        /////
+      </span>
+    </div>
+    <div
+      class="t-breadcrumb__item"
+    >
+      <span
+        class="t-breadcrumb--text-overflow"
+      >
+        <span
+          class="t-breadcrumb__inner"
+          style="max-width: 160;"
+        >
+          页面3
+        </span>
+      </span>
+      <span
+        class="t-breadcrumb__separator"
+      >
+        /////
       </span>
     </div>
   </div>

diff --git a/src/breadcrumb/_example/custom.jsx b/src/breadcrumb/_example/custom.jsx
@@ -5,10 +5,17 @@ const { BreadcrumbItem } = Breadcrumb;
 
 export default function BreadcrumbExample() {
   return (
-    <Breadcrumb maxItemWidth="150" separator={'>'}>
-      <BreadcrumbItem>页面1</BreadcrumbItem>
-      <BreadcrumbItem>页面2</BreadcrumbItem>
-      <BreadcrumbItem maxItemWidth="160">页面3</BreadcrumbItem>
-    </Breadcrumb>
+    <>
+      <Breadcrumb maxItemWidth="150" separator={'>>'}>
+        <BreadcrumbItem>页面1</BreadcrumbItem>
+        <BreadcrumbItem>页面2</BreadcrumbItem>
+        <BreadcrumbItem maxItemWidth="160">页面3</BreadcrumbItem>
+      </Breadcrumb>
+      <Breadcrumb maxItemWidth="150" separator={'/////'}>
+        <BreadcrumbItem>页面1</BreadcrumbItem>
+        <BreadcrumbItem>页面2</BreadcrumbItem>
+        <BreadcrumbItem maxItemWidth="160">页面3</BreadcrumbItem>
+      </Breadcrumb>
+    </>
   );
 }
diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -64,7 +64,7 @@ exports[`ssr snapshot test renders ./src/badge/_example/size.jsx correctly 1`] =
 
 exports[`ssr snapshot test renders ./src/breadcrumb/_example/base.jsx correctly 1`] = `"<div class=\\"t-breadcrumb\\"><div class=\\"t-breadcrumb__item light\\"><span class=\\"t-breadcrumb--text-overflow\\"><span class=\\"t-breadcrumb__inner\\" style=\\"max-width:200px\\">页面1</span></span><span class=\\"t-breadcrumb__separator\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\" style=\\"color:rgba(0,0,0,.3)\\"><path fill=\\"currentColor\\" d=\\"M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z\\" fill-opacity=\\"0.9\\"></path></svg></span></div><div class=\\"t-breadcrumb__item light\\"><span class=\\"t-breadcrumb--text-overflow\\"><span class=\\"t-breadcrumb__inner\\" style=\\"max-width:200px\\">页面2页面2页面2页面2页面2页面2页面2页面2</span></span><span class=\\"t-breadcrumb__separator\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\" style=\\"color:rgba(0,0,0,.3)\\"><path fill=\\"currentColor\\" d=\\"M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z\\" fill-opacity=\\"0.9\\"></path></svg></span></div><div class=\\"t-breadcrumb__item light\\"><span class=\\"t-breadcrumb--text-overflow\\"><span class=\\"t-breadcrumb__inner\\" style=\\"max-width:120px\\">页面3页面3页面3页面3页面3页面3页面3页面3页面3页面3页面3页面3页面3页面3页面3</span></span><span class=\\"t-breadcrumb__separator\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\" style=\\"color:rgba(0,0,0,.3)\\"><path fill=\\"currentColor\\" d=\\"M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z\\" fill-opacity=\\"0.9\\"></path></svg></span></div></div>"`;
 
-exports[`ssr snapshot test renders ./src/breadcrumb/_example/custom.jsx correctly 1`] = `"<div class=\\"t-breadcrumb\\"><div class=\\"t-breadcrumb__item\\"><span class=\\"t-breadcrumb--text-overflow\\"><span class=\\"t-breadcrumb__inner\\" style=\\"max-width:150\\">页面1</span></span><span class=\\"t-breadcrumb__separator\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\" style=\\"color:rgba(0,0,0,.3)\\"><path fill=\\"currentColor\\" d=\\"M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z\\" fill-opacity=\\"0.9\\"></path></svg></span></div><div class=\\"t-breadcrumb__item\\"><span class=\\"t-breadcrumb--text-overflow\\"><span class=\\"t-breadcrumb__inner\\" style=\\"max-width:150\\">页面2</span></span><span class=\\"t-breadcrumb__separator\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\" style=\\"color:rgba(0,0,0,.3)\\"><path fill=\\"currentColor\\" d=\\"M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z\\" fill-opacity=\\"0.9\\"></path></svg></span></div><div class=\\"t-breadcrumb__item\\"><span class=\\"t-breadcrumb--text-overflow\\"><span class=\\"t-breadcrumb__inner\\" style=\\"max-width:160\\">页面3</span></span><span class=\\"t-breadcrumb__separator\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\" style=\\"color:rgba(0,0,0,.3)\\"><path fill=\\"currentColor\\" d=\\"M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z\\" fill-opacity=\\"0.9\\"></path></svg></span></div></div>"`;
+exports[`ssr snapshot test renders ./src/breadcrumb/_example/custom.jsx correctly 1`] = `"<div class=\\"t-breadcrumb\\"><div class=\\"t-breadcrumb__item\\"><span class=\\"t-breadcrumb--text-overflow\\"><span class=\\"t-breadcrumb__inner\\" style=\\"max-width:150\\">页面1</span></span><span class=\\"t-breadcrumb__separator\\">&gt;&gt;</span></div><div class=\\"t-breadcrumb__item\\"><span class=\\"t-breadcrumb--text-overflow\\"><span class=\\"t-breadcrumb__inner\\" style=\\"max-width:150\\">页面2</span></span><span class=\\"t-breadcrumb__separator\\">&gt;&gt;</span></div><div class=\\"t-breadcrumb__item\\"><span class=\\"t-breadcrumb--text-overflow\\"><span class=\\"t-breadcrumb__inner\\" style=\\"max-width:160\\">页面3</span></span><span class=\\"t-breadcrumb__separator\\">&gt;&gt;</span></div></div><div class=\\"t-breadcrumb\\"><div class=\\"t-breadcrumb__item\\"><span class=\\"t-breadcrumb--text-overflow\\"><span class=\\"t-breadcrumb__inner\\" style=\\"max-width:150\\">页面1</span></span><span class=\\"t-breadcrumb__separator\\">/////</span></div><div class=\\"t-breadcrumb__item\\"><span class=\\"t-breadcrumb--text-overflow\\"><span class=\\"t-breadcrumb__inner\\" style=\\"max-width:150\\">页面2</span></span><span class=\\"t-breadcrumb__separator\\">/////</span></div><div class=\\"t-breadcrumb__item\\"><span class=\\"t-breadcrumb--text-overflow\\"><span class=\\"t-breadcrumb__inner\\" style=\\"max-width:160\\">页面3</span></span><span class=\\"t-breadcrumb__separator\\">/////</span></div></div>"`;
 
 exports[`ssr snapshot test renders ./src/breadcrumb/_example/href.jsx correctly 1`] = `"<div data-reactroot=\\"\\"><div class=\\"t-breadcrumb\\"><div class=\\"t-breadcrumb__item\\"><a class=\\"t-breadcrumb--text-overflow t-link\\" href=\\"/\\" target=\\"_blank\\"><span class=\\"t-breadcrumb__inner\\" style=\\"max-width:150\\">页面1</span></a><span class=\\"t-breadcrumb__separator\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\" style=\\"color:rgba(0,0,0,.3)\\"><path fill=\\"currentColor\\" d=\\"M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z\\" fill-opacity=\\"0.9\\"></path></svg></span></div><div class=\\"t-breadcrumb__item\\"><span class=\\"t-breadcrumb--text-overflow t-is-disabled\\"><span class=\\"t-breadcrumb__inner\\" style=\\"max-width:150\\">页面2</span></span><span class=\\"t-breadcrumb__separator\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\" style=\\"color:rgba(0,0,0,.3)\\"><path fill=\\"currentColor\\" d=\\"M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z\\" fill-opacity=\\"0.9\\"></path></svg></span></div><div class=\\"t-breadcrumb__item\\"><span class=\\"t-breadcrumb--text-overflow\\"><span class=\\"t-breadcrumb__inner\\" style=\\"max-width:160\\">页面3</span></span><span class=\\"t-breadcrumb__separator\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\" style=\\"color:rgba(0,0,0,.3)\\"><path fill=\\"currentColor\\" d=\\"M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z\\" fill-opacity=\\"0.9\\"></path></svg></span></div></div><div style=\\"margin-top:20px\\">点击计数器：<!-- -->0</div></div>"`;