Layout.Sider add onBreakpoint porp support (#10750)

* Layout.Sider add onBreakpoint porp support

* Add onBreakpoint zh-CN doc

* Add onBreakpoint en-US doc

* Add demo test for Layout.Sider onBreakpoint

* Add Layout.Sider onBreakpoint test cases

components/layout/Sider.tsx

@@ -45,6 +45,7 @@ export interface SiderProps extends React.HTMLAttributes<HTMLDivElement> {
   collapsedWidth?: number | string;
   breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
   theme?: SiderTheme;
+  onBreakpoint?: (broken: boolean) => void;
 }
 
 export interface SiderState {
@@ -151,6 +152,10 @@ export default class Sider extends React.Component<SiderProps, SiderState> {
 
   responsiveHandler = (mql: MediaQueryList) => {
     this.setState({ below: mql.matches });
+    const { onBreakpoint } = this.props;
+    if (onBreakpoint) {
+      onBreakpoint(mql.matches);
+    }
     if (this.state.collapsed !== mql.matches) {
       this.setCollapsed(mql.matches, 'responsive');
     }
@@ -183,7 +188,7 @@ export default class Sider extends React.Component<SiderProps, SiderState> {
       ...others
     } = this.props;
     const divProps = omit(others, ['collapsed',
-      'defaultCollapsed', 'onCollapse', 'breakpoint']);
+      'defaultCollapsed', 'onCollapse', 'breakpoint', 'onBreakpoint']);
     const rawWidth = this.state.collapsed ? collapsedWidth : width;
     // use "px" as fallback unit for width
     const siderWidth = typeof rawWidth === 'number' ? `${rawWidth}px` : String(rawWidth || 0);

components/layout/__tests__/index.test.js

@@ -70,3 +70,26 @@ describe('Layout', () => {
     expect(wrapper.find('.ant-layout-sider').hasClass('ant-layout-sider-light'));
   });
 });
+
+describe('Sider onBreakpoint', () => {
+  beforeAll(() => {
+    Object.defineProperty(window, 'matchMedia', {
+      value: jest.fn(() => {
+        return {
+          matches: true,
+          addListener: () => {},
+          removeListener: () => {},
+        };
+      }),
+    });
+  });
+
+  it('should trigger onBreakpoint', async () => {
+    const onBreakpoint = jest.fn();
+
+    mount(
+      <Sider breakpoint="md" onBreakpoint={onBreakpoint}>Sider</Sider>
+    );
+    expect(onBreakpoint).toBeCalledWith(true);
+  });
+});

components/layout/demo/responsive.md

@@ -26,6 +26,7 @@ ReactDOM.render(
     <Sider
       breakpoint="lg"
       collapsedWidth="0"
+      onBreakpoint={(broken) => { console.log(broken); }}
       onCollapse={(collapsed, type) => { console.log(collapsed, type); }}
     >
       <div className="logo" />

components/layout/index.en-US.md

@@ -99,6 +99,7 @@ The sidebar.
 | width | width of the sidebar | number\|string | 200 |
 | onCollapse | the callback function, executed by clicking the trigger or activating the responsive layout | (collapsed, type) => {} | - |
 | theme | color theme of the sidebar | string: `light` `dark` | `dark` |
+| onBreakpoint | the callback function, executed when [breakpoints](/components/grid#api) changed | (broken) => {} | - |
 
 #### breakpoint width
 

components/layout/index.zh-CN.md

@@ -100,6 +100,7 @@ title: Layout
 | width | 宽度 | number\|string | 200 |
 | onCollapse | 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} | - |
 | theme | 主题颜色 | string: `light` `dark` | `dark` |
+| onBreakpoint | 触发响应式布局[断点](/components/grid#api)时的回调 | (broken) => {} | - |
 
 #### breakpoint width