mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-19 06:43:16 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

🐛 Fix Grid initial gutter (#20762)

Browse Source 
like SSR situation
This commit is contained in:
偏右 2020-01-08 17:14:29 +08:00 committed by 二货机器人
parent 117495e28f
commit 37b61c1ada
4 changed files with 21 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/_util/responsiveObserve.ts
View File

@ -1,5 +1,6 @@
export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
export type BreakpointMap = Partial<Record<Breakpoint, string>>;
export type ScreenMap = Partial<Record<Breakpoint, boolean>>;
export const responsiveArray: Breakpoint[] = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
@ -12,7 +13,7 @@ export const responsiveMap: BreakpointMap = {
xxl: '(min-width: 1600px)',
};
type SubscribeFunc = (screens: BreakpointMap) => void;
type SubscribeFunc = (screens: ScreenMap) => void;
let subscribers: Array<{
token: string;
@ -23,7 +24,7 @@ let screens = {};
const responsiveObserve = {
matchHandlers: {},
dispatch(pointMap: BreakpointMap) {
dispatch(pointMap: ScreenMap) {
screens = pointMap;
if (subscribers.length < 1) {
return false;

6
components/descriptions/index.tsx
View File

@ -4,7 +4,7 @@ import toArray from 'rc-util/lib/Children/toArray';
import warning from '../_util/warning';
import ResponsiveObserve, {
Breakpoint,
BreakpointMap,
ScreenMap,
responsiveArray,
} from '../_util/responsiveObserve';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
@ -168,7 +168,7 @@ const defaultColumnMap = {
class Descriptions extends React.Component<
DescriptionsProps,
{
screens: BreakpointMap;
screens: ScreenMap;
}
> {
static defaultProps: DescriptionsProps = {
@ -179,7 +179,7 @@ class Descriptions extends React.Component<
static Item: typeof DescriptionsItem = DescriptionsItem;
state: {
screens: BreakpointMap;
screens: ScreenMap;
} = {
screens: {},
};

10
components/grid/__tests__/__snapshots__/demo.test.js.snap
View File

@ -487,11 +487,11 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
</div>
<div
class="ant-row"
style="margin-top:-10px;margin-bottom:10px"
style="margin-left:-16px;margin-right:-16px;margin-top:-10px;margin-bottom:10px"
>
<div
class="ant-col ant-col-6 gutter-row"
style="padding-top:10px;padding-bottom:10px"
style="padding-left:16px;padding-right:16px;padding-top:10px;padding-bottom:10px"
>
<div
class="gutter-box"
@ -501,7 +501,7 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
</div>
<div
class="ant-col ant-col-6 gutter-row"
style="padding-top:10px;padding-bottom:10px"
style="padding-left:16px;padding-right:16px;padding-top:10px;padding-bottom:10px"
>
<div
class="gutter-box"
@ -511,7 +511,7 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
</div>
<div
class="ant-col ant-col-6 gutter-row"
style="padding-top:10px;padding-bottom:10px"
style="padding-left:16px;padding-right:16px;padding-top:10px;padding-bottom:10px"
>
<div
class="gutter-box"
@ -521,7 +521,7 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
</div>
<div
class="ant-col ant-col-6 gutter-row"
style="padding-top:10px;padding-bottom:10px"
style="padding-left:16px;padding-right:16px;padding-top:10px;padding-bottom:10px"
>
<div
class="gutter-box"

13
components/grid/row.tsx
View File

@ -5,7 +5,7 @@ import RowContext from './RowContext';
import { tuple } from '../_util/type';
import ResponsiveObserve, {
Breakpoint,
BreakpointMap,
ScreenMap,
responsiveArray,
} from '../_util/responsiveObserve';
@ -21,7 +21,7 @@ export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
}
export interface RowState {
screens: BreakpointMap;
screens: ScreenMap;
}
export default class Row extends React.Component<RowProps, RowState> {
@ -30,7 +30,14 @@ export default class Row extends React.Component<RowProps, RowState> {
};
state: RowState = {
screens: {},
screens: {
xs: true,
sm: true,
md: true,
lg: true,
xl: true,
xxl: true,
},
};
token: string;