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, 'prefer-rest-params': 0,
'react/no-multi-comp': 0, 'react/no-multi-comp': 0,
'react/prefer-es6-class': 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; let { Router, Route, Link, hashHistory } = ReactRouter;
import { Breadcrumb } from 'antd'; import { Breadcrumb } from 'antd';
const Apps = React.createClass({ function Apps() {
render() { return (
return ( <ul className="app-list">
<ul className="app-list"> <li>
<li> <Link to="/apps/1">应用1</Link><Link to="/apps/1/detail">详情</Link>
<Link to="/apps/1">应用1</Link><Link to="/apps/1/detail">详情</Link> </li>
</li> <li>
<li> <Link to="/apps/2">应用2</Link><Link to="/apps/2/detail">详情</Link>
<Link to="/apps/2">应用2</Link><Link to="/apps/2/detail">详情</Link> </li>
</li> </ul>
</ul> );
); }
}
});
const Home = React.createClass({ function Home(props) {
render() { return (
return ( <div>
<div> <div className="demo-nav">
<div className="demo-nav"> <Link to="/">首页</Link>
<Link to="/">首页</Link> <Link to="/apps">应用列表</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} />
</div> </div>
); {props.children || 'Home'}
} <div style={{
}); marginBottom: 15,
marginTop: 15,
paddingBottom: 15,
borderBottom: '1px dashed #ccc'
}}>
点击上面的导航切换页面,面包屑在下面:
</div>
<Breadcrumb {...props} />
</div>
);
}
ReactDOM.render( ReactDOM.render(
<Router history={hashHistory}> <Router history={hashHistory}>

View File

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

View File

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

View File

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

View File

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