feat: update grid

components/grid/Col.jsx

@@ -14,25 +14,33 @@ export const ColSize = PropTypes.shape({
 const objectOrNumber = PropTypes.oneOfType([PropTypes.number, ColSize])
 
 export const ColProps = {
-  span: objectOrNumber,
-  order: objectOrNumber,
-  offset: objectOrNumber,
-  push: objectOrNumber,
-  pull: objectOrNumber,
-  xs: PropTypes.oneOfType([PropTypes.number, ColSize]),
-  sm: PropTypes.oneOfType([PropTypes.number, ColSize]),
-  md: PropTypes.oneOfType([PropTypes.number, ColSize]),
-  lg: PropTypes.oneOfType([PropTypes.number, ColSize]),
-  xl: PropTypes.oneOfType([PropTypes.number, ColSize]),
-  xxl: PropTypes.oneOfType([PropTypes.number, ColSize]),
+  span: stringOrNumber,
+  order: stringOrNumber,
+  offset: stringOrNumber,
+  push: stringOrNumber,
+  pull: stringOrNumber,
+  xs: objectOrNumber,
+  sm: objectOrNumber,
+  md: objectOrNumber,
+  lg: objectOrNumber,
+  xl: objectOrNumber,
+  xxl: objectOrNumber,
   prefixCls: PropTypes.string,
 }
 
 export default {
   props: ColProps,
   name: 'ACol',
+  inject: {
+    rowContext: {
+      default: null,
+    },
+  },
   render () {
-    const { span, order, offset, push, pull, prefixCls = 'ant-col', $slots, $attrs, $listeners } = this
+    const { span, order, offset, push, pull,
+      prefixCls = 'ant-col',
+      $slots, $attrs, $listeners, rowContext,
+    } = this
     let sizeClassObj = {};
     ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].forEach(size => {
       let sizeProps = {}
@@ -63,6 +71,16 @@ export default {
       on: $listeners,
       attrs: $attrs,
       class: classes,
+      style: {},
+    }
+    if (rowContext) {
+      const gutter = rowContext.getGutter()
+      if (gutter > 0) {
+        divProps.style = {
+          paddingLeft: `${gutter / 2}px`,
+          paddingRight: `${gutter / 2}px`,
+        }
+      }
     }
     return <div {...divProps}>{$slots.default}</div>
   },

components/grid/Row.jsx

@@ -56,6 +56,11 @@ export default {
     ...RowProps,
     gutter: PropTypes.oneOfType([PropTypes.number, BreakpointMap]).def(0),
   },
+  provide () {
+    return {
+      rowContext: this,
+    }
+  },
   data () {
     return {
       screens: {},
@@ -129,22 +134,7 @@ export default {
       marginLeft: `${gutter / -2}px`,
       marginRight: `${gutter / -2}px`,
     } : {}
-    const cols = ($slots.default || []).map((col) => {
-      if (isEmptyElement(col)) {
-        return null
-      }
-      if (getOptionProps(col) && gutter > 0) {
-        return cloneElement(col, {
-          style: {
-            paddingLeft: `${gutter / 2}px`,
-            paddingRight: `${gutter / 2}px`,
-            ...getStyle(col, true),
-          },
-        })
-      }
-      return col
-    })
-    return <div class={classes} style={rowStyle}>{cols}</div>
+    return <div class={classes} style={rowStyle}>{$slots.default}</div>
   },
 }
 

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

@@ -1,5 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Grid renders wrapped Col correctly 1`] = `
+<div class="ant-row" style="margin-left: -10px; margin-right: -10px;">
+  <div>
+    <div class="ant-col-12" style="padding-left: 10px; padding-right: 10px;"></div>
+  </div>
+  <div class="ant-col-12" style="padding-left: 10px; padding-right: 10px;"></div>
+</div>
+`;
+
 exports[`Grid should render Col 1`] = `<div class="ant-col-2"></div>`;
 
 exports[`Grid should render Row 1`] = `<div class="ant-row"></div>`;

components/grid/__tests__/index.test.js

@@ -14,4 +14,20 @@ describe('Grid', () => {
     const wrapper = mount(Row)
     expect(wrapper.html()).toMatchSnapshot()
   })
+
+  it('renders wrapped Col correctly', () => {
+    const wrapper = mount({
+      render () {
+        return <Row gutter={20}>
+          <div>
+            <Col span='12' />
+          </div>
+          <Col span='12' />
+        </Row>
+      },
+    }
+
+    )
+    expect(wrapper.html()).toMatchSnapshot()
+  })
 })

components/grid/demo/index.vue

@@ -61,6 +61,7 @@ export default {
   category: 'Components',
   subtitle: '栅格',
   type: 'Layout',
+  zhType: '布局',
   cols: 1,
   title: 'Grid',
   render () {