style: enable react/prefer-stateless-function

.eslintrc.js

@@ -29,7 +29,6 @@ const eslintrc = {
     'arrow-body-style': 0,
     'react/sort-comp': 0,
     'react/prop-types': 0,
-    'react/prefer-stateless-function': 0,
     'react/jsx-closing-bracket-location': 0,
     'no-param-reassign': 0,
     'no-return-assign': 0,
@@ -51,6 +50,7 @@ if (process.env.ANTD === 'DEMO') {
     'prefer-rest-params': 0,
     'react/no-multi-comp': 0,
     'react/prefer-es6-class': 0,
+    'react/prefer-stateless-function': 0,
   });
 }
 

components/button/button-group.jsx

@@ -3,27 +3,25 @@ import classNames from 'classnames';
 
 const prefix = 'ant-btn-group-';
 
-export default class ButtonGroup extends React.Component {
-  static propTypes = {
-    size: React.PropTypes.oneOf(['large', 'small']),
-  }
+export default function ButtonGroup(props) {
+  const { size, className, ...others } = props;
 
-  render() {
-    const { size, className, ...others } = this.props;
+  // large => lg
+  // small => sm
+  const sizeCls = ({
+    large: 'lg',
+    small: 'sm',
+  })[size] || '';
 
-    // large => lg
-    // small => sm
-    const sizeCls = ({
-      large: 'lg',
-      small: 'sm',
-    })[size] || '';
+  const classes = classNames({
+    'ant-btn-group': true,
+    [prefix + sizeCls]: sizeCls,
+    [className]: className
+  });
 
-    const classes = classNames({
-      'ant-btn-group': true,
-      [prefix + sizeCls]: sizeCls,
-      [className]: className
-    });
-
-    return <div {...others} className={classes} />;
-  }
+  return <div {...others} className={classes} />;
 }
+
+ButtonGroup.propTypes = {
+  size: React.PropTypes.oneOf(['large', 'small']),
+};

components/input/Group.jsx

@@ -1,20 +1,18 @@
 import React from 'react';
 import classNames from 'classnames';
 
-export default class Group extends React.Component {
-  static propTypes = {
-    children: React.PropTypes.any,
-  }
-
-  render() {
-    const className = classNames({
-      'ant-input-group': true,
-      [this.props.className]: !!this.props.className,
-    });
-    return (
-      <span className={className} style={this.props.style}>
-        {this.props.children}
-      </span>
-    );
-  }
+export default function Group(props) {
+  const className = classNames({
+    'ant-input-group': true,
+    [props.className]: !!props.className,
+  });
+  return (
+    <span className={className} style={props.style}>
+      {props.children}
+    </span>
+  );
 }
+
+Group.propTypes = {
+  children: React.PropTypes.any,
+};

components/layout/col.jsx

@@ -4,50 +4,48 @@ import classNames from 'classnames';
 const stringOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
 const objectOrNumber = PropTypes.oneOfType([PropTypes.object, PropTypes.number]);
 
-export default class Col extends React.Component {
-  static propTypes = {
-    span: stringOrNumber,
-    order: stringOrNumber,
-    offset: stringOrNumber,
-    push: stringOrNumber,
-    pull: stringOrNumber,
-    className: PropTypes.string,
-    children: PropTypes.node,
-    xs: objectOrNumber,
-    sm: objectOrNumber,
-    md: objectOrNumber,
-    lg: objectOrNumber,
-  }
-  render() {
-    const props = this.props;
-    const { span, order, offset, push, pull, className, children, ...others } = props;
-    let sizeClassObj = {};
-    ['xs', 'sm', 'md', 'lg'].forEach(size => {
-      let sizeProps = {};
-      if (typeof props[size] === 'number') {
-        sizeProps.span = props[size];
-      } else if (typeof props[size] === 'object') {
-        sizeProps = props[size] || {};
-      }
-      sizeClassObj = {
-        ...sizeClassObj,
-        [`col-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
-        [`col-${size}-order-${sizeProps.order}`]: sizeProps.order,
-        [`col-${size}-offset-${sizeProps.offset}`]: sizeProps.offset,
-        [`col-${size}-push-${sizeProps.push}`]: sizeProps.push,
-        [`col-${size}-pull-${sizeProps.pull}`]: sizeProps.pull,
-      };
-    });
-    const classes = classNames({
-      [`col-${span}`]: span !== undefined,
-      [`col-order-${order}`]: order,
-      [`col-offset-${offset}`]: offset,
-      [`col-push-${push}`]: push,
-      [`col-pull-${pull}`]: pull,
-      [className]: !!className,
+export default function Col(props) {
+  const { span, order, offset, push, pull, className, children, ...others } = props;
+  let sizeClassObj = {};
+  ['xs', 'sm', 'md', 'lg'].forEach(size => {
+    let sizeProps = {};
+    if (typeof props[size] === 'number') {
+      sizeProps.span = props[size];
+    } else if (typeof props[size] === 'object') {
+      sizeProps = props[size] || {};
+    }
+    sizeClassObj = {
       ...sizeClassObj,
-    });
+      [`col-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
+      [`col-${size}-order-${sizeProps.order}`]: sizeProps.order,
+      [`col-${size}-offset-${sizeProps.offset}`]: sizeProps.offset,
+      [`col-${size}-push-${sizeProps.push}`]: sizeProps.push,
+      [`col-${size}-pull-${sizeProps.pull}`]: sizeProps.pull,
+    };
+  });
+  const classes = classNames({
+    [`col-${span}`]: span !== undefined,
+    [`col-order-${order}`]: order,
+    [`col-offset-${offset}`]: offset,
+    [`col-push-${push}`]: push,
+    [`col-pull-${pull}`]: pull,
+    [className]: !!className,
+    ...sizeClassObj,
+  });
 
-    return <div {...others} className={classes}>{children}</div>;
-  }
+  return <div {...others} className={classes}>{children}</div>;
 }
+
+Col.propTypes = {
+  span: stringOrNumber,
+  order: stringOrNumber,
+  offset: stringOrNumber,
+  push: stringOrNumber,
+  pull: stringOrNumber,
+  className: PropTypes.string,
+  children: PropTypes.node,
+  xs: objectOrNumber,
+  sm: objectOrNumber,
+  md: objectOrNumber,
+  lg: objectOrNumber,
+};

site/component/Home/Page1.jsx

@@ -17,26 +17,24 @@ function onScrollEvent(e) {
   }
 }
 
-export default class Page1 extends React.Component {
-  render() {
-    return (
-      <ScrollOverPack scrollName="page1" className="content-wrapper page" playScale={1} replay scrollEvent={onScrollEvent}>
-        <TweenOne key="image" className="image1 image-wrapper" animation={{ x: 0, opacity: 1, duration: 550 }}
-          style={{ transform: 'translateX(-100px)', opacity: 0 }} hideProps={{ reverse: true }} />
-          <QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse
-            hideProps={{ child: null }}>
-            <h2 key="h2">最佳实践</h2>
-            <p key="p" style={{ maxWidth: 310 }}>近一年的中后台设计实践，积累了大量的优秀案例。</p>
-            <div key="button">
-              <Link to="/docs/practice/cases">
-                <Button type="primary" size="large">
-                  了解更多
-                  <Icon type="right" />
-                </Button>
-              </Link>
-            </div>
-          </QueueAnim>
-        </ScrollOverPack>
-    );
-  }
+export default function Page1() {
+  return (
+    <ScrollOverPack scrollName="page1" className="content-wrapper page" playScale={1} replay scrollEvent={onScrollEvent}>
+      <TweenOne key="image" className="image1 image-wrapper" animation={{ x: 0, opacity: 1, duration: 550 }}
+        style={{ transform: 'translateX(-100px)', opacity: 0 }} hideProps={{ reverse: true }} />
+      <QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse
+        hideProps={{ child: null }}>
+        <h2 key="h2">最佳实践</h2>
+        <p key="p" style={{ maxWidth: 310 }}>近一年的中后台设计实践，积累了大量的优秀案例。</p>
+        <div key="button">
+          <Link to="/docs/practice/cases">
+            <Button type="primary" size="large">
+              了解更多
+              <Icon type="right" />
+            </Button>
+          </Link>
+        </div>
+      </QueueAnim>
+    </ScrollOverPack>
+  );
 }

site/component/Home/Page2.jsx

@@ -5,27 +5,25 @@ import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack';
 import { Icon, Button } from 'antd';
 import QueueAnim from 'rc-queue-anim';
 
-export default class Page2 extends React.Component {
-  render() {
-    return (
-      <ScrollOverPack scrollName="page2" className="content-wrapper page" playScale={1} replay>
-        <QueueAnim className="text-wrapper left-text" delay={300} key="text" duration={550} type="bottom"
-          leaveReverse
-          hideProps={{ child: null }}>
-          <h2 key="h2">设计模式</h2>
-          <p key="p" style={{ maxWidth: 260 }}>总结中后台设计中反复出现的问题，并提供相应的解决方案。</p>
-          <div key="button">
-            <Link to="/docs/pattern/navigation">
-              <Button type="primary" size="large">
-                了解更多
-                <Icon type="right" />
-              </Button>
-            </Link>
-          </div>
-        </QueueAnim>
-        <TweenOne key="image" className="image2 image-wrapper" animation={{ x: 0, opacity: 1, delay: 300, duration: 550 }}
-          style={{ transform: 'translateX(100px)', opacity: 0 }} hideProps={{ reverse: true }} />
-      </ScrollOverPack>
-    );
-  }
+export default function Page2() {
+  return (
+    <ScrollOverPack scrollName="page2" className="content-wrapper page" playScale={1} replay>
+      <QueueAnim className="text-wrapper left-text" delay={300} key="text" duration={550} type="bottom"
+        leaveReverse
+        hideProps={{ child: null }}>
+        <h2 key="h2">设计模式</h2>
+        <p key="p" style={{ maxWidth: 260 }}>总结中后台设计中反复出现的问题，并提供相应的解决方案。</p>
+        <div key="button">
+          <Link to="/docs/pattern/navigation">
+            <Button type="primary" size="large">
+              了解更多
+              <Icon type="right" />
+            </Button>
+          </Link>
+        </div>
+      </QueueAnim>
+      <TweenOne key="image" className="image2 image-wrapper" animation={{ x: 0, opacity: 1, delay: 300, duration: 550 }}
+        style={{ transform: 'translateX(100px)', opacity: 0 }} hideProps={{ reverse: true }} />
+    </ScrollOverPack>
+  );
 }

site/component/Home/Page3.jsx

@@ -5,26 +5,24 @@ import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack';
 import { Icon, Button } from 'antd';
 import QueueAnim from 'rc-queue-anim';
 
-export default class Page3 extends React.Component {
-  render() {
-    return (
-      <ScrollOverPack scrollName="page3" className="content-wrapper page" playScale={1} replay>
-        <TweenOne key="image" className="image3 image-wrapper" animation={{ x: 0, opacity: 1, duration: 550 }}
-          style={{ transform: 'translateX(-100px)', opacity: 0 }} hideProps={{ reverse: true }} />
-        <QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse style={{ top: '40%' }}
-          hideProps={{ child: null }}>
-          <h2 key="h2">丰富的基础组件</h2>
-          <p key="p" style={{ maxWidth: 280 }}>丰富、灵活、实用的基础组件，为业务产品提供强有力的设计支持。</p>
-          <div key="button">
-            <Link to="/components">
-              <Button type="primary" size="large">
-                了解更多
-                <Icon type="right" />
-              </Button>
-            </Link>
-          </div>
-        </QueueAnim>
-      </ScrollOverPack>
-    );
-  }
+export default function Page3() {
+  return (
+    <ScrollOverPack scrollName="page3" className="content-wrapper page" playScale={1} replay>
+      <TweenOne key="image" className="image3 image-wrapper" animation={{ x: 0, opacity: 1, duration: 550 }}
+        style={{ transform: 'translateX(-100px)', opacity: 0 }} hideProps={{ reverse: true }} />
+      <QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse style={{ top: '40%' }}
+        hideProps={{ child: null }}>
+        <h2 key="h2">丰富的基础组件</h2>
+        <p key="p" style={{ maxWidth: 280 }}>丰富、灵活、实用的基础组件，为业务产品提供强有力的设计支持。</p>
+        <div key="button">
+          <Link to="/components">
+            <Button type="primary" size="large">
+              了解更多
+              <Icon type="right" />
+            </Button>
+          </Link>
+        </div>
+      </QueueAnim>
+    </ScrollOverPack>
+  );
 }

site/component/Home/Page4.jsx

@@ -3,18 +3,16 @@ import TweenOne from 'rc-tween-one';
 import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack';
 import QueueAnim from 'rc-queue-anim';
 
-export default class Page4 extends React.Component {
-  render() {
-    return (
-      <ScrollOverPack scrollName="page4" className="content-wrapper page" playScale={1}>
-        <QueueAnim className="text-wrapper-bottom" delay={300} key="text" duration={550} leaveReverse type="bottom"
-          hideProps={{ child: null }}>
-          <h2 key="h2">微小·确定·幸福</h2>
-          <p key="p">这是一套致力于提升『用户』和『设计者』使用体验的中后台设计语言。</p>
-        </QueueAnim>
-        <TweenOne key="image" className="image4 bottom-wrapper" animation={{ y: 0, opacity: 1, duration: 550, delay: 550 }}
-          style={{ transform: 'translateY(50px)', opacity: 0 }} hideProps={{ reverse: true }} />
-      </ScrollOverPack>
-    );
-  }
+export default function Page4() {
+  return (
+    <ScrollOverPack scrollName="page4" className="content-wrapper page" playScale={1}>
+      <QueueAnim className="text-wrapper-bottom" delay={300} key="text" duration={550} leaveReverse type="bottom"
+        hideProps={{ child: null }}>
+        <h2 key="h2">微小·确定·幸福</h2>
+        <p key="p">这是一套致力于提升『用户』和『设计者』使用体验的中后台设计语言。</p>
+      </QueueAnim>
+      <TweenOne key="image" className="image4 bottom-wrapper" animation={{ y: 0, opacity: 1, duration: 550, delay: 550 }}
+        style={{ transform: 'translateY(50px)', opacity: 0 }} hideProps={{ reverse: true }} />
+    </ScrollOverPack>
+  );
 }

site/component/VideoPlayer/index.jsx

@@ -1,21 +1,18 @@
 import React from 'react';
 import SublimeVideo from 'react-sublime-video';
 
-export default class VideoPlayer extends React.Component {
-  render() {
-    const video = this.props.video;
-    const { alt, description, src } = video;
-    const videoClassName = video.class;
+export default function VideoPlayer({ video }) {
+  const { alt, description, src } = video;
+  const videoClassName = video.class;
 
-    return (
-      <div className={`preview-image-box ${videoClassName}`}>
-        <div className={'preview-image-wrapper'}>
-          <SublimeVideo src={src} type="video/mp4" />
-        </div>
-        <div className="preview-image-title">{alt}</div>
-        <div className="preview-image-description"
-          dangerouslySetInnerHTML={{ __html: description }} />
+  return (
+    <div className={`preview-image-box ${videoClassName}`}>
+      <div className={'preview-image-wrapper'}>
+        <SublimeVideo src={src} type="video/mp4" />
       </div>
-    );
-  }
+      <div className="preview-image-title">{alt}</div>
+      <div className="preview-image-description"
+        dangerouslySetInnerHTML={{ __html: description }} />
+    </div>
+  );
 }