mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 02:59:04 +08:00
Merge branch 'master' into feature
* master: (23 commits) ✅ fix snapshots Add docs for the List rowKey prop 💄 don't reset font-family in each component 💄 chore card less variable Remove classNames from custom-typing file add collapsed faq ref: #13953 feat: support define card border radius Fix dateRender not supported at WeekPicker 📝 Add links in Home Page 📝 Fix site responsive interaction, close #13954 💄 chore Steps[labelPlacement="vertical"] style ✅ fix warning in test case 📝 update tech antfin cases 🐛 site menu open bug 🐛 fix site defaultOpenKeys Correct docs 💄 chore button code style fix spaces in curly brackets fix two more code style issues Fix method argument name ...
This commit is contained in:
afc163
commit
3f1be96866
@ -1,6 +1,7 @@
|
||||
import * as React from 'react';
|
||||
import * as PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import { polyfill } from 'react-lifecycles-compat';
|
||||
import Group from './button-group';
|
||||
import omit from 'omit.js';
|
||||
import Icon from '../icon';
|
||||
@ -76,7 +77,12 @@ export type NativeButtonProps = {
|
||||
|
||||
export type ButtonProps = AnchorButtonProps | NativeButtonProps;
|
||||
|
||||
export default class Button extends React.Component<ButtonProps, any> {
|
||||
interface ButtonState {
|
||||
loading?: boolean | { delay?: number };
|
||||
hasTwoCNChar: boolean;
|
||||
}
|
||||
|
||||
class Button extends React.Component<ButtonProps, ButtonState> {
|
||||
static Group: typeof Group;
|
||||
static __ANT_BUTTON = true;
|
||||
|
||||
@ -98,6 +104,16 @@ export default class Button extends React.Component<ButtonProps, any> {
|
||||
block: PropTypes.bool,
|
||||
};
|
||||
|
||||
static getDerivedStateFromProps(nextProps: ButtonProps, prevState: ButtonState) {
|
||||
if (nextProps.loading instanceof Boolean) {
|
||||
return {
|
||||
...prevState,
|
||||
loading: nextProps.loading,
|
||||
};
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
private delayTimeout: number;
|
||||
private buttonNode: HTMLElement | null;
|
||||
|
||||
@ -113,25 +129,23 @@ export default class Button extends React.Component<ButtonProps, any> {
|
||||
this.fixTwoCNChar();
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps: ButtonProps) {
|
||||
const currentLoading = this.props.loading;
|
||||
const loading = nextProps.loading;
|
||||
componentDidUpdate(prevProps: ButtonProps) {
|
||||
this.fixTwoCNChar();
|
||||
|
||||
if (currentLoading) {
|
||||
if (prevProps.loading && typeof prevProps.loading !== 'boolean') {
|
||||
clearTimeout(this.delayTimeout);
|
||||
}
|
||||
|
||||
if (typeof loading !== 'boolean' && loading && loading.delay) {
|
||||
const { loading } = this.props;
|
||||
if (loading && typeof loading !== 'boolean' && loading.delay) {
|
||||
this.delayTimeout = window.setTimeout(() => this.setState({ loading }), loading.delay);
|
||||
} else if (prevProps.loading === this.props.loading) {
|
||||
return;
|
||||
} else {
|
||||
this.setState({ loading });
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
this.fixTwoCNChar();
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.delayTimeout) {
|
||||
clearTimeout(this.delayTimeout);
|
||||
@ -264,3 +278,7 @@ export default class Button extends React.Component<ButtonProps, any> {
|
||||
return <ConfigConsumer>{this.renderButton}</ConfigConsumer>;
|
||||
}
|
||||
}
|
||||
|
||||
polyfill(Button);
|
||||
|
||||
export default Button;
|
||||
|
||||
@ -4,7 +4,6 @@
|
||||
@card-prefix-cls: ~'@{ant-prefix}-card';
|
||||
@card-head-height: 48px;
|
||||
@card-hover-border: fade(@black, 9%);
|
||||
@card-radius: @border-radius-sm;
|
||||
|
||||
@gradient-min: fade(@card-background, 20%);
|
||||
@gradient-max: fade(@card-background, 40%);
|
||||
|
||||
@ -34,3 +34,9 @@ A content area which can be collapsed and expanded.
|
||||
| header | Title of the panel | string\|ReactNode | - |
|
||||
| key | Unique key identifying the panel from among its siblings | string | - |
|
||||
| showArrow | If `false`, panel will not show arrow icon | boolean | `true` |
|
||||
|
||||
## FAQ
|
||||
|
||||
### How to let the arrow to be on the right?
|
||||
|
||||
You can adjust style of the arrow: <https://codesandbox.io/s/vpm8qwo37>
|
||||
|
||||
@ -31,3 +31,9 @@ cols: 1
|
||||
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |
|
||||
| header | 面板头内容 | string\|ReactNode | 无 |
|
||||
| key | 对应 activeKey | string | 无 |
|
||||
|
||||
## FAQ
|
||||
|
||||
### 我希望箭头在右边，怎么做？
|
||||
|
||||
通过样式调整，将箭头放到右边就行啦：<https://codesandbox.io/s/vpm8qwo37>
|
||||
|
||||
@ -58,6 +58,8 @@ class WeekPicker extends React.Component<any, WeekPickerState> {
|
||||
weekDateRender = (current: any) => {
|
||||
const selectedValue = this.state.value;
|
||||
const { prefixCls } = this;
|
||||
const { dateRender } = this.props;
|
||||
const dateNode = dateRender ? dateRender(current) : current.date();
|
||||
if (
|
||||
selectedValue &&
|
||||
current.year() === selectedValue.year() &&
|
||||
@ -65,11 +67,11 @@ class WeekPicker extends React.Component<any, WeekPickerState> {
|
||||
) {
|
||||
return (
|
||||
<div className={`${prefixCls}-selected-day`}>
|
||||
<div className={`${prefixCls}-date`}>{current.date()}</div>
|
||||
<div className={`${prefixCls}-date`}>{dateNode}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return <div className={`${prefixCls}-date`}>{current.date()}</div>;
|
||||
return <div className={`${prefixCls}-date`}>{dateNode}</div>;
|
||||
};
|
||||
|
||||
handleChange = (value: moment.Moment | null) => {
|
||||
@ -145,8 +147,7 @@ class WeekPicker extends React.Component<any, WeekPickerState> {
|
||||
// https://github.com/facebook/react/issues/12397
|
||||
this.prefixCls = prefixCls;
|
||||
|
||||
const { open } = this.state;
|
||||
const pickerValue = this.state.value;
|
||||
const { open, value: pickerValue } = this.state;
|
||||
if (pickerValue && localeCode) {
|
||||
pickerValue.locale(localeCode);
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { mount, render } from 'enzyme';
|
||||
import { setMockDate, resetMockDate } from '../../../tests/utils';
|
||||
import DatePicker from '..';
|
||||
import focusTest from '../../../tests/shared/focusTest';
|
||||
import { openPanel } from './utils';
|
||||
@ -7,6 +8,14 @@ import { openPanel } from './utils';
|
||||
const { WeekPicker } = DatePicker;
|
||||
|
||||
describe('WeekPicker', () => {
|
||||
beforeEach(() => {
|
||||
setMockDate();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
resetMockDate();
|
||||
});
|
||||
|
||||
focusTest(WeekPicker);
|
||||
|
||||
it('should support style prop', () => {
|
||||
@ -48,4 +57,18 @@ describe('WeekPicker', () => {
|
||||
expect(extraNode.length).toBe(1);
|
||||
expect(extraNode.text()).toBe('decade');
|
||||
});
|
||||
|
||||
it('should support dateRender', () => {
|
||||
const wrapper = mount(
|
||||
<WeekPicker open dateRender={current => <span>{current.format('YYYY-MM-DD')}</span>} />,
|
||||
);
|
||||
expect(
|
||||
render(
|
||||
wrapper
|
||||
.find('Trigger')
|
||||
.instance()
|
||||
.getComponent(),
|
||||
),
|
||||
).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,5 +1,790 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`WeekPicker should support dateRender 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="ant-calendar-picker-container ant-calendar-picker-container-placement-bottomLeft "
|
||||
>
|
||||
<div
|
||||
class="ant-calendar ant-calendar-week-number"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-panel"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date-panel"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-header"
|
||||
>
|
||||
<div
|
||||
style="position:relative"
|
||||
>
|
||||
<a
|
||||
class="ant-calendar-prev-year-btn"
|
||||
role="button"
|
||||
title="Last year (Control + left)"
|
||||
/>
|
||||
<a
|
||||
class="ant-calendar-prev-month-btn"
|
||||
role="button"
|
||||
title="Previous month (PageUp)"
|
||||
/>
|
||||
<span
|
||||
class="ant-calendar-my-select"
|
||||
>
|
||||
<a
|
||||
class="ant-calendar-month-select"
|
||||
role="button"
|
||||
title="Choose a month"
|
||||
>
|
||||
Sep
|
||||
</a>
|
||||
<a
|
||||
class="ant-calendar-year-select"
|
||||
role="button"
|
||||
title="Choose a year"
|
||||
>
|
||||
2017
|
||||
</a>
|
||||
</span>
|
||||
<a
|
||||
class="ant-calendar-next-month-btn"
|
||||
title="Next month (PageDown)"
|
||||
/>
|
||||
<a
|
||||
class="ant-calendar-next-year-btn"
|
||||
title="Next year (Control + right)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-calendar-body"
|
||||
>
|
||||
<table
|
||||
cellspacing="0"
|
||||
class="ant-calendar-table"
|
||||
role="grid"
|
||||
>
|
||||
<thead>
|
||||
<tr
|
||||
role="row"
|
||||
>
|
||||
<th
|
||||
class="ant-calendar-column-header ant-calendar-week-number-header"
|
||||
role="columnheader"
|
||||
>
|
||||
<span
|
||||
class="ant-calendar-column-header-inner"
|
||||
>
|
||||
x
|
||||
</span>
|
||||
</th>
|
||||
<th
|
||||
class="ant-calendar-column-header"
|
||||
role="columnheader"
|
||||
title="Sun"
|
||||
>
|
||||
<span
|
||||
class="ant-calendar-column-header-inner"
|
||||
>
|
||||
Su
|
||||
</span>
|
||||
</th>
|
||||
<th
|
||||
class="ant-calendar-column-header"
|
||||
role="columnheader"
|
||||
title="Mon"
|
||||
>
|
||||
<span
|
||||
class="ant-calendar-column-header-inner"
|
||||
>
|
||||
Mo
|
||||
</span>
|
||||
</th>
|
||||
<th
|
||||
class="ant-calendar-column-header"
|
||||
role="columnheader"
|
||||
title="Tue"
|
||||
>
|
||||
<span
|
||||
class="ant-calendar-column-header-inner"
|
||||
>
|
||||
Tu
|
||||
</span>
|
||||
</th>
|
||||
<th
|
||||
class="ant-calendar-column-header"
|
||||
role="columnheader"
|
||||
title="Wed"
|
||||
>
|
||||
<span
|
||||
class="ant-calendar-column-header-inner"
|
||||
>
|
||||
We
|
||||
</span>
|
||||
</th>
|
||||
<th
|
||||
class="ant-calendar-column-header"
|
||||
role="columnheader"
|
||||
title="Thu"
|
||||
>
|
||||
<span
|
||||
class="ant-calendar-column-header-inner"
|
||||
>
|
||||
Th
|
||||
</span>
|
||||
</th>
|
||||
<th
|
||||
class="ant-calendar-column-header"
|
||||
role="columnheader"
|
||||
title="Fri"
|
||||
>
|
||||
<span
|
||||
class="ant-calendar-column-header-inner"
|
||||
>
|
||||
Fr
|
||||
</span>
|
||||
</th>
|
||||
<th
|
||||
class="ant-calendar-column-header"
|
||||
role="columnheader"
|
||||
title="Sat"
|
||||
>
|
||||
<span
|
||||
class="ant-calendar-column-header-inner"
|
||||
>
|
||||
Sa
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="ant-calendar-tbody"
|
||||
>
|
||||
<tr
|
||||
class=""
|
||||
role="row"
|
||||
>
|
||||
<td
|
||||
class="ant-calendar-week-number-cell"
|
||||
role="gridcell"
|
||||
>
|
||||
35
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell ant-calendar-last-month-cell"
|
||||
role="gridcell"
|
||||
title="August 27, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-08-27
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell ant-calendar-last-month-cell"
|
||||
role="gridcell"
|
||||
title="August 28, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-08-28
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell ant-calendar-last-month-cell"
|
||||
role="gridcell"
|
||||
title="August 29, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-08-29
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell ant-calendar-last-month-cell"
|
||||
role="gridcell"
|
||||
title="August 30, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-08-30
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell ant-calendar-last-month-cell ant-calendar-last-day-of-month"
|
||||
role="gridcell"
|
||||
title="August 31, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-08-31
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell"
|
||||
role="gridcell"
|
||||
title="September 1, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-09-01
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell"
|
||||
role="gridcell"
|
||||
title="September 2, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-09-02
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
role="row"
|
||||
>
|
||||
<td
|
||||
class="ant-calendar-week-number-cell"
|
||||
role="gridcell"
|
||||
>
|
||||
36
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell"
|
||||
role="gridcell"
|
||||
title="September 3, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-09-03
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell"
|
||||
role="gridcell"
|
||||
title="September 4, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-09-04
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell"
|
||||
role="gridcell"
|
||||
title="September 5, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-09-05
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell"
|
||||
role="gridcell"
|
||||
title="September 6, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-09-06
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell"
|
||||
role="gridcell"
|
||||
title="September 7, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-09-07
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell"
|
||||
role="gridcell"
|
||||
title="September 8, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-09-08
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell"
|
||||
role="gridcell"
|
||||
title="September 9, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-09-09
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
role="row"
|
||||
>
|
||||
<td
|
||||
class="ant-calendar-week-number-cell"
|
||||
role="gridcell"
|
||||
>
|
||||
37
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell"
|
||||
role="gridcell"
|
||||
title="September 10, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-09-10
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell"
|
||||
role="gridcell"
|
||||
title="September 11, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-09-11
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell"
|
||||
role="gridcell"
|
||||
title="September 12, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-09-12
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell"
|
||||
role="gridcell"
|
||||
title="September 13, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-09-13
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell"
|
||||
role="gridcell"
|
||||
title="September 14, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-09-14
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell"
|
||||
role="gridcell"
|
||||
title="September 15, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-09-15
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell"
|
||||
role="gridcell"
|
||||
title="September 16, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-09-16
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-calendar-current-week ant-calendar-active-week"
|
||||
role="row"
|
||||
>
|
||||
<td
|
||||
class="ant-calendar-week-number-cell"
|
||||
role="gridcell"
|
||||
>
|
||||
38
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell"
|
||||
role="gridcell"
|
||||
title="September 17, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-09-17
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell ant-calendar-today ant-calendar-selected-day"
|
||||
role="gridcell"
|
||||
title="September 18, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-09-18
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell"
|
||||
role="gridcell"
|
||||
title="September 19, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-09-19
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell"
|
||||
role="gridcell"
|
||||
title="September 20, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-09-20
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell"
|
||||
role="gridcell"
|
||||
title="September 21, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-09-21
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell"
|
||||
role="gridcell"
|
||||
title="September 22, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-09-22
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell"
|
||||
role="gridcell"
|
||||
title="September 23, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-09-23
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
role="row"
|
||||
>
|
||||
<td
|
||||
class="ant-calendar-week-number-cell"
|
||||
role="gridcell"
|
||||
>
|
||||
39
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell"
|
||||
role="gridcell"
|
||||
title="September 24, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-09-24
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell"
|
||||
role="gridcell"
|
||||
title="September 25, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-09-25
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell"
|
||||
role="gridcell"
|
||||
title="September 26, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-09-26
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell"
|
||||
role="gridcell"
|
||||
title="September 27, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-09-27
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell"
|
||||
role="gridcell"
|
||||
title="September 28, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-09-28
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell"
|
||||
role="gridcell"
|
||||
title="September 29, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-09-29
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell ant-calendar-last-day-of-month"
|
||||
role="gridcell"
|
||||
title="September 30, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-09-30
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
role="row"
|
||||
>
|
||||
<td
|
||||
class="ant-calendar-week-number-cell"
|
||||
role="gridcell"
|
||||
>
|
||||
40
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell ant-calendar-next-month-btn-day"
|
||||
role="gridcell"
|
||||
title="October 1, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-10-01
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell ant-calendar-next-month-btn-day"
|
||||
role="gridcell"
|
||||
title="October 2, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-10-02
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell ant-calendar-next-month-btn-day"
|
||||
role="gridcell"
|
||||
title="October 3, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-10-03
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell ant-calendar-next-month-btn-day"
|
||||
role="gridcell"
|
||||
title="October 4, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-10-04
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell ant-calendar-next-month-btn-day"
|
||||
role="gridcell"
|
||||
title="October 5, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-10-05
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell ant-calendar-next-month-btn-day"
|
||||
role="gridcell"
|
||||
title="October 6, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-10-06
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-calendar-cell ant-calendar-next-month-btn-day"
|
||||
role="gridcell"
|
||||
title="October 7, 2017"
|
||||
>
|
||||
<div
|
||||
class="ant-calendar-date"
|
||||
>
|
||||
<span>
|
||||
2017-10-07
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`WeekPicker should support style prop 1`] = `
|
||||
<span
|
||||
class="ant-calendar-picker"
|
||||
|
||||
@ -50,6 +50,7 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
|
||||
PropTypes.string,
|
||||
PropTypes.object as PropTypes.Requireable<HTMLElement>,
|
||||
PropTypes.func,
|
||||
PropTypes.bool,
|
||||
]),
|
||||
maskClosable: PropTypes.bool,
|
||||
mask: PropTypes.bool,
|
||||
|
||||
@ -22,7 +22,7 @@ If there are too many operations to display, you can wrap them in a `Dropdown`.
|
||||
| overlayClassName | Class name of the dropdown root element | string | - |
|
||||
| overlayStyle | Style of the dropdown root element | object | - |
|
||||
| placement | placement of pop menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |
|
||||
| trigger | the trigger mode which executes the drop-down action | Array<`click`\|`hover`\|`contextMenu`> | `['hover']` |
|
||||
| trigger | the trigger mode which executes the drop-down action, hover doesn't work on mobile device | Array<`click`\|`hover`\|`contextMenu`> | `['hover']` |
|
||||
| visible | whether the dropdown menu is visible | boolean | - |
|
||||
| onVisibleChange | a callback function takes an argument: `visible`, is executed when the visible state is changed | Function(visible) | - |
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ title: Dropdown
|
||||
| overlayClassName | 下拉根元素的类名称 | string | - |
|
||||
| overlayStyle | 下拉根元素的样式 | object | - |
|
||||
| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |
|
||||
| trigger | 触发下拉的行为 | Array<`click`\|`hover`\|`contextMenu`> | `['hover']` |
|
||||
| trigger | 触发下拉的行为, 移动端不支持 hover | Array<`click`\|`hover`\|`contextMenu`> | `['hover']` |
|
||||
| visible | 菜单是否显示 | boolean | - |
|
||||
| onVisibleChange | 菜单显示状态改变时调用，参数为 visible | Function(visible) | - |
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
import warning from '../_util/warning';
|
||||
import { tuple } from '../_util/type';
|
||||
|
||||
const ValidateStatuses = tuple('success', 'warning', 'error', 'validating');
|
||||
const ValidateStatuses = tuple('success', 'warning', 'error', 'validating', '');
|
||||
|
||||
export interface FormItemProps {
|
||||
prefixCls?: string;
|
||||
|
||||
@ -4,7 +4,7 @@ import { Col, Row } from '..';
|
||||
|
||||
describe('Grid', () => {
|
||||
it('should render Col', () => {
|
||||
const wrapper = render(<Col span="2" />);
|
||||
const wrapper = render(<Col span={2} />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -14,11 +14,11 @@ describe('Grid', () => {
|
||||
});
|
||||
|
||||
it('renders wrapped Col correctly', () => {
|
||||
const MyCol = () => <Col span="12" />;
|
||||
const MyCol = () => <Col span={12} />;
|
||||
const wrapper = render(
|
||||
<Row gutter={20}>
|
||||
<div>
|
||||
<Col span="12" />
|
||||
<Col span={12} />
|
||||
</div>
|
||||
<MyCol />
|
||||
</Row>,
|
||||
|
||||
@ -10,7 +10,7 @@ describe('Input', () => {
|
||||
focusTest(Input);
|
||||
|
||||
it('should support maxLength', () => {
|
||||
const wrapper = mount(<Input maxLength="3" />);
|
||||
const wrapper = mount(<Input maxLength={3} />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -48,7 +48,7 @@ describe('TextArea', () => {
|
||||
});
|
||||
|
||||
it('should support maxLength', () => {
|
||||
const wrapper = mount(<TextArea maxLength="10" />);
|
||||
const wrapper = mount(<TextArea maxLength={10} />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@ -71,7 +71,7 @@ class NumericInput extends React.Component {
|
||||
onChange={this.onChange}
|
||||
onBlur={this.onBlur}
|
||||
placeholder="Input a number"
|
||||
maxLength="25"
|
||||
maxLength={25}
|
||||
/>
|
||||
</Tooltip>
|
||||
);
|
||||
|
||||
@ -22,6 +22,7 @@ A list can be used to display content related to a single subject. The content c
|
||||
| grid | The grid type of list. You can set grid to something like {gutter: 16, column: 4} | object | - |
|
||||
| header | List header renderer | string\|ReactNode | - |
|
||||
| itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string | - |
|
||||
| rowKey | Item's unique key, could be a string or function that returns a string | string\|Function(record):string | `key` |
|
||||
| loading | Shows a loading indicator while the contents of the list are being fetched | boolean\|[object](https://ant.design/components/spin-cn/#API) ([more](https://github.com/ant-design/ant-design/issues/8659)) | false |
|
||||
| loadMore | Shows a load more content | string\|ReactNode | - |
|
||||
| locale | i18n text including empty text | object | emptyText: 'No Data' <br> |
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
.@{steps-prefix-cls}-item {
|
||||
overflow: visible;
|
||||
&-tail {
|
||||
padding: 0 24px;
|
||||
margin-left: 48px;
|
||||
padding: 3.5px 24px;
|
||||
margin-left: 51px;
|
||||
}
|
||||
&-content {
|
||||
display: block;
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
@import '../themes/default';
|
||||
|
||||
.reset-component() {
|
||||
font-family: @font-family;
|
||||
font-size: @font-size-base;
|
||||
font-variant: @font-variant-base;
|
||||
line-height: @line-height-base;
|
||||
|
||||
@ -411,6 +411,7 @@
|
||||
@card-actions-background: @background-color-light;
|
||||
@card-background: #cfd8dc;
|
||||
@card-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
|
||||
@card-radius: @border-radius-sm;
|
||||
|
||||
// Comment
|
||||
// ---
|
||||
|
||||
@ -12,14 +12,14 @@ Currently, there are many products and sites using Ant Design. If your solutions
|
||||
|
||||
---
|
||||
|
||||
### Ant Financial Cloud
|
||||
### Ant Financial Technology
|
||||
|
||||
Cloud-oriented financial services, used by financial institutions that benefit from customized business cloud computing services.
|
||||
It assists financial institutions to upgrade to a new financial restructuring, promotion of capacity platforms, data and technology.
|
||||
|
||||
[Visit](https://www.cloud.alipay.com)
|
||||
[Visit](https://tech.antfin.com)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
@ -10,13 +10,13 @@ Ant Design 目前在外部也有许多产品实践，如果你的公司和产品
|
||||
|
||||
## 最佳实践
|
||||
|
||||
### 蚂蚁金融云
|
||||
### 蚂蚁金融科技
|
||||
|
||||
金融云是面向金融机构深度定制的行业云计算服务；助力金融机构向新金融转型升级，推动平台、数据和技术方面的能力全面对外开放。
|
||||
|
||||
[立即访问](https://www.cloud.alipay.com)
|
||||
[立即访问](https://tech.antfin.com)
|
||||
|
||||
|
||||
|
||||
|
||||
### OceanBase 云平台
|
||||
|
||||
|
||||
@ -100,12 +100,11 @@
|
||||
&-item {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin-right: 0;
|
||||
border-radius: 0;
|
||||
height: 86px;
|
||||
text-align: center;
|
||||
padding-top: 37px;
|
||||
padding: 37px 0 0;
|
||||
line-height: normal;
|
||||
|
||||
.main-color-text {
|
||||
@ -142,12 +141,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.make-palatte(@color, @index: 1) when (@index <= 10) {
|
||||
.palatte-@{color}-@{index} {
|
||||
.make-palette(@color, @index: 1) when (@index <= 10) {
|
||||
.palette-@{color}-@{index} {
|
||||
@background: '@{color}-@{index}';
|
||||
background: @@background;
|
||||
}
|
||||
.make-palatte(@color, (@index + 1)); // next iteration
|
||||
.make-palette(@color, (@index + 1)); // next iteration
|
||||
}
|
||||
|
||||
@grey-1: #fff;
|
||||
@ -164,17 +163,17 @@
|
||||
@border-color: rgba(229, 231, 235, 100);
|
||||
|
||||
.main-color {
|
||||
.make-palatte(blue);
|
||||
.make-palatte(purple);
|
||||
.make-palatte(cyan);
|
||||
.make-palatte(green);
|
||||
.make-palatte(magenta);
|
||||
.make-palatte(red);
|
||||
.make-palatte(volcano);
|
||||
.make-palatte(orange);
|
||||
.make-palatte(gold);
|
||||
.make-palatte(yellow);
|
||||
.make-palatte(lime);
|
||||
.make-palatte(geekblue);
|
||||
.make-palatte(grey);
|
||||
.make-palette(blue);
|
||||
.make-palette(purple);
|
||||
.make-palette(cyan);
|
||||
.make-palette(green);
|
||||
.make-palette(magenta);
|
||||
.make-palette(red);
|
||||
.make-palette(volcano);
|
||||
.make-palette(orange);
|
||||
.make-palette(gold);
|
||||
.make-palette(yellow);
|
||||
.make-palette(lime);
|
||||
.make-palette(geekblue);
|
||||
.make-palette(grey);
|
||||
}
|
||||
|
||||
@ -28,6 +28,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 991.99px) {
|
||||
.main-menu {
|
||||
> div > .ant-affix {
|
||||
position: static !important;
|
||||
}
|
||||
.main-menu-inner {
|
||||
overflow: hidden;
|
||||
max-height: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.99px) {
|
||||
#header {
|
||||
text-align: center;
|
||||
|
||||
@ -50,7 +50,7 @@ export default class Palette extends React.Component {
|
||||
ref={node => {
|
||||
this.colorNodes[`${name}-${i}`] = node;
|
||||
}}
|
||||
className={`main-color-item palatte-${name}-${i}`}
|
||||
className={`main-color-item palette-${name}-${i}`}
|
||||
style={{
|
||||
color: (name === 'yellow' ? i > 6 : i > 5) ? '#fff' : 'unset',
|
||||
fontWeight: i === 6 ? 'bold' : 'normal',
|
||||
|
||||
@ -117,7 +117,7 @@ export default class ComponentDoc extends React.Component {
|
||||
</section>
|
||||
<Row gutter={16}>
|
||||
<Col
|
||||
span={isSingleCol ? '24' : '12'}
|
||||
span={isSingleCol ? 24 : 12}
|
||||
className={isSingleCol ? 'code-boxes-col-1-1' : 'code-boxes-col-2-1'}
|
||||
>
|
||||
{leftChildren}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Link } from 'bisheng/router';
|
||||
import { Row, Col, Menu, Icon, Affix } from 'antd';
|
||||
@ -55,7 +55,7 @@ const getSideBarOpenKeys = nextProps => {
|
||||
return shouldOpenKeys;
|
||||
};
|
||||
|
||||
export default class MainContent extends React.PureComponent {
|
||||
export default class MainContent extends Component {
|
||||
static contextTypes = {
|
||||
intl: PropTypes.object.isRequired,
|
||||
isMobile: PropTypes.bool.isRequired,
|
||||
@ -70,10 +70,13 @@ export default class MainContent extends React.PureComponent {
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(props, state) {
|
||||
return {
|
||||
...state,
|
||||
openKeys: getSideBarOpenKeys(props),
|
||||
};
|
||||
if (!state.openKeys) {
|
||||
return {
|
||||
...state,
|
||||
openKeys: getSideBarOpenKeys(props),
|
||||
};
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
|
||||
@ -29,10 +29,15 @@ function getStyle() {
|
||||
#header #logo {
|
||||
padding: 0;
|
||||
}
|
||||
#header .ant-row > div:last-child .ant-menu,
|
||||
#header .nav-phone-icon {
|
||||
display: none;
|
||||
}
|
||||
#header #nav .ant-menu-item {
|
||||
border-color: transparent;
|
||||
}
|
||||
#header #nav .ant-menu-item.hide-in-home-page {
|
||||
display: none;
|
||||
}
|
||||
#header .ant-row > div:last-child .header-lang-button {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
|
||||
import { Link } from 'bisheng/router';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import classNames from 'classnames';
|
||||
import { Select, Menu, Row, Col, Icon, Popover, Input, Badge, Button } from 'antd';
|
||||
import { Select, Menu, Row, Col, Icon, Popover, Input, Button } from 'antd';
|
||||
import Santa from './Santa';
|
||||
import * as utils from '../utils';
|
||||
import { version as antdVersion } from '../../../../package.json';
|
||||
@ -161,7 +161,7 @@ export default class Header extends React.Component {
|
||||
id="nav"
|
||||
key="nav"
|
||||
>
|
||||
<Menu.Item key="home">
|
||||
<Menu.Item key="home" className="hide-in-home-page">
|
||||
<Link to={utils.getLocalizedPathname('/', isZhCN)}>
|
||||
<FormattedMessage id="app.header.menu.home" />
|
||||
</Link>
|
||||
@ -176,7 +176,7 @@ export default class Header extends React.Component {
|
||||
<FormattedMessage id="app.header.menu.components" />
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="pro">
|
||||
<Menu.Item key="pro" className="hide-in-home-page">
|
||||
<a
|
||||
href="http://pro.ant.design"
|
||||
className="header-link"
|
||||
@ -187,7 +187,7 @@ export default class Header extends React.Component {
|
||||
</a>
|
||||
</Menu.Item>
|
||||
{isZhCN ? (
|
||||
<Menu.Item key="course">
|
||||
<Menu.Item key="course" className="hide-in-home-page">
|
||||
<a
|
||||
href="https://www.yuque.com/ant-design/course"
|
||||
className="header-link"
|
||||
@ -195,17 +195,6 @@ export default class Header extends React.Component {
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
教程
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
position: 'relative',
|
||||
top: -2,
|
||||
width: 6,
|
||||
marginLeft: 8,
|
||||
}}
|
||||
>
|
||||
<Badge dot />
|
||||
</span>
|
||||
</a>
|
||||
</Menu.Item>
|
||||
) : null}
|
||||
|
||||
@ -95,16 +95,14 @@ export default class Layout extends React.Component {
|
||||
const { appLocale } = this.state;
|
||||
|
||||
return (
|
||||
<React.StrictMode>
|
||||
<IntlProvider locale={appLocale.locale} messages={appLocale.messages}>
|
||||
<LocaleProvider locale={appLocale.locale === 'zh-CN' ? zhCN : null}>
|
||||
<div className="page-wrapper">
|
||||
<Header {...restProps} />
|
||||
{children}
|
||||
</div>
|
||||
</LocaleProvider>
|
||||
</IntlProvider>
|
||||
</React.StrictMode>
|
||||
<IntlProvider locale={appLocale.locale} messages={appLocale.messages}>
|
||||
<LocaleProvider locale={appLocale.locale === 'zh-CN' ? zhCN : null}>
|
||||
<div className="page-wrapper">
|
||||
<Header {...restProps} />
|
||||
{children}
|
||||
</div>
|
||||
</LocaleProvider>
|
||||
</IntlProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
2
typings/custom-typings.d.ts
vendored
2
typings/custom-typings.d.ts
vendored
@ -1,7 +1,5 @@
|
||||
declare module '*.svg';
|
||||
|
||||
declare module 'classnames';
|
||||
|
||||
declare module 'rc-calendar*';
|
||||
|
||||
declare module 'rc-time-picker*';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user