From 692efefe31ae3d7c3be0951461bca222f9282126 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 1 Nov 2017 18:33:41 +0800
Subject: [PATCH] Support responsively grid gutter

---
 components/grid/demo/gutter.md |  4 +++
 components/grid/index.en-US.md |  2 +-
 components/grid/index.zh-CN.md |  2 +-
 components/grid/row.tsx        | 53 ++++++++++++++++++++++++++++++++--
 4 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/components/grid/demo/gutter.md b/components/grid/demo/gutter.md
index 1c9bb7594b..0d7e4ac2e7 100644
--- a/components/grid/demo/gutter.md
+++ b/components/grid/demo/gutter.md
@@ -9,10 +9,14 @@ title:
 
 栅格常常需要和间隔进行配合，你可以使用 `Row` 的 `gutter` 属性，我们推荐使用 `(16+8n)px` 作为栅格间隔。(n 是自然数)
 
+如果要支持响应式，可以写成 `{ xs: 8, sm: 16, md: 24, lg: 32 }`。
+
 ## en-US
 
 You can use the `gutter` property of `Row` as grid spacing, we recommend set it to `(16 + 8n) px`. (`n` stands for natural number.)
 
+You can set it to a object like `{ xs: 8, sm: 16, md: 24, lg: 32 }` for responsive design.
+
 ````jsx
 import { Row, Col } from 'antd';
 
diff --git a/components/grid/index.en-US.md b/components/grid/index.en-US.md
index cb6d486734..d8693604c4 100644
--- a/components/grid/index.en-US.md
+++ b/components/grid/index.en-US.md
@@ -91,7 +91,7 @@ If the Ant Design grid layout component does not meet your needs, you can use th
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
 | align | the vertical alignment of the flex layout: `top` `middle` `bottom` | string | `top` |
-| gutter | spacing between grids | number | 0 |
+| gutter | spacing between grids, could be a number or a object like `{ xs: 8, sm: 16, md: 24}` | number/object | 0 |
 | justify | horizontal arrangement of the flex layout: `start` `end` `center` `space-around` `space-between` | string | `start` |
 | type | layout mode, optional `flex`, [browser support](http://caniuse.com/#search=flex) | string |  |
 
diff --git a/components/grid/index.zh-CN.md b/components/grid/index.zh-CN.md
index 0157568546..ea6c6b4b70 100644
--- a/components/grid/index.zh-CN.md
+++ b/components/grid/index.zh-CN.md
@@ -90,7 +90,7 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
 | 成员 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | align | flex 布局下的垂直对齐方式：`top` `middle` `bottom` | string | `top` |
-| gutter | 栅格间隔 | number | 0 |
+| gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | number/object | 0 |
 | justify | flex 布局下的水平排列方式：`start` `end` `center` `space-around` `space-between` | string | `start` |
 | type | 布局模式，可选 `flex`，[现代浏览器](http://caniuse.com/#search=flex) 下有效 | string |  |
 
diff --git a/components/grid/row.tsx b/components/grid/row.tsx
index c5d547340f..bfb0c371f4 100644
--- a/components/grid/row.tsx
+++ b/components/grid/row.tsx
@@ -1,7 +1,24 @@
+// matchMedia polyfill for
+// https://github.com/WickyNilliams/enquire.js/issues/82
+if (typeof window !== 'undefined') {
+  const matchMediaPolyfill = (mediaQuery: string): MediaQueryList => {
+    return {
+      media: mediaQuery,
+      matches: false,
+      addListener() {
+      },
+      removeListener() {
+      },
+    };
+  };
+  window.matchMedia = window.matchMedia || matchMediaPolyfill;
+}
+
 import React from 'react';
 import { Children, cloneElement } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
+const enquire = require('enquire.js').default;
 
 export interface RowProps {
   className?: string;
@@ -13,6 +30,15 @@ export interface RowProps {
   prefixCls?: string;
 }
 
+const responsiveMap = {
+  xs: '(max-width: 575px)',
+  sm: 'only screen and (min-width: 576px) and (max-width: 767px)',
+  md: 'only screen and (min-width: 767px) and (max-width: 991px)',
+  lg: 'only screen and (min-width: 992px) and (max-width: 1199px)',
+  xl: 'only screen and (min-width: 1200px) and (max-width: 1599px)',
+  xxl: '(min-width: 1600px)',
+};
+
 export default class Row extends React.Component<RowProps, {}> {
   static defaultProps = {
     gutter: 0,
@@ -26,11 +52,32 @@ export default class Row extends React.Component<RowProps, {}> {
     gutter: PropTypes.number,
     prefixCls: PropTypes.string,
   };
+  state = {
+    screen: 'xxl',
+  };
+  componentDidMount() {
+    Object.keys(responsiveMap)
+      .map((screen) => enquire.register(
+        responsiveMap[screen], () => this.setState({ screen }),
+      ));
+  }
+  componentWillUnmount() {
+    Object.keys(responsiveMap)
+      .map(screen => enquire.unregister(responsiveMap[screen]));
+  }
+  getGutter() {
+    const { gutter } = this.props;
+    if (typeof gutter === 'object') {
+      return gutter[this.state.screen];
+    }
+    return gutter;
+  }
   render() {
     const {
-      type, justify, align, className, gutter, style, children,
+      type, justify, align, className, style, children,
       prefixCls = 'ant-row', ...others,
     } = this.props;
+    const gutter = this.getGutter();
     const classes = classNames({
       [prefixCls]: !type,
       [`${prefixCls}-${type}`]: type,
@@ -57,6 +104,8 @@ export default class Row extends React.Component<RowProps, {}> {
       }
       return col;
     });
-    return <div {...others} className={classes} style={rowStyle}>{cols}</div>;
+    const otherProps = { ...others };
+    delete otherProps.gutter;
+    return <div {...otherProps} className={classes} style={rowStyle}>{cols}</div>;
   }
 }