User prop spreading util

.eslintignore

@@ -1,2 +1,3 @@
+coverage/
 dist/*
 docs/build/*

.eslintrc

@@ -4,10 +4,11 @@
     "ta/frontend"
   ],
   "rules": {
+    "complexity": [1, 10],
     "consistent-return": 0,
     "no-confusing-arrow": 0,
     "react/sort-comp": 1,
-    "valid-jsdoc": 1
+    "valid-jsdoc": 0
   },
   "globals": {
     "__DEV__": false,

src/collections/Form/Form.js

@@ -3,42 +3,39 @@ import $ from 'jquery'
 import React, { Component, PropTypes } from 'react'
 import classNames from 'classnames'
 import META from '../../utils/Meta'
-import { getPluginProps, getComponentProps } from '../../utils/propUtils'
+import { getUnhandledProps } from '../../utils/propUtils'
 import { deprecateProps } from '../../utils/deprecate'
 import FormField from './FormField'
 import FormFields from './FormFields'
 
-const pluginPropTypes = {
-  // form settings
-  keyboardShortcuts: PropTypes.bool,
-  on: PropTypes.oneOf([
-    'blur',
-    'change',
-    'submit',
-  ]),
-  revalidate: PropTypes.bool,
-  delay: PropTypes.bool,
-  inline: PropTypes.bool,
-  transition: PropTypes.string,
-  duration: PropTypes.number,
-  // callbacks
-  onValid: PropTypes.func,
-  onInvalid: PropTypes.func,
-  onSuccess: PropTypes.func,
-  onFailure: PropTypes.func,
-  fields: PropTypes.object,
-}
-
 export default class Form extends Component {
   static propTypes = {
-    ...pluginPropTypes,
     children: PropTypes.node,
     className: PropTypes.string,
     settings: PropTypes.shape({
       on: PropTypes.string,
       inline: PropTypes.bool,
       fields: PropTypes.object,
     }),
+
+    // form settings
+    keyboardShortcuts: PropTypes.bool,
+    on: PropTypes.oneOf([
+      'blur',
+      'change',
+      'submit',
+    ]),
+    revalidate: PropTypes.bool,
+    delay: PropTypes.bool,
+    inline: PropTypes.bool,
+    transition: PropTypes.string,
+    duration: PropTypes.number,
+    // callbacks
+    onValid: PropTypes.func,
+    onInvalid: PropTypes.func,
+    onSuccess: PropTypes.func,
+    onFailure: PropTypes.func,
+    fields: PropTypes.object,
   }
 
   static defaultProps = {
@@ -81,7 +78,13 @@ export default class Form extends Component {
 
   refresh() {
     this.element = $(this.refs.element)
-    this.element.form(getPluginProps(this.props, pluginPropTypes))
+    this.element.form(_.pick(this.props, [
+      'keyboardShortcuts',
+      // validation
+      'delay', 'duration', 'fields', 'on', 'inline', 'revalidate', 'transition',
+      // callbacks
+      'onValid', 'onInvalid', 'onSuccess', 'onFailure',
+    ]))
   }
 
   serializeJson = () => {
@@ -120,7 +123,7 @@ export default class Form extends Component {
       this.props.className,
       'form'
     )
-    const props = getComponentProps(this.props, pluginPropTypes)
+    const props = getUnhandledProps(Form, this.props)
     return (
       <form {...props} className={classes} ref='element'>
         {this.props.children}

src/collections/Form/FormFields.js

@@ -1,7 +1,8 @@
 import _ from 'lodash'
 import React, { Children, Component, PropTypes } from 'react'
 import classNames from 'classnames'
-import getUnhandledProps from '../../utils/getUnhandledProps'
+
+import { getUnhandledProps } from '../../utils/propUtils'
 import numberToWord from '../../utils/numberToWord'
 import META from '../../utils/Meta.js'
 
@@ -38,7 +39,7 @@ export default class FormFields extends Component {
       numberToWord(fieldCount),
       'fields'
     )
-    const props = getUnhandledProps(this)
+    const props = getUnhandledProps(FormFields, this.props)
     return (
       <div {...props} className={classes}>
         {this.props.children}

src/elements/Header/HeaderSubheader.js

@@ -1,7 +1,7 @@
 import React, { Component, PropTypes } from 'react'
 import classNames from 'classnames'
 import META from '../../utils/Meta'
-import getUnhandledProps from '../../utils/getUnhandledProps'
+import { getUnhandledProps } from '../../utils/propUtils'
 
 export default class HeaderSubheader extends Component {
   static propTypes = {
@@ -22,7 +22,7 @@ export default class HeaderSubheader extends Component {
       'header',
     )
 
-    const props = getUnhandledProps(this)
+    const props = getUnhandledProps(HeaderSubheader, this.props)
 
     return (
       <div {...props} className={classes}>

src/elements/Input/Input.js

@@ -2,14 +2,15 @@ import _ from 'lodash'
 import classNames from 'classnames'
 import React, { Component, PropTypes, Children } from 'react'
 import META from '../../utils/Meta'
-import getUnhandledProps from '../../utils/getUnhandledProps'
+import { getUnhandledProps } from '../../utils/propUtils'
 import Icon from '../../elements/Icon/Icon'
 
 export default class Input extends Component {
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
     icon: PropTypes.string,
+    type: PropTypes.string,
   }
 
   static defaultProps = {
@@ -23,20 +24,21 @@ export default class Input extends Component {
   }
 
   render() {
+    const { className, children, icon, type } = this.props
     // Semantic supports actions and labels on either side of an input.
     // The element must be on the same side as the indicated class.
     // We first determine the left/right classes for each type of child,
     //   then we extract the children and place them on the correct side
     //   of the input.
-    const isLeftAction = _.includes(this.props.className, 'left action')
-    const isRightAction = !isLeftAction && _.includes(this.props.className, 'action')
-    const isRightLabeled = _.includes(this.props.className, 'right labeled')
-    const isLeftLabeled = !isRightLabeled && _.includes(this.props.className, 'labeled')
+    const isLeftAction = _.includes(className, 'left action')
+    const isRightAction = !isLeftAction && _.includes(className, 'action')
+    const isRightLabeled = _.includes(className, 'right labeled')
+    const isLeftLabeled = !isRightLabeled && _.includes(className, 'labeled')
 
     const labelChildren = []
     const actionChildren = []
 
-    Children.forEach(this.props.children, child => {
+    Children.forEach(children, child => {
       const isButton = child.type.name === 'Button'
       const isDropdown = child.type.name === 'Dropdown'
       // TODO: use child.type.name === 'Label' once Label component is merged.
@@ -50,22 +52,20 @@ export default class Input extends Component {
       }
     })
 
-    const icon = <Icon className={this.props.icon} />
     const classes = classNames(
       'sd-input',
       'ui',
-      this.props.className,
+      className,
       'input'
     )
-    const props = getUnhandledProps(this)
-    delete props.children
+    const props = getUnhandledProps(Input, this.props)
 
     return (
       <div className={classes}>
         {isLeftLabeled && labelChildren}
         {isLeftAction && actionChildren}
-        <input {...props} />
-        {this.props.icon && icon}
+        <input {...props} type={type} />
+        {icon && <Icon className={icon} />}
         {isRightLabeled && labelChildren}
         {isRightAction && actionChildren}
       </div>

src/elements/Segment/SegmentSegments.js

@@ -13,7 +13,7 @@ export default class SegmentSegments extends Component {
      */
     children: customPropTypes.ofComponentTypes([
       'Segment',
-      'Segments',
+      'SegmentSegments',
       'H1', 'H2', 'H3', 'H4', 'H5', 'H6',
       'Subheader',
       'Message',

src/modules/Checkbox/Checkbox.js

@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import META from '../../utils/Meta'
-import getUnhandledProps from '../../utils/getUnhandledProps'
+import { getUnhandledProps } from '../../utils/propUtils'
 import React, { Component, PropTypes } from 'react'
 import classNames from 'classnames'
 import $ from 'jquery'
@@ -54,6 +54,11 @@ export default class Checkbox extends Component {
     type: META.type.module,
   }
 
+  handleChange = (e) => {
+    const { onChange } = this.props
+    if (onChange) onChange(e)
+  }
+
   plugin(...args) {
     return this.element.checkbox(...args)
   }
@@ -72,10 +77,10 @@ export default class Checkbox extends Component {
       { fitted: !this.props.label },
       'checkbox'
     )
-    const props = getUnhandledProps(this)
+    const props = getUnhandledProps(Checkbox, this.props)
     return (
       <div className={classes} ref='element'>
-        <input {...props} type={type} />
+        <input {...props} type={type} onChange={this.handleChange} />
         <label>{this.props.label}</label>
       </div>
     )

src/modules/Progress/Progress.js

@@ -3,36 +3,32 @@ import classNames from 'classnames'
 import React, { Component, PropTypes } from 'react'
 
 import META from '../../utils/Meta'
-import { getPluginProps, getComponentProps } from '../../utils/propUtils'
-
-const pluginPropTypes = {
-  autoSuccess: PropTypes.bool,
-  label: PropTypes.oneOf(['ratio', 'percent']),
-  limitValues: PropTypes.bool,
-  onActive: PropTypes.func,
-  onChange: PropTypes.func,
-  onError: PropTypes.func,
-  onSuccess: PropTypes.func,
-  onWarning: PropTypes.func,
-  percent: PropTypes.number,
-  precision: PropTypes.number,
-  random: PropTypes.bool,
-  showActivity: PropTypes.bool,
-  total: PropTypes.bool,
-  value: PropTypes.bool,
-}
+import { getUnhandledProps } from '../../utils/propUtils'
 
 export default class Progress extends Component {
   static propTypes = {
-    ...pluginPropTypes,
-    onChange: PropTypes.func,
-    onError: PropTypes.func,
     children: PropTypes.node,
     className: PropTypes.string,
     /**
      * Display progress inside the bar.
      */
     showProgress: PropTypes.bool,
+
+    // progress settings
+    autoSuccess: PropTypes.bool,
+    label: PropTypes.oneOf(['ratio', 'percent']),
+    limitValues: PropTypes.bool,
+    onActive: PropTypes.func,
+    onChange: PropTypes.func,
+    onError: PropTypes.func,
+    onSuccess: PropTypes.func,
+    onWarning: PropTypes.func,
+    percent: PropTypes.number,
+    precision: PropTypes.number,
+    random: PropTypes.bool,
+    showActivity: PropTypes.bool,
+    total: PropTypes.bool,
+    value: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -53,41 +49,62 @@ export default class Progress extends Component {
     type: META.type.module,
   }
 
+  handleChange = (e) => {
+    const { onChange } = this.props
+    if (onChange) onChange(e)
+  }
+
+  handleError = (e) => {
+    const { onError } = this.props
+    if (onError) onError(e)
+  }
+
   plugin(...args) {
     return this.element.progress(...args)
   }
 
   refresh() {
     this.element = $(this.refs.element)
-    this.element.progress(getPluginProps(this.props, pluginPropTypes))
+    this.element.progress({
+      autoSuccess: this.props.autoSuccess,
+      label: this.props.label,
+      limitValues: this.props.limitValues,
+      onActive: this.props.onActive,
+      onChange: this.props.onChange,
+      onError: this.props.onError,
+      onSuccess: this.props.onSuccess,
+      onWarning: this.props.onWarning,
+      percent: this.props.percent,
+      precision: this.props.precision,
+      random: this.props.random,
+      showActivity: this.props.showActivity,
+      total: this.props.total,
+      value: this.props.value,
+    })
   }
 
   render() {
+    const { children, className, onChange, onError, showProgress } = this.props
     const classes = classNames(
       'sd-progress',
       'ui',
-      this.props.className,
+      className,
       'progress'
     )
 
     const labelText = (
       <div className='label'>
-        {this.props.children}
+        {children}
       </div>
     )
 
+    const props = getUnhandledProps(Progress, this.props)
     return (
-      <div
-        {...getComponentProps(this.props, pluginPropTypes)}
-        className={classes}
-        ref='element'
-        onChange={this.props.onChange}
-        onError={this.props.onError}
-      >
+      <div {...props} className={classes} ref='element' onChange={onChange} onError={onError}>
         <div className='bar'>
-          {this.props.showProgress && <div className='progress' />}
+          {showProgress && <div className='progress' />}
         </div>
-        {this.props.children && labelText}
+        {children && labelText}
       </div>
     )
   }