test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 02:59:04 +08:00
Code Issues Actions 68 Packages Projects Releases Wiki Activity

Refactor Grid with new context API (#12320)

Browse Source 
* Refactor Grid with new context API

* Update snapshots of List
This commit is contained in:
Wei Zhu 2018-09-21 19:30:39 +08:00 committed by 偏右
parent 7c67dacc12
commit ca7d265b2b
6 changed files with 77 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/grid/RowContext.tsx Normal file
View File

@ -0,0 +1,9 @@
import createContext, { Context } from 'create-react-context';
export interface RowContextState {
gutter?: number;
}
const RowContext: Context<RowContextState> = createContext({});
export default RowContext;

18
components/grid/__tests__/__snapshots__/index.test.js.snap
View File

@ -1,5 +1,23 @@
// 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
class="ant-col-12"
style="padding-left:10px;padding-right:10px"
/>
</div>
`;
exports[`Grid should render Col 1`] = `
<div
class="ant-col-2"

14
components/grid/__tests__/index.test.js
View File

@ -9,10 +9,24 @@ describe('Grid', () => {
);
expect(wrapper).toMatchSnapshot();
});
it('should render Row', () => {
const wrapper = render(
<Row />
);
expect(wrapper).toMatchSnapshot();
});
it('renders wrapped Col correctly', () => {
const MyCol = () => <Col span="12" />;
const wrapper = render(
<Row gutter={20}>
<div>
<Col span="12" />
</div>
<MyCol />
</Row>
);
expect(wrapper).toMatchSnapshot();
});
});

17
components/grid/col.tsx
View File

@ -1,6 +1,7 @@
import * as React from 'react';
import * as PropTypes from 'prop-types';
import classNames from 'classnames';
import RowContext from './RowContext';
const stringOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
const objectOrNumber = PropTypes.oneOfType([PropTypes.object, PropTypes.number]);
@ -76,6 +77,20 @@ export default class Col extends React.Component<ColProps, {}> {
[`${prefixCls}-pull-${pull}`]: pull,
}, className, sizeClassObj);
return <div {...others} className={classes}>{children}</div>;
return (
<RowContext.Consumer>
{({ gutter }) => {
let style = others.style;
if (gutter as number > 0) {
style = {
paddingLeft: (gutter as number) / 2,
paddingRight: (gutter as number) / 2,
...style,
};
}
return <div {...others} style={style} className={classes}>{children}</div>;
}}
</RowContext.Consumer>
)
}
}

29
components/grid/row.tsx
View File

@ -17,9 +17,9 @@ if (typeof window !== 'undefined') {
}
import * as React from 'react';
import { Children, cloneElement } from 'react';
import classNames from 'classnames';
import * as PropTypes from 'prop-types';
import RowContext from './RowContext';
export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
export type BreakpointMap = Partial<Record<Breakpoint, string>>;
@ -100,7 +100,7 @@ export default class Row extends React.Component<RowProps, RowState> {
Object.keys(responsiveMap)
.map((screen: Breakpoint) => enquire.unregister(responsiveMap[screen]));
}
getGutter() {
getGutter(): number | undefined {
const { gutter } = this.props;
if (typeof gutter === 'object') {
for (let i = 0; i <= responsiveArray.length; i++) {
@ -110,7 +110,7 @@ export default class Row extends React.Component<RowProps, RowState> {
}
}
}
return gutter;
return gutter as number;
}
render() {
const {
@ -129,23 +129,14 @@ export default class Row extends React.Component<RowProps, RowState> {
marginRight: (gutter as number) / -2,
...style,
} : style;
const cols = Children.map(children, (col: React.ReactElement<HTMLDivElement>) => {
if (!col) {
return null;
}
if (col.props && (gutter as number) > 0) {
return cloneElement(col, {
style: {
paddingLeft: (gutter as number) / 2,
paddingRight: (gutter as number) / 2,
...col.props.style,
},
});
}
return col;
});
const otherProps = { ...others };
delete otherProps.gutter;
return <div {...otherProps} className={classes} style={rowStyle}>{cols}</div>;
return (
<RowContext.Provider value={{ gutter }}>
<div {...otherProps} className={classes} style={rowStyle}>
{children}
</div>
</RowContext.Provider>
);
}
}

20
components/list/__tests__/__snapshots__/demo.test.js.snap
View File

@ -179,10 +179,10 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
>
<div
class="ant-col-6"
style="padding-left:8px;padding-right:8px"
>
<div
class="ant-list-item"
style="padding-left:8px;padding-right:8px"
>
<div
class="ant-list-item-content ant-list-item-content-single"
@ -214,10 +214,10 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
</div>
<div
class="ant-col-6"
style="padding-left:8px;padding-right:8px"
>
<div
class="ant-list-item"
style="padding-left:8px;padding-right:8px"
>
<div
class="ant-list-item-content ant-list-item-content-single"
@ -249,10 +249,10 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
</div>
<div
class="ant-col-6"
style="padding-left:8px;padding-right:8px"
>
<div
class="ant-list-item"
style="padding-left:8px;padding-right:8px"
>
<div
class="ant-list-item-content ant-list-item-content-single"
@ -284,10 +284,10 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
</div>
<div
class="ant-col-6"
style="padding-left:8px;padding-right:8px"
>
<div
class="ant-list-item"
style="padding-left:8px;padding-right:8px"
>
<div
class="ant-list-item-content ant-list-item-content-single"
@ -411,10 +411,10 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
>
<div
class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
style="padding-left:8px;padding-right:8px"
>
<div
class="ant-list-item"
style="padding-left:8px;padding-right:8px"
>
<div
class="ant-list-item-content ant-list-item-content-single"
@ -446,10 +446,10 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
</div>
<div
class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
style="padding-left:8px;padding-right:8px"
>
<div
class="ant-list-item"
style="padding-left:8px;padding-right:8px"
>
<div
class="ant-list-item-content ant-list-item-content-single"
@ -481,10 +481,10 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
</div>
<div
class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
style="padding-left:8px;padding-right:8px"
>
<div
class="ant-list-item"
style="padding-left:8px;padding-right:8px"
>
<div
class="ant-list-item-content ant-list-item-content-single"
@ -516,10 +516,10 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
</div>
<div
class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
style="padding-left:8px;padding-right:8px"
>
<div
class="ant-list-item"
style="padding-left:8px;padding-right:8px"
>
<div
class="ant-list-item-content ant-list-item-content-single"
@ -551,10 +551,10 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
</div>
<div
class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
style="padding-left:8px;padding-right:8px"
>
<div
class="ant-list-item"
style="padding-left:8px;padding-right:8px"
>
<div
class="ant-list-item-content ant-list-item-content-single"
@ -586,10 +586,10 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
</div>
<div
class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
style="padding-left:8px;padding-right:8px"
>
<div
class="ant-list-item"
style="padding-left:8px;padding-right:8px"
>
<div
class="ant-list-item-content ant-list-item-content-single"