mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-06 07:56:28 +08:00
upgrade eslint-config-airbnb
This commit is contained in:
parent
8ccd02139c
commit
475e4ff23d
@ -30,6 +30,7 @@ const eslintrc = {
|
||||
'import/extensions': 0,
|
||||
'import/no-unresolved': 0,
|
||||
'import/no-extraneous-dependencies': 0,
|
||||
'prefer-destructuring': 0,
|
||||
'no-param-reassign': 0,
|
||||
'no-return-assign': 0,
|
||||
'max-len': 0,
|
||||
@ -38,8 +39,13 @@ const eslintrc = {
|
||||
'react/require-extension': 0,
|
||||
'jsx-a11y/no-static-element-interactions': 0,
|
||||
'jsx-a11y/anchor-has-content': 0,
|
||||
'jsx-a11y/click-events-have-key-events': 0,
|
||||
'jsx-a11y/anchor-is-valid': 0,
|
||||
'react/no-danger': 0,
|
||||
'comma-dangle': ['error', 'always-multiline'],
|
||||
'function-paren-newline': 0,
|
||||
'object-curly-newline': 0,
|
||||
'no-restricted-globals': 0,
|
||||
},
|
||||
};
|
||||
|
||||
@ -51,6 +57,7 @@ if (process.env.RUN_ENV === 'DEMO') {
|
||||
};
|
||||
|
||||
Object.assign(eslintrc.rules, {
|
||||
indent: 0,
|
||||
'no-console': 0,
|
||||
'no-plusplus': 0,
|
||||
'eol-last': 0,
|
||||
|
@ -18,30 +18,32 @@ class AffixMounter extends React.Component {
|
||||
return this.container;
|
||||
}
|
||||
render() {
|
||||
return (<div
|
||||
style={{
|
||||
height: 100,
|
||||
overflowY: 'scroll',
|
||||
}}
|
||||
ref={(node) => { this.container = node; }}
|
||||
>
|
||||
return (
|
||||
<div
|
||||
className="background"
|
||||
style={{
|
||||
paddingTop: 60,
|
||||
height: 300,
|
||||
height: 100,
|
||||
overflowY: 'scroll',
|
||||
}}
|
||||
ref={(node) => { this.container = node; }}
|
||||
>
|
||||
<Affix
|
||||
target={() => this.container}
|
||||
ref={ele => this.affix = ele}
|
||||
<div
|
||||
className="background"
|
||||
style={{
|
||||
paddingTop: 60,
|
||||
height: 300,
|
||||
}}
|
||||
>
|
||||
<Button type="primary" >
|
||||
Fixed at the top of container
|
||||
</Button>
|
||||
</Affix>
|
||||
<Affix
|
||||
target={() => this.container}
|
||||
ref={ele => this.affix = ele}
|
||||
>
|
||||
<Button type="primary" >
|
||||
Fixed at the top of container
|
||||
</Button>
|
||||
</Affix>
|
||||
</div>
|
||||
</div>
|
||||
</div>);
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -20,17 +20,21 @@ const onClose = function (e) {
|
||||
console.log(e, 'I was closed.');
|
||||
};
|
||||
|
||||
ReactDOM.render(<div>
|
||||
<Alert message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
|
||||
type="warning"
|
||||
closable
|
||||
onClose={onClose}
|
||||
/>
|
||||
<Alert message="Error Text"
|
||||
description="Error Description Error Description Error Description Error Description Error Description Error Description"
|
||||
type="error"
|
||||
closable
|
||||
onClose={onClose}
|
||||
/>
|
||||
</div>, mountNode);
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Alert
|
||||
message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
|
||||
type="warning"
|
||||
closable
|
||||
onClose={onClose}
|
||||
/>
|
||||
<Alert
|
||||
message="Error Text"
|
||||
description="Error Description Error Description Error Description Error Description Error Description Error Description"
|
||||
type="error"
|
||||
closable
|
||||
onClose={onClose}
|
||||
/>
|
||||
</div>
|
||||
, mountNode);
|
||||
````
|
||||
|
@ -16,26 +16,28 @@ Additional description for alert message.
|
||||
````jsx
|
||||
import { Alert } from 'antd';
|
||||
|
||||
ReactDOM.render(<div>
|
||||
<Alert
|
||||
message="Success Text"
|
||||
description="Success Description Success Description Success Description"
|
||||
type="success"
|
||||
/>
|
||||
<Alert
|
||||
message="Info Text"
|
||||
description="Info Description Info Description Info Description Info Description"
|
||||
type="info"
|
||||
/>
|
||||
<Alert
|
||||
message="Warning Text"
|
||||
description="Warning Description Warning Description Warning Description Warning Description"
|
||||
type="warning"
|
||||
/>
|
||||
<Alert
|
||||
message="Error Text"
|
||||
description="Error Description Error Description Error Description Error Description"
|
||||
type="error"
|
||||
/>
|
||||
</div>, mountNode);
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Alert
|
||||
message="Success Text"
|
||||
description="Success Description Success Description Success Description"
|
||||
type="success"
|
||||
/>
|
||||
<Alert
|
||||
message="Info Text"
|
||||
description="Info Description Info Description Info Description Info Description"
|
||||
type="info"
|
||||
/>
|
||||
<Alert
|
||||
message="Warning Text"
|
||||
description="Warning Description Warning Description Warning Description Warning Description"
|
||||
type="warning"
|
||||
/>
|
||||
<Alert
|
||||
message="Error Text"
|
||||
description="Error Description Error Description Error Description Error Description"
|
||||
type="error"
|
||||
/>
|
||||
</div>
|
||||
, mountNode);
|
||||
````
|
||||
|
@ -16,34 +16,36 @@ Decent icon make information more clear and more friendly.
|
||||
````jsx
|
||||
import { Alert } from 'antd';
|
||||
|
||||
ReactDOM.render(<div>
|
||||
<Alert message="Success Tips" type="success" showIcon />
|
||||
<Alert message="Informational Notes" type="info" showIcon />
|
||||
<Alert message="Warning" type="warning" showIcon />
|
||||
<Alert message="Error" type="error" showIcon />
|
||||
<Alert
|
||||
message="success tips"
|
||||
description="Detailed description and advices about successful copywriting."
|
||||
type="success"
|
||||
showIcon
|
||||
/>
|
||||
<Alert
|
||||
message="Informational Notes"
|
||||
description="Additional description and informations about copywriting."
|
||||
type="info"
|
||||
showIcon
|
||||
/>
|
||||
<Alert
|
||||
message="Warning"
|
||||
description="This is a warning notice about copywriting."
|
||||
type="warning"
|
||||
showIcon
|
||||
/>
|
||||
<Alert
|
||||
message="Error"
|
||||
description="This is an error message about copywriting."
|
||||
type="error"
|
||||
showIcon
|
||||
/>
|
||||
</div>, mountNode);
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Alert message="Success Tips" type="success" showIcon />
|
||||
<Alert message="Informational Notes" type="info" showIcon />
|
||||
<Alert message="Warning" type="warning" showIcon />
|
||||
<Alert message="Error" type="error" showIcon />
|
||||
<Alert
|
||||
message="success tips"
|
||||
description="Detailed description and advices about successful copywriting."
|
||||
type="success"
|
||||
showIcon
|
||||
/>
|
||||
<Alert
|
||||
message="Informational Notes"
|
||||
description="Additional description and informations about copywriting."
|
||||
type="info"
|
||||
showIcon
|
||||
/>
|
||||
<Alert
|
||||
message="Warning"
|
||||
description="This is a warning notice about copywriting."
|
||||
type="warning"
|
||||
showIcon
|
||||
/>
|
||||
<Alert
|
||||
message="Error"
|
||||
description="This is an error message about copywriting."
|
||||
type="error"
|
||||
showIcon
|
||||
/>
|
||||
</div>
|
||||
, mountNode);
|
||||
````
|
||||
|
@ -16,10 +16,12 @@ There are 4 types of Alert: `success`, `info`, `warning`, `error`.
|
||||
````jsx
|
||||
import { Alert } from 'antd';
|
||||
|
||||
ReactDOM.render(<div>
|
||||
<Alert message="Success Text" type="success" />
|
||||
<Alert message="Info Text" type="info" />
|
||||
<Alert message="Warning Text" type="warning" />
|
||||
<Alert message="Error Text" type="error" />
|
||||
</div>, mountNode);
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Alert message="Success Text" type="success" />
|
||||
<Alert message="Info Text" type="info" />
|
||||
<Alert message="Warning Text" type="warning" />
|
||||
<Alert message="Error Text" type="error" />
|
||||
</div>
|
||||
, mountNode);
|
||||
````
|
||||
|
@ -68,10 +68,12 @@ function getMonthData(value) {
|
||||
|
||||
function monthCellRender(value) {
|
||||
const num = getMonthData(value);
|
||||
return num ? <div className="notes-month">
|
||||
<section>{num}</section>
|
||||
<span>Backlog number</span>
|
||||
</div> : null;
|
||||
return num ? (
|
||||
<div className="notes-month">
|
||||
<section>{num}</section>
|
||||
<span>Backlog number</span>
|
||||
</div>
|
||||
) : null;
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
|
@ -5,7 +5,7 @@ import Carousel from '..';
|
||||
describe('Carousel', () => {
|
||||
it('should has innerSlider', () => {
|
||||
const wrapper = mount(<Carousel><div /></Carousel>);
|
||||
const innerSlider = wrapper.node.innerSlider;
|
||||
const { innerSlider } = wrapper.node;
|
||||
const innerSliderFromRefs = wrapper.node.refs.slick.innerSlider;
|
||||
expect(innerSlider).toBe(innerSliderFromRefs);
|
||||
expect(typeof innerSlider.slickNext).toBe('function');
|
||||
|
@ -32,14 +32,10 @@ const options = [{
|
||||
|
||||
class LazyOptions extends React.Component {
|
||||
state = {
|
||||
inputValue: '',
|
||||
options,
|
||||
};
|
||||
onChange = (value, selectedOptions) => {
|
||||
console.log(value, selectedOptions);
|
||||
this.setState({
|
||||
inputValue: selectedOptions.map(o => o.label).join(', '),
|
||||
});
|
||||
}
|
||||
loadData = (selectedOptions) => {
|
||||
const targetOption = selectedOptions[selectedOptions.length - 1];
|
||||
|
@ -1,6 +1,6 @@
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
title:
|
||||
zh-CN: 手风琴
|
||||
en-US: Accordion
|
||||
---
|
||||
@ -25,13 +25,13 @@ const text = `
|
||||
|
||||
ReactDOM.render(
|
||||
<Collapse accordion>
|
||||
<Panel header={'This is panel header 1'} key="1">
|
||||
<Panel header="This is panel header 1" key="1">
|
||||
<p>{text}</p>
|
||||
</Panel>
|
||||
<Panel header={'This is panel header 2'} key="2">
|
||||
<Panel header="This is panel header 2" key="2">
|
||||
<p>{text}</p>
|
||||
</Panel>
|
||||
<Panel header={'This is panel header 3'} key="3">
|
||||
<Panel header="This is panel header 3" key="3">
|
||||
<p>{text}</p>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
|
@ -29,17 +29,17 @@ const text = `
|
||||
|
||||
ReactDOM.render(
|
||||
<Collapse onChange={callback}>
|
||||
<Panel header={'This is panel header 1'} key="1">
|
||||
<Panel header="This is panel header 1" key="1">
|
||||
<Collapse defaultActiveKey="1">
|
||||
<Panel header={'This is panel nest panel'} key="1">
|
||||
<Panel header="This is panel nest panel" key="1">
|
||||
<p>{text}</p>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
</Panel>
|
||||
<Panel header={'This is panel header 2'} key="2">
|
||||
<Panel header="This is panel header 2" key="2">
|
||||
<p>{text}</p>
|
||||
</Panel>
|
||||
<Panel header={'This is panel header 3'} key="3">
|
||||
<Panel header="This is panel header 3" key="3">
|
||||
<p>{text}</p>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
|
@ -29,11 +29,11 @@ const menu = (
|
||||
</Menu>
|
||||
);
|
||||
|
||||
ReactDOM.render(<div>
|
||||
ReactDOM.render(
|
||||
<Dropdown overlay={menu} trigger={['click']}>
|
||||
<a className="ant-dropdown-link" href="#">
|
||||
Click me <Icon type="down" />
|
||||
</a>
|
||||
</Dropdown>
|
||||
</div>, mountNode);
|
||||
, mountNode);
|
||||
````
|
||||
|
@ -21,44 +21,46 @@ Layout.Sider supports responsive layout.
|
||||
import { Layout, Menu, Icon } from 'antd';
|
||||
const { Header, Content, Footer, Sider } = Layout;
|
||||
|
||||
ReactDOM.render(<Layout>
|
||||
<Sider
|
||||
breakpoint="lg"
|
||||
collapsedWidth="0"
|
||||
onCollapse={(collapsed, type) => { console.log(collapsed, type); }}
|
||||
>
|
||||
<div className="logo" />
|
||||
<Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
|
||||
<Menu.Item key="1">
|
||||
<Icon type="user" />
|
||||
<span className="nav-text">nav 1</span>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="2">
|
||||
<Icon type="video-camera" />
|
||||
<span className="nav-text">nav 2</span>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="3">
|
||||
<Icon type="upload" />
|
||||
<span className="nav-text">nav 3</span>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="4">
|
||||
<Icon type="user" />
|
||||
<span className="nav-text">nav 4</span>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
</Sider>
|
||||
ReactDOM.render(
|
||||
<Layout>
|
||||
<Header style={{ background: '#fff', padding: 0 }} />
|
||||
<Content style={{ margin: '24px 16px 0' }}>
|
||||
<div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
|
||||
content
|
||||
</div>
|
||||
</Content>
|
||||
<Footer style={{ textAlign: 'center' }}>
|
||||
Ant Design ©2016 Created by Ant UED
|
||||
</Footer>
|
||||
<Sider
|
||||
breakpoint="lg"
|
||||
collapsedWidth="0"
|
||||
onCollapse={(collapsed, type) => { console.log(collapsed, type); }}
|
||||
>
|
||||
<div className="logo" />
|
||||
<Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
|
||||
<Menu.Item key="1">
|
||||
<Icon type="user" />
|
||||
<span className="nav-text">nav 1</span>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="2">
|
||||
<Icon type="video-camera" />
|
||||
<span className="nav-text">nav 2</span>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="3">
|
||||
<Icon type="upload" />
|
||||
<span className="nav-text">nav 3</span>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="4">
|
||||
<Icon type="user" />
|
||||
<span className="nav-text">nav 4</span>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
</Sider>
|
||||
<Layout>
|
||||
<Header style={{ background: '#fff', padding: 0 }} />
|
||||
<Content style={{ margin: '24px 16px 0' }}>
|
||||
<div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
|
||||
content
|
||||
</div>
|
||||
</Content>
|
||||
<Footer style={{ textAlign: 'center' }}>
|
||||
Ant Design ©2016 Created by Ant UED
|
||||
</Footer>
|
||||
</Layout>
|
||||
</Layout>
|
||||
</Layout>, mountNode);
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
|
@ -2,7 +2,7 @@ import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import moment from 'moment';
|
||||
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';
|
||||
@ -36,8 +36,8 @@ import srRS from '../sr_RS';
|
||||
|
||||
const locales = [enUS, ptPT, ptBR, ruRU, esES, svSE, frBE, deDE, nlNL, caES, csCZ, koKR, etEE, skSK, jaJP, trTR, zhTW, fiFI, plPL, bgBG, enGB, frFR, nlBE, itIT, viVN, thTH, faIR, elGR, nbNO, srRS];
|
||||
|
||||
const Option = Select.Option;
|
||||
const RangePicker = DatePicker.RangePicker;
|
||||
const { Option } = Select;
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
const columns = [{
|
||||
title: 'Name',
|
||||
|
@ -3,7 +3,7 @@ import { mount } from 'enzyme';
|
||||
import Menu from '..';
|
||||
import Icon from '../../icon';
|
||||
|
||||
const SubMenu = Menu.SubMenu;
|
||||
const { SubMenu } = Menu;
|
||||
const delay = timeout => new Promise(resolve => setTimeout(resolve, timeout));
|
||||
|
||||
describe('Menu', () => {
|
||||
|
@ -1,6 +1,6 @@
|
||||
import Modal from '..';
|
||||
|
||||
const confirm = Modal.confirm;
|
||||
const { confirm } = Modal;
|
||||
|
||||
describe('Modal.confirm triggers callbacks correctly', () => {
|
||||
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
||||
|
@ -8,7 +8,7 @@ describe('Notification.placement', () => {
|
||||
}
|
||||
|
||||
function getStyle(el, prop, getComputedStyle, style) {
|
||||
getComputedStyle = window.getComputedStyle;
|
||||
getComputedStyle = getComputedStyle || window.getComputedStyle;
|
||||
style = getComputedStyle ? getComputedStyle(el) : el.currentStyle;
|
||||
|
||||
// If a css property's value is `auto`, it will return an empty string.
|
||||
|
@ -19,7 +19,7 @@ import { Popconfirm, Switch, message } from 'antd';
|
||||
class App extends React.Component {
|
||||
state = {
|
||||
visible: false,
|
||||
condition: true, // Whether meet the condition, if not show popconfirm.
|
||||
condition: true, // Whether meet the condition, if not show popconfirm.
|
||||
}
|
||||
changeCondition = (value) => {
|
||||
this.setState({ condition: value });
|
||||
@ -40,9 +40,9 @@ class App extends React.Component {
|
||||
// Determining condition before show the popconfirm.
|
||||
console.log(this.state.condition);
|
||||
if (this.state.condition) {
|
||||
this.confirm(); // next step
|
||||
this.confirm(); // next step
|
||||
} else {
|
||||
this.setState({ visible }); // show the popconfirm
|
||||
this.setState({ visible }); // show the popconfirm
|
||||
}
|
||||
}
|
||||
render() {
|
||||
|
@ -22,52 +22,54 @@ function confirm() {
|
||||
message.info('Click on Yes.');
|
||||
}
|
||||
|
||||
ReactDOM.render(<div className="demo">
|
||||
<div style={{ marginLeft: 70, whiteSpace: 'nowrap' }}>
|
||||
<Popconfirm placement="topLeft" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
|
||||
<Button>TL</Button>
|
||||
</Popconfirm>
|
||||
<Popconfirm placement="top" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
|
||||
<Button>Top</Button>
|
||||
</Popconfirm>
|
||||
<Popconfirm placement="topRight" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
|
||||
<Button>TR</Button>
|
||||
</Popconfirm>
|
||||
ReactDOM.render(
|
||||
<div className="demo">
|
||||
<div style={{ marginLeft: 70, whiteSpace: 'nowrap' }}>
|
||||
<Popconfirm placement="topLeft" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
|
||||
<Button>TL</Button>
|
||||
</Popconfirm>
|
||||
<Popconfirm placement="top" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
|
||||
<Button>Top</Button>
|
||||
</Popconfirm>
|
||||
<Popconfirm placement="topRight" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
|
||||
<Button>TR</Button>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
<div style={{ width: 70, float: 'left' }}>
|
||||
<Popconfirm placement="leftTop" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
|
||||
<Button>LT</Button>
|
||||
</Popconfirm>
|
||||
<Popconfirm placement="left" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
|
||||
<Button>Left</Button>
|
||||
</Popconfirm>
|
||||
<Popconfirm placement="leftBottom" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
|
||||
<Button>LB</Button>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
<div style={{ width: 70, marginLeft: 304 }}>
|
||||
<Popconfirm placement="rightTop" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
|
||||
<Button>RT</Button>
|
||||
</Popconfirm>
|
||||
<Popconfirm placement="right" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
|
||||
<Button>Right</Button>
|
||||
</Popconfirm>
|
||||
<Popconfirm placement="rightBottom" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
|
||||
<Button>RB</Button>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
<div style={{ marginLeft: 70, clear: 'both', whiteSpace: 'nowrap' }}>
|
||||
<Popconfirm placement="bottomLeft" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
|
||||
<Button>BL</Button>
|
||||
</Popconfirm>
|
||||
<Popconfirm placement="bottom" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
|
||||
<Button>Bottom</Button>
|
||||
</Popconfirm>
|
||||
<Popconfirm placement="bottomRight" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
|
||||
<Button>BR</Button>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ width: 70, float: 'left' }}>
|
||||
<Popconfirm placement="leftTop" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
|
||||
<Button>LT</Button>
|
||||
</Popconfirm>
|
||||
<Popconfirm placement="left" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
|
||||
<Button>Left</Button>
|
||||
</Popconfirm>
|
||||
<Popconfirm placement="leftBottom" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
|
||||
<Button>LB</Button>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
<div style={{ width: 70, marginLeft: 304 }}>
|
||||
<Popconfirm placement="rightTop" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
|
||||
<Button>RT</Button>
|
||||
</Popconfirm>
|
||||
<Popconfirm placement="right" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
|
||||
<Button>Right</Button>
|
||||
</Popconfirm>
|
||||
<Popconfirm placement="rightBottom" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
|
||||
<Button>RB</Button>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
<div style={{ marginLeft: 70, clear: 'both', whiteSpace: 'nowrap' }}>
|
||||
<Popconfirm placement="bottomLeft" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
|
||||
<Button>BL</Button>
|
||||
</Popconfirm>
|
||||
<Popconfirm placement="bottom" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
|
||||
<Button>Bottom</Button>
|
||||
</Popconfirm>
|
||||
<Popconfirm placement="bottomRight" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
|
||||
<Button>BR</Button>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
</div>, mountNode);
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
<style>
|
||||
|
@ -22,30 +22,32 @@ function onChange(e) {
|
||||
console.log(`radio checked:${e.target.value}`);
|
||||
}
|
||||
|
||||
ReactDOM.render(<div>
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<RadioGroup onChange={onChange} defaultValue="a">
|
||||
<RadioButton value="a">Hangzhou</RadioButton>
|
||||
<RadioButton value="b">Shanghai</RadioButton>
|
||||
<RadioButton value="c">Beijing</RadioButton>
|
||||
<RadioButton value="d">Chengdu</RadioButton>
|
||||
</RadioGroup>
|
||||
<div>
|
||||
<RadioGroup onChange={onChange} defaultValue="a">
|
||||
<RadioButton value="a">Hangzhou</RadioButton>
|
||||
<RadioButton value="b">Shanghai</RadioButton>
|
||||
<RadioButton value="c">Beijing</RadioButton>
|
||||
<RadioButton value="d">Chengdu</RadioButton>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<RadioGroup onChange={onChange} defaultValue="a">
|
||||
<RadioButton value="a">Hangzhou</RadioButton>
|
||||
<RadioButton value="b" disabled>Shanghai</RadioButton>
|
||||
<RadioButton value="c">Beijing</RadioButton>
|
||||
<RadioButton value="d">Chengdu</RadioButton>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<RadioGroup disabled onChange={onChange} defaultValue="a">
|
||||
<RadioButton value="a">Hangzhou</RadioButton>
|
||||
<RadioButton value="b">Shanghai</RadioButton>
|
||||
<RadioButton value="c">Beijing</RadioButton>
|
||||
<RadioButton value="d">Chengdu</RadioButton>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<RadioGroup onChange={onChange} defaultValue="a">
|
||||
<RadioButton value="a">Hangzhou</RadioButton>
|
||||
<RadioButton value="b" disabled>Shanghai</RadioButton>
|
||||
<RadioButton value="c">Beijing</RadioButton>
|
||||
<RadioButton value="d">Chengdu</RadioButton>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<RadioGroup disabled onChange={onChange} defaultValue="a">
|
||||
<RadioButton value="a">Hangzhou</RadioButton>
|
||||
<RadioButton value="b">Shanghai</RadioButton>
|
||||
<RadioButton value="c">Beijing</RadioButton>
|
||||
<RadioButton value="d">Chengdu</RadioButton>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
</div>, mountNode);
|
||||
, mountNode);
|
||||
```
|
||||
|
@ -18,30 +18,32 @@ import { Radio } from 'antd';
|
||||
const RadioButton = Radio.Button;
|
||||
const RadioGroup = Radio.Group;
|
||||
|
||||
ReactDOM.render(<div>
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<RadioGroup defaultValue="a" size="large">
|
||||
<RadioButton value="a">Hangzhou</RadioButton>
|
||||
<RadioButton value="b">Shanghai</RadioButton>
|
||||
<RadioButton value="c">Beijing</RadioButton>
|
||||
<RadioButton value="d">Chengdu</RadioButton>
|
||||
</RadioGroup>
|
||||
<div>
|
||||
<RadioGroup defaultValue="a" size="large">
|
||||
<RadioButton value="a">Hangzhou</RadioButton>
|
||||
<RadioButton value="b">Shanghai</RadioButton>
|
||||
<RadioButton value="c">Beijing</RadioButton>
|
||||
<RadioButton value="d">Chengdu</RadioButton>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<RadioGroup defaultValue="a">
|
||||
<RadioButton value="a">Hangzhou</RadioButton>
|
||||
<RadioButton value="b">Shanghai</RadioButton>
|
||||
<RadioButton value="c">Beijing</RadioButton>
|
||||
<RadioButton value="d">Chengdu</RadioButton>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<RadioGroup defaultValue="a" size="small">
|
||||
<RadioButton value="a">Hangzhou</RadioButton>
|
||||
<RadioButton value="b">Shanghai</RadioButton>
|
||||
<RadioButton value="c">Beijing</RadioButton>
|
||||
<RadioButton value="d">Chengdu</RadioButton>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<RadioGroup defaultValue="a">
|
||||
<RadioButton value="a">Hangzhou</RadioButton>
|
||||
<RadioButton value="b">Shanghai</RadioButton>
|
||||
<RadioButton value="c">Beijing</RadioButton>
|
||||
<RadioButton value="d">Chengdu</RadioButton>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<RadioGroup defaultValue="a" size="small">
|
||||
<RadioButton value="a">Hangzhou</RadioButton>
|
||||
<RadioButton value="b">Shanghai</RadioButton>
|
||||
<RadioButton value="c">Beijing</RadioButton>
|
||||
<RadioButton value="d">Chengdu</RadioButton>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
</div>, mountNode);
|
||||
, mountNode);
|
||||
```
|
||||
|
@ -19,7 +19,6 @@ import { Rate } from 'antd';
|
||||
class Rater extends React.Component {
|
||||
state = {
|
||||
value: 3,
|
||||
count: null,
|
||||
}
|
||||
handleChange = (value) => {
|
||||
this.setState({ value });
|
||||
|
@ -22,7 +22,7 @@ import { Select } from 'antd';
|
||||
const Option = Select.Option;
|
||||
|
||||
function handleChange(value) {
|
||||
console.log(value); // { key: "lucy", label: "Lucy (101)" }
|
||||
console.log(value); // { key: "lucy", label: "Lucy (101)" }
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
|
@ -16,11 +16,13 @@ With text and icon.
|
||||
````jsx
|
||||
import { Switch, Icon } from 'antd';
|
||||
|
||||
ReactDOM.render(<div>
|
||||
<Switch checkedChildren="开" unCheckedChildren="关" />
|
||||
<br />
|
||||
<Switch checkedChildren="1" unCheckedChildren="0" />
|
||||
<br />
|
||||
<Switch checkedChildren={<Icon type="check" />} unCheckedChildren={<Icon type="cross" />} />
|
||||
</div>, mountNode);
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Switch checkedChildren="开" unCheckedChildren="关" />
|
||||
<br />
|
||||
<Switch checkedChildren="1" unCheckedChildren="0" />
|
||||
<br />
|
||||
<Switch checkedChildren={<Icon type="check" />} unCheckedChildren={<Icon type="cross" />} />
|
||||
</div>
|
||||
, mountNode);
|
||||
````
|
||||
|
@ -94,10 +94,12 @@ describe('Table.filter', () => {
|
||||
const dropdown = wrapper.find('Dropdown').first();
|
||||
|
||||
expect(dropdown.props().visible).toBe(true);
|
||||
wrapper.setProps({ columns: [{
|
||||
...column,
|
||||
filterDropdownVisible: false,
|
||||
}] });
|
||||
wrapper.setProps({
|
||||
columns: [{
|
||||
...column,
|
||||
filterDropdownVisible: false,
|
||||
}],
|
||||
});
|
||||
expect(dropdown.props().visible).toBe(false);
|
||||
});
|
||||
|
||||
@ -124,10 +126,12 @@ describe('Table.filter', () => {
|
||||
}));
|
||||
|
||||
expect(wrapper.find('tbody tr').length).toBe(1);
|
||||
wrapper.setProps({ columns: [{
|
||||
...column,
|
||||
filteredValue: [],
|
||||
}] });
|
||||
wrapper.setProps({
|
||||
columns: [{
|
||||
...column,
|
||||
filteredValue: [],
|
||||
}],
|
||||
});
|
||||
expect(wrapper.find('tbody tr').length).toBe(4);
|
||||
});
|
||||
|
||||
@ -140,10 +144,12 @@ describe('Table.filter', () => {
|
||||
}));
|
||||
|
||||
expect(wrapper.find('tbody tr').length).toBe(1);
|
||||
wrapper.setProps({ columns: [{
|
||||
...column,
|
||||
filteredValue: null,
|
||||
}] });
|
||||
wrapper.setProps({
|
||||
columns: [{
|
||||
...column,
|
||||
filteredValue: null,
|
||||
}],
|
||||
});
|
||||
expect(wrapper.find('tbody tr').length).toBe(4);
|
||||
});
|
||||
|
||||
|
@ -14,8 +14,12 @@ const columns = [
|
||||
];
|
||||
|
||||
const columnsFixed = [
|
||||
{ title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },
|
||||
{ title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
|
||||
{
|
||||
title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left',
|
||||
},
|
||||
{ title: 'Column 1', dataIndex: 'address', key: '1' },
|
||||
{ title: 'Column 2', dataIndex: 'address', key: '2' },
|
||||
{ title: 'Column 3', dataIndex: 'address', key: '3' },
|
||||
|
@ -40,7 +40,7 @@ function NestedTable() {
|
||||
dataIndex: 'operation',
|
||||
key: 'operation',
|
||||
render: () => (
|
||||
<span className={'table-operation'}>
|
||||
<span className="table-operation">
|
||||
<a href="#">Pause</a>
|
||||
<a href="#">Stop</a>
|
||||
<Dropdown overlay={menu}>
|
||||
|
@ -40,7 +40,7 @@ for (let i = 0; i < 46; i++) {
|
||||
|
||||
class App extends React.Component {
|
||||
state = {
|
||||
selectedRowKeys: [], // Check here to configure the default column
|
||||
selectedRowKeys: [], // Check here to configure the default column
|
||||
loading: false,
|
||||
};
|
||||
start = () => {
|
||||
|
@ -40,7 +40,7 @@ for (let i = 0; i < 46; i++) {
|
||||
|
||||
class App extends React.Component {
|
||||
state = {
|
||||
selectedRowKeys: [], // Check here to configure the default column
|
||||
selectedRowKeys: [], // Check here to configure the default column
|
||||
};
|
||||
onSelectChange = (selectedRowKeys) => {
|
||||
console.log('selectedRowKeys changed: ', selectedRowKeys);
|
||||
@ -57,7 +57,7 @@ class App extends React.Component {
|
||||
text: 'Select All Data',
|
||||
onSelect: () => {
|
||||
this.setState({
|
||||
selectedRowKeys: [...Array(46).keys()], // 0...45
|
||||
selectedRowKeys: [...Array(46).keys()], // 0...45
|
||||
});
|
||||
},
|
||||
}, {
|
||||
|
@ -55,7 +55,7 @@ const rowSelection = {
|
||||
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
|
||||
},
|
||||
getCheckboxProps: record => ({
|
||||
disabled: record.name === 'Disabled User', // Column configuration not to be checked
|
||||
disabled: record.name === 'Disabled User', // Column configuration not to be checked
|
||||
}),
|
||||
};
|
||||
|
||||
|
@ -4,7 +4,7 @@ import Search from '../search';
|
||||
|
||||
describe('Search', () => {
|
||||
it('should show cross icon when input value exists', () => {
|
||||
const wrapper = mount(<Search value={''} />);
|
||||
const wrapper = mount(<Search value="" />);
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
|
@ -53,8 +53,8 @@ class App extends React.Component {
|
||||
);
|
||||
|
||||
return {
|
||||
label: customLabel, // for displayed item
|
||||
value: item.title, // for title and filter matching
|
||||
label: customLabel, // for displayed item
|
||||
value: item.title, // for title and filter matching
|
||||
};
|
||||
}
|
||||
render() {
|
||||
|
@ -27,7 +27,7 @@ const props = {
|
||||
uid: 1,
|
||||
name: 'xxx.png',
|
||||
status: 'done',
|
||||
reponse: 'Server Error 500', // custom error message to show
|
||||
reponse: 'Server Error 500', // custom error message to show
|
||||
url: 'http://www.baidu.com/xxx.png',
|
||||
}, {
|
||||
uid: 2,
|
||||
@ -38,7 +38,7 @@ const props = {
|
||||
uid: 3,
|
||||
name: 'zzz.png',
|
||||
status: 'error',
|
||||
reponse: 'Server Error 500', // custom error message to show
|
||||
reponse: 'Server Error 500', // custom error message to show
|
||||
url: 'http://www.baidu.com/zzz.png',
|
||||
}],
|
||||
};
|
||||
|
@ -59,8 +59,8 @@ When uploading state change, it returns:
|
||||
{
|
||||
uid: 'uid', // unique identifier,negative is recommend,to prevent interference with internal generated id
|
||||
name: 'xx.png' // file name
|
||||
status: 'done', // options:uploading, done, error, removed
|
||||
response: '{"status": "success"}', // response from server
|
||||
status: 'done', // options:uploading, done, error, removed
|
||||
response: '{"status": "success"}', // response from server
|
||||
}
|
||||
```
|
||||
|
||||
|
@ -60,8 +60,8 @@ title: Upload
|
||||
{
|
||||
uid: 'uid', // 文件唯一标识,建议设置为负数,防止和内部产生的 id 冲突
|
||||
name: 'xx.png' // 文件名
|
||||
status: 'done', // 状态有:uploading done error removed
|
||||
response: '{"status": "success"}', // 服务端响应内容
|
||||
status: 'done', // 状态有:uploading done error removed
|
||||
response: '{"status": "success"}', // 服务端响应内容
|
||||
}
|
||||
```
|
||||
> `antd@1.9.0` 之前,multiple 模式下,此参数为一个对象数组 `[file, ...]`,`antd@1.9.0` 开始无论是否多选,均为一个对象。
|
||||
|
@ -107,17 +107,17 @@
|
||||
"enquire.js": "^2.1.1",
|
||||
"enzyme": "^2.6.0",
|
||||
"enzyme-to-json": "^1.3.0",
|
||||
"eslint": "^3.0.1",
|
||||
"eslint": "^4.8.0",
|
||||
"eslint-config-airbnb": "latest",
|
||||
"eslint-plugin-babel": "^4.0.0",
|
||||
"eslint-plugin-import": "^2.2.0",
|
||||
"eslint-plugin-jsx-a11y": "^5.1.1",
|
||||
"eslint-plugin-jsx-a11y": "^6.0.2",
|
||||
"eslint-plugin-markdown": "~1.0.0-beta.4",
|
||||
"eslint-plugin-react": "^7.0.1",
|
||||
"eslint-tinker": "^0.4.0",
|
||||
"fetch-jsonp": "^1.0.3",
|
||||
"glob": "^7.1.1",
|
||||
"jest": "^20.0.4",
|
||||
"jest": "^21.1.0",
|
||||
"jsonml.js": "^0.1.0",
|
||||
"lint-staged": "^4.0.2",
|
||||
"mockdate": "^2.0.1",
|
||||
|
@ -6,7 +6,7 @@ const contentTmpl = './template/Content/index';
|
||||
function pickerGenerator(module) {
|
||||
const tester = new RegExp(`^docs/${module}`);
|
||||
return (markdownData) => {
|
||||
const filename = markdownData.meta.filename;
|
||||
const { filename } = markdownData.meta;
|
||||
if (tester.test(filename) &&
|
||||
!/\/demo$/.test(path.dirname(filename))) {
|
||||
return {
|
||||
@ -25,7 +25,7 @@ module.exports = {
|
||||
},
|
||||
pick: {
|
||||
components(markdownData) {
|
||||
const filename = markdownData.meta.filename;
|
||||
const { filename } = markdownData.meta;
|
||||
if (!/^components/.test(filename) ||
|
||||
/[/\\]demo$/.test(path.dirname(filename))) return;
|
||||
|
||||
|
@ -5,10 +5,10 @@ import ColorBlock from './ColorBlock';
|
||||
import ColorPicker from './ColorPicker';
|
||||
|
||||
const easing = BezierEasing.apply(null, [0.26, 0.09, 0.37, 0.18]); // 色彩分布曲线
|
||||
const warmDark = 0.5; // 暖色深度
|
||||
const warmRotate = -26; // 暖色角度
|
||||
const coldDark = 0.55; // 冷色深度
|
||||
const coldRotate = 10; // 冷色角度
|
||||
const warmDark = 0.5; // 暖色深度
|
||||
const warmRotate = -26; // 暖色角度
|
||||
const coldDark = 0.55; // 冷色深度
|
||||
const coldRotate = 10; // 冷色角度
|
||||
|
||||
// eslint-disable-next-line
|
||||
export default class ColorPaletteTool extends Component {
|
||||
|
@ -65,12 +65,12 @@ export default class Article extends React.Component {
|
||||
});
|
||||
}
|
||||
render() {
|
||||
const props = this.props;
|
||||
const content = props.content;
|
||||
const { props } = this;
|
||||
const { content } = props;
|
||||
|
||||
const { meta, description } = content;
|
||||
const { title, subtitle, filename } = meta;
|
||||
const locale = this.context.intl.locale;
|
||||
const { locale } = this.context.intl;
|
||||
const isNotTranslated = locale === 'en-US' && typeof title === 'object';
|
||||
return (
|
||||
<DocumentTitle title={`${title[locale] || title} - Ant Design`}>
|
||||
|
@ -28,10 +28,10 @@ export default class ComponentDoc extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const props = this.props;
|
||||
const { props } = this;
|
||||
const { doc, location } = props;
|
||||
const { content, meta } = doc;
|
||||
const locale = this.context.intl.locale;
|
||||
const { locale } = this.context.intl;
|
||||
const demos = Object.keys(props.demos).map(key => props.demos[key]);
|
||||
const expand = this.state.expandAll;
|
||||
|
||||
@ -39,7 +39,7 @@ export default class ComponentDoc extends React.Component {
|
||||
const leftChildren = [];
|
||||
const rightChildren = [];
|
||||
const showedDemo = demos.some(demo => demo.meta.only) ?
|
||||
demos.filter(demo => demo.meta.only) : demos.filter(demo => demo.preview);
|
||||
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 = (
|
||||
@ -63,7 +63,7 @@ export default class ComponentDoc extends React.Component {
|
||||
});
|
||||
|
||||
const jumper = showedDemo.map((demo) => {
|
||||
const title = demo.meta.title;
|
||||
const { title } = demo.meta;
|
||||
const localizeTitle = title[locale] || title;
|
||||
return (
|
||||
<li key={demo.meta.id} title={localizeTitle}>
|
||||
|
@ -82,8 +82,8 @@ export default class Demo extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const state = this.state;
|
||||
const props = this.props;
|
||||
const { state } = this;
|
||||
const { props } = this;
|
||||
const {
|
||||
meta,
|
||||
src,
|
||||
@ -105,7 +105,7 @@ export default class Demo extends React.Component {
|
||||
expand: codeExpand,
|
||||
});
|
||||
|
||||
const locale = this.context.intl.locale;
|
||||
const { locale } = this.context.intl;
|
||||
const localizedTitle = meta.title[locale] || meta.title;
|
||||
const localizeIntro = content[locale] || content;
|
||||
const introChildren = props.utils
|
||||
|
@ -7,22 +7,22 @@ import Article from './Article';
|
||||
import ComponentDoc from './ComponentDoc';
|
||||
import * as utils from '../utils';
|
||||
|
||||
const SubMenu = Menu.SubMenu;
|
||||
const { SubMenu } = Menu;
|
||||
|
||||
function getActiveMenuItem(props) {
|
||||
const children = props.params.children;
|
||||
const { children } = props.params;
|
||||
return (children && children.replace('-cn', '')) ||
|
||||
props.location.pathname.replace(/(^\/|-cn$)/g, '');
|
||||
}
|
||||
|
||||
function getModuleData(props) {
|
||||
const pathname = props.location.pathname;
|
||||
const { pathname } = props.location;
|
||||
const moduleName = /^\/?components/.test(pathname) ?
|
||||
'components' : pathname.split('/').filter(item => item).slice(0, 2).join('/');
|
||||
'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];
|
||||
[...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,7 +58,7 @@ export default class MainContent extends React.Component {
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
if (!location.hash) {
|
||||
if (!window.location.hash) {
|
||||
document.body.scrollTop = 0;
|
||||
document.documentElement.scrollTop = 0;
|
||||
return;
|
||||
@ -67,7 +67,7 @@ export default class MainContent extends React.Component {
|
||||
clearTimeout(this.timer);
|
||||
}
|
||||
this.timer = setTimeout(() => {
|
||||
location.hash = location.hash;
|
||||
window.location.hash = window.location.hash;
|
||||
}, 10);
|
||||
}
|
||||
|
||||
@ -80,7 +80,7 @@ export default class MainContent extends React.Component {
|
||||
}
|
||||
|
||||
getSideBarOpenKeys(nextProps) {
|
||||
const pathname = nextProps.location.pathname;
|
||||
const { pathname } = nextProps.location;
|
||||
const prevModule = this.currentModule;
|
||||
this.currentModule = pathname.replace(/^\//).split('/')[1] || 'components';
|
||||
if (this.currentModule === 'react') {
|
||||
@ -95,14 +95,14 @@ export default class MainContent extends React.Component {
|
||||
}
|
||||
|
||||
generateMenuItem(isTop, item) {
|
||||
const locale = this.context.intl.locale;
|
||||
const { locale } = this.context.intl;
|
||||
const key = fileNameToPath(item.filename);
|
||||
const text = isTop ?
|
||||
item.title[locale] || item.title : [
|
||||
<span key="english">{item.title}</span>,
|
||||
<span className="chinese" key="chinese">{item.subtitle}</span>,
|
||||
];
|
||||
const disabled = item.disabled;
|
||||
item.title[locale] || item.title : [
|
||||
<span key="english">{item.title}</span>,
|
||||
<span className="chinese" key="chinese">{item.subtitle}</span>,
|
||||
];
|
||||
const { disabled } = item;
|
||||
const url = item.filename.replace(/(\/index)?((\.zh-CN)|(\.en-US))?\.md$/i, '').toLowerCase();
|
||||
const child = !item.link ? (
|
||||
<Link
|
||||
@ -193,11 +193,11 @@ export default class MainContent extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const props = this.props;
|
||||
const { props } = this;
|
||||
const activeMenuItem = getActiveMenuItem(props);
|
||||
const menuItems = this.getMenuItems();
|
||||
const { prev, next } = this.getFooterNav(menuItems, activeMenuItem);
|
||||
const localizedPageData = props.localizedPageData;
|
||||
const { localizedPageData } = props;
|
||||
const mainContainerClass = classNames('main-container', {
|
||||
'main-container-component': !!props.demos,
|
||||
});
|
||||
|
@ -7,18 +7,18 @@ function isChangelog(pathname) {
|
||||
}
|
||||
|
||||
export default collect(async (nextProps) => {
|
||||
const pathname = nextProps.location.pathname;
|
||||
const { pathname } = nextProps.location;
|
||||
const pageDataPath = pathname.replace('-cn', '').split('/');
|
||||
const pageData = isChangelog(pathname) ?
|
||||
nextProps.data.changelog.CHANGELOG :
|
||||
nextProps.utils.get(nextProps.data, pageDataPath);
|
||||
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)();
|
||||
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()]);
|
||||
|
@ -19,7 +19,9 @@ export default function Page4() {
|
||||
<TweenOne
|
||||
key="image"
|
||||
className="image4 bottom-wrapper"
|
||||
animation={{ y: 0, opacity: 1, duration: 550, delay: 150, ease: 'easeOutQuad' }}
|
||||
animation={{
|
||||
y: 0, opacity: 1, duration: 550, delay: 150, ease: 'easeOutQuad',
|
||||
}}
|
||||
style={{ transform: 'translateY(50px)', opacity: 0 }}
|
||||
/>
|
||||
</ScrollOverPack>
|
||||
|
@ -59,7 +59,7 @@ class Footer extends React.Component {
|
||||
}
|
||||
|
||||
infoNewVersion() {
|
||||
const messages = this.props.intl.messages;
|
||||
const { messages } = this.props.intl;
|
||||
Modal.info({
|
||||
title: messages['app.publish.title'],
|
||||
content: (
|
||||
|
@ -7,7 +7,7 @@ import { Select, Menu, Row, Col, Icon, Button, Popover, AutoComplete, Input } fr
|
||||
import * as utils from '../utils';
|
||||
import { version as antdVersion } from '../../../../package.json';
|
||||
|
||||
const Option = AutoComplete.Option;
|
||||
const { Option } = AutoComplete;
|
||||
const searchEngine = 'Google';
|
||||
const searchLink = 'https://www.google.com/#q=site:ant.design+';
|
||||
|
||||
@ -25,7 +25,7 @@ export default class Header extends React.Component {
|
||||
|
||||
componentDidMount() {
|
||||
this.context.router.listen(this.handleHideMenu);
|
||||
const searchInput = this.searchInput;
|
||||
const { searchInput } = this;
|
||||
/* eslint-disable global-require */
|
||||
require('enquire.js')
|
||||
.register('only screen and (min-width: 0) and (max-width: 992px)', {
|
||||
@ -90,16 +90,16 @@ export default class Header extends React.Component {
|
||||
}
|
||||
|
||||
handleLangChange = () => {
|
||||
const pathname = this.props.location.pathname;
|
||||
const currentProtocol = `${location.protocol}//`;
|
||||
const currentHref = location.href.substr(currentProtocol.length);
|
||||
const { pathname } = this.props.location;
|
||||
const currentProtocol = `${window.location.protocol}//`;
|
||||
const currentHref = window.location.href.substr(currentProtocol.length);
|
||||
|
||||
if (utils.isLocalStorageNameSupported()) {
|
||||
localStorage.setItem('locale', utils.isZhCN(pathname) ? 'en-US' : 'zh-CN');
|
||||
}
|
||||
|
||||
location.href = currentProtocol + currentHref.replace(
|
||||
location.pathname,
|
||||
window.location.href = currentProtocol + currentHref.replace(
|
||||
window.location.pathname,
|
||||
utils.getLocalizedPathname(pathname, !utils.isZhCN(pathname)),
|
||||
);
|
||||
}
|
||||
@ -113,18 +113,20 @@ export default class Header extends React.Component {
|
||||
|
||||
render() {
|
||||
const { inputValue, menuMode, menuVisible } = this.state;
|
||||
const { location, picked, isFirstScreen, themeConfig } = this.props;
|
||||
const {
|
||||
location, picked, isFirstScreen, themeConfig,
|
||||
} = this.props;
|
||||
const docVersions = { ...themeConfig.docVersions, [antdVersion]: antdVersion };
|
||||
const versionOptions = Object.keys(docVersions)
|
||||
.map(version => <Option value={docVersions[version]} key={version}>{version}</Option>);
|
||||
const components = picked.components;
|
||||
const { components } = picked;
|
||||
const module = location.pathname.replace(/(^\/|\/$)/g, '').split('/').slice(0, -1).join('/');
|
||||
let activeMenuItem = module || 'home';
|
||||
if (activeMenuItem === 'components' || location.pathname === 'changelog') {
|
||||
activeMenuItem = 'docs/react';
|
||||
}
|
||||
|
||||
const locale = this.context.intl.locale;
|
||||
const { locale } = this.context.intl;
|
||||
const isZhCN = locale === 'zh-CN';
|
||||
const excludedSuffix = isZhCN ? 'en-US.md' : 'zh-CN.md';
|
||||
const options = components
|
||||
@ -132,7 +134,7 @@ export default class Header extends React.Component {
|
||||
.map(({ meta }) => {
|
||||
const pathSnippet = meta.filename.split('/')[1];
|
||||
const url = `/components/${pathSnippet}`;
|
||||
const subtitle = meta.subtitle;
|
||||
const { subtitle } = meta;
|
||||
return (
|
||||
<Option value={url} key={url} data-label={`${meta.title.toLowerCase()} ${subtitle || ''}`}>
|
||||
<strong>{meta.title}</strong>
|
||||
@ -204,21 +206,23 @@ export default class Header extends React.Component {
|
||||
const searchPlaceholder = locale === 'zh-CN' ? '搜索组件...' : 'Search Components...';
|
||||
return (
|
||||
<header id="header" className={headerClassName}>
|
||||
{menuMode === 'inline' ? <Popover
|
||||
overlayClassName="popover-menu"
|
||||
placement="bottomRight"
|
||||
content={menu}
|
||||
trigger="click"
|
||||
visible={menuVisible}
|
||||
arrowPointAtCenter
|
||||
onVisibleChange={this.onMenuVisibleChange}
|
||||
>
|
||||
<Icon
|
||||
className="nav-phone-icon"
|
||||
type="menu"
|
||||
onClick={this.handleShowMenu}
|
||||
/>
|
||||
</Popover> : null}
|
||||
{menuMode === 'inline' ? (
|
||||
<Popover
|
||||
overlayClassName="popover-menu"
|
||||
placement="bottomRight"
|
||||
content={menu}
|
||||
trigger="click"
|
||||
visible={menuVisible}
|
||||
arrowPointAtCenter
|
||||
onVisibleChange={this.onMenuVisibleChange}
|
||||
>
|
||||
<Icon
|
||||
className="nav-phone-icon"
|
||||
type="menu"
|
||||
onClick={this.handleShowMenu}
|
||||
/>
|
||||
</Popover>
|
||||
) : null}
|
||||
<Row>
|
||||
<Col lg={4} md={5} sm={24} xs={24}>
|
||||
<Link to={utils.getLocalizedPathname('/', isZhCN)} id="logo">
|
||||
|
@ -28,7 +28,7 @@ export default class Layout extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const pathname = props.location.pathname;
|
||||
const { pathname } = props.location;
|
||||
const appLocale = utils.isZhCN(pathname) ? cnLocale : enLocale;
|
||||
addLocaleData(appLocale.data);
|
||||
this.state = {
|
||||
|
Loading…
Reference in New Issue
Block a user