Skip to content

Commit

Permalink
feat: Grid support row vertical gutter (#18979)
Browse files Browse the repository at this point in the history 
* row vertical gutter

* run test
  • Loading branch information
@sosohime @afc163
sosohime authored and afc163 committed Sep 24, 2019
1 parent a5efb30 commit a2edbc3
Show file tree
Hide file tree
Showing 9 changed files with 309 additions and 37 deletions.
2 changes: 1 addition & 1 deletion components/grid/RowContext.tsx
View file
@@ -1,7 +1,7 @@
import createContext, { Context } from '@ant-design/create-react-context';

export interface RowContextState {
gutter?: number;
gutter?: [number, number];
}

const RowContext: Context<RowContextState> = createContext({});
Expand Down
202 changes: 195 additions & 7 deletions components/grid/__tests__/__snapshots__/demo.test.js.snap
View file
Expand Up @@ -414,6 +414,51 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
</div>
</div>
</div>
<div
class="ant-row"
style="margin-top:-10px;margin-bottom:-10px"
>
<div
class="ant-col ant-col-6 gutter-row"
style="padding-top:10px;padding-bottom:10px"
>
<div
class="gutter-box"
>
col-6
</div>
</div>
<div
class="ant-col ant-col-6 gutter-row"
style="padding-top:10px;padding-bottom:10px"
>
<div
class="gutter-box"
>
col-6
</div>
</div>
<div
class="ant-col ant-col-6 gutter-row"
style="padding-top:10px;padding-bottom:10px"
>
<div
class="gutter-box"
>
col-6
</div>
</div>
<div
class="ant-col ant-col-6 gutter-row"
style="padding-top:10px;padding-bottom:10px"
>
<div
class="gutter-box"
>
col-6
</div>
</div>
</div>
</div>
`;

Expand Down Expand Up @@ -467,7 +512,105 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
<span
style="margin-right:6px"
>
Gutter (px):
Horizontal Gutter (px):
</span>
<div
style="width:50%"
>
<div
class="ant-slider ant-slider-with-marks"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="left:0%;right:auto;width:20%"
/>
<div
class="ant-slider-step"
>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:0%"
/>
<span
class="ant-slider-dot ant-slider-dot-active"
style="left:20%"
/>
<span
class="ant-slider-dot"
style="left:40%"
/>
<span
class="ant-slider-dot"
style="left:60%"
/>
<span
class="ant-slider-dot"
style="left:80%"
/>
<span
class="ant-slider-dot"
style="left:100%"
/>
</div>
<div
aria-disabled="false"
aria-valuemax="5"
aria-valuemin="0"
aria-valuenow="1"
class="ant-slider-handle"
role="slider"
style="left:20%;right:auto;transform:translateX(-50%)"
tabindex="0"
/>
<div
class="ant-slider-mark"
>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
>
8
</span>
<span
class="ant-slider-mark-text ant-slider-mark-text-active"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:20%"
>
16
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:40%"
>
24
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:60%"
>
32
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:80%"
>
40
</span>
<span
class="ant-slider-mark-text"
style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%"
>
48
</span>
</div>
</div>
</div>
<span
style="margin-right:6px"
>
Vertical Gutter (px):
</span>
<div
style="width:50%"
Expand Down Expand Up @@ -663,43 +806,88 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
</div>
<div
class="ant-row"
style="margin-left:-8px;margin-right:-8px"
style="margin-left:-8px;margin-right:-8px;margin-top:-8px;margin-bottom:-8px"
>
<div
class="ant-col ant-col-6"
style="padding-left:8px;padding-right:8px"
style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
>
<div>
Column
</div>
</div>
<div
class="ant-col ant-col-6"
style="padding-left:8px;padding-right:8px"
style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
>
<div>
Column
</div>
</div>
<div
class="ant-col ant-col-6"
style="padding-left:8px;padding-right:8px"
style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
>
<div>
Column
</div>
</div>
<div
class="ant-col ant-col-6"
style="padding-left:8px;padding-right:8px"
style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
>
<div>
Column
</div>
</div>
</div>
<div
class="ant-row"
style="margin-left:-8px;margin-right:-8px;margin-top:-8px;margin-bottom:-8px"
>
<div
class="ant-col ant-col-6"
style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
>
<div>
Column
</div>
</div>
<div
class="ant-col ant-col-6"
style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
>
<div>
Column
</div>
</div>
<div
class="ant-col ant-col-6"
style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
>
<div>
Column
</div>
</div>
<div
class="ant-col ant-col-6"
style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
>
<div>
Column
</div>
</div>
</div>
<pre>
&lt;Row gutter={[16, 16]}&gt;
&lt;Col span={6} /&gt;
&lt;Col span={6} /&gt;
&lt;Col span={6} /&gt;
&lt;Col span={6} /&gt;
&lt;/Row&gt;
</pre>
<pre>
&lt;Row gutter={16}&gt;
&lt;Row gutter={[16, 16]}&gt;
&lt;Col span={6} /&gt;
&lt;Col span={6} /&gt;
&lt;Col span={6} /&gt;
Expand Down
14 changes: 12 additions & 2 deletions components/grid/__tests__/index.test.js
View file
Expand Up @@ -37,7 +37,7 @@ describe('Grid', () => {

it('when typeof getGutter is object', () => {
const wrapper = mount(<Row gutter={{ xs: 8, sm: 16, md: 24 }} />);
expect(wrapper.instance().getGutter()).toBe(8);
expect(wrapper.instance().getGutter()).toEqual([8, 0]);
wrapper.unmount();
});

Expand Down Expand Up @@ -75,8 +75,18 @@ describe('Grid', () => {
.update()
.find('div')
.prop('style'),
).toEqual(undefined);
).toEqual({});
wrapper.unmount();
expect(enquire.unregister).toHaveBeenCalled();
});

it('should work currect when gutter is array', () => {
const wrapper = mount(<Row gutter={[16, 20]} />);
expect(wrapper.find('div').prop('style')).toEqual({
marginLeft: -8,
marginRight: -8,
marginTop: -10,
marginBottom: -10,
});
});
});
18 changes: 15 additions & 3 deletions components/grid/col.tsx
View file
Expand Up @@ -102,13 +102,25 @@ export default class Col extends React.Component<ColProps, {}> {
<RowContext.Consumer>
{({ gutter }) => {
let { style } = others;
if (gutter! > 0) {

if (gutter) {
style = {
paddingLeft: gutter! / 2,
paddingRight: gutter! / 2,
...(gutter[0]! > 0
? {
paddingLeft: gutter[0]! / 2,
paddingRight: gutter[0]! / 2,
}
: {}),
...(gutter[1]! > 0
? {
paddingTop: gutter[1]! / 2,
paddingBottom: gutter[1]! / 2,
}
: {}),
...style,
};
}

return (
<div {...others} style={style} className={classes}>
{children}
Expand Down
18 changes: 18 additions & 0 deletions components/grid/demo/gutter.md
View file
Expand Up @@ -11,12 +11,16 @@ title:

如果要支持响应式，可以写成 `{ xs: 8, sm: 16, md: 24, lg: 32 }`。

如果需要垂直间距，可以写成数组形式 `[水平间距, 垂直间距]` `[16, { 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.

You can use a array to set vertical spacing, `[horizontal, vertical]` `[16, { xs: 8, sm: 16, md: 24, lg: 32 }]`.

```jsx
import { Row, Col } from 'antd';

Expand All @@ -36,6 +40,20 @@ ReactDOM.render(
<div className="gutter-box">col-6</div>
</Col>
</Row>
<Row gutter={[{ xs: 8, sm: 16, md: 24, lg: 32 }, 20]}>
<Col className="gutter-row" span={6}>
<div className="gutter-box">col-6</div>
</Col>
<Col className="gutter-row" span={6}>
<div className="gutter-box">col-6</div>
</Col>
<Col className="gutter-row" span={6}>
<div className="gutter-box">col-6</div>
</Col>
<Col className="gutter-row" span={6}>
<div className="gutter-box">col-6</div>
</Col>
</Row>
</div>,
mountNode,
);
Expand Down

0 comments on commit a2edbc3

Please sign in to comment.