From 61d0d6b182c0cac8a96845348b253bf2996ef75d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AA=97=E4=BD=A0=E6=98=AF=E5=B0=8F=E7=8C=AB=E5=92=AA?=
 <darryshaw@gmail.com>
Date: Sun, 15 Mar 2020 20:53:23 +0800
Subject: [PATCH] feat: useBreakpoint hook (#22226)

* feat: useBreakpoint hook

* update snapshots

* update snapshots

* update snapshots

* add useBreakpoint hook test
---
 .../__snapshots__/index.test.js.snap          |  1 +
 .../__tests__/__snapshots__/demo.test.js.snap | 12 +++++++
 components/grid/__tests__/index.test.js       | 23 ++++++++++++
 components/grid/demo/useBreakpoint.md         | 36 +++++++++++++++++++
 components/grid/hooks/useBreakpoint.tsx       | 18 ++++++++++
 components/grid/index.tsx                     |  3 ++
 components/index.tsx                          |  2 ++
 tests/__snapshots__/index.test.js.snap        |  1 +
 8 files changed, 96 insertions(+)
 create mode 100644 components/grid/demo/useBreakpoint.md
 create mode 100644 components/grid/hooks/useBreakpoint.tsx

diff --git a/components/__tests__/__snapshots__/index.test.js.snap b/components/__tests__/__snapshots__/index.test.js.snap
index 037f96a846ba..ad99a83e03d1 100644
--- a/components/__tests__/__snapshots__/index.test.js.snap
+++ b/components/__tests__/__snapshots__/index.test.js.snap
@@ -27,6 +27,7 @@ Array [
   "Drawer",
   "Empty",
   "Form",
+  "Grid",
   "Input",
   "InputNumber",
   "Layout",
diff --git a/components/grid/__tests__/__snapshots__/demo.test.js.snap b/components/grid/__tests__/__snapshots__/demo.test.js.snap
index becab8b6787c..cdc8ad388c37 100644
--- a/components/grid/__tests__/__snapshots__/demo.test.js.snap
+++ b/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>
+`;
diff --git a/components/grid/__tests__/index.test.js b/components/grid/__tests__/index.test.js
index ca4a4d35e2b3..40104c47140c 100644
--- a/components/grid/__tests__/index.test.js
+++ b/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,
+      }),
+    );
+  });
 });
diff --git a/components/grid/demo/useBreakpoint.md b/components/grid/demo/useBreakpoint.md
new file mode 100644
index 000000000000..13a7eb942944
--- /dev/null
+++ b/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);
+```
diff --git a/components/grid/hooks/useBreakpoint.tsx b/components/grid/hooks/useBreakpoint.tsx
new file mode 100644
index 000000000000..ec343959047e
--- /dev/null
+++ b/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;
diff --git a/components/grid/index.tsx b/components/grid/index.tsx
index 147cf95e4c63..f2c4e59c747a 100644
--- a/components/grid/index.tsx
+++ b/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 };
diff --git a/components/index.tsx b/components/index.tsx
index 02c20f726770..5efc49010b39 100644
--- a/components/index.tsx
+++ b/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';
diff --git a/tests/__snapshots__/index.test.js.snap b/tests/__snapshots__/index.test.js.snap
index 64a70bcbc4fa..64ac53e67163 100644
--- a/tests/__snapshots__/index.test.js.snap
+++ b/tests/__snapshots__/index.test.js.snap
@@ -27,6 +27,7 @@ Array [
   "Drawer",
   "Empty",
   "Form",
+  "Grid",
   "Input",
   "InputNumber",
   "Layout",