Skip to content

Commit

Permalink
megre Feature into master (#29141)
Browse files Browse the repository at this point in the history 
* feat: Allow user to configure the Tooltip in the Table header (#29002)

* feat: Table header supports tooltipPlacement

* docs: add Table tooltipPlacement

* feat: Allow user to configure the Tooltip in the Table header

* fix: fix jsx and use old code style

* fix: replace if blocks with ternary operator

* docs: fix url

Co-authored-by: 偏右 <afc163@gmail.com>

* docs: fix url

Co-authored-by: harrisoff <john@smith.kyon>
Co-authored-by: 偏右 <afc163@gmail.com>

* fix: Row with gutter has additional gap (#29059)

* chore: init gutter

* feat: col support gap

* chore: Update playground

* fix: Safari padding

* test: fix test case

* test: More test case

* docs: Update demo

* test: Update coverage

* test: Update test hack

* feat(input-number): add keyboard prop to support disable keyboard (#29110)

Co-authored-by: Ant Design GitHub Bot <yesmeck+ant-design-bot@gmail.com>
Co-authored-by: Harrison <stlebea@foxmail.com>
Co-authored-by: harrisoff <john@smith.kyon>
Co-authored-by: 偏右 <afc163@gmail.com>
Co-authored-by: 二货机器人 <smith3816@gmail.com>
Co-authored-by: Kermit <kermitlx@outlook.com>
  • Loading branch information
@chenshuai2144 @ant-design-bot
@harrisoff @afc163 @zombieJ @kerm1it
7 people authored Feb 1, 2021
1 parent be08d23 commit 40f9be9
Show file tree
Hide file tree
Showing 22 changed files with 375 additions and 38 deletions.
29 changes: 28 additions & 1 deletion components/_util/styleChecker.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
import canUseDom from 'rc-util/lib/Dom/canUseDom';

export const canUseDocElement = () => canUseDom() && window.document.documentElement;

export const isStyleSupport = (styleName: string | Array<string>): boolean => {
if (typeof window !== 'undefined' && window.document && window.document.documentElement) {
if (canUseDocElement()) {
const styleNameList = Array.isArray(styleName) ? styleName : [styleName];
const { documentElement } = window.document;

Expand All @@ -9,3 +13,26 @@ export const isStyleSupport = (styleName: string | Array<string>): boolean => {
};

export const isFlexSupported = isStyleSupport(['flex', 'webkitFlex', 'Flex', 'msFlex']);

export const isFlexGapSupported = (() => {
if (!canUseDocElement()) {
return false;
}

// create flex container with row-gap set
const flex = document.createElement('div');
flex.style.display = 'flex';
flex.style.flexDirection = 'column';
flex.style.rowGap = '1px';

// create two, elements inside it
flex.appendChild(document.createElement('div'));
flex.appendChild(document.createElement('div'));

// append to the DOM (needed to obtain scrollHeight)
document.body.appendChild(flex);
const isSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap
document.body.removeChild(flex);

return isSupported;
})();
44 changes: 41 additions & 3 deletions components/grid/__tests__/__snapshots__/demo.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -701,7 +701,7 @@ Array [
</div>,
<div
class="ant-row"
style="margin-left:-8px;margin-right:-8px;margin-top:-12px;margin-bottom:12px"
style="margin-left:-8px;margin-right:-8px;margin-top:-12px;margin-bottom:-12px"
>
<div
class="ant-col ant-col-6 gutter-row"
Expand Down Expand Up @@ -1121,7 +1121,7 @@ Array [
</div>,
<div
class="ant-row"
style="margin-left:-8px;margin-right:-8px;margin-top:-8px;margin-bottom:8px"
style="margin-left:-8px;margin-right:-8px;margin-top:-8px;margin-bottom:-8px"
>
<div
class="ant-col ant-col-6"
Expand Down Expand Up @@ -1155,10 +1155,43 @@ Array [
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
class="ant-col ant-col-6"
style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
>
<div>
Column
</div>
</div>
</div>,
"Another Row:",
<div
class="ant-row"
style="margin-left:-8px;margin-right:-8px;margin-top:-8px;margin-bottom:8px"
style="margin-left:-8px;margin-right:-8px;margin-top:-8px;margin-bottom:-8px"
>
<div
class="ant-col ant-col-6"
Expand Down Expand Up @@ -1201,6 +1234,11 @@ Array [
&lt;Col span={6} /&gt;
&lt;Col span={6} /&gt;
&lt;Col span={6} /&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
Expand Down
2 changes: 1 addition & 1 deletion components/grid/__tests__/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,6 @@ exports[`Grid should render Row 1`] = `
exports[`Grid when typeof gutter is object array in large screen 1`] = `
<div
class="ant-row"
style="margin-left:-20px;margin-right:-20px;margin-top:-200px;margin-bottom:200px"
style="margin-left:-20px;margin-right:-20px;margin-top:-200px;margin-bottom:-200px"
/>
`;
28 changes: 28 additions & 0 deletions components/grid/__tests__/gap.test.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import React from 'react';
import { mount } from 'enzyme';
import { Col, Row } from '..';
// eslint-disable-next-line no-unused-vars
import * as styleChecker from '../../_util/styleChecker';

jest.mock('../../_util/styleChecker', () => ({
canUseDocElement: () => true,
isStyleSupport: () => true,
isFlexGapSupported: true,
}));

describe('Grid.Gap', () => {
it('should use gap', () => {
const wrapper = mount(
<Row gutter={[16, 8]}>
<Col />
</Row>,
);

expect(wrapper.find('.ant-row').props().style).toEqual(
expect.objectContaining({
'--column-gap': '16px',
'--row-gap': '8px',
}),
);
});
});
4 changes: 2 additions & 2 deletions components/grid/__tests__/index.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,13 +93,13 @@ describe('Grid', () => {
});
});

it('should work currect when gutter is array', () => {
it('should work current 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,
marginBottom: -10,
});
});

Expand Down
35 changes: 35 additions & 0 deletions components/grid/__tests__/server.test.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React from 'react';
import { mount } from 'enzyme';
// eslint-disable-next-line no-unused-vars
import canUseDom from 'rc-util/lib/Dom/canUseDom';
import { Col, Row } from '..';

jest.mock('rc-util/lib/Dom/canUseDom', () => () => false);

describe('Grid.Server', () => {
it('use compatible gap logic', () => {
const wrapper = mount(
<Row gutter={[8, 16]}>
<Col />
</Row>,
);

expect(wrapper.find('.ant-row').props().style).toEqual(
expect.objectContaining({
marginLeft: -4,
marginRight: -4,
marginTop: -8,
marginBottom: -8,
}),
);

expect(wrapper.find('.ant-col').props().style).toEqual(
expect.objectContaining({
paddingLeft: 4,
paddingRight: 4,
paddingTop: 8,
paddingBottom: 8,
}),
);
});
});
3 changes: 2 additions & 1 deletion components/grid/col.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import * as React from 'react';
import classNames from 'classnames';
import RowContext from './RowContext';
import { ConfigContext } from '../config-provider';
import { isFlexGapSupported } from '../_util/styleChecker';

// https://github.com/ant-design/ant-design/issues/14324
type ColSpanType = number | string;
Expand Down Expand Up @@ -103,7 +104,7 @@ const Col = React.forwardRef<HTMLDivElement, ColProps>((props, ref) => {
);

let mergedStyle: React.CSSProperties = { ...style };
if (gutter) {
if (gutter && !isFlexGapSupported) {
mergedStyle = {
...(gutter[0]! > 0
? {
Expand Down
11 changes: 9 additions & 2 deletions components/grid/demo/playground.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,9 +100,13 @@ class App extends React.Component {
tipFormatter={value => colCounts[value]}
/>
</div>
<Row gutter={[gutters[gutterKey], vgutters[vgutterKey]]}>
{cols}
{cols}
</Row>
Another Row:
<Row gutter={[gutters[gutterKey], vgutters[vgutterKey]]}>{cols}</Row>
<Row gutter={[gutters[gutterKey], vgutters[vgutterKey]]}>{cols}</Row>
<pre className="demo-code">{`<Row gutter={[${gutters[gutterKey]}, ${vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
<pre className="demo-code">{`<Row gutter={[${gutters[gutterKey]}, ${vgutters[vgutterKey]}]}>\n${colCode}\n${colCode}</Row>`}</pre>
<pre className="demo-code">{`<Row gutter={[${gutters[gutterKey]}, ${vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
</>
);
Expand Down Expand Up @@ -133,6 +137,9 @@ ReactDOM.render(<App />, mountNode);
#components-grid-demo-playground pre.demo-code {
direction: ltr;
}
#components-grid-demo-playground .ant-col {
padding: 0;
}
```

<style>
Expand Down
52 changes: 36 additions & 16 deletions components/grid/row.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import ResponsiveObserve, {
ScreenMap,
responsiveArray,
} from '../_util/responsiveObserve';
import { isFlexGapSupported } from '../_util/styleChecker';

const RowAligns = tuple('top', 'middle', 'bottom', 'stretch');
const RowJustify = tuple('start', 'end', 'center', 'space-around', 'space-between');
Expand Down Expand Up @@ -92,25 +93,44 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
},
className,
);
const rowStyle = {
...(gutters[0]! > 0
? {
marginLeft: gutters[0]! / -2,
marginRight: gutters[0]! / -2,
}
: {}),
...(gutters[1]! > 0
? {
marginTop: gutters[1]! / -2,
marginBottom: gutters[1]! / 2,
}
: {}),
...style,
};

// Add gutter related style
let rowStyle: React.CSSProperties & {
'--column-gap'?: string | number;
'--row-gap'?: string | number;
} = {};

if (isFlexGapSupported) {
rowStyle = {
'--column-gap': 0,
'--row-gap': 0,
};

if (gutters[0]! > 0) {
const gap = gutters[0];
rowStyle.columnGap = gap;
rowStyle['--column-gap'] = `${gap}px`;
}
if (gutters[1]! > 0) {
const gap = gutters[1];
rowStyle.rowGap = gap;
rowStyle['--row-gap'] = `${gap}px`;
}
} else {
const horizontalGutter = gutters[0]! > 0 ? gutters[0] / -2 : undefined;
const verticalGutter = gutters[1]! > 0 ? gutters[1] / -2 : undefined;

rowStyle = {
marginLeft: horizontalGutter,
marginRight: horizontalGutter,
marginTop: verticalGutter,
marginBottom: verticalGutter,
};
}

return (
<RowContext.Provider value={{ gutter: gutters, wrap }}>
<div {...others} className={classes} style={rowStyle} ref={ref}>
<div {...others} className={classes} style={{ ...rowStyle, ...style }} ref={ref}>
{children}
</div>
</RowContext.Provider>
Expand Down
1 change: 1 addition & 0 deletions components/grid/style/mixin.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
display: block;
flex: 0 0 percentage((@index / @grid-columns));
max-width: percentage((@index / @grid-columns));
max-width: calc(percentage((@index / @grid-columns)) - ~'var(--column-gap)');
}
.@{ant-prefix}-col@{class}-push-@{index} {
left: percentage((@index / @grid-columns));
Expand Down
Loading

0 comments on commit 40f9be9

Please sign in to comment.