fix: optimize PageHeader responsive behavior (#23277)

* 💄 optimize PageHeader responsive behavior

close #23260

* ✅ add test case

* remove console

components/page-header/__tests__/index.test.js

@@ -4,11 +4,26 @@ import PageHeader from '..';
 import ConfigProvider from '../../config-provider';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
+import { spyElementPrototypes } from '../../__tests__/util/domHook';
 
 describe('PageHeader', () => {
   mountTest(PageHeader);
   rtlTest(PageHeader);
 
+  let spy;
+
+  beforeAll(() => {
+    spy = spyElementPrototypes(HTMLElement, {
+      getBoundingClientRect: () => ({
+        width: 100,
+      }),
+    });
+  });
+
+  afterAll(() => {
+    spy.mockRestore();
+  });
+
   it('pageHeader should not contain back it back', () => {
     const routes = [
       {
@@ -101,4 +116,11 @@ describe('PageHeader', () => {
 
     expect(render(wrapper)).toMatchSnapshot();
   });
+
+  it('change container width', () => {
+    const wrapper = mount(<PageHeader title="Page Title" extra="extra" />);
+    wrapper.triggerResize();
+    wrapper.update();
+    expect(wrapper.find('.ant-page-header').hasClass('ant-page-header-compact')).toBe(true);
+  });
 });

components/page-header/index.tsx

@@ -116,7 +116,7 @@ const renderChildren = (prefixCls: string, children: React.ReactNode) => {
 const PageHeader: React.FC<PageHeaderProps> = props => {
   const [compact, updateCompact] = React.useState(false);
   const onResize = ({ width }: { width: number }) => {
-    updateCompact(width < 540);
+    updateCompact(width < 768);
   };
   return (
     <ConfigConsumer>

components/page-header/style/index.less

@@ -56,6 +56,7 @@
     &-left {
       display: flex;
       align-items: center;
+      margin: (@margin-xs / 2) 0;
       overflow: hidden;
     }
 
@@ -82,7 +83,9 @@
     }
 
     &-extra {
+      margin: (@margin-xs / 2) 0;
       white-space: nowrap;
+
       > * {
         margin-left: @margin-sm;
         white-space: unset;
@@ -112,11 +115,7 @@
   }
 
   &-compact &-heading {
-    flex-direction: column;
-
-    &-extra {
-      margin-top: @margin-xs;
-    }
+    flex-wrap: wrap;
   }
 }
 

tests/setup.js

@@ -28,3 +28,13 @@ const Enzyme = require('enzyme');
 const Adapter = require('enzyme-adapter-react-16');
 
 Enzyme.configure({ adapter: new Adapter() });
+
+Object.assign(Enzyme.ReactWrapper.prototype, {
+  findObserver() {
+    return this.find('ResizeObserver');
+  },
+  triggerResize() {
+    const ob = this.findObserver();
+    ob.instance().onResize([{ target: ob.getDOMNode() }]);
+  },
+});