breaking(Form|RatingIcon|Search|SearchResult): Pass data to event han…

…dlers (#951)

breaking(Form|RatingIcon|Search|SearchResult): Pass data to event handlers

docs/app/Examples/collections/Form/Types/FormExampleOnSubmit.js

@@ -21,17 +21,17 @@ const products = [
 ]
 
 class FormExampleOnSubmit extends Component {
-  state = { serializedForm: {} }
+  state = { formData: {} }
 
   handleChange = (e, { value }) => this.setState({ value })
 
-  handleSubmit = (e, serializedForm) => {
+  handleSubmit = (e, { formData }) => {
     e.preventDefault()
-    this.setState({ serializedForm })
+    this.setState({ formData })
   }
 
   render() {
-    const { serializedForm, value } = this.state
+    const { formData, value } = this.state
     return (
       <Form onSubmit={this.handleSubmit}>
         <Form.Group widths='equal'>
@@ -62,7 +62,7 @@ class FormExampleOnSubmit extends Component {
         <Button primary type='submit'>Submit</Button>
 
         <Message>
-          <pre>serializedForm: {JSON.stringify(serializedForm, null, 2)}</pre>
+          <pre>formData: {JSON.stringify(formData, null, 2)}</pre>
         </Message>
       </Form>
     )

docs/app/Examples/modules/Search/Types/SearchExampleCategory.js

@@ -28,7 +28,7 @@ export default class SearchExampleCategory extends Component {
 
   resetComponent = () => this.setState({ isLoading: false, results: [], value: '' })
 
-  handleChange = (e, result) => this.setState({ value: result.title })
+  handleResultSelect = (e, result) => this.setState({ value: result.title })
 
   handleSearchChange = (e, value) => {
     this.setState({ isLoading: true, value })
@@ -65,7 +65,7 @@ export default class SearchExampleCategory extends Component {
           <Search
             category
             loading={isLoading}
-            onChange={this.handleChange}
+            onResultSelect={this.handleResultSelect}
             onSearchChange={this.handleSearchChange}
             results={results}
             value={value}

docs/app/Examples/modules/Search/Types/SearchExampleStandard.js

@@ -17,7 +17,7 @@ export default class SearchExampleStandard extends Component {
 
   resetComponent = () => this.setState({ isLoading: false, results: [], value: '' })
 
-  handleChange = (e, result) => this.setState({ value: result.title })
+  handleResultSelect = (e, result) => this.setState({ value: result.title })
 
   handleSearchChange = (e, value) => {
     this.setState({ isLoading: true, value })
@@ -43,7 +43,7 @@ export default class SearchExampleStandard extends Component {
         <Grid.Column width={8}>
           <Search
             loading={isLoading}
-            onChange={this.handleChange}
+            onResultSelect={this.handleResultSelect}
             onSearchChange={this.handleSearchChange}
             results={results}
             value={value}

src/addons/Portal/Portal.js

@@ -78,16 +78,36 @@ class Portal extends Component {
     /** Milliseconds to wait before opening on mouse over */
     mouseOverDelay: PropTypes.number,
 
-    /** Called when a close event happens */
+    /**
+     * Called when a close event happens
+     *
+     * @param {SyntheticEvent} event - React's original SyntheticEvent.
+     * @param {object} data - All props.
+     */
     onClose: PropTypes.func,
 
-    /** Called when the portal is mounted on the DOM */
+    /**
+     * Called when the portal is mounted on the DOM
+     *
+     * @param {null}
+     * @param {object} data - All props.
+     */
     onMount: PropTypes.func,
 
-    /** Called when an open event happens */
+    /**
+     * Called when an open event happens
+     *
+     * @param {SyntheticEvent} event - React's original SyntheticEvent.
+     * @param {object} data - All props.
+     */
     onOpen: PropTypes.func,
 
-    /** Called when the portal is unmounted from the DOM */
+    /**
+     * Called when the portal is unmounted from the DOM
+     *
+     * @param {null}
+     * @param {object} data - All props.
+     */
     onUnmount: PropTypes.func,
 
     /** Controls whether or not the portal is displayed. */

src/collections/Breadcrumb/BreadcrumbSection.js

@@ -42,7 +42,13 @@ export default class BreadcrumbSection extends Component {
       PropTypes.string,
     ]),
 
-    /** Render as an `a` tag instead of a `div` and called with event on Section click. */
+    /**
+     * Called on click. When passed, the component will render as an `a`
+     * tag by default instead of a `div`.
+     *
+     * @param {SyntheticEvent} event - React's original SyntheticEvent.
+     * @param {object} data - All props.
+     */
     onClick: PropTypes.func,
   }
 
@@ -55,7 +61,7 @@ export default class BreadcrumbSection extends Component {
   handleClick = (e) => {
     const { onClick } = this.props
 
-    if (onClick) onClick(e)
+    if (onClick) onClick(e, this.props)
   }
 
   render() {

src/collections/Form/Form.js

@@ -198,7 +198,12 @@ export default class Form extends Component {
     /** Automatically show a loading indicator */
     loading: PropTypes.bool,
 
-    /** Called with (event, jsonSerializedForm) on submit */
+    /**
+     * Called on submit
+     *
+     * @param {SyntheticEvent} event - React's original SyntheticEvent.
+     * @param {object} data - All props and the form's serialized values.
+     */
     onSubmit: PropTypes.func,
 
     /** A comment can contain a form to reply to a comment. This may have arbitrary content. */
@@ -239,7 +244,7 @@ export default class Form extends Component {
   handleSubmit = (e) => {
     const { onSubmit, serializer } = this.props
 
-    if (onSubmit) onSubmit(e, serializer(this._form))
+    if (onSubmit) onSubmit(e, { ...this.props, formData: serializer(this._form) })
   }
 
   render() {

src/collections/Menu/Menu.js

@@ -93,7 +93,12 @@ class Menu extends Component {
     /** Shorthand array of props for Menu. */
     items: customPropTypes.collectionShorthand,
 
-    /** onClick handler for MenuItem. Mutually exclusive with children. */
+    /**
+     * onClick handler for MenuItem. Mutually exclusive with children.
+     *
+     * @param {SyntheticEvent} event - React's original SyntheticEvent.
+     * @param {object} data - All item props.
+     */
     onItemClick: customPropTypes.every([
       customPropTypes.disallow(['children']),
       PropTypes.func,
@@ -140,12 +145,14 @@ class Menu extends Component {
   static Item = MenuItem
   static Menu = MenuMenu
 
-  handleItemClick = (e, { name, index }) => {
+  handleItemClick = (e, itemProps) => {
+    const { index } = itemProps
+
     this.trySetState({ activeIndex: index })
     const { items, onItemClick } = this.props
 
-    if (_.get(items[index], 'onClick')) items[index].onClick(e, { name, index })
-    if (onItemClick) onItemClick(e, { name, index })
+    if (_.get(items[index], 'onClick')) items[index].onClick(e, itemProps)
+    if (onItemClick) onItemClick(e, itemProps)
   }
 
   renderItems() {

src/collections/Menu/MenuItem.js

@@ -68,7 +68,13 @@ export default class MenuItem extends Component {
     /** Internal name of the MenuItem. */
     name: PropTypes.string,
 
-    /** Render as an `a` tag instead of a `div` and called with event on MenuItem click. */
+    /**
+     * Called on click. When passed, the component will render as an `a`
+     * tag by default instead of a `div`.
+     *
+     * @param {SyntheticEvent} event - React's original SyntheticEvent.
+     * @param {object} data - All props.
+     */
     onClick: PropTypes.func,
 
     /** A menu item can take right position. */
@@ -78,9 +84,9 @@ export default class MenuItem extends Component {
   static _meta = _meta
 
   handleClick = (e) => {
-    const { index, name, onClick } = this.props
+    const { onClick } = this.props
 
-    if (onClick) onClick(e, { name, index })
+    if (onClick) onClick(e, this.props)
   }
 
   render() {

src/elements/Button/Button.js

@@ -140,7 +140,7 @@ class Button extends Component {
     /**
      * Called after user's click.
      * @param {SyntheticEvent} event - React's original SyntheticEvent.
-     * @param {object} data - Button props.
+     * @param {object} data - All props.
      */
     onClick: PropTypes.func,
 

src/elements/Input/Input.js

@@ -124,7 +124,12 @@ class Input extends Component {
     /** An Icon Input field can show that it is currently loading data */
     loading: PropTypes.bool,
 
-    /** Called with (e, data) on change. */
+    /**
+     * Called on change.
+     *
+     * @param {SyntheticEvent} event - React's original SyntheticEvent.
+     * @param {object} data - All props and proposed value.
+     */
     onChange: PropTypes.func,
 
     /** An Input can vary in size */
@@ -144,13 +149,10 @@ class Input extends Component {
   static _meta = _meta
 
   handleChange = (e) => {
+    const value = _.get(e, 'target.value')
+
     const { onChange } = this.props
-    if (onChange) {
-      onChange(e, {
-        ...this.props,
-        value: _.get(e, 'target.value'),
-      })
-    }
+    if (onChange) onChange(e, { ...this.props, value })
   }
 
   render() {

src/elements/Label/Label.js

@@ -101,10 +101,20 @@ export default class Label extends Component {
       PropTypes.oneOf(_meta.props.pointing),
     ]),
 
-    /** Adds the link style when present, called with (event, props). */
+    /**
+     * Called on click.
+     *
+     * @param {SyntheticEvent} event - React's original SyntheticEvent.
+     * @param {object} data - All props.
+     */
     onClick: PropTypes.func,
 
-    /** Adds an "x" icon, called with (event, props) when "x" is clicked. */
+    /**
+     * Adds an "x" icon, called when "x" is clicked.
+     *
+     * @param {SyntheticEvent} event - React's original SyntheticEvent.
+     * @param {object} data - All props.
+     */
     onRemove: PropTypes.func,
 
     /** Shorthand for Icon to appear as the last child and trigger onRemove. */

src/elements/Step/Step.js

@@ -50,7 +50,13 @@ export default class Step extends Component {
     /** Render as an `a` tag instead of a `div` and adds the href attribute. */
     href: PropTypes.string,
 
-    /** Render as an `a` tag instead of a `div` and called with event on Step click. */
+    /**
+     * Called on click. When passed, the component will render as an `a`
+     * tag by default instead of a `div`.
+     *
+     * @param {SyntheticEvent} event - React's original SyntheticEvent.
+     * @param {object} data - All props.
+     */
     onClick: PropTypes.func,
 
     /** A step can show a ordered sequence of steps. Passed from StepGroup. */
@@ -73,7 +79,7 @@ export default class Step extends Component {
   handleClick = (e) => {
     const { onClick } = this.props
 
-    if (onClick) onClick(e)
+    if (onClick) onClick(e, this.props)
   }
 
   render() {

src/index.js

@@ -127,6 +127,7 @@ export { default as PopupHeader } from './modules/Popup/PopupHeader'
 export { default as Progress } from './modules/Progress'
 
 export { default as Rating } from './modules/Rating'
+export { default as RatingIcon } from './modules/Rating/RatingIcon'
 
 export { default as Search } from './modules/Search'
 export { default as SearchCategory } from './modules/Search/SearchCategory'

src/modules/Accordion/AccordionTitle.js

@@ -28,7 +28,12 @@ export default class AccordionTitle extends Component {
     /** Additional classes. */
     className: PropTypes.string,
 
-    /** Called with (event, index) on title click. */
+    /**
+     * Called on blur.
+     *
+     * @param {SyntheticEvent} event - React's original SyntheticEvent.
+     * @param {object} data - All props.
+     */
     onClick: PropTypes.func,
   }
 
@@ -41,7 +46,7 @@ export default class AccordionTitle extends Component {
   handleClick = (e) => {
     const { onClick } = this.props
 
-    if (onClick) onClick(e)
+    if (onClick) onClick(e, this.props)
   }
 
   render() {

src/modules/Checkbox/Checkbox.js

@@ -56,10 +56,20 @@ export default class Checkbox extends Component {
     /** The HTML input name. */
     name: PropTypes.string,
 
-    /** Called with (event, { name, value, checked }) when the user attempts to change the value. */
+    /**
+     * Called when the user attempts to change the checked state.
+     *
+     * @param {SyntheticEvent} event - React's original SyntheticEvent.
+     * @param {object} data - All props and proposed checked state.
+     */
     onChange: PropTypes.func,
 
-    /** Called with (event, { name, value, checked }) when the checkbox or label is clicked. */
+    /**
+     * Called when the checkbox or label is clicked.
+     *
+     * @param {SyntheticEvent} event - React's original SyntheticEvent.
+     * @param {object} data - All props and current checked state.
+     */
     onClick: PropTypes.func,
 
     /** Format as a radio element. This means it is an exclusive option.*/
@@ -111,15 +121,12 @@ export default class Checkbox extends Component {
 
   handleClick = (e) => {
     debug('handleClick()')
-    const { name, onChange, onClick, value } = this.props
+    const { onChange, onClick } = this.props
     const { checked } = this.state
-    debug(`  name:       ${name}`)
-    debug(`  value:      ${value}`)
-    debug(`  checked:    ${checked}`)
 
     if (this.canToggle()) {
-      if (onClick) onClick(e, { name, value, checked: !!checked })
-      if (onChange) onChange(e, { name, value, checked: !checked })
+      if (onClick) onClick(e, { ...this.props, checked: !!checked })
+      if (onChange) onChange(e, { ...this.props, checked: !checked })
 
       this.trySetState({ checked: !checked })
     }

src/modules/Dimmer/Dimmer.js

@@ -41,10 +41,20 @@ export default class Dimmer extends Component {
     /** A disabled dimmer cannot be activated */
     disabled: PropTypes.bool,
 
-    /** Called with (event, props) after user's click. */
+    /**
+     * Called on click.
+     *
+     * @param {SyntheticEvent} event - React's original SyntheticEvent.
+     * @param {object} data - All props.
+     */
     onClick: PropTypes.func,
 
-    /** Handles click outside Dimmer's content, but inside Dimmer area. */
+    /**
+     * Handles click outside Dimmer's content, but inside Dimmer area.
+     *
+     * @param {SyntheticEvent} event - React's original SyntheticEvent.
+     * @param {object} data - All props.
+     */
     onClickOutside: PropTypes.func,
 
     /** A dimmer can be formatted to have its colors inverted. */