feat: useBreakpoint hook (#22226)

* feat: useBreakpoint hook

* update snapshots

* update snapshots

* update snapshots

* add useBreakpoint hook test

components/__tests__/__snapshots__/index.test.js.snap

@@ -27,6 +27,7 @@ Array [
   "Drawer",
   "Empty",
   "Form",
+  "Grid",
   "Input",
   "InputNumber",
   "Layout",

components/grid/__tests__/__snapshots__/demo.test.js.snap

@@ -1226,3 +1226,15 @@ exports[`renders ./components/grid/demo/sort.md correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`renders ./components/grid/demo/useBreakpoint.md correctly 1`] = `
+<div
+  class="ant-row"
+>
+  <div
+    class="ant-col"
+  >
+    Current break point: 
+  </div>
+</div>
+`;

components/grid/__tests__/index.test.js

@@ -3,6 +3,7 @@ import { render, mount } from 'enzyme';
 import { Col, Row } from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
+import useBreakpoint from '../hooks/useBreakpoint';
 
 describe('Grid', () => {
   mountTest(Row);
@@ -90,4 +91,26 @@ describe('Grid', () => {
       marginBottom: 10,
     });
   });
+
+  // By jsdom mock, actual jsdom not implemented matchMedia
+  // https://jestjs.io/docs/en/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+  it('should work with useBreakpoint', () => {
+    function Demo() {
+      const screens = useBreakpoint();
+
+      return JSON.stringify(screens);
+    }
+    const wrapper = mount(<Demo />);
+
+    expect(wrapper.text()).toEqual(
+      JSON.stringify({
+        xs: true,
+        sm: false,
+        md: false,
+        lg: false,
+        xl: false,
+        xxl: false,
+      }),
+    );
+  });
 });

components/grid/demo/useBreakpoint.md

@@ -0,0 +1,36 @@
+---
+order: 10
+title: useBreakpoint Hook
+---
+
+## zh-CN
+
+使用 `useBreakpoint` Hook 个性化布局。
+
+## en-US
+
+Use `useBreakpoint` Hook povide personalized layout.
+
+```jsx
+import { Row, Col, Grid } from 'antd';
+
+const { useBreakpoint } = Grid;
+
+function UseBreakpointDemo() {
+  const screens = useBreakpoint();
+
+  return (
+    <Row>
+      <Col>
+        Current break point:&nbsp;
+        {Object.entries(screens)
+          .filter(screen => !!screen[1])
+          .map(screen => screen[0])
+          .join(' ')}
+      </Col>
+    </Row>
+  );
+}
+
+ReactDOM.render(<UseBreakpointDemo />, mountNode);
+```

components/grid/hooks/useBreakpoint.tsx

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+import ResponsiveObserve, { ScreenMap } from '../../_util/responsiveObserve';
+
+function useBreakpoint(): ScreenMap {
+  const [screens, setScreens] = useState<ScreenMap>({});
+
+  useEffect(() => {
+    const token = ResponsiveObserve.subscribe(supportScreens => {
+      setScreens(supportScreens);
+    });
+
+    return () => ResponsiveObserve.unsubscribe(token);
+  }, []);
+
+  return screens;
+}
+
+export default useBreakpoint;

components/grid/index.tsx

@@ -1,7 +1,10 @@
 import Row from './row';
 import Col from './col';
+import useBreakpoint from './hooks/useBreakpoint';
 
 export { RowProps } from './row';
 export { ColProps, ColSize } from './col';
 
 export { Row, Col };
+
+export default { useBreakpoint };

components/index.tsx

@@ -66,6 +66,8 @@ export { default as Empty } from './empty';
 
 export { default as Form } from './form';
 
+export { default as Grid } from './grid';
+
 export { default as Input } from './input';
 
 export { default as InputNumber } from './input-number';

tests/__snapshots__/index.test.js.snap

@@ -27,6 +27,7 @@ Array [
   "Drawer",
   "Empty",
   "Form",
+  "Grid",
   "Input",
   "InputNumber",
   "Layout",