Stateless components

commit d5cfe08 Author: John Benavides <john@mailtrack.io> Date: Tue Jul 3 17:30:55 2018 +0200 change class components for functions
couds · Jul 4, 2018 · f76b247 · f76b247
1 parent d4b62d0
commit f76b247
Show file tree

Hide file tree

Showing 71 changed files with 2,762 additions and 2,992 deletions.
diff --git a/src/components/box/box.js b/src/components/box/box.js
@@ -1,40 +1,39 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-export default class Box extends PureComponent {
-  static propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    style: PropTypes.shape({}),
-    renderAs: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.func,
-    ]),
-  }
+const Box = ({
+  children,
+  className,
+  renderAs,
+  ...props
+}) => {
+  const Element = renderAs;
+  return (
+    <Element
+      {...props}
+      className={classnames('box', className)}
+    >
+      {children}
+    </Element>
+  );
+};
 
-  static defaultProps = {
-    children: null,
-    className: '',
-    style: {},
-    renderAs: 'div',
-  }
+Box.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  style: PropTypes.shape({}),
+  renderAs: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+  ]),
+};
 
-  render() {
-    const {
-      children,
-      className,
-      renderAs,
-      ...props
-    } = this.props;
-    const Element = renderAs;
-    return (
-      <Element
-        {...props}
-        className={classnames('box', className)}
-      >
-        {children}
-      </Element>
-    );
-  }
-}
+Box.defaultProps = {
+  children: null,
+  className: '',
+  style: {},
+  renderAs: 'div',
+};
+
+export default Box;
diff --git a/src/components/breadcrumb/breadcrumb.js b/src/components/breadcrumb/breadcrumb.js
@@ -1,60 +1,29 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-export default class Breadcrumb extends PureComponent {
-  static propTypes = {
-    className: PropTypes.string,
-    style: PropTypes.shape({}),
-    separator: PropTypes.oneOf(['arrow', 'bullet', 'dot', 'succeeds']),
-    size: PropTypes.oneOf(['small', 'medium', 'large']),
-    align: PropTypes.oneOf(['right', 'center']),
-    items: PropTypes.arrayOf(PropTypes.shape({
-      url: PropTypes.string.isRequired,
-      active: PropTypes.bool,
-      name: PropTypes.node,
-    })),
-    renderAs: PropTypes.oneOfType([
-      PropTypes.oneOf(['a']),
-      PropTypes.func,
-    ]),
-    hrefAttr: PropTypes.string,
-  }
-
-  static defaultProps = {
-    items: [],
-    hrefAttr: null,
-    separator: null,
-    renderAs: 'a',
-    className: '',
-    style: {},
-    size: null,
-    align: null,
-  }
-
-  render() {
-    const {
-      className,
-      items,
-      renderAs,
-      hrefAttr,
-      separator,
-      size,
-      align,
-      ...props
-    } = this.props;
-    const Element = renderAs;
-    return (
-      <nav
-        {...props}
-        className={classnames('breadcrumb', className, {
-          [`has-${separator}-separator`]: separator,
-          [`is-${size}`]: size,
-          [`is-${align}`]: align,
-        })}
-      >
-        <ul>
-          {
+const Breadcrumb = ({
+  className,
+  items,
+  renderAs,
+  hrefAttr,
+  separator,
+  size,
+  align,
+  ...props
+}) => {
+  const Element = renderAs;
+  return (
+    <nav
+      {...props}
+      className={classnames('breadcrumb', className, {
+        [`has-${separator}-separator`]: separator,
+        [`is-${size}`]: size,
+        [`is-${align}`]: align,
+      })}
+    >
+      <ul>
+        {
             items.map((item) => {
               const p = {
                 [renderAs === 'a' ? 'href' : hrefAttr]: item.url,
@@ -73,8 +42,38 @@ export default class Breadcrumb extends PureComponent {
               );
             })
           }
-        </ul>
-      </nav>
-    );
-  }
-}
+      </ul>
+    </nav>
+  );
+};
+
+Breadcrumb.propTypes = {
+  className: PropTypes.string,
+  style: PropTypes.shape({}),
+  separator: PropTypes.oneOf(['arrow', 'bullet', 'dot', 'succeeds']),
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  align: PropTypes.oneOf(['right', 'center']),
+  items: PropTypes.arrayOf(PropTypes.shape({
+    url: PropTypes.string.isRequired,
+    active: PropTypes.bool,
+    name: PropTypes.node,
+  })),
+  renderAs: PropTypes.oneOfType([
+    PropTypes.oneOf(['a']),
+    PropTypes.func,
+  ]),
+  hrefAttr: PropTypes.string,
+};
+
+Breadcrumb.defaultProps = {
+  items: [],
+  hrefAttr: null,
+  separator: null,
+  renderAs: 'a',
+  className: '',
+  style: {},
+  size: null,
+  align: null,
+};
+
+export default Breadcrumb;