refactor: breadcrumb

Author: tangjinzhou

components/breadcrumb/Breadcrumb.tsx

@@ -1,6 +1,6 @@
 import { cloneVNode, defineComponent, PropType, ExtractPropTypes } from 'vue';
 import PropTypes from '../_util/vue-types';
-import { filterEmpty, getPropsSlot } from '../_util/props-util';
+import { flattenChildren, getPropsSlot } from '../_util/props-util';
 import warning from '../_util/warning';
 import BreadcrumbItem from './BreadcrumbItem';
 import Menu from '../menu';
@@ -17,7 +17,7 @@ const breadcrumbProps = {
   prefixCls: PropTypes.string,
   routes: { type: Array as PropType<Route[]> },
   params: PropTypes.any,
-  separator: PropTypes.VNodeChild,
+  separator: PropTypes.any,
   itemRender: {
     type: Function as PropType<
       (opt: { route: Route; params: unknown; routes: Route[]; paths: string[] }) => VueNode
@@ -53,6 +53,7 @@ function defaultItemRender(opt: {
 export default defineComponent({
   name: 'ABreadcrumb',
   props: breadcrumbProps,
+  slots: ['separator', 'itemRender'],
   setup(props, { slots }) {
     const { prefixCls, direction } = useConfigInject('breadcrumb', props);
 
@@ -122,10 +123,10 @@ export default defineComponent({
 
       const { routes, params = {} } = props;
 
-      const children = filterEmpty(getPropsSlot(slots, props));
-      const separator = getPropsSlot(slots, props, 'separator');
+      const children = flattenChildren(getPropsSlot(slots, props));
+      const separator = getPropsSlot(slots, props, 'separator') ?? '/';
 
-      const itemRender = getPropsSlot(slots, props, 'itemRender') || defaultItemRender;
+      const itemRender = props.itemRender || slots.itemRender || defaultItemRender;
       if (routes && routes.length > 0) {
         // generated by route
         crumbs = genForRoutes({
@@ -153,5 +154,4 @@ export default defineComponent({
       return <div class={breadcrumbClassName}>{crumbs}</div>;
     };
   },
-  methods: {},
 });

components/breadcrumb/BreadcrumbItem.tsx

@@ -8,15 +8,16 @@ import useConfigInject from '../_util/hooks/useConfigInject';
 const breadcrumbItemProps = {
   prefixCls: PropTypes.string,
   href: PropTypes.string,
-  separator: PropTypes.VNodeChild.def('/'),
-  overlay: PropTypes.VNodeChild,
+  separator: PropTypes.any,
+  overlay: PropTypes.any,
 };
 
 export type BreadcrumbItemProps = Partial<ExtractPropTypes<typeof breadcrumbItemProps>>;
 export default defineComponent({
   name: 'ABreadcrumbItem',
   __ANT_BREADCRUMB_ITEM: true,
   props: breadcrumbItemProps,
+  slots: ['separator', 'overlay'],
   setup(props, { slots }) {
     const { prefixCls } = useConfigInject('breadcrumb', props);
     /**
@@ -39,11 +40,11 @@ export default defineComponent({
     };
 
     return () => {
-      const separator = getPropsSlot(slots, props, 'separator');
+      const separator = getPropsSlot(slots, props, 'separator') ?? '/';
       const children = getPropsSlot(slots, props);
       let link: JSX.Element;
 
-      if ('href' in props) {
+      if (props.href !== undefined) {
         link = <a class={`${prefixCls.value}-link`}>{children}</a>;
       } else {
         link = <span class={`${prefixCls.value}-link`}>{children}</span>;
@@ -54,9 +55,7 @@ export default defineComponent({
         return (
           <span>
             {link}
-            {separator && separator !== '' && (
-              <span class={`${prefixCls.value}-separator`}>{separator}</span>
-            )}
+            {separator && <span class={`${prefixCls.value}-separator`}>{separator}</span>}
           </span>
         );
       }

components/breadcrumb/BreadcrumbSeparator.tsx

@@ -1,6 +1,6 @@
 import { defineComponent, ExtractPropTypes } from 'vue';
 import PropTypes from '../_util/vue-types';
-import { getPropsSlot } from '../_util/props-util';
+import { flattenChildren } from '../_util/props-util';
 import useConfigInject from '../_util/hooks/useConfigInject';
 
 const breadcrumbSeparator = {
@@ -18,8 +18,7 @@ export default defineComponent({
 
     return () => {
       const { separator, class: className, ...restAttrs } = attrs;
-      const children = getPropsSlot(slots, props) || [];
-
+      const children = flattenChildren(slots.default?.());
       return (
         <span class={[`${prefixCls.value}-separator`, className]} {...restAttrs}>
           {children.length > 0 ? children : '/'}

components/breadcrumb/style/index.less

@@ -38,7 +38,8 @@
   }
 
   &-link {
-    > .@{iconfont-css-prefix} + span {
+    > .@{iconfont-css-prefix} + span,
+    > .@{iconfont-css-prefix} + a {
       margin-left: 4px;
     }
   }
@@ -49,3 +50,5 @@
     }
   }
 }
+
+@import './rtl';

components/breadcrumb/style/rtl.less

@@ -0,0 +1,29 @@
+.@{breadcrumb-prefix-cls} {
+  &-rtl {
+    .clearfix();
+    direction: rtl;
+
+    > span {
+      float: right;
+    }
+  }
+
+  &-link {
+    > .@{iconfont-css-prefix} + span,
+    > .@{iconfont-css-prefix} + a {
+      .@{breadcrumb-prefix-cls}-rtl & {
+        margin-right: 4px;
+        margin-left: 0;
+      }
+    }
+  }
+
+  &-overlay-link {
+    > .@{iconfont-css-prefix} {
+      .@{breadcrumb-prefix-cls}-rtl & {
+        margin-right: 4px;
+        margin-left: 0;
+      }
+    }
+  }
+}