mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 09:26:06 +08:00
style: enable react/prefer-stateless-function in demo
This commit is contained in:
parent
9d696f97bd
commit
12331ea57c
@ -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,
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -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}>
|
||||
|
@ -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}>
|
||||
|
@ -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}>
|
||||
|
@ -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);
|
||||
````
|
||||
|
@ -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);
|
||||
````
|
||||
|
Loading…
Reference in New Issue
Block a user