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.

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

Update Card & PageHeader style #15755

Merged
merged 6 commits into from Mar 31, 2019
Merged
Changes from 4 commits
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

@@ -3,8 +3,6 @@ import { mount } from 'enzyme';
import Card from '../index';
import Button from '../../button/index';

const testMethod = typeof window !== 'undefined' ? it : xit;

describe('Card', () => {
beforeAll(() => {
jest.useFakeTimers();
@@ -14,30 +12,6 @@ describe('Card', () => {
jest.useRealTimers();
});

function fakeResizeWindowTo(wrapper, width) {
Object.defineProperties(wrapper.instance().container, {
offsetWidth: {
get() {
return width;
},
configurable: true,
},
});
window.resizeTo(width);
}

testMethod('resize card will trigger different padding', () => {
const wrapper = mount(<Card title="xxx">xxx</Card>);
fakeResizeWindowTo(wrapper, 1000);
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-card-wider-padding').length).toBe(1);
fakeResizeWindowTo(wrapper, 800);
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-card-wider-padding').length).toBe(0);
});

it('should still have padding when card which set padding to 0 is loading', () => {
const wrapper = mount(
<Card loading bodyStyle={{ padding: 0 }}>
@@ -69,13 +43,6 @@ describe('Card', () => {
warnSpy.mockRestore();
});

it('unmount', () => {
const wrapper = mount(<Card>xxx</Card>);
const removeResizeEventSpy = jest.spyOn(wrapper.instance().resizeEvent, 'remove');
wrapper.unmount();
expect(removeResizeEventSpy).toHaveBeenCalled();
});

it('onTabChange should work', () => {
const tabList = [
{
@@ -1,14 +1,12 @@
import * as React from 'react';
import classNames from 'classnames';
import addEventListener from 'rc-util/lib/Dom/addEventListener';
import omit from 'omit.js';
import Grid from './Grid';
import Meta from './Meta';
import Tabs from '../tabs';
import Row from '../row';
import Col from '../col';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import { throttleByAnimationFrameDecorator } from '../_util/throttleByAnimationFrame';
import warning from '../_util/warning';
import { Omit } from '../_util/type';

@@ -48,26 +46,11 @@ export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 't
defaultActiveTabKey?: string;
}

export interface CardState {
widerPadding: boolean;
}

export default class Card extends React.Component<CardProps, CardState> {
export default class Card extends React.Component<CardProps, {}> {
static Grid: typeof Grid = Grid;
static Meta: typeof Meta = Meta;

state = {
widerPadding: false,
};

private resizeEvent: any;
private updateWiderPaddingCalled: boolean = false;
private container: HTMLDivElement;

componentDidMount() {
this.updateWiderPadding();
this.resizeEvent = addEventListener(window, 'resize', this.updateWiderPadding);

if ('noHovering' in this.props) {
warning(
!this.props.noHovering,
@@ -82,42 +65,12 @@ export default class Card extends React.Component<CardProps, CardState> {
}
}

componentWillUnmount() {
if (this.resizeEvent) {
this.resizeEvent.remove();
}
(this.updateWiderPadding as any).cancel();
}

@throttleByAnimationFrameDecorator()
updateWiderPadding() {
if (!this.container) {
return;
}
// 936 is a magic card width pixel number indicated by designer
const WIDTH_BOUNDARY_PX = 936;
if (this.container.offsetWidth >= WIDTH_BOUNDARY_PX && !this.state.widerPadding) {
this.setState({ widerPadding: true }, () => {
this.updateWiderPaddingCalled = true; // first render without css transition
});
}
if (this.container.offsetWidth < WIDTH_BOUNDARY_PX && this.state.widerPadding) {
this.setState({ widerPadding: false }, () => {
this.updateWiderPaddingCalled = true; // first render without css transition
});
}
}

onTabChange = (key: string) => {
if (this.props.onTabChange) {
this.props.onTabChange(key);
}
};

saveRef = (node: HTMLDivElement) => {
this.container = node;
};

isContainGrid() {
let containGrid;
React.Children.forEach(this.props.children, (element: JSX.Element) => {
@@ -174,8 +127,6 @@ export default class Card extends React.Component<CardProps, CardState> {
[`${prefixCls}-loading`]: loading,
[`${prefixCls}-bordered`]: bordered,
[`${prefixCls}-hoverable`]: this.getCompatibleHoverable(),
[`${prefixCls}-wider-padding`]: this.state.widerPadding,
[`${prefixCls}-padding-transition`]: this.updateWiderPaddingCalled,
[`${prefixCls}-contain-grid`]: this.isContainGrid(),
[`${prefixCls}-contain-tabs`]: tabList && tabList.length,
[`${prefixCls}-${size}`]: size !== 'default',
@@ -274,7 +225,7 @@ export default class Card extends React.Component<CardProps, CardState> {
) : null;
const divProps = omit(others, ['onTabChange']);
return (
<div {...divProps} className={classString} ref={this.saveRef}>
<div {...divProps} className={classString}>
{head}
{coverDom}
{body}
@@ -172,19 +172,6 @@
}
}

&-wider-padding &-head {
padding: 0 @card-padding-wider;
}

&-wider-padding &-body {
padding: @card-padding-base @card-padding-wider;
}

&-padding-transition &-head,
&-padding-transition &-body {
transition: padding 0.3s;
}

&-type-inner &-head {
padding: 0 @card-padding-base;
background: @background-color-light;
@@ -6,11 +6,11 @@
.@{pageheader-prefix-cls} {
.reset-component;
position: relative;
padding: 16px 32px;
padding: 16px 24px;
background: @component-background;

&.@{pageheader-prefix-cls}-has-footer {
padding: 20px 32px;
padding: 20px 24px;
This conversation was marked as resolved by zombieJ

This comment has been minimized.

Copy link
@afc163

afc163 Mar 30, 2019

Member

边距搞个变量关联起来吧,要改一起改。

This comment has been minimized.

Copy link
@zombieJ

zombieJ Mar 30, 2019

Author Member

嗯,提成了:

  • @page-header-padding-vertical
  • @page-header-padding-horizontal
padding-bottom: 0;
}

ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.