mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 17:44:35 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

Fix lint problems from eslint-config-airbnb@17

Browse Source
This commit is contained in:
afc163 2018-06-22 21:05:13 +08:00
parent 7fc1483fe1
commit 9f16d066af
48 changed files with 257 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.js
View File

@ -26,6 +26,8 @@ const eslintrc = {
'react/sort-comp': 0,
'react/prop-types': 0,
'react/jsx-first-prop-new-line': 0,
'react/jsx-one-expression-per-line': 0,
'react/forbid-prop-types': 0,
'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.md'] }],
'import/extensions': 0,
'import/no-unresolved': 0,

4
components/affix/__tests__/Affix.test.js
View File

@ -11,9 +11,11 @@ class AffixMounter extends React.Component {
events[event] = cb;
});
}
getTarget = () => {
return this.container;
}
render() {
return (
<div
@ -35,7 +37,7 @@ class AffixMounter extends React.Component {
ref={ele => this.affix = ele}
{...this.props}
>
<Button type="primary" >
<Button type="primary">
Fixed at the top of container
</Button>
</Affix>

12
components/button/__tests__/index.test.js
View File

@ -44,7 +44,7 @@ describe('Button', () => {
});
it('renders Chinese characters correctly in HOC', () => {
const Text = props => <span>{props.children}</span>;
const Text = ({ children }) => <span>{children}</span>;
const wrapper = mount(
<Button><Text>按钮</Text></Button>
);
@ -74,11 +74,14 @@ describe('Button', () => {
state = {
loading: false,
};
enterLoading = () => {
this.setState({ loading: true });
}
render() {
return <Button loading={this.state.loading} onClick={this.enterLoading}>Button</Button>;
const { loading } = this.state;
return <Button loading={loading} onClick={this.enterLoading}>Button</Button>;
}
}
const wrapper = mount(
@ -94,11 +97,14 @@ describe('Button', () => {
state = {
loading: false,
};
enterLoading = () => {
this.setState({ loading: { delay: 1000 } });
}
render() {
return <Button loading={this.state.loading} onClick={this.enterLoading}>Button</Button>;
const { loading } = this.state;
return <Button loading={loading} onClick={this.enterLoading}>Button</Button>;
}
}
const wrapper = mount(

5
components/date-picker/__tests__/DatePicker.test.js
View File

@ -78,7 +78,7 @@ describe('DatePicker', () => {
}
onChange = (value) => {
let cleared = this.state.cleared;
let { cleared } = this.state;
if (cleared) {
value = moment(moment(value).format('YYYY-MM-DD 12:12:12'));
@ -93,10 +93,11 @@ describe('DatePicker', () => {
}
render() {
const { value } = this.state;
return (
<DatePicker
showTime
value={this.state.value}
value={value}
format="YYYY-MM-DD HH:mm:ss"
onChange={this.onChange}
/>

6
components/date-picker/__tests__/RangePicker.test.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import { mount, render } from 'enzyme';
import moment from 'moment';
import DatePicker from '../';
import DatePicker from '..';
import { setMockDate, resetMockDate } from '../../../tests/utils';
import { selectDate } from './utils';
import focusTest from '../../../tests/shared/focusTest';
@ -211,8 +211,8 @@ describe('RangePicker', () => {
selectDate(wrapper, moment('2017-09-18'), 0);
selectDate(wrapper, moment('2017-10-18'), 1);
wrapper.find('.ant-calendar-picker-input').simulate('click');
expect(() =>
expect(() => (
wrapper.find('.ant-calendar-input').at(1).simulate('change', { target: { value: '2016-01-01' } })
).not.toThrow();
)).not.toThrow();
});
});

2
components/date-picker/__tests__/other.test.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import { mount, render } from 'enzyme';
import moment from 'moment';
import DatePicker from '../';
import DatePicker from '..';
const { MonthPicker, WeekPicker } = DatePicker;

2
components/date-picker/__tests__/showTime.test.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import { mount } from 'enzyme';
import DatePicker from '../';
import DatePicker from '..';
const { RangePicker } = DatePicker;

2
components/dropdown/__tests__/dropdown-button.test.js
View File

@ -24,7 +24,7 @@ describe('DropdownButton', () => {
const dropdownProps = wrapper.find(Dropdown).props();
Object.keys(props).forEach((key) => {
expect(dropdownProps[key]).toBe(props[key]);
expect(dropdownProps[key]).toBe(props[key]); // eslint-disable-line
});
});

4
components/input/__tests__/Search.test.js
View File

@ -9,7 +9,7 @@ describe('Input.Search', () => {
it('should support custom button', () => {
const wrapper = mount(
<Search enterButton={<button>ok</button>} />
<Search enterButton={<button type="button">ok</button>} />
);
expect(wrapper.render()).toMatchSnapshot();
});
@ -71,7 +71,7 @@ describe('Input.Search', () => {
it('should trigger onSearch when click search button of native', () => {
const onSearch = jest.fn();
const wrapper = mount(
<Search defaultValue="search text" enterButton={<button>antd button</button>} onSearch={onSearch} />
<Search defaultValue="search text" enterButton={<button type="button">antd button</button>} onSearch={onSearch} />
);
wrapper.find('button').simulate('click');
expect(onSearch).toHaveBeenCalledTimes(1);

8
components/input/__tests__/index.test.js
View File

@ -60,10 +60,12 @@ describe('As Form Control', () => {
it('should be reset when wrapped in form.getFieldDecorator without initialValue', () => {
class Demo extends React.Component {
reset = () => {
this.props.form.resetFields();
const { form } = this.props;
form.resetFields();
}
render() {
const { getFieldDecorator } = this.props.form;
const { form: { getFieldDecorator } } = this.props;
return (
<Form>
<Form.Item>
@ -72,7 +74,7 @@ describe('As Form Control', () => {
<Form.Item>
{getFieldDecorator('textarea')(<Input.TextArea />)}
</Form.Item>
<button onClick={this.reset}>reset</button>
<button type="button" onClick={this.reset}>reset</button>
</Form>
);
}

2
components/list/__tests__/pagination.test.js
View File

@ -19,7 +19,7 @@ describe('List.pagination', () => {
pagination={pagination}
dataSource={data}
renderItem={item => (
<List.Item key={item.key} >
<List.Item key={item.key}>
{item.name}
</List.Item>
)}

6
components/locale-provider/__tests__/index.test.js
View File

@ -4,7 +4,7 @@ import { mount } from 'enzyme';
import moment from 'moment';
import MockDate from 'mockdate';
import { LocaleProvider, Pagination, DatePicker, TimePicker, Calendar,
Popconfirm, Table, Modal, Select, Transfer } from '../../';
Popconfirm, Table, Modal, Select, Transfer } from '../..';
import enGB from '../en_GB';
import frFR from '../fr_FR';
import nlBE from '../nl_BE';
@ -113,6 +113,7 @@ describe('Locale Provider', () => {
title: 'Hello World!',
});
}
render() {
return null;
}
@ -142,8 +143,9 @@ describe('Locale Provider', () => {
}
render() {
const { locale } = this.state;
return (
<LocaleProvider locale={this.state.locale}>
<LocaleProvider locale={locale}>
<div>
<DatePicker defaultValue={moment()} open />
</div>

2
components/message/__tests__/index.test.js
View File

@ -103,6 +103,7 @@ describe('message', () => {
componentDidMount() {
hide = message.loading('Action in progress..', 0);
}
render() {
return <div>test</div>;
}
@ -123,6 +124,7 @@ describe('message', () => {
message.loading('Action in progress2..', 0);
setTimeout(() => message.destroy(), 1000);
}
render() {
return <div>test</div>;
}

7
components/modal/__tests__/Modal.test.js
View File

@ -9,22 +9,27 @@ class ModalTester extends React.Component {
super(props);
this.state = { visible: false };
}
componentDidMount() {
this.setState({ visible: true }); // eslint-disable-line react/no-did-mount-set-state
}
saveContainer = (container) => {
this.container = container;
}
getContainer = () => {
return this.container;
}
render() {
const { visible } = this.state;
return (
<div>
<div ref={this.saveContainer} />
<Modal
{...this.props}
visible={this.state.visible}
visible={visible}
getContainer={this.getContainer}
>
Here is content of Modal

3
components/table/__tests__/Table.filter.test.js
View File

@ -239,6 +239,7 @@ describe('Table.filter', () => {
}
render() {
const { filters } = this.state;
return (
<Table dataSource={data} onChange={this.handleChange}>
<Column
@ -249,7 +250,7 @@ describe('Table.filter', () => {
{ text: 'Jack', value: 'Jack' },
{ text: 'Lucy', value: 'Lucy' },
]}
filteredValue={this.state.filters.name}
filteredValue={filters.name}
onFilter={filterFn}
/>
</Table>

4
components/table/__tests__/Table.rowSelection.test.js
View File

@ -306,13 +306,15 @@ describe('Table.rowSelection', () => {
state = {
disableName: 'Jack',
};
render() {
const { disableName } = this.state;
return (
<Table
columns={columns}
dataSource={data}
rowSelection={{
getCheckboxProps: record => ({ disabled: record.name === this.state.disableName }),
getCheckboxProps: record => ({ disabled: record.name === disableName }),
}}
/>
);

2
components/time-picker/__tests__/index.test.js
View File

@ -8,7 +8,7 @@ describe('TimePicker', () => {
focusTest(TimePicker);
it('renders addon correctly', () => {
const addon = () => (<button>Ok</button>);
const addon = () => (<button type="button">Ok</button>);
const wrapper = mount(<TimePicker addon={addon} />);
const rcTimePicker = wrapper.find(RcTimePicker);
const addonWrapper = render(rcTimePicker.props().addon());

12
components/tooltip/__tests__/tooltip.test.js
View File

@ -14,7 +14,9 @@ describe('Tooltip', () => {
mouseLeaveDelay={0}
onVisibleChange={onVisibleChange}
>
<div id="hello">Hello world!</div>
<div id="hello">
Hello world!
</div>
</Tooltip>
);
@ -60,7 +62,7 @@ describe('Tooltip', () => {
mouseLeaveDelay={0}
onVisibleChange={onVisibleChange}
>
<button disabled>Hello world!</button>
<button type="button" disabled>Hello world!</button>
</Tooltip>
);
@ -122,7 +124,7 @@ describe('Tooltip', () => {
mouseEnterDelay={0}
mouseLeaveDelay={0}
>
<button disabled>Hello world!</button>
<button type="button" disabled>Hello world!</button>
</Tooltip>
);
@ -143,7 +145,7 @@ describe('Tooltip', () => {
mouseLeaveDelay={0}
placement="bottomLeft"
>
<button style={{ width: triggerWidth }}>
<button type="button" style={{ width: triggerWidth }}>
Hello world!
</button>
</Tooltip>
@ -160,7 +162,7 @@ describe('Tooltip', () => {
placement="bottomLeft"
arrowPointAtCenter
>
<button style={{ width: triggerWidth }}>
<button type="button" style={{ width: triggerWidth }}>
Hello world!
</button>
</Tooltip>

8
components/transfer/__tests__/index.test.js
View File

@ -214,12 +214,12 @@ describe('Transfer', () => {
});
it('should check correctly when there is a search text', () => {
const props = { ...listCommonProps };
delete props.targetKeys;
delete props.selectedKeys;
const newProps = { ...listCommonProps };
delete newProps.targetKeys;
delete newProps.selectedKeys;
const handleSelectChange = jest.fn();
const wrapper = mount(
<Transfer {...props} showSearch onSelectChange={handleSelectChange} render={item => item.title} />
<Transfer {...newProps} showSearch onSelectChange={handleSelectChange} render={item => item.title} />
);
wrapper.find(TransferItem).filterWhere(n => n.prop('item').key === 'b').simulate('click');
expect(handleSelectChange).toHaveBeenLastCalledWith(['b'], []);

13
components/upload/__tests__/upload.test.js
View File

@ -16,6 +16,7 @@ describe('Upload', () => {
componentDidMount() {
ref = this.refs.input;
}
render() {
return (
<Upload supportServerRender={false}>
@ -32,9 +33,9 @@ describe('Upload', () => {
const data = jest.fn();
const props = {
action: 'http://upload.com',
beforeUpload: () => new Promise(resolve =>
beforeUpload: () => new Promise(resolve => (
setTimeout(() => resolve('success'), 100)
),
)),
data,
onChange: ({ file }) => {
if (file.status !== 'uploading') {
@ -46,7 +47,7 @@ describe('Upload', () => {
const wrapper = mount(
<Upload {...props}>
<button>upload</button>
<button type="button">upload</button>
</Upload>
);
@ -83,7 +84,7 @@ describe('Upload', () => {
const wrapper = mount(
<Upload {...props}>
<button>upload</button>
<button type="button">upload</button>
</Upload>
);
@ -118,7 +119,7 @@ describe('Upload', () => {
const wrapper = mount(
<Upload {...props}>
<button>upload</button>
<button type="button">upload</button>
</Upload>
);
@ -147,7 +148,7 @@ describe('Upload', () => {
const wrapper = mount(
<Upload {...props}>
<button>upload</button>
<button type="button">upload</button>
</Upload>
);

25
components/upload/__tests__/uploadlist.test.js
View File

@ -29,7 +29,7 @@ describe('Upload List', () => {
it('should use file.thumbUrl for <img /> in priority', () => {
const wrapper = mount(
<Upload defaultFileList={fileList} listType="picture">
<button>upload</button>
<button type="button">upload</button>
</Upload>
);
fileList.forEach((file, i) => {
@ -57,7 +57,7 @@ describe('Upload List', () => {
}];
const wrapper = mount(
<Upload defaultFileList={list}>
<button>upload</button>
<button type="button">upload</button>
</Upload>
);
expect(wrapper.find('.ant-upload-list-item').length).toBe(2);
@ -84,7 +84,7 @@ describe('Upload List', () => {
onChange={onChange}
customRequest={successRequest}
>
<button>upload</button>
<button type="button">upload</button>
</Upload>
);
wrapper.find('input').simulate('change', {
@ -110,7 +110,7 @@ describe('Upload List', () => {
onChange={onChange}
customRequest={errorRequest}
>
<button>upload</button>
<button type="button">upload</button>
</Upload>
);
wrapper.find('input').simulate('change', {
@ -131,7 +131,7 @@ describe('Upload List', () => {
onChange={handleChange}
beforeUpload={() => false}
>
<button>upload</button>
<button type="button">upload</button>
</Upload>
);
@ -152,15 +152,14 @@ describe('Upload List', () => {
let errors;
class TestForm extends React.Component {
handleSubmit = () => {
const { validateFields } = this.props.form;
const { form: { validateFields } } = this.props;
validateFields((err) => {
errors = err;
});
}
render() {
const { getFieldDecorator } = this.props.form;
const { form: { getFieldDecorator } } = this.props;
return (
<Form onSubmit={this.handleSubmit}>
<Form.Item>
@ -183,7 +182,7 @@ describe('Upload List', () => {
<Upload
beforeUpload={() => false}
>
<button>upload</button>
<button type="button">upload</button>
</Upload>
)}
</Form.Item>
@ -216,7 +215,7 @@ describe('Upload List', () => {
defaultFileList={fileList}
onPreview={handlePreview}
>
<button>upload</button>
<button type="button">upload</button>
</Upload>
);
wrapper.find('.anticon-eye-o').at(0).simulate('click');
@ -235,7 +234,7 @@ describe('Upload List', () => {
onRemove={handleRemove}
onChange={handleChange}
>
<button>upload</button>
<button type="button">upload</button>
</Upload>
);
wrapper.find('.anticon-delete').at(0).simulate('click');
@ -258,7 +257,7 @@ describe('Upload List', () => {
defaultFileList={newFileList}
onPreview={handlePreview}
>
<button>upload</button>
<button type="button">upload</button>
</Upload>
);
wrapper.setState({});
@ -332,7 +331,7 @@ describe('Upload List', () => {
listType="picture"
defaultFileList={list}
>
<button>upload</button>
<button type="button">upload</button>
</Upload>
);
expect(wrapper.render()).toMatchSnapshot();

4
scripts/sort-api-table.js
View File

@ -55,9 +55,9 @@ function alphabetSort(nodes) {
function sizeSort(nodes) {
return nodes.sort((...comparison) => {
return asciiSort(
...comparison.map(val =>
...comparison.map(val => (
sizeBreakPoints.indexOf(getCellValue(val).toLowerCase())
)
))
);
});
}

4
site/bisheng.config.js
View File

@ -13,9 +13,9 @@ function alertBabelConfig(rules) {
if (rule.options.plugins.indexOf(replaceLib) === -1) {
rule.options.plugins.push(replaceLib);
}
rule.options.plugins = rule.options.plugins.filter(plugin =>
rule.options.plugins = rule.options.plugins.filter(plugin => (
!plugin.indexOf || plugin.indexOf('babel-plugin-add-module-exports') === -1
);
));
} else if (rule.use) {
alertBabelConfig(rule.use);
}

8
site/theme/index.js
View File

@ -10,8 +10,8 @@ function pickerGenerator(module) {
const tester = new RegExp(`^docs/${module}`);
return (markdownData) => {
const { filename } = markdownData.meta;
if (tester.test(filename) &&
!/\/demo$/.test(path.dirname(filename))) {
if (tester.test(filename)
&& !/\/demo$/.test(path.dirname(filename))) {
return {
meta: markdownData.meta,
};
@ -29,8 +29,8 @@ module.exports = {
pick: {
components(markdownData) {
const { filename } = markdownData.meta;
if (!/^components/.test(filename) ||
/[/\\]demo$/.test(path.dirname(filename))) return;
if (!/^components/.test(filename)
|| /[/\\]demo$/.test(path.dirname(filename))) return;
return {
meta: markdownData.meta,

2
site/theme/template/Color/ColorBlock.jsx
View File

@ -11,10 +11,12 @@ export default class ColorBlock extends Component {
fontWeight: index === 6 ? 'bold' : 'normal',
};
}
onCopied = () => {
const { color } = this.props;
message.success(`Copied: ${color}`);
}
render() {
const { color, index } = this.props;
return (

7
site/theme/template/Color/ColorPaletteTool.jsx
View File

@ -36,24 +36,25 @@ export default class ColorPaletteTool extends Component {
}
render() {
const { primaryColor } = this.state;
return (
<div className="color-palette-horizontal">
<div className="color-palette-pick">
<FormattedMessage id="app.docs.color.pick-primary" />
</div>
<div className="main-color">
<ColorPatterns color={this.state.primaryColor} />
<ColorPatterns color={primaryColor} />
</div>
<div className="color-palette-picker">
<span style={{ display: 'inline-block', verticalAlign: 'middle' }}>
<ColorPicker
type="chrome"
color={this.state.primaryColor}
color={primaryColor}
onChange={this.handleChangeColor}
/>
</span>
<span className="color-palette-picker-value">
{this.state.primaryColor}
{primaryColor}
</span>
{this.renderColorValidation()}
</div>

24
site/theme/template/Color/ColorPicker.jsx
View File

@ -22,34 +22,42 @@ export default class ColorPicker extends Component {
color: props.color,
};
}
componentWillReceiveProps(nextProps) {
this.setState({ color: nextProps.color });
}
handleClick = () => {
this.setState({ displayColorPicker: !this.state.displayColorPicker });
const { displayColorPicker } = this.state;
this.setState({ displayColorPicker: !displayColorPicker });
};
handleClose = () => {
this.setState({ displayColorPicker: false });
};
handleChange = (color) => {
const { onChange } = this.props;
this.setState({ color: color.hex });
this.props.onChange(color.hex, color);
onChange(color.hex, color);
};
handleChangeComplete = (color) => {
const { onChangeComplete } = this.props;
this.setState({ color: color.hex });
this.props.onChangeComplete(color.hex);
onChangeComplete(color.hex);
};
render() {
const { small, type, position } = this.props;
const { color, displayColorPicker } = this.state;
const Picker = pickers[type];
const styles = {
color: {
width: small ? '80px' : '120px',
height: small ? '16px' : '24px',
borderRadius: '2px',
background: this.state.color,
background: color,
},
swatch: {
padding: '4px',
@ -86,13 +94,13 @@ export default class ColorPicker extends Component {
<div style={styles.color} />
</div>
);
const picker = this.state.displayColorPicker ? (
const picker = displayColorPicker ? (
<div style={styles.popover}>
<div style={styles.cover} onClick={this.handleClose} />
<div style={styles.wrapper}>
<Picker
{...this.props}
color={this.state.color}
color={color}
onChange={this.handleChange}
onChangeComplete={this.handleChangeComplete}
/>

4
site/theme/template/Color/Palette.jsx
View File

@ -26,10 +26,10 @@ export default class Palette extends React.Component {
});
this.forceUpdate();
}
render() {
this.colorNodes = this.colorNodes || {};
const { showTitle, direction } = this.props;
const { name, description, english, chinese } = this.props.color;
const { showTitle, direction, color: { name, description, english, chinese } } = this.props;
const className = direction === 'horizontal' ? 'color-palette-horizontal' : 'color-palette';
const colors = [];
const colorName = `${english} / ${chinese}`;

35
site/theme/template/Content/Article.jsx
View File

@ -12,6 +12,7 @@ export default class Article extends React.Component {
static contextTypes = {
intl: PropTypes.object.isRequired,
}
componentDidMount() {
// Add ga event click
this.delegation = delegate(this.node, '.resource-card', 'click', (e) => {
@ -21,6 +22,7 @@ export default class Article extends React.Component {
}, false);
this.componentDidUpdate();
}
componentDidUpdate() {
const links = [...document.querySelectorAll('.outside-link.internal')];
if (links.length === 0) {
@ -34,12 +36,14 @@ export default class Article extends React.Component {
}
});
}
componentWillUnmount() {
clearTimeout(this.pingTimer);
if (this.delegation) {
this.delegation.destroy();
}
}
getArticle(article) {
const { content } = this.props;
const { meta } = content;
@ -64,13 +68,13 @@ export default class Article extends React.Component {
children: <Timeline>{timelineItems}</Timeline>,
});
}
render() {
const { props } = this;
const { content } = props;
const { meta, description } = content;
const { title, subtitle, filename } = meta;
const { locale } = this.context.intl;
const { intl: { locale } } = this.context;
const isNotTranslated = locale === 'en-US' && typeof title === 'object';
return (
<DocumentTitle title={`${title[locale] || title} - Ant Design`}>
@ -89,26 +93,29 @@ export default class Article extends React.Component {
<h1>
{title[locale] || title}
{
!subtitle || locale === 'en-US' ? null :
<span className="subtitle">{subtitle}</span>
!subtitle || locale === 'en-US'
? null
: <span className="subtitle">{subtitle}</span>
}
<EditButton title={<FormattedMessage id="app.content.edit-page" />} filename={filename} />
</h1>
{
!description ? null :
props.utils.toReactComponent(
!description
? null
: props.utils.toReactComponent(
['section', { className: 'markdown' }].concat(getChildren(description))
)
}
{
(!content.toc || content.toc.length <= 1 || meta.toc === false) ? null :
<Affix className="toc-affix" offsetTop={16}>
{
props.utils.toReactComponent(
['ul', { className: 'toc' }].concat(getChildren(content.toc))
)
}
</Affix>
(!content.toc || content.toc.length <= 1 || meta.toc === false) ? null : (
<Affix className="toc-affix" offsetTop={16}>
{
props.utils.toReactComponent(
['ul', { className: 'toc' }].concat(getChildren(content.toc))
)
}
</Affix>
)
}
{
this.getArticle(props.utils.toReactComponent(

18
site/theme/template/Content/ComponentDoc.jsx
View File

@ -22,8 +22,9 @@ export default class ComponentDoc extends React.Component {
}
handleExpandToggle = () => {
const { expandAll } = this.state;
this.setState({
expandAll: !this.state.expandAll,
expandAll: !expandAll,
});
}
@ -31,15 +32,15 @@ export default class ComponentDoc extends React.Component {
const { props } = this;
const { doc, location } = props;
const { content, meta } = doc;
const { locale } = this.context.intl;
const { intl: { locale } } = this.context;
const demos = Object.keys(props.demos).map(key => props.demos[key]);
const expand = this.state.expandAll;
const { expandAll: { expand } } = this.state;
const isSingleCol = meta.cols === 1;
const leftChildren = [];
const rightChildren = [];
const showedDemo = demos.some(demo => demo.meta.only) ?
demos.filter(demo => demo.meta.only) : demos.filter(demo => demo.preview);
const showedDemo = demos.some(demo => demo.meta.only)
? demos.filter(demo => demo.meta.only) : demos.filter(demo => demo.preview);
showedDemo.sort((a, b) => a.meta.order - b.meta.order)
.forEach((demoData, index) => {
const demoElem = (
@ -109,9 +110,10 @@ export default class ComponentDoc extends React.Component {
</section>
<Row gutter={16}>
<Col span={isSingleCol ? '24' : '12'}
className={isSingleCol ?
'code-boxes-col-1-1' :
'code-boxes-col-2-1'
className={
isSingleCol
? 'code-boxes-col-1-1'
: 'code-boxes-col-2-1'
}
>
{leftChildren}

44
site/theme/template/Content/Demo.jsx
View File

@ -43,9 +43,11 @@ export default class Demo extends React.Component {
}
shouldComponentUpdate(nextProps, nextState) {
return (this.state.codeExpand || this.props.expand) !== (nextState.codeExpand || nextProps.expand)
|| this.state.copied !== nextState.copied
|| this.state.copyTooltipVisible !== nextState.copyTooltipVisible;
const { codeExpand, copied, copyTooltipVisible } = this.state;
const { expand } = this.props;
return (codeExpand || expand) !== (nextState.codeExpand || nextProps.expand)
|| copied !== nextState.copied
|| copyTooltipVisible !== nextState.copyTooltipVisible;
}
componentDidMount() {
@ -65,7 +67,8 @@ export default class Demo extends React.Component {
}
handleCodeExpand = () => {
this.setState({ codeExpand: !this.state.codeExpand });
const { codeExpand } = this.state;
this.setState({ codeExpand: !codeExpand });
}
saveAnchor = (anchor) => {
@ -102,6 +105,7 @@ export default class Demo extends React.Component {
highlightedStyle,
expand,
} = props;
const { showRiddleButton, copied } = state;
if (!this.liveDemo) {
this.liveDemo = meta.iframe
? <BrowserFrame><iframe src={src} height={meta.iframe} title="demo" /></BrowserFrame>
@ -112,8 +116,7 @@ export default class Demo extends React.Component {
'code-box': true,
expand: codeExpand,
});
const { locale } = this.context.intl;
const { intl: { locale } } = this.context;
const localizedTitle = meta.title[locale] || meta.title;
const localizeIntro = content[locale] || content;
const introChildren = props.utils
@ -186,9 +189,9 @@ ${state.sourceCode.replace('mountNode', 'document.getElementById(\'container\')'
<section className="code-box-demo">
{this.liveDemo}
{
style ?
<style dangerouslySetInnerHTML={{ __html: style }} /> :
null
style
? <style dangerouslySetInnerHTML={{ __html: style }} />
: null
}
</section>
<section className="code-box-meta markdown">
@ -222,7 +225,7 @@ ${state.sourceCode.replace('mountNode', 'document.getElementById(\'container\')'
>
<div className="highlight">
<div className="code-box-actions">
{this.state.showRiddleButton ? (
{showRiddleButton ? (
<form action="//riddle.alibaba-inc.com/riddles/define" method="POST" target="_blank">
<input type="hidden" name="data" value={JSON.stringify(riddlePrefillConfig)} />
<Tooltip title={<FormattedMessage id="app.demo.riddle" />}>
@ -249,11 +252,11 @@ ${state.sourceCode.replace('mountNode', 'document.getElementById(\'container\')'
<Tooltip
visible={state.copyTooltipVisible}
onVisibleChange={this.onCopyTooltipVisibleChange}
title={
title={(
<FormattedMessage
id={`app.demo.${state.copied ? 'copied' : 'copy'}`}
id={`app.demo.${copied ? 'copied' : 'copy'}`}
/>
}
)}
>
<Icon
type={(state.copied && state.copyTooltipVisible) ? 'check' : 'copy'}
@ -265,13 +268,14 @@ ${state.sourceCode.replace('mountNode', 'document.getElementById(\'container\')'
{props.utils.toReactComponent(highlightedCode)}
</div>
{
highlightedStyle ?
<div key="style" className="highlight">
<pre>
<code className="css" dangerouslySetInnerHTML={{ __html: highlightedStyle }} />
</pre>
</div> :
null
highlightedStyle
? (
<div key="style" className="highlight">
<pre>
<code className="css" dangerouslySetInnerHTML={{ __html: highlightedStyle }} />
</pre>
</div>
) : null
}
</section>
</section>

50
site/theme/template/Content/MainContent.jsx
View File

@ -12,18 +12,18 @@ const { SubMenu } = Menu;
function getActiveMenuItem(props) {
const { children } = props.params;
return (children && children.replace('-cn', '')) ||
props.location.pathname.replace(/(^\/|-cn$)/g, '');
return (children && children.replace('-cn', ''))
|| props.location.pathname.replace(/(^\/|-cn$)/g, '');
}
function getModuleData(props) {
const { pathname } = props.location;
const moduleName = /^\/?components/.test(pathname) ?
'components' : pathname.split('/').filter(item => item).slice(0, 2).join('/');
const moduleData = moduleName === 'components' || moduleName === 'docs/react' ||
moduleName === 'changelog' || moduleName === 'changelog-cn' ?
[...props.picked.components, ...props.picked['docs/react'], ...props.picked.changelog] :
props.picked[moduleName];
const moduleName = /^\/?components/.test(pathname)
? 'components' : pathname.split('/').filter(item => item).slice(0, 2).join('/');
const moduleData = moduleName === 'components' || moduleName === 'docs/react'
|| moduleName === 'changelog' || moduleName === 'changelog-cn'
? [...props.picked.components, ...props.picked['docs/react'], ...props.picked.changelog]
: props.picked[moduleName];
const excludedSuffix = utils.isZhCN(props.location.pathname) ? 'en-US.md' : 'zh-CN.md';
return moduleData.filter(({ meta }) => !meta.filename.endsWith(excludedSuffix));
}
@ -58,10 +58,11 @@ export default class MainContent extends React.Component {
}
componentDidUpdate(prevProps) {
if (!prevProps || prevProps.location.pathname !== this.props.location.pathname) {
const { location } = this.props;
if (!prevProps || prevProps.location.pathname !== location.pathname) {
this.bindScroller();
}
if (!prevProps || (!window.location.hash && prevProps && prevProps.location.pathname !== this.props.location.pathname)) {
if (!prevProps || (!window.location.hash && prevProps && prevProps.location.pathname !== location.pathname)) {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
return;
@ -130,7 +131,7 @@ export default class MainContent extends React.Component {
}
generateMenuItem(isTop, item) {
const { locale } = this.context.intl;
const { intl: { locale } } = this.context;
const key = fileNameToPath(item.filename);
const title = item.title[locale] || item.title;
const text = isTop ? title : [
@ -165,10 +166,11 @@ export default class MainContent extends React.Component {
getMenuItems() {
const { themeConfig } = this.props;
const { intl: { locale } } = this.context;
const moduleData = getModuleData(this.props);
const menuItems = utils.getMenuItems(
moduleData,
this.context.intl.locale,
locale,
themeConfig.categoryOrder,
themeConfig.typeOrder,
);
@ -221,6 +223,7 @@ export default class MainContent extends React.Component {
render() {
const { props } = this;
const { isMobile } = this.context;
const { openKeys } = this.state;
const activeMenuItem = getActiveMenuItem(props);
const menuItems = this.getMenuItems();
const { prev, next } = this.getFooterNav(menuItems, activeMenuItem);
@ -233,7 +236,7 @@ export default class MainContent extends React.Component {
inlineIndent="40"
className="aside-container menu-site"
mode="inline"
openKeys={this.state.openKeys}
openKeys={openKeys}
selectedKeys={[activeMenuItem]}
onOpenChange={this.handleMenuOpenChange}
>
@ -253,13 +256,12 @@ export default class MainContent extends React.Component {
<Col xxl={4} xl={5} lg={6} md={24} sm={24} xs={24} className="main-menu">
{menuChild}
</Col>
)
}
)}
<Col xxl={20} xl={19} lg={18} md={24} sm={24} xs={24} className={mainContainerClass}>
{
props.demos ?
<ComponentDoc {...props} doc={localizedPageData} demos={props.demos} /> :
<Article {...props} content={localizedPageData} />
props.demos
? <ComponentDoc {...props} doc={localizedPageData} demos={props.demos} />
: <Article {...props} content={localizedPageData} />
}
</Col>
</Row>
@ -275,14 +277,14 @@ export default class MainContent extends React.Component {
>
<section className="prev-next-nav">
{
prev ?
React.cloneElement(prev.props.children || prev.children[0], { className: 'prev-page' }) :
null
prev
? React.cloneElement(prev.props.children || prev.children[0], { className: 'prev-page' })
: null
}
{
next ?
React.cloneElement(next.props.children || next.children[0], { className: 'next-page' }) :
null
next
? React.cloneElement(next.props.children || next.children[0], { className: 'next-page' })
: null
}
</section>
</Col>

10
site/theme/template/Content/index.jsx
View File

@ -9,16 +9,16 @@ function isChangelog(pathname) {
export default collect(async (nextProps) => {
const { pathname } = nextProps.location;
const pageDataPath = pathname.replace('-cn', '').split('/');
const pageData = isChangelog(pathname) ?
nextProps.data.changelog.CHANGELOG :
nextProps.utils.get(nextProps.data, pageDataPath);
const pageData = isChangelog(pathname)
? nextProps.data.changelog.CHANGELOG
: nextProps.utils.get(nextProps.data, pageDataPath);
if (!pageData) {
throw 404; // eslint-disable-line no-throw-literal
}
const locale = utils.isZhCN(pathname) ? 'zh-CN' : 'en-US';
const pageDataPromise = typeof pageData === 'function' ?
pageData() : (pageData[locale] || pageData.index[locale] || pageData.index)();
const pageDataPromise = typeof pageData === 'function'
? pageData() : (pageData[locale] || pageData.index[locale] || pageData.index)();
const demosFetcher = nextProps.utils.get(nextProps.data, [...pageDataPath, 'demo']);
if (demosFetcher) {
const [localizedPageData, demos] = await Promise.all([pageDataPromise, demosFetcher()]);

5
site/theme/template/Home/Banner.jsx
View File

@ -19,15 +19,18 @@ class Banner extends React.PureComponent {
static contextTypes = {
intl: PropTypes.object.isRequired,
}
static propTypes = {
className: PropTypes.string,
}
static defaultProps = {
className: 'banner',
}
render() {
const { className, isMobile } = this.props;
const { locale } = this.context.intl;
const { intl: { locale } } = this.context;
const isZhCN = locale === 'zh-CN';
return (
<div className="home-page-wrapper banner-wrapper" id="banner">

6
site/theme/template/Home/BannerImage.jsx
View File

@ -59,7 +59,7 @@ function TweenOneG(props) {
export default function BannerImage() {
return (
<svg width="482px" height="500px" viewBox="0 0 482 500" >
<svg width="482px" height="500px" viewBox="0 0 482 500">
<defs>
<path d="M151,55 C129.666667,62.6666667 116,74.3333333 110,90 C104,105.666667 103,118.5 107,128.5 L225.5,96 C219.833333,79 209.666667,67 195,60 C180.333333,53 165.666667,51.3333333 151,55 L137,0 L306.5,6.5 L306.5,156 L227,187.5 L61.5,191 C4.5,175 -12.6666667,147.833333 10,109.5 C32.6666667,71.1666667 75,34.6666667 137,0 L151,55 Z" id="mask" />
</defs>
@ -122,7 +122,7 @@ export default function BannerImage() {
</mask>
<g mask="url(#mask-2)">
<TweenOneG animation={animate.track} style={{ transformOrigin: '122.7px 58px' }}>
<g transform="translate(-16, -52)" >
<g transform="translate(-16, -52)">
<g transform="translate(16, 52)">
<path d="M83.1700911,35.9320015 C63.5256194,37.9279025 44.419492,43.1766434 25.8517088,51.6782243 C14.3939956,57.7126276 7.77167019,64.8449292 7.77167019,72.4866248 C7.77167019,94.1920145 61.1993389,111.787709 127.105708,111.787709 C193.012078,111.787709 246.439746,94.1920145 246.439746,72.4866248 C246.439746,55.2822262 212.872939,40.6598106 166.13127,35.3351955" id="line-s" stroke="#0D1A26" strokeWidth="1.35" strokeLinecap="round" transform="translate(127.105708, 73.561453) rotate(-16.000000) translate(-127.105708, -73.561453) " />
</g>
@ -134,6 +134,6 @@ export default function BannerImage() {
</g>
</g>
</g>
</svg >
</svg>
);
}

20
site/theme/template/Home/Page1.jsx
View File

@ -124,16 +124,19 @@ export default class Page1 extends React.PureComponent {
state = {
hoverKey: null,
}
onMouseOver = (key) => {
this.setState({
hoverKey: key,
});
}
onMouseOut = () => {
this.setState({
hoverKey: null,
});
}
getEnter = (i, e) => {
const ii = e.index;
const r = (Math.random() * 2) - 1;
@ -153,6 +156,7 @@ export default class Page1 extends React.PureComponent {
},
];
};
getSvgChild = child => child.map((item, i) => {
const props = { ...item.props };
if (item.type === 'g') {
@ -165,18 +169,22 @@ export default class Page1 extends React.PureComponent {
});
}
return (
<g key={i.toString()} >
<g key={i.toString()}>
{React.cloneElement(item, props)}
</g>
);
});
leave = {
opacity: 0, duration: 300, x: 100, y: 150, ease: 'easeInBack',
};
render() {
const isZhCN = this.props.locale === 'zh-CN';
const { locale, isMobile } = this.props;
const { hoverKey } = this.state;
const isZhCN = locale === 'zh-CN';
const children = page1Data.map((item, i) => {
const isHover = item.nameEn === this.state.hoverKey;
const isHover = item.nameEn === hoverKey;
return (
<Col key={item.nameEn} md={6} xs={24}>
<TweenOneGroup
@ -187,7 +195,7 @@ export default class Page1 extends React.PureComponent {
component="svg"
resetStyleBool={false}
>
{(this.props.isMobile || isHover) && this.getSvgChild(item.svgBg.props.children)}
{(isMobile || isHover) && this.getSvgChild(item.svgBg.props.children)}
</TweenOneGroup>
<QueueAnim
className="page1-block"
@ -200,14 +208,14 @@ export default class Page1 extends React.PureComponent {
<div className="page1-image">
<img src={item.img} alt="icon" />
</div>
<h3 >{isZhCN ? item.name : item.nameEn}</h3>
<h3>{isZhCN ? item.name : item.nameEn}</h3>
</QueueAnim>
</Col>
);
});
return (
<div className="home-page-wrapper page1">
<div className="page" >
<div className="page">
<h2><FormattedMessage id="app.home.design-language" /></h2>
<ScrollOverPack playScale="0.3">
<QueueAnim

12
site/theme/template/Home/Page2.jsx
View File

@ -35,7 +35,7 @@ const page2Data = [
const svgBgChild = [
(
<svg width="100%" height="100%" viewBox="0 0 1401 1109" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" preserveAspectRatio="xMidYMid slice" >
<svg width="100%" height="100%" viewBox="0 0 1401 1109" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" preserveAspectRatio="xMidYMid slice">
<g transform="translate(-79.000000, -21.000000)">
<circle id="Oval-13" stroke="none" fill="#EBEDF0" fillRule="evenodd" cx="98.5" cy="98.5" r="98.5" />
<rect id="Rectangle-33" stroke="none" fill="#EBEDF0" fillRule="evenodd" transform="translate(1261.132034, 1217.132034) rotate(45.000000) translate(-1261.132034, -1217.132034) " x="1111.13203" y="1007.13203" width="300" height="300" rx="1" />
@ -66,8 +66,8 @@ const svgBgChild = [
];
const svgBgChildArray = svgBgChild.map((item, i) => {
const { props } = item;
return React.cloneElement(item, { children: svgBgToParallax(props.children, i) });
const { props: { children } } = item;
return React.cloneElement(item, { children: svgBgToParallax(children, i) });
});
export default function Page2({ isMobile, locale }) {
const isZhCN = locale === 'zh-CN';
@ -109,7 +109,7 @@ export default function Page2({ isMobile, locale }) {
});
return (
<div className="home-page-wrapper page2" id="page2">
<div className="page" >
<div className="page">
<h2><FormattedMessage id="app.home.solution" /></h2>
<ScrollOverPack component={Row} className="page2-content" playScale="0.4">
<QueueAnim
@ -136,10 +136,10 @@ export default function Page2({ isMobile, locale }) {
</QueueAnim>
</ScrollOverPack>
</div>
<div className="parallax-bg bottom" >
<div className="parallax-bg bottom">
{svgBgChildArray[0]}
</div>
<div className="parallax-bg top" >
<div className="parallax-bg top">
{svgBgChildArray[1]}
</div>
</div>

8
site/theme/template/Home/Page3.jsx
View File

@ -63,19 +63,19 @@ export default function Page3({ locale }) {
<a href={item.link} target="_black">
{child}
</a>
)
)
}
</Col>
);
});
return (
<div className="home-page-wrapper page3" id="page3">
<div className="parallax-bg top" >
<svg width="1440px" height="557px" viewBox="0 0 1440 557" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" >
<div className="parallax-bg top">
<svg width="1440px" height="557px" viewBox="0 0 1440 557" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
{svgChildren}
</svg>
</div>
<div className="page" >
<div className="page">
<h2><FormattedMessage id="app.home.tool-title" /></h2>
<ScrollOverPack location="page3">
<QueueAnim key="queue" component={Row} type="bottom" leaveReverse>

3
site/theme/template/Home/index.jsx
View File

@ -61,11 +61,12 @@ class Home extends React.Component {
intl: PropTypes.object.isRequired,
isMobile: PropTypes.bool.isRequired,
}
render() {
const { isMobile, intl } = this.context;
const childProps = { ...this.props, isMobile, locale: intl.locale };
return (
<DocumentTitle title={`Ant Design - ${this.props.intl.formatMessage({ id: 'app.home.slogan' })}`}>
<DocumentTitle title={`Ant Design - ${intl.formatMessage({ id: 'app.home.slogan' })}`}>
<div className="main-wrapper">
<Banner {...childProps} />
<Page1 {...childProps} />

5
site/theme/template/IconSet/CopyableIcon.jsx
View File

@ -6,6 +6,7 @@ export default class CopyableIcon extends React.Component {
state = {
justCopied: false,
};
onCopied = () => {
this.setState({ justCopied: true }, () => {
setTimeout(() => {
@ -13,12 +14,14 @@ export default class CopyableIcon extends React.Component {
}, 2000);
});
}
render() {
const { type, isNew } = this.props;
const { justCopied } = this.state;
const text = `<Icon type="${type}" />`;
return (
<CopyToClipboard text={text} onCopy={this.onCopied}>
<li className={this.state.justCopied ? 'copied' : ''}>
<li className={justCopied ? 'copied' : ''}>
<Icon type={type} />
<span className="anticon-class">
<Badge dot={isNew}>

11
site/theme/template/Layout/Footer.jsx
View File

@ -25,8 +25,8 @@ class Footer extends React.Component {
// 1. 点击『知道了』之后不再提示
// 2. 超过截止日期后不再提示
if (
localStorage.getItem('antd@3.0.0-notification-sent') !== 'true' &&
Date.now() < new Date('2017/12/20').getTime()
localStorage.getItem('antd@3.0.0-notification-sent') !== 'true'
&& Date.now() < new Date('2017/12/20').getTime()
) {
this.infoNewVersion();
}
@ -34,7 +34,7 @@ class Footer extends React.Component {
handleColorChange = (color) => {
const changeColor = () => {
const { messages } = this.props.intl;
const { intl: { messages } } = this.props;
window.less.modifyVars({
'@primary-color': color,
}).then(() => {
@ -59,7 +59,7 @@ class Footer extends React.Component {
}
infoNewVersion() {
const { messages } = this.props.intl;
const { intl: { messages } } = this.props;
Modal.info({
title: messages['app.publish.title'],
content: (
@ -83,6 +83,7 @@ class Footer extends React.Component {
}
render() {
const { color } = this.state;
return (
<footer id="footer">
<div className="footer-wrap">
@ -262,7 +263,7 @@ class Footer extends React.Component {
<ColorPicker
type="sketch"
small
color={this.state.color}
color={color}
position="top"
presetColors={[
'#F5222D',

4
site/theme/template/Layout/Header.jsx
View File

@ -84,7 +84,7 @@ export default class Header extends React.Component {
}
handleLangChange = () => {
const { pathname } = this.props.location;
const { location: { pathname } } = this.props;
const currentProtocol = `${window.location.protocol}//`;
const currentHref = window.location.href.substr(currentProtocol.length);
@ -113,7 +113,7 @@ export default class Header extends React.Component {
if (activeMenuItem === 'components' || location.pathname === 'changelog') {
activeMenuItem = 'docs/react';
}
const { locale } = this.context.intl;
const { intl: { locale } } = this.context;
const isZhCN = locale === 'zh-CN';
const headerClassName = classNames({

9
site/theme/template/Layout/index.jsx
View File

@ -37,14 +37,14 @@ export default class Layout extends React.Component {
static contextTypes = {
router: PropTypes.object.isRequired,
}
static childContextTypes = {
isMobile: PropTypes.bool,
};
getChildContext() {
return {
isMobile: this.state.isMobile,
};
const { isMobile: mobile } = this.state;
return { isMobile: mobile };
}
constructor(props) {
@ -60,7 +60,8 @@ export default class Layout extends React.Component {
}
componentDidMount() {
this.context.router.listen((loc) => {
const { router } = this.context;
router.listen((loc) => {
if (typeof window.ga !== 'undefined') {
window.ga('send', 'pageview', loc.pathname + loc.search);
}

8
site/theme/template/utils.jsx
View File

@ -1,4 +1,3 @@
export function getMenuItems(moduleData, locale, categoryOrder, typeOrder) {
const menuMeta = moduleData.map(item => item.meta);
const menuItems = [];
@ -51,9 +50,11 @@ export function getLocalizedPathname(path, zhCN) {
const pathname = path.startsWith('/') ? path : `/${path}`;
if (!zhCN) { // to enUS
return /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');
} else if (pathname === '/') {
}
if (pathname === '/') {
return '/index-cn';
} else if (pathname.endsWith('/')) {
}
if (pathname.endsWith('/')) {
return pathname.replace(/\/$/, '-cn/');
}
return `${pathname}-cn`;
@ -99,4 +100,3 @@ export function loadScript(src) {
document.head.appendChild(script);
});
}

4
tests/__mocks__/rc-trigger.js
View File

@ -7,11 +7,11 @@ if (process.env.REACT === '15') {
const render = ActualTrigger.prototype.render;
ActualTrigger.prototype.render = function () {
const { popupVisible } = this.state;
const { popupVisible } = this.state; // eslint-disable-line
let component;
if (popupVisible || this._component) { // eslint-disable-line
component = this.getComponent();
component = this.getComponent(); // eslint-disable-line
}
return (

3
tests/__mocks__/rc-util/lib/Portal.js
View File

@ -11,8 +11,9 @@ export default class Portal extends React.Component {
}
render() {
const { children } = this.props;
if (this.container) {
return this.props.children;
return children;
}
return null;
}

1
tests/dekko/dist.test.js
View File

@ -9,4 +9,3 @@ $('dist')
// eslint-disable-next-line
console.log('`dist` directory is valid.');

7
tests/dekko/lib.test.js
View File

@ -7,13 +7,11 @@ $('lib')
$('lib/*')
.filter((filename) => {
return !filename.endsWith('index.js') &&
!filename.endsWith('index.d.ts');
return !filename.endsWith('index.js') && !filename.endsWith('index.d.ts');
})
.isDirectory()
.filter((filename) => {
return !filename.endsWith('style') &&
!filename.endsWith('_util');
return !filename.endsWith('style') && !filename.endsWith('_util');
})
.hasFile('index.js')
.hasFile('index.d.ts')
@ -28,4 +26,3 @@ $('lib/style')
// eslint-disable-next-line
console.log('`lib` directory is valid.');