mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
💄 fix eslint problems
This commit is contained in:
parent
647ba193cd
commit
83c192ea3e
31
.eslintrc.js
31
.eslintrc.js
@ -14,33 +14,18 @@ const eslintrc = {
|
||||
'babel',
|
||||
],
|
||||
rules: {
|
||||
'func-names': 0,
|
||||
'arrow-body-style': 0,
|
||||
'react/sort-comp': 0,
|
||||
'react/prop-types': 0,
|
||||
'react/jsx-first-prop-new-line': 0,
|
||||
'react/jsx-one-expression-per-line': 0,
|
||||
'react/prop-types': 0,
|
||||
'react/forbid-prop-types': 0,
|
||||
'import/no-extraneous-dependencies': ['error', {
|
||||
devDependencies: ['site/**', 'tests/**', 'scripts/**', '**/*.test.js', '**/__tests__/*', '*.config.js', '**/*.md'],
|
||||
}],
|
||||
'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.md'] }],
|
||||
'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,
|
||||
'consistent-return': 0,
|
||||
'no-redeclare': 0,
|
||||
'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,
|
||||
},
|
||||
};
|
||||
|
||||
@ -61,9 +46,13 @@ if (process.env.RUN_ENV === 'DEMO') {
|
||||
'react/no-access-state-in-setstate': 0,
|
||||
'react/destructuring-assignment': 0,
|
||||
'react/no-multi-comp': 0,
|
||||
'react/prefer-stateless-function': 0,
|
||||
'jsx-a11y/href-no-hash': 0,
|
||||
'import/newline-after-import': 0,
|
||||
'prefer-destructuring': 0, // TODO: remove later
|
||||
'max-len': 0, // TODO: remove later
|
||||
'consistent-return': 0, // TODO: remove later
|
||||
'no-return-assign': 0, // TODO: remove later
|
||||
'no-param-reassign': 0, // TODO: remove later
|
||||
'import/no-extraneous-dependencies': 0,
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -12,9 +12,7 @@ class AffixMounter extends React.Component {
|
||||
});
|
||||
}
|
||||
|
||||
getTarget = () => {
|
||||
return this.container;
|
||||
}
|
||||
getTarget = () => this.container
|
||||
|
||||
render() {
|
||||
return (
|
||||
@ -34,7 +32,7 @@ class AffixMounter extends React.Component {
|
||||
>
|
||||
<Affix
|
||||
target={() => this.container}
|
||||
ref={ele => this.affix = ele}
|
||||
ref={(ele) => { this.affix = ele; }}
|
||||
{...this.props}
|
||||
>
|
||||
<Button type="primary">
|
||||
@ -59,11 +57,9 @@ describe('Affix Render', () => {
|
||||
});
|
||||
|
||||
const scrollTo = (top) => {
|
||||
wrapper.instance().affix.fixedNode.parentNode.getBoundingClientRect = jest.fn(() => {
|
||||
return {
|
||||
bottom: 100, height: 28, left: 0, right: 0, top: 50 - top, width: 195,
|
||||
};
|
||||
});
|
||||
wrapper.instance().affix.fixedNode.parentNode.getBoundingClientRect = jest.fn(() => ({
|
||||
bottom: 100, height: 28, left: 0, right: 0, top: 50 - top, width: 195,
|
||||
}));
|
||||
wrapper.instance().container.scrollTop = top;
|
||||
events.scroll({
|
||||
type: 'scroll',
|
||||
|
@ -27,5 +27,6 @@ ReactDOM.render(
|
||||
<br />
|
||||
<Alert type="error" message="Error text" banner />
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -18,7 +18,8 @@ import { Alert } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<Alert message="Success Text" type="success" />,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
||||
<style>
|
||||
|
@ -16,7 +16,7 @@ To show close button.
|
||||
````jsx
|
||||
import { Alert } from 'antd';
|
||||
|
||||
const onClose = function (e) {
|
||||
const onClose = (e) => {
|
||||
console.log(e, 'I was closed.');
|
||||
};
|
||||
|
||||
@ -36,5 +36,6 @@ ReactDOM.render(
|
||||
onClose={onClose}
|
||||
/>
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -18,5 +18,6 @@ import { Alert } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<Alert message="Info Text" type="info" closeText="Close Now" />,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -55,5 +55,6 @@ ReactDOM.render(
|
||||
showIcon
|
||||
/>
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -39,5 +39,6 @@ ReactDOM.render(
|
||||
type="error"
|
||||
/>
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -47,5 +47,6 @@ ReactDOM.render(
|
||||
showIcon
|
||||
/>
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -46,5 +46,6 @@ class App extends React.Component {
|
||||
|
||||
ReactDOM.render(
|
||||
<App />,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -23,5 +23,6 @@ ReactDOM.render(
|
||||
<Alert message="Warning Text" type="warning" />
|
||||
<Alert message="Error Text" type="error" />
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -92,7 +92,7 @@ describe('Anchor Render', () => {
|
||||
let anchorInstance = null;
|
||||
function AnchorUpdate({ href }) {
|
||||
return (
|
||||
<Anchor ref={c => anchorInstance = c}>
|
||||
<Anchor ref={(c) => { anchorInstance = c; }}>
|
||||
<Link href={href} title="API" />
|
||||
</Anchor>
|
||||
);
|
||||
@ -107,7 +107,7 @@ describe('Anchor Render', () => {
|
||||
it('Anchor onClick event', () => {
|
||||
let event;
|
||||
let link;
|
||||
const handleClick = (...arg) => ([event, link] = arg);
|
||||
const handleClick = (...arg) => { [event, link] = arg; };
|
||||
|
||||
const href = '#API';
|
||||
const title = 'API';
|
||||
|
@ -27,7 +27,8 @@ ReactDOM.render(
|
||||
<Link href="#Link-Props" title="Link Props" />
|
||||
</Link>
|
||||
</Anchor>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
```
|
||||
|
||||
<style>
|
||||
|
@ -32,5 +32,6 @@ ReactDOM.render(
|
||||
<Link href="#Link-Props" title="Link Props" />
|
||||
</Link>
|
||||
</Anchor>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
```
|
||||
|
@ -27,5 +27,6 @@ ReactDOM.render(
|
||||
<Link href="#Link-Props" title="Link Props" />
|
||||
</Link>
|
||||
</Anchor>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
```
|
||||
|
@ -35,9 +35,7 @@ class Complete extends React.Component {
|
||||
|
||||
render() {
|
||||
const { result } = this.state;
|
||||
const children = result.map((email) => {
|
||||
return <Option key={email}>{email}</Option>;
|
||||
});
|
||||
const children = result.map(email => <Option key={email}>{email}</Option>);
|
||||
return (
|
||||
<AutoComplete
|
||||
style={{ width: 200 }}
|
||||
|
@ -15,7 +15,9 @@ Demonstration of [Lookup Patterns: Uncertain Category](https://ant.design/docs/s
|
||||
Basic Usage, set datasource of autocomplete with `dataSource` property.
|
||||
|
||||
````jsx
|
||||
import { Icon, Button, Input, AutoComplete } from 'antd';
|
||||
import {
|
||||
Icon, Button, Input, AutoComplete,
|
||||
} from 'antd';
|
||||
|
||||
const Option = AutoComplete.Option;
|
||||
|
||||
|
@ -25,5 +25,6 @@ ReactDOM.render(
|
||||
<Badge dot><Avatar shape="square" icon="user" /></Badge>
|
||||
</span>
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -31,7 +31,8 @@ ReactDOM.render(
|
||||
<Avatar shape="square" size="small" icon="user" />
|
||||
</div>
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
||||
<style>
|
||||
|
@ -25,7 +25,8 @@ ReactDOM.render(
|
||||
<Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
|
||||
<Avatar style={{ backgroundColor: '#87d068' }} icon="user" />
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
||||
<style>
|
||||
|
@ -25,7 +25,8 @@ ReactDOM.render(
|
||||
<a href="#" className="head-example" />
|
||||
</Badge>
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
||||
<style>
|
||||
|
@ -14,7 +14,9 @@ title:
|
||||
The count will be animated as it changes.
|
||||
|
||||
````jsx
|
||||
import { Badge, Button, Icon, Switch } from 'antd';
|
||||
import {
|
||||
Badge, Button, Icon, Switch,
|
||||
} from 'antd';
|
||||
|
||||
const ButtonGroup = Button.Group;
|
||||
|
||||
|
@ -29,7 +29,8 @@ ReactDOM.render(
|
||||
<a href="#">Link something</a>
|
||||
</Badge>
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
||||
<style>
|
||||
|
@ -22,5 +22,6 @@ ReactDOM.render(
|
||||
<span className="head-example" />
|
||||
</Badge>
|
||||
</a>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -24,7 +24,8 @@ ReactDOM.render(
|
||||
<Badge count={4} style={{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }} />
|
||||
<Badge count={109} style={{ backgroundColor: '#52c41a' }} />
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
||||
<style>
|
||||
|
@ -31,5 +31,6 @@ ReactDOM.render(
|
||||
<a href="#" className="head-example" />
|
||||
</Badge>
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -34,5 +34,6 @@ ReactDOM.render(
|
||||
<br />
|
||||
<Badge status="warning" text="Warning" />
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -22,7 +22,8 @@ ReactDOM.render(
|
||||
<a href="#" className="head-example" />
|
||||
</Badge>
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
||||
<style>
|
||||
|
@ -1,5 +1,7 @@
|
||||
import React from 'react';
|
||||
import { Route, Switch, Link, withRouter, MemoryRouter } from 'react-router-dom';
|
||||
import {
|
||||
Route, Switch, Link, withRouter, MemoryRouter,
|
||||
} from 'react-router-dom';
|
||||
import { mount } from 'enzyme';
|
||||
import Breadcrumb from '../index';
|
||||
|
||||
|
@ -23,5 +23,6 @@ ReactDOM.render(
|
||||
<Breadcrumb.Item><a href="">Application List</a></Breadcrumb.Item>
|
||||
<Breadcrumb.Item>An Application</Breadcrumb.Item>
|
||||
</Breadcrumb>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -16,7 +16,9 @@ title:
|
||||
Used together with `react-router@4` or other router.
|
||||
|
||||
````jsx
|
||||
import { HashRouter as Router, Route, Switch, Link, withRouter } from 'react-router-dom';
|
||||
import {
|
||||
HashRouter as Router, Route, Switch, Link, withRouter,
|
||||
} from 'react-router-dom';
|
||||
import { Breadcrumb, Alert } from 'antd';
|
||||
|
||||
const Apps = () => (
|
||||
@ -77,7 +79,8 @@ ReactDOM.render(
|
||||
<Router>
|
||||
<Home />
|
||||
</Router>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
||||
````css
|
||||
|
@ -16,7 +16,9 @@ title:
|
||||
Used together with `react-router@2` `react-router@3`.
|
||||
|
||||
````jsx
|
||||
import { Router, Route, Link, hashHistory } from 'react-router';
|
||||
import {
|
||||
Router, Route, Link, hashHistory,
|
||||
} from 'react-router';
|
||||
import { Breadcrumb, Alert } from 'antd';
|
||||
|
||||
const Apps = () => (
|
||||
@ -52,7 +54,8 @@ ReactDOM.render(
|
||||
</Route>
|
||||
</Route>
|
||||
</Router>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
||||
````css
|
||||
|
@ -23,5 +23,6 @@ ReactDOM.render(
|
||||
<Breadcrumb.Item href="">Application List</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>An Application</Breadcrumb.Item>
|
||||
</Breadcrumb>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -29,5 +29,6 @@ ReactDOM.render(
|
||||
Application
|
||||
</Breadcrumb.Item>
|
||||
</Breadcrumb>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -23,5 +23,6 @@ ReactDOM.render(
|
||||
<Button type="dashed">Dashed</Button>
|
||||
<Button type="danger">Danger</Button>
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -23,5 +23,6 @@ ReactDOM.render(
|
||||
<Button type="dashed" block>Dashed</Button>
|
||||
<Button type="danger" block>danger</Button>
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -23,5 +23,6 @@ ReactDOM.render(
|
||||
<Button type="dashed" ghost>Dashed</Button>
|
||||
<Button type="danger" ghost>danger</Button>
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -15,7 +15,9 @@ If you need several buttons, we recommend that you use 1 primary button + n seco
|
||||
|
||||
|
||||
````jsx
|
||||
import { Button, Menu, Dropdown, Icon } from 'antd';
|
||||
import {
|
||||
Button, Menu, Dropdown, Icon,
|
||||
} from 'antd';
|
||||
|
||||
function handleMenuClick(e) {
|
||||
console.log('click', e);
|
||||
|
@ -22,5 +22,6 @@ function onPanelChange(value, mode) {
|
||||
|
||||
ReactDOM.render(
|
||||
<Calendar onPanelChange={onPanelChange} />,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -24,5 +24,6 @@ ReactDOM.render(
|
||||
<div style={{ width: 300, border: '1px solid #d9d9d9', borderRadius: 4 }}>
|
||||
<Calendar fullscreen={false} onPanelChange={onPanelChange} />
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -77,7 +77,8 @@ function monthCellRender(value) {
|
||||
|
||||
ReactDOM.render(
|
||||
<Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
||||
````css
|
||||
|
@ -26,7 +26,8 @@ ReactDOM.render(
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
</Card>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
||||
<style>
|
||||
|
@ -24,5 +24,6 @@ ReactDOM.render(
|
||||
<p>Card content</p>
|
||||
</Card>
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -30,5 +30,6 @@ ReactDOM.render(
|
||||
description="www.instagram.com"
|
||||
/>
|
||||
</Card>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -31,5 +31,6 @@ ReactDOM.render(
|
||||
<Card.Grid style={gridStyle}>Content</Card.Grid>
|
||||
<Card.Grid style={gridStyle}>Content</Card.Grid>
|
||||
</Card>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -30,5 +30,6 @@ ReactDOM.render(
|
||||
</Col>
|
||||
</Row>
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -44,5 +44,6 @@ ReactDOM.render(
|
||||
Inner Card content
|
||||
</Card>
|
||||
</Card>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -14,7 +14,9 @@ title:
|
||||
Shows a loading indicator while the contents of the card is being fetched.
|
||||
|
||||
````jsx
|
||||
import { Skeleton, Switch, Card, Icon, Avatar } from 'antd';
|
||||
import {
|
||||
Skeleton, Switch, Card, Icon, Avatar,
|
||||
} from 'antd';
|
||||
|
||||
const { Meta } = Card;
|
||||
|
||||
|
@ -30,5 +30,6 @@ ReactDOM.render(
|
||||
description="This is the description"
|
||||
/>
|
||||
</Card>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -22,5 +22,6 @@ ReactDOM.render(
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
</Card>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -49,7 +49,7 @@ describe('Carousel', () => {
|
||||
|
||||
it('cancel resize listener when unmount', async () => {
|
||||
const wrapper = mount(<Carousel autoplay><div>1</div><div>2</div><div>3</div></Carousel>);
|
||||
const onWindowResized = wrapper.instance().onWindowResized;
|
||||
const { onWindowResized } = wrapper.instance();
|
||||
const spy = jest.spyOn(wrapper.instance().onWindowResized, 'cancel');
|
||||
const spy2 = jest.spyOn(window, 'removeEventListener');
|
||||
wrapper.unmount();
|
||||
|
@ -23,7 +23,8 @@ ReactDOM.render(
|
||||
<div><h3>3</h3></div>
|
||||
<div><h3>4</h3></div>
|
||||
</Carousel>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
||||
````css
|
||||
|
@ -27,7 +27,8 @@ ReactDOM.render(
|
||||
<div><h3>3</h3></div>
|
||||
<div><h3>4</h3></div>
|
||||
</Carousel>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
||||
````css
|
||||
|
@ -23,7 +23,8 @@ ReactDOM.render(
|
||||
<div><h3>3</h3></div>
|
||||
<div><h3>4</h3></div>
|
||||
</Carousel>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
||||
````css
|
||||
|
@ -23,7 +23,8 @@ ReactDOM.render(
|
||||
<div><h3>3</h3></div>
|
||||
<div><h3>4</h3></div>
|
||||
</Carousel>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
||||
````css
|
||||
|
@ -46,5 +46,6 @@ function onChange(value) {
|
||||
|
||||
ReactDOM.render(
|
||||
<Cascader options={options} onChange={onChange} placeholder="Please select" />,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -46,5 +46,6 @@ function onChange(value) {
|
||||
|
||||
ReactDOM.render(
|
||||
<Cascader options={options} onChange={onChange} changeOnSelect />,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -66,5 +66,6 @@ ReactDOM.render(
|
||||
displayRender={displayRender}
|
||||
style={{ width: '100%' }}
|
||||
/>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -46,5 +46,6 @@ function onChange(value) {
|
||||
|
||||
ReactDOM.render(
|
||||
<Cascader defaultValue={['zhejiang', 'hangzhou', 'xihu']} options={options} onChange={onChange} />,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -47,5 +47,6 @@ function onChange(value) {
|
||||
|
||||
ReactDOM.render(
|
||||
<Cascader options={options} onChange={onChange} />,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -46,5 +46,6 @@ function onChange(value) {
|
||||
|
||||
ReactDOM.render(
|
||||
<Cascader fieldNames={{ label: 'name', value: 'code', children: 'items' }} options={options} onChange={onChange} placeholder="Please select" />,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -56,5 +56,6 @@ ReactDOM.render(
|
||||
displayRender={displayRender}
|
||||
onChange={onChange}
|
||||
/>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -50,5 +50,6 @@ ReactDOM.render(
|
||||
<Cascader options={options} onChange={onChange} /><br /><br />
|
||||
<Cascader size="small" options={options} onChange={onChange} /><br /><br />
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -61,5 +61,6 @@ ReactDOM.render(
|
||||
placeholder="Please select"
|
||||
/>
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -22,5 +22,6 @@ function onChange(e) {
|
||||
|
||||
ReactDOM.render(
|
||||
<Checkbox onChange={onChange}>Checkbox</Checkbox>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -28,6 +28,22 @@ class App extends React.Component {
|
||||
checkAll: false,
|
||||
};
|
||||
|
||||
onChange = (checkedList) => {
|
||||
this.setState({
|
||||
checkedList,
|
||||
indeterminate: !!checkedList.length && (checkedList.length < plainOptions.length),
|
||||
checkAll: checkedList.length === plainOptions.length,
|
||||
});
|
||||
}
|
||||
|
||||
onCheckAllChange = (e) => {
|
||||
this.setState({
|
||||
checkedList: e.target.checked ? plainOptions : [],
|
||||
indeterminate: false,
|
||||
checkAll: e.target.checked,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
@ -45,22 +61,6 @@ class App extends React.Component {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
onChange = (checkedList) => {
|
||||
this.setState({
|
||||
checkedList,
|
||||
indeterminate: !!checkedList.length && (checkedList.length < plainOptions.length),
|
||||
checkAll: checkedList.length === plainOptions.length,
|
||||
});
|
||||
}
|
||||
|
||||
onCheckAllChange = (e) => {
|
||||
this.setState({
|
||||
checkedList: e.target.checked ? plainOptions : [],
|
||||
indeterminate: false,
|
||||
checkAll: e.target.checked,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<App />, mountNode);
|
||||
|
@ -22,6 +22,21 @@ class App extends React.Component {
|
||||
disabled: false,
|
||||
};
|
||||
|
||||
toggleChecked = () => {
|
||||
this.setState({ checked: !this.state.checked });
|
||||
}
|
||||
|
||||
toggleDisable = () => {
|
||||
this.setState({ disabled: !this.state.disabled });
|
||||
}
|
||||
|
||||
onChange = (e) => {
|
||||
console.log('checked = ', e.target.checked);
|
||||
this.setState({
|
||||
checked: e.target.checked,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const label = `${this.state.checked ? 'Checked' : 'Unchecked'}-${this.state.disabled ? 'Disabled' : 'Enabled'}`;
|
||||
return (
|
||||
@ -55,21 +70,6 @@ class App extends React.Component {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
toggleChecked = () => {
|
||||
this.setState({ checked: !this.state.checked });
|
||||
}
|
||||
|
||||
toggleDisable = () => {
|
||||
this.setState({ disabled: !this.state.disabled });
|
||||
}
|
||||
|
||||
onChange = (e) => {
|
||||
console.log('checked = ', e.target.checked);
|
||||
this.setState({
|
||||
checked: e.target.checked,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<App />, mountNode);
|
||||
|
@ -22,5 +22,6 @@ ReactDOM.render(
|
||||
<br />
|
||||
<Checkbox defaultChecked disabled />
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -42,5 +42,6 @@ ReactDOM.render(
|
||||
<br /><br />
|
||||
<CheckboxGroup options={optionsWithDisabled} disabled defaultValue={['Apple']} onChange={onChange} />
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -36,5 +36,6 @@ ReactDOM.render(
|
||||
<p>{text}</p>
|
||||
</Panel>
|
||||
</Collapse>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -40,7 +40,8 @@ ReactDOM.render(
|
||||
<p>{text}</p>
|
||||
</Panel>
|
||||
</Collapse>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
||||
<style>
|
||||
|
@ -38,5 +38,6 @@ ReactDOM.render(
|
||||
{text}
|
||||
</Panel>
|
||||
</Collapse>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -44,5 +44,6 @@ ReactDOM.render(
|
||||
<p>{text}</p>
|
||||
</Panel>
|
||||
</Collapse>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -44,5 +44,6 @@ ReactDOM.render(
|
||||
<p>{text}</p>
|
||||
</Panel>
|
||||
</Collapse>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -37,5 +37,6 @@ ReactDOM.render(
|
||||
<p>{text}</p>
|
||||
</Panel>
|
||||
</Collapse>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -80,16 +80,17 @@ describe('DatePicker', () => {
|
||||
onChange = (value) => {
|
||||
let { cleared } = this.state;
|
||||
|
||||
let newValue = value;
|
||||
if (cleared) {
|
||||
value = moment(moment(value).format('YYYY-MM-DD 12:12:12'));
|
||||
newValue = moment(moment(value).format('YYYY-MM-DD 12:12:12'));
|
||||
cleared = false;
|
||||
}
|
||||
|
||||
if (!value) {
|
||||
if (!newValue) {
|
||||
cleared = true;
|
||||
}
|
||||
|
||||
this.setState({ value, cleared });
|
||||
this.setState({ value: newValue, cleared });
|
||||
}
|
||||
|
||||
render() {
|
||||
|
@ -83,7 +83,13 @@ describe('RangePicker with showTime', () => {
|
||||
const onChangeFn = jest.fn();
|
||||
const onOpenChangeFn = jest.fn();
|
||||
const wrapper = mount(
|
||||
<RangePicker showTime open onOk={onOkFn} onChange={onChangeFn} onOpenChange={onOpenChangeFn} />
|
||||
<RangePicker
|
||||
showTime
|
||||
open
|
||||
onOk={onOkFn}
|
||||
onChange={onChangeFn}
|
||||
onOpenChange={onOpenChangeFn}
|
||||
/>
|
||||
);
|
||||
|
||||
const calendarWrapper = mount(wrapper.find('Trigger').instance().getComponent());
|
||||
|
@ -32,5 +32,6 @@ ReactDOM.render(
|
||||
<br />
|
||||
<WeekPicker onChange={onChange} placeholder="Select week" />
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -49,5 +49,6 @@ ReactDOM.render(
|
||||
}}
|
||||
/>
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -31,5 +31,6 @@ ReactDOM.render(
|
||||
disabled
|
||||
/>
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -26,5 +26,6 @@ ReactDOM.render(
|
||||
<RangePicker renderExtraFooter={() => 'extra footer'} showTime />
|
||||
<MonthPicker renderExtraFooter={() => 'extra footer'} placeholder="Select month" />
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -32,5 +32,6 @@ ReactDOM.render(
|
||||
format={dateFormat}
|
||||
/>
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -79,5 +79,6 @@ ReactDOM.render(
|
||||
<br />
|
||||
<ControlledRangePicker />
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -42,5 +42,6 @@ ReactDOM.render(
|
||||
<br />
|
||||
<WeekPicker suffixIcon="ab" onChange={onChange} placeholder="Select week" />
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -45,5 +45,6 @@ ReactDOM.render(
|
||||
onOk={onOk}
|
||||
/>
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -26,5 +26,6 @@ ReactDOM.render(
|
||||
<Divider dashed />
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -23,5 +23,6 @@ ReactDOM.render(
|
||||
<Divider orientation="right">Right Text</Divider>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -24,5 +24,6 @@ ReactDOM.render(
|
||||
<Divider type="vertical" />
|
||||
<a href="#">Link</a>
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -14,7 +14,9 @@ title:
|
||||
A drawer containing an editable form which needs to be collapsed by clicking the close button.
|
||||
|
||||
```jsx
|
||||
import { Drawer, Form, Button, Col, Row, Input, Select, DatePicker } from 'antd';
|
||||
import {
|
||||
Drawer, Form, Button, Col, Row, Input, Select, DatePicker,
|
||||
} from 'antd';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
|
@ -14,7 +14,9 @@ title:
|
||||
Use when you need to quickly preview the outline of the object. Such as list item preview.
|
||||
|
||||
```jsx
|
||||
import { Drawer, List, Avatar, Divider, Col, Row } from 'antd';
|
||||
import {
|
||||
Drawer, List, Avatar, Divider, Col, Row,
|
||||
} from 'antd';
|
||||
|
||||
const pStyle = {
|
||||
fontSize: 16,
|
||||
|
@ -36,5 +36,6 @@ ReactDOM.render(
|
||||
Hover me <Icon type="down" />
|
||||
</a>
|
||||
</Dropdown>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -28,5 +28,6 @@ ReactDOM.render(
|
||||
<Dropdown overlay={menu} trigger={['contextMenu']}>
|
||||
<span style={{ userSelect: 'none' }}>Right Click on Me</span>
|
||||
</Dropdown>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -14,7 +14,9 @@ title:
|
||||
A button is on the left, and a related functional menu is on the right.
|
||||
|
||||
````jsx
|
||||
import { Menu, Dropdown, Button, Icon, message } from 'antd';
|
||||
import {
|
||||
Menu, Dropdown, Button, Icon, message,
|
||||
} from 'antd';
|
||||
|
||||
function handleButtonClick(e) {
|
||||
message.info('Click on left button.');
|
||||
@ -53,5 +55,6 @@ ReactDOM.render(
|
||||
</Button>
|
||||
</Dropdown>
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -14,9 +14,11 @@ title:
|
||||
An event will be triggered when you click menu items, in which you can make different operations according to item's key.
|
||||
|
||||
````jsx
|
||||
import { Menu, Dropdown, Icon, message } from 'antd';
|
||||
import {
|
||||
Menu, Dropdown, Icon, message,
|
||||
} from 'antd';
|
||||
|
||||
const onClick = function ({ key }) {
|
||||
const onClick = ({ key }) => {
|
||||
message.info(`Click on item ${key}`);
|
||||
};
|
||||
|
||||
@ -34,5 +36,6 @@ ReactDOM.render(
|
||||
Hover me, Click menu item <Icon type="down" />
|
||||
</a>
|
||||
</Dropdown>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -35,5 +35,6 @@ ReactDOM.render(
|
||||
Hover me <Icon type="down" />
|
||||
</a>
|
||||
</Dropdown>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -40,7 +40,8 @@ class OverlayVisible extends React.Component {
|
||||
</Menu>
|
||||
);
|
||||
return (
|
||||
<Dropdown overlay={menu}
|
||||
<Dropdown
|
||||
overlay={menu}
|
||||
onVisibleChange={this.handleVisibleChange}
|
||||
visible={this.state.visible}
|
||||
>
|
||||
|
@ -52,7 +52,8 @@ ReactDOM.render(
|
||||
<Button>topRight</Button>
|
||||
</Dropdown>
|
||||
</div>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
||||
````css
|
||||
|
@ -39,5 +39,6 @@ ReactDOM.render(
|
||||
Cascading menu <Icon type="down" />
|
||||
</a>
|
||||
</Dropdown>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -35,5 +35,6 @@ ReactDOM.render(
|
||||
Click me <Icon type="down" />
|
||||
</a>
|
||||
</Dropdown>,
|
||||
mountNode);
|
||||
mountNode
|
||||
);
|
||||
````
|
||||
|
@ -32,7 +32,7 @@ describe('Form', () => {
|
||||
}
|
||||
const Wrapped = Form.create()(TestForm);
|
||||
let form;
|
||||
mount(<Wrapped wrappedComponentRef={node => form = node} />);
|
||||
mount(<Wrapped wrappedComponentRef={(node) => { form = node; }} />);
|
||||
expect(form).toBeInstanceOf(TestForm);
|
||||
});
|
||||
});
|
||||
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user