refactor(Components): use a class if there are event handlers

src/collections/Breadcrumb/BreadcrumbSection.js

@@ -1,5 +1,5 @@
 import cx from 'classnames'
-import React, { PropTypes } from 'react'
+import React, { Component, PropTypes } from 'react'
 
 import {
   customPropTypes,
@@ -10,64 +10,70 @@ import {
 } from '../../lib'
 
 /**
- * A section sub-component for Breadcrumb component.
+ * A section sub-component for Breadcrumb component
  */
-function BreadcrumbSection(props) {
-  const { active, children, className, href, link, onClick } = props
-  const classes = cx(
-    useKeyOnly(active, 'active'),
-    className,
-    'section',
-  )
-  const rest = getUnhandledProps(BreadcrumbSection, props)
-  const ElementType = getElementType(BreadcrumbSection, props, () => {
-    if (link || onClick) return 'a'
-  })
+export default class BreadcrumbSection extends Component {
+  static propTypes = {
+    /** An element type to render as (string or function). */
+    as: customPropTypes.as,
 
-  const handleClick = (e) => {
-    if (onClick) onClick(e)
-  }
+    /** Style as the currently active section. */
+    active: PropTypes.bool,
 
-  return (
-    <ElementType {...rest} className={classes} href={href} onClick={handleClick}>
-      {children}
-    </ElementType>
-  )
-}
+    /** Primary content of the Breadcrumb.Section. */
+    children: PropTypes.node,
 
-BreadcrumbSection._meta = {
-  name: 'BreadcrumbSection',
-  type: META.TYPES.COLLECTION,
-  parent: 'Breadcrumb',
-}
+    /** Classes that will be added to the BreadcrumbSection className. */
+    className: PropTypes.string,
+
+    /** Render as an `a` tag instead of a `div`. */
+    link: customPropTypes.every([
+      customPropTypes.disallow(['href']),
+      PropTypes.bool,
+    ]),
+
+    /** Render as an `a` tag instead of a `div` and adds the href attribute. */
+    href: customPropTypes.every([
+      customPropTypes.disallow(['link']),
+      PropTypes.string,
+    ]),
 
-BreadcrumbSection.propTypes = {
-  /** An element type to render as (string or function). */
-  as: customPropTypes.as,
+    /** Render as an `a` tag instead of a `div` and called with event on Section click. */
+    onClick: PropTypes.func,
+  }
 
-  /** Style as the currently active section. */
-  active: PropTypes.bool,
+  static _meta = {
+    name: 'BreadcrumbSection',
+    type: META.TYPES.COLLECTION,
+    parent: 'Breadcrumb',
+  }
 
-  /** Primary content of the Breadcrumb.Section. */
-  children: PropTypes.node,
+  handleClick = (e) => {
+    const { onClick } = this.props
 
-  /** Classes that will be added to the BreadcrumbSection className. */
-  className: PropTypes.string,
+    if (onClick) onClick(e)
+  }
 
-  /** Render as an `a` tag instead of a `div`. */
-  link: customPropTypes.every([
-    customPropTypes.disallow(['href']),
-    PropTypes.bool,
-  ]),
+  render() {
+    const {
+      active,
+      children,
+      className,
+      href,
+      link,
+      onClick,
+    } = this.props
 
-  /** Render as an `a` tag instead of a `div` and adds the href attribute. */
-  href: customPropTypes.every([
-    customPropTypes.disallow(['link']),
-    PropTypes.string,
-  ]),
+    const classes = cx(
+      useKeyOnly(active, 'active'),
+      'section',
+      className,
+    )
+    const rest = getUnhandledProps(BreadcrumbSection, this.props)
+    const ElementType = getElementType(BreadcrumbSection, this.props, () => {
+      if (link || onClick) return 'a'
+    })
 
-  /** Render as an `a` tag instead of a `div` and called with event on Section click. */
-  onClick: PropTypes.func,
+    return <ElementType {...rest} className={classes} href={href} onClick={this.handleClick}>{children}</ElementType>
+  }
 }
-
-export default BreadcrumbSection

src/collections/Form/Form.js

@@ -1,6 +1,6 @@
-import cx from 'classnames'
 import _ from 'lodash'
-import React, { PropTypes } from 'react'
+import cx from 'classnames'
+import React, { Component, PropTypes } from 'react'
 
 import {
   customPropTypes,
@@ -156,6 +156,15 @@ function formSerializer(formNode) {
   return json
 }
 
+const _meta = {
+  name: 'Form',
+  type: META.TYPES.COLLECTION,
+  props: {
+    widths: ['equal'],
+    size: _.without(SUI.SIZES, 'medium'),
+  },
+}
+
 /**
  * A Form displays a set of related user input fields in a structured way.
  * @see Button
@@ -167,96 +176,99 @@ function formSerializer(formNode) {
  * @see Select
  * @see TextArea
  */
-function Form(props) {
-  const { children, className, error, loading, onSubmit, size, success, warning, widths } = props
-  const classes = cx(
-    'ui',
-    size,
-    useKeyOnly(loading, 'loading'),
-    useKeyOnly(success, 'success'),
-    useKeyOnly(error, 'error'),
-    useKeyOnly(warning, 'warning'),
-    useWidthProp(widths, null, true),
-    'form',
-    className,
-  )
-  const rest = getUnhandledProps(Form, props)
-  const ElementType = getElementType(Form, props)
-  let _form
-
-  const handleSubmit = (e) => {
-    if (onSubmit) onSubmit(e, props.serializer(_form))
+export default class Form extends Component {
+  static defaultProps = {
+    as: 'form',
+    serializer: formSerializer,
   }
 
-  return (
-    <ElementType
-      {...rest}
-      className={classes}
-      onSubmit={handleSubmit}
-      ref={(c) => (_form = _form || c)}
-    >
-      {children}
-    </ElementType>
-  )
-}
+  static propTypes = {
+    /** An element type to render as (string or function). */
+    as: customPropTypes.as,
 
-Form.Field = FormField
-Form.Button = FormButton
-Form.Checkbox = FormCheckbox
-Form.Dropdown = FormDropdown
-Form.Group = FormGroup
-Form.Input = FormInput
-Form.Radio = FormRadio
-Form.Select = FormSelect
-Form.TextArea = FormTextArea
-
-Form._meta = {
-  name: 'Form',
-  type: META.TYPES.COLLECTION,
-  props: {
-    widths: ['equal'],
-    size: _.without(SUI.SIZES, 'medium'),
-  },
-}
+    /** Primary content */
+    children: PropTypes.node,
 
-Form.propTypes = {
-  /** An element type to render as (string or function). */
-  as: customPropTypes.as,
+    /** Additional classes */
+    className: PropTypes.string,
 
-  /** Primary content */
-  children: PropTypes.node,
+    /** Automatically show any error Message children */
+    error: PropTypes.bool,
 
-  /** Additional classes */
-  className: PropTypes.string,
+    /** Automatically show a loading indicator */
+    loading: PropTypes.bool,
 
-  /** Automatically show a loading indicator */
-  loading: PropTypes.bool,
+    /** Called with (event, jsonSerializedForm) on submit */
+    onSubmit: PropTypes.func,
 
-  /** Automatically show any success Message children */
-  success: PropTypes.bool,
+    /** Called onSubmit with the form node that returns the serialized form object */
+    serializer: PropTypes.func,
 
-  /** Automatically show any error Message children */
-  error: PropTypes.bool,
+    /** A form can vary in size */
+    size: PropTypes.oneOf(_meta.props.size),
 
-  /** Automatically show any warning Message children */
-  warning: PropTypes.bool,
+    /** Automatically show any success Message children */
+    success: PropTypes.bool,
 
-  /** A form can vary in size */
-  size: PropTypes.oneOf(Form._meta.props.size),
+    /** Automatically show any warning Message children */
+    warning: PropTypes.bool,
 
-  /** Forms can automatically divide fields to be equal width */
-  widths: PropTypes.oneOf(Form._meta.props.widths),
+    /** Forms can automatically divide fields to be equal width */
+    widths: PropTypes.oneOf(_meta.props.widths),
+  }
 
-  /** Called onSubmit with the form node that returns the serialized form object */
-  serializer: PropTypes.func,
+  static _meta = _meta
 
-  /** Called with (event, jsonSerializedForm) on submit */
-  onSubmit: PropTypes.func,
-}
+  static Field = FormField
+  static Button = FormButton
+  static Checkbox = FormCheckbox
+  static Dropdown = FormDropdown
+  static Group = FormGroup
+  static Input = FormInput
+  static Radio = FormRadio
+  static Select = FormSelect
+  static TextArea = FormTextArea
 
-Form.defaultProps = {
-  as: 'form',
-  serializer: formSerializer,
-}
+  _form = null
 
-export default Form
+  handleRef = (c) => (this._form = this._form || c)
+
+  handleSubmit = (e) => {
+    const { onSubmit, serializer } = this.props
+
+    if (onSubmit) onSubmit(e, serializer(this._form))
+  }
+
+  render() {
+    const {
+      children,
+      className,
+      error,
+      loading,
+      size,
+      success,
+      warning,
+      widths,
+    } = this.props
+
+    const classes = cx(
+      'ui',
+      size,
+      useKeyOnly(loading, 'loading'),
+      useKeyOnly(success, 'success'),
+      useKeyOnly(error, 'error'),
+      useKeyOnly(warning, 'warning'),
+      useWidthProp(widths, null, true),
+      'form',
+      className,
+    )
+    const rest = getUnhandledProps(Form, this.props)
+    const ElementType = getElementType(Form, this.props)
+
+    return (
+      <ElementType {...rest} className={classes} ref={this.handleRef} onSubmit={this.handleSubmit}>
+        {children}
+      </ElementType>
+    )
+  }
+}