test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 12:09:14 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

fix: Grid flexGap lazy check (#29202)

Browse Source 
* fix: get flex gap support before render

* chore: patch unit

* chore: rename

* test: fix test case
This commit is contained in:
二货机器人 2021-02-03 15:39:51 +08:00 committed by GitHub
parent a8ce4d404a
commit 9914ceb6be
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 17 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/_util/__tests__/util.test.js
View File

@ -10,7 +10,7 @@ import {
import getDataOrAriaProps from '../getDataOrAriaProps'; import getDataOrAriaProps from '../getDataOrAriaProps';
import Wave from '../wave'; import Wave from '../wave';
import TransButton from '../transButton'; import TransButton from '../transButton';
import { isStyleSupport, isFlexSupported } from '../styleChecker'; import { isStyleSupport } from '../styleChecker';
import { sleep } from '../../../tests/utils'; import { sleep } from '../../../tests/utils';
describe('Test utils function', () => { describe('Test utils function', () => {
@ -208,10 +208,6 @@ describe('Test utils function', () => {
}); });
describe('style', () => { describe('style', () => {
it('isFlexSupported', () => {
expect(isFlexSupported).toBe(true);
});
it('isStyleSupport', () => { it('isStyleSupport', () => {
expect(isStyleSupport('color')).toBe(true); expect(isStyleSupport('color')).toBe(true);
expect(isStyleSupport('not-existed')).toBe(false); expect(isStyleSupport('not-existed')).toBe(false);

15
components/_util/styleChecker.tsx
View File

@ -12,13 +12,16 @@ export const isStyleSupport = (styleName: string | Array<string>): boolean => {
return false; return false;
}; };
export const isFlexSupported = isStyleSupport(['flex', 'webkitFlex', 'Flex', 'msFlex']); let flexGapSupported: boolean | undefined;
export const detectFlexGapSupported = () => {
export const isFlexGapSupported = (() => {
if (!canUseDocElement()) { if (!canUseDocElement()) {
return false; return false;
} }
if (flexGapSupported !== undefined) {
return flexGapSupported;
}
// create flex container with row-gap set // create flex container with row-gap set
const flex = document.createElement('div'); const flex = document.createElement('div');
flex.style.display = 'flex'; flex.style.display = 'flex';
@ -31,8 +34,8 @@ export const isFlexGapSupported = (() => {
// append to the DOM (needed to obtain scrollHeight) // append to the DOM (needed to obtain scrollHeight)
document.body.appendChild(flex); document.body.appendChild(flex);
const isSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap flexGapSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap
document.body.removeChild(flex); document.body.removeChild(flex);
return isSupported; return flexGapSupported;
})(); };

2
components/grid/__tests__/gap.test.js
View File

@ -7,7 +7,7 @@ import * as styleChecker from '../../_util/styleChecker';
jest.mock('../../_util/styleChecker', () => ({ jest.mock('../../_util/styleChecker', () => ({
canUseDocElement: () => true, canUseDocElement: () => true,
isStyleSupport: () => true, isStyleSupport: () => true,
isFlexGapSupported: true, detectFlexGapSupported: () => true,
})); }));
describe('Grid.Gap', () => { describe('Grid.Gap', () => {

4
components/grid/col.tsx
View File

@ -2,7 +2,7 @@ import * as React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import RowContext from './RowContext'; import RowContext from './RowContext';
import { ConfigContext } from '../config-provider'; import { ConfigContext } from '../config-provider';
import { isFlexGapSupported } from '../_util/styleChecker'; import { detectFlexGapSupported } from '../_util/styleChecker';
// https://github.com/ant-design/ant-design/issues/14324 // https://github.com/ant-design/ant-design/issues/14324
type ColSpanType = number | string; type ColSpanType = number | string;
@ -104,7 +104,7 @@ const Col = React.forwardRef<HTMLDivElement, ColProps>((props, ref) => {
); );
let mergedStyle: React.CSSProperties = { ...style }; let mergedStyle: React.CSSProperties = { ...style };
if (gutter && !isFlexGapSupported) { if (gutter && !detectFlexGapSupported()) {
mergedStyle = { mergedStyle = {
...(gutter[0]! > 0 ...(gutter[0]! > 0
? { ? {

8
components/grid/row.tsx
View File

@ -8,7 +8,7 @@ import ResponsiveObserve, {
ScreenMap, ScreenMap,
responsiveArray, responsiveArray,
} from '../_util/responsiveObserve'; } from '../_util/responsiveObserve';
import { isFlexGapSupported } from '../_util/styleChecker'; import { detectFlexGapSupported } from '../_util/styleChecker';
const RowAligns = tuple('top', 'middle', 'bottom', 'stretch'); const RowAligns = tuple('top', 'middle', 'bottom', 'stretch');
const RowJustify = tuple('start', 'end', 'center', 'space-around', 'space-between'); const RowJustify = tuple('start', 'end', 'center', 'space-around', 'space-between');
@ -100,10 +100,10 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
'--row-gap'?: string | number; '--row-gap'?: string | number;
} = {}; } = {};
if (isFlexGapSupported) { if (detectFlexGapSupported()) {
rowStyle = { rowStyle = {
'--column-gap': 0, '--column-gap': '0px',
'--row-gap': 0, '--row-gap': '0px',
}; };
if (gutters[0]! > 0) { if (gutters[0]! > 0) {