Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Grid support row vertical gutter #18979

Merged
merged 2 commits into from Sep 24, 2019
Merged

feat: Grid support row vertical gutter #18979

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
745d929
row vertical gutter
Sep 24, 2019
00f6b3a
run test
Sep 24, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/grid/RowContext.tsx
View file
Open in desktop
@@ -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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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