style: enable react/prefer-stateless-function in demo

This commit is contained in:
Benjy Cui 2016-04-21 11:36:51 +08:00
parent 9d696f97bd
commit 12331ea57c
6 changed files with 134 additions and 153 deletions

View File

@ -50,7 +50,6 @@ if (process.env.ANTD === 'DEMO') {
'prefer-rest-params': 0,
'react/no-multi-comp': 0,
'react/prefer-es6-class': 0,
'react/prefer-stateless-function': 0,
});
}

View File

@ -11,43 +11,39 @@ const ReactRouter = require('react-router');
let { Router, Route, Link, hashHistory } = ReactRouter;
import { Breadcrumb } from 'antd';
const Apps = React.createClass({
render() {
return (
<ul className="app-list">
<li>
<Link to="/apps/1">应用1</Link><Link to="/apps/1/detail">详情</Link>
</li>
<li>
<Link to="/apps/2">应用2</Link><Link to="/apps/2/detail">详情</Link>
</li>
</ul>
);
}
});
function Apps() {
return (
<ul className="app-list">
<li>
<Link to="/apps/1">应用1</Link><Link to="/apps/1/detail">详情</Link>
</li>
<li>
<Link to="/apps/2">应用2</Link><Link to="/apps/2/detail">详情</Link>
</li>
</ul>
);
}
const Home = React.createClass({
render() {
return (
<div>
<div className="demo-nav">
<Link to="/">首页</Link>
<Link to="/apps">应用列表</Link>
</div>
{this.props.children || 'Home'}
<div style={{
marginBottom: 15,
marginTop: 15,
paddingBottom: 15,
borderBottom: '1px dashed #ccc'
}}>
点击上面的导航切换页面,面包屑在下面:
</div>
<Breadcrumb {...this.props} />
function Home(props) {
return (
<div>
<div className="demo-nav">
<Link to="/">首页</Link>
<Link to="/apps">应用列表</Link>
</div>
);
}
});
{props.children || 'Home'}
<div style={{
marginBottom: 15,
marginTop: 15,
paddingBottom: 15,
borderBottom: '1px dashed #ccc'
}}>
点击上面的导航切换页面,面包屑在下面:
</div>
<Breadcrumb {...props} />
</div>
);
}
ReactDOM.render(
<Router history={hashHistory}>

View File

@ -9,15 +9,13 @@ title: 国际化
import { Pagination, LocaleProvider } from 'antd';
import enUS from 'antd/lib/locale-provider/en_US';
const App = React.createClass({
render() {
return (
<div>
<Pagination defaultCurrent={1} total={50} showSizeChanger />
</div>
);
}
});
function App() {
return (
<div>
<Pagination defaultCurrent={1} total={50} showSizeChanger />
</div>
);
}
ReactDOM.render(
<LocaleProvider locale={enUS}>

View File

@ -11,114 +11,106 @@ const ReactRouter = require('react-router');
let { Router, Route, Link, hashHistory } = ReactRouter;
import { QueueAnim, Menu } from 'antd';
const App = React.createClass({
render() {
const key = this.props.location.pathname;
const keys = key.replace('/', '') ? [key.replace('/', '')] : ['home'];
return (
<div>
<Menu style={{ marginBottom: 10 }} mode="horizontal" selectedKeys={keys}>
<Menu.Item key="home">
<Link to="/">首页</Link>
</Menu.Item>
<Menu.Item key="page1">
<Link to="/page1">Page 1</Link>
</Menu.Item>
<Menu.Item key="page2">
<Link to="/page2">Page 2</Link>
</Menu.Item>
</Menu>
<QueueAnim type={['right', 'left']} className="demo-router-wrap">
{React.cloneElement(this.props.children || <Home />, { key })}
</QueueAnim>
</div>
);
}
});
function App(props) {
const key = props.location.pathname;
const keys = key.replace('/', '') ? [key.replace('/', '')] : ['home'];
return (
<div>
<Menu style={{ marginBottom: 10 }} mode="horizontal" selectedKeys={keys}>
<Menu.Item key="home">
<Link to="/">首页</Link>
</Menu.Item>
<Menu.Item key="page1">
<Link to="/page1">Page 1</Link>
</Menu.Item>
<Menu.Item key="page2">
<Link to="/page2">Page 2</Link>
</Menu.Item>
</Menu>
<QueueAnim type={['right', 'left']} className="demo-router-wrap">
{React.cloneElement(props.children || <Home />, { key })}
</QueueAnim>
</div>
);
}
const Home = React.createClass({
render() {
return (
<div className="demo-router-child">
<QueueAnim className="demo-content">
<div className="demo-kp" key="a">
<QueueAnim component="ul">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
</QueueAnim>
</div>
<div className="demo-kp" key="b">
<QueueAnim component="ul">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
</QueueAnim>
</div>
<div className="demo-kp" key="c">
<QueueAnim component="ul">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
</QueueAnim>
</div>
</QueueAnim>
</div>
);
}
});
function Home() {
return (
<div className="demo-router-child">
<QueueAnim className="demo-content">
<div className="demo-kp" key="a">
<QueueAnim component="ul">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
</QueueAnim>
</div>
<div className="demo-kp" key="b">
<QueueAnim component="ul">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
</QueueAnim>
</div>
<div className="demo-kp" key="c">
<QueueAnim component="ul">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
</QueueAnim>
</div>
</QueueAnim>
</div>
);
}
const Page1 = React.createClass({
render() {
return (
<div className="demo-router-child">
<QueueAnim className="demo-content">
<div className="demo-kp" key="b">
<QueueAnim component="ul">
function Page1() {
return (
<div className="demo-router-child">
<QueueAnim className="demo-content">
<div className="demo-kp" key="b">
<QueueAnim component="ul">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
</QueueAnim>
</div>
<div className="demo-listBox">
<QueueAnim className="demo-list" delay={200}>
<div className="title" key="title3"></div>
<QueueAnim component="ul" animConfig={{ opacity: [1, 0], translateY: [0, 30], scale: [1, 0.9] }} key="ul">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
</QueueAnim>
</div>
<div className="demo-listBox">
<QueueAnim className="demo-list" delay={200}>
<div className="title" key="title3"></div>
<QueueAnim component="ul" animConfig={{ opacity: [1, 0], translateY: [0, 30], scale: [1, 0.9] }} key="ul">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
</QueueAnim>
</QueueAnim>
</div>
</QueueAnim>
</div>
);
}
});
</QueueAnim>
</div>
</QueueAnim>
</div>
);
}
const Page2 = React.createClass({
render() {
return (
<div className="demo-router-child">
<div className="demo-content">
<div className="demo-listBox">
<QueueAnim className="demo-list">
<div className="title" key="title3"></div>
<QueueAnim component="ul" animConfig={{ opacity: [1, 0], translateY: [0, 30], scale: [1, 0.9] }} key="li">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
<li key="3"></li>
<li key="4"></li>
<li key="5"></li>
</QueueAnim>
function Page2() {
return (
<div className="demo-router-child">
<div className="demo-content">
<div className="demo-listBox">
<QueueAnim className="demo-list">
<div className="title" key="title3"></div>
<QueueAnim component="ul" animConfig={{ opacity: [1, 0], translateY: [0, 30], scale: [1, 0.9] }} key="li">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
<li key="3"></li>
<li key="4"></li>
<li key="5"></li>
</QueueAnim>
</div>
</QueueAnim>
</div>
</div>
);
}
});
</div>
);
}
ReactDOM.render((
<Router history={hashHistory}>

View File

@ -40,11 +40,9 @@ for (let i = 0; i < 100; i++) {
});
}
const App = React.createClass({
render() {
return <Table columns={columns} dataSource={data} scroll={{ x: 1000, y: 300 }} />;
}
});
function App() {
return <Table columns={columns} dataSource={data} scroll={{ x: 1000, y: 300 }} />;
}
ReactDOM.render(<App />, mountNode);
````

View File

@ -40,11 +40,9 @@ const data = [{
age: 42,
}];
const App = React.createClass({
render() {
return <Table columns={columns} dataSource={data} scroll={{ x: 1000 }} />;
}
});
function App() {
return <Table columns={columns} dataSource={data} scroll={{ x: 1000 }} />;
}
ReactDOM.render(<App />, mountNode);
````