refactor: page-header

components/page-header/index.tsx

@@ -1,15 +1,18 @@
-import { defineComponent, inject, VNodeTypes, ExtractPropTypes } from 'vue';
+import { defineComponent, ExtractPropTypes, ref, computed } from 'vue';
 import PropTypes from '../_util/vue-types';
-import { getComponent, getOptionProps, getSlot } from '../_util/props-util';
+import { flattenChildren } from '../_util/props-util';
-import { defaultConfigProvider } from '../config-provider';
 import ArrowLeftOutlined from '@ant-design/icons-vue/ArrowLeftOutlined';
+import ArrowRightOutlined from '@ant-design/icons-vue/ArrowRightOutlined';
 import Breadcrumb from '../breadcrumb';
 import Avatar from '../avatar';
 import TransButton from '../_util/transButton';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import { withInstall } from '../_util/type';
+import useConfigInject from '../_util/hooks/useConfigInject';
+import classNames from '../_util/classNames';
+import ResizeObserver from '../vc-resize-observer';
 
-export const PageHeaderProps = {
+export const pageHeaderProps = {
   backIcon: PropTypes.VNodeChild,
   prefixCls: PropTypes.string,
   title: PropTypes.VNodeChild,
@@ -23,25 +26,43 @@ export const PageHeaderProps = {
   onBack: PropTypes.func,
 };
 
-const renderBack = (
+export type PageHeaderProps = Partial<ExtractPropTypes<typeof pageHeaderProps>>;
-  instance: any,
+
-  prefixCls: string,
+const PageHeader = defineComponent({
-  backIcon: VNodeTypes,
+  name: 'APageHeader',
-  onBack: (e: HTMLElement) => void,
+  props: pageHeaderProps,
-) => {
+  emits: ['back'],
-  if (!backIcon || !onBack) {
+  slots: ['backIcon', 'avatar', 'breadcrumb', 'title', 'subTitle', 'tags', 'extra', 'footer'],
+  setup(props, { emit, slots }) {
+    const { prefixCls, direction, pageHeader } = useConfigInject('page-header', props);
+    const compact = ref(false);
+    const onResize = ({ width }: { width: number }) => {
+      compact.value = width < 768;
+    };
+    const ghost = computed(() => props.ghost ?? pageHeader.value?.ghost ?? false);
+
+    const getBackIcon = () => {
+      return (
+        props.backIcon ??
+        slots.backIcon?.() ??
+        (direction.value === 'rtl' ? <ArrowRightOutlined /> : <ArrowLeftOutlined />)
+      );
+    };
+
+    const renderBack = (backIcon: any) => {
+      if (!backIcon || !props.onBack) {
         return null;
       }
       return (
         <LocaleReceiver
           componentName="PageHeader"
           children={({ back }: any) => (
-        <div class={`${prefixCls}-back`}>
+            <div class={`${prefixCls.value}-back`}>
               <TransButton
                 onClick={e => {
-              instance.$emit('back', e);
+                  emit('back', e);
                 }}
-            class={`${prefixCls}-back-button`}
+                class={`${prefixCls.value}-back-button`}
                 aria-label={back}
               >
                 {backIcon}
@@ -50,94 +71,86 @@ const renderBack = (
           )}
         ></LocaleReceiver>
       );
-};
+    };
 
-const renderBreadcrumb = (breadcrumb: any) => {
+    const renderBreadcrumb = () => {
-  return <Breadcrumb {...breadcrumb} />;
+      return props.breadcrumb ? <Breadcrumb {...props.breadcrumb} /> : slots.breadcrumb?.();
-};
+    };
 
-const renderTitle = (prefixCls: string, instance: any) => {
+    const renderTitle = () => {
-  const { avatar } = instance;
+      const { avatar } = props;
-  const title = getComponent(instance, 'title');
+      const title = props.title ?? slots.title?.();
-  const subTitle = getComponent(instance, 'subTitle');
+      const subTitle = props.subTitle ?? slots.subTitle?.();
-  const tags = getComponent(instance, 'tags');
+      const tags = props.tags ?? slots.tags?.();
-  const extra = getComponent(instance, 'extra');
+      const extra = props.extra ?? slots.extra?.();
-  const backIcon =
+      const headingPrefixCls = `${prefixCls.value}-heading`;
-    getComponent(instance, 'backIcon') !== undefined ? (
+      const hasHeading = title || subTitle || tags || extra;
-      getComponent(instance, 'backIcon')
+      // If there is nothing, return a null
-    ) : (
+      if (!hasHeading) {
-      <ArrowLeftOutlined />
+        return null;
-    );
+      }
-  const onBack = instance.onBack;
+      const backIcon = getBackIcon();
-  const headingPrefixCls = `${prefixCls}-heading`;
+      const backIconDom = renderBack(backIcon);
-  if (title || subTitle || tags || extra) {
+      const hasTitle = backIconDom || avatar || hasHeading;
-    const backIconDom = renderBack(instance, prefixCls, backIcon, onBack);
       return (
         <div class={headingPrefixCls}>
+          {hasTitle && (
+            <div class={`${headingPrefixCls}-left`}>
               {backIconDom}
-        {avatar && <Avatar {...avatar} />}
+              {avatar ? <Avatar {...avatar} /> : slots.avatar?.()}
-        {title && <span class={`${headingPrefixCls}-title`}>{title}</span>}
+              {title && (
-        {subTitle && <span class={`${headingPrefixCls}-sub-title`}>{subTitle}</span>}
+                <span
+                  class={`${headingPrefixCls}-title`}
+                  title={typeof title === 'string' ? title : undefined}
+                >
+                  {title}
+                </span>
+              )}
+              {subTitle && (
+                <span
+                  class={`${headingPrefixCls}-sub-title`}
+                  title={typeof subTitle === 'string' ? subTitle : undefined}
+                >
+                  {subTitle}
+                </span>
+              )}
               {tags && <span class={`${headingPrefixCls}-tags`}>{tags}</span>}
+            </div>
+          )}
           {extra && <span class={`${headingPrefixCls}-extra`}>{extra}</span>}
         </div>
       );
-  }
-  return null;
-};
-
-const renderFooter = (prefixCls: string, footer: VNodeTypes) => {
-  if (footer) {
-    return <div class={`${prefixCls}-footer`}>{footer}</div>;
-  }
-  return null;
-};
-
-const renderChildren = (prefixCls: string, children: VNodeTypes) => {
-  return <div class={`${prefixCls}-content`}>{children}</div>;
-};
-
-const PageHeader = defineComponent({
-  name: 'APageHeader',
-  props: PageHeaderProps,
-  setup() {
-    return {
-      configProvider: inject('configProvider', defaultConfigProvider),
     };
-  },
-  render() {
-    const { getPrefixCls, pageHeader } = this.configProvider;
-    const props = getOptionProps(this) as ExtractPropTypes<typeof PageHeaderProps>;
-    const { prefixCls: customizePrefixCls, breadcrumb } = props;
-    const footer = getComponent(this, 'footer');
-    const children = getSlot(this);
-    let ghost = true;
 
-    // Use `ghost` from `props` or from `ConfigProvider` instead.
+    const renderFooter = () => {
-    if ('ghost' in props) {
+      return <div class={`${prefixCls.value}-footer`}>{props.footer ?? slots.footer?.()}</div>;
-      ghost = props.ghost;
+    };
-    } else if (pageHeader && 'ghost' in pageHeader) {
-      ghost = pageHeader.ghost;
-    }
-    const prefixCls = getPrefixCls('page-header', customizePrefixCls);
-    const breadcrumbDom = breadcrumb && breadcrumb.routes ? renderBreadcrumb(breadcrumb) : null;
-    const className = [
-      prefixCls,
-      {
-        'has-breadcrumb': breadcrumbDom,
-        'has-footer': footer,
-        [`${prefixCls}-ghost`]: ghost,
-      },
-    ];
 
+    const renderChildren = (children: any) => {
+      return <div class={`${prefixCls.value}-content`}>{children}</div>;
+    };
+    return () => {
+      const hasBreadcrumb = props.breadcrumb?.routes || slots.breadcrumb;
+      const hasFooter = props.footer || slots.footer;
+      const children = flattenChildren(slots.default?.());
+      const className = classNames(prefixCls.value, {
+        'has-breadcrumb': hasBreadcrumb,
+        'has-footer': hasFooter,
+        [`${prefixCls.value}-ghost`]: ghost.value,
+        [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
+        [`${prefixCls.value}-compact`]: compact.value,
+      });
       return (
+        <ResizeObserver onResize={onResize}>
           <div class={className}>
-        {breadcrumbDom}
+            {renderBreadcrumb()}
-        {renderTitle(prefixCls, this)}
+            {renderTitle()}
-        {children.length ? renderChildren(prefixCls, children) : null}
+            {children.length && renderChildren(children)}
-        {renderFooter(prefixCls, footer)}
+            {renderFooter()}
           </div>
+        </ResizeObserver>
       );
+    };
   },
 });
 

components/vc-resize-observer/index.tsx

@@ -18,7 +18,7 @@ interface ResizeObserverState {
   offsetWidth: number;
 }
 
-const VueResizeObserver = defineComponent({
+const ResizeObserver = defineComponent({
   name: 'ResizeObserver',
   props: {
     disabled: Boolean,
@@ -110,7 +110,7 @@ const VueResizeObserver = defineComponent({
       }
 
       if (!resizeObserver && element) {
-        resizeObserver = new ResizeObserver(onResize);
+        resizeObserver = new window.ResizeObserver(onResize);
         resizeObserver.observe(element);
       }
     };
@@ -136,4 +136,4 @@ const VueResizeObserver = defineComponent({
   },
 });
 
-export default VueResizeObserver;
+export default ResizeObserver;