feat(factories): add overrideProps (#1428)

* feat(factories): add overrideProps

* wip(factories): perform updates

* wip(factories): perform updates

* feat(factories): always generate keys

* fix more tests, add test todos

* fix(BreadcrumbDivider): use defaultProps in options

* fix(FeedExampleShorthand): use unique shorthand strings

* fix(mixed): wip on components update

* fix(mixed): wip on components update

* fix(FeedExampleExtraImagesShorthand): use unique keys

* fix(FeedExampleEventsProp): use unique shorthand

* fix(Dropdown): use defaultProps in create options

* fix(mixed): fix broken tests

* feat(mixed): update event handlers

* tests(factory): add tests

* tests(mixed): update tests and fixes prop handling

* fix(Breadcrumb): generate key for shorthand divider

* fix(ComponentExample): fix show html item active color

docs/app/Components/ComponentDoc/ComponentExample.js

@@ -413,7 +413,7 @@ class ComponentExample extends Component {
             </ToolTip>
             <ToolTip content='Show HTML'>
               <Menu.Item active={showHTML} onClick={this.handleShowHTMLClick}>
-                <Icon size='large' color='grey' name='html5' fitted />
+                <Icon size='large' color={showHTML ? 'green' : 'grey'} name='html5' fitted />
               </Menu.Item>
             </ToolTip>
             <ToolTip content='Edit Code'>

docs/app/Examples/views/Feed/Content/FeedExampleExtraImagesShorthand.js

@@ -6,7 +6,7 @@ const date = '3 days ago'
 const summary = 'Helen Troy added 2 photos'
 const extraImages = [
   '/assets/images/wireframe/image.png',
-  '/assets/images/wireframe/image.png',
+  '/assets/images/wireframe/image-text.png',
 ]
 
 const FeedExampleExtraImagesShorthand = () => (

docs/app/Examples/views/Feed/Types/FeedExampleEventsProp.js

@@ -13,7 +13,7 @@ const events = [{
   summary: 'Helen Troy added 2 new illustrations',
   extraImages: [
     '/assets/images/wireframe/image.png',
-    '/assets/images/wireframe/image.png',
+    '/assets/images/wireframe/image-text.png',
   ],
 }, {
   date: '3 days ago',
@@ -29,7 +29,7 @@ const events = [{
   extraText: 'Look at these fun pics I found from a few years ago. Good times.',
   extraImages: [
     '/assets/images/wireframe/image.png',
-    '/assets/images/wireframe/image.png',
+    '/assets/images/wireframe/image-text.png',
   ],
 }]
 

docs/app/Examples/views/Feed/Types/FeedExampleShorthand.js

@@ -15,7 +15,7 @@ const events = [
     summary: 'Helen Troy added 2 new illustrations',
     extraImages: [
       '/assets/images/wireframe/image.png',
-      '/assets/images/wireframe/image.png',
+      '/assets/images/wireframe/image-text.png',
     ],
   },
   {
@@ -42,7 +42,7 @@ const events = [
     summary: 'Justen Kitsune added 2 new photos of you',
     extraImages: [
       '/assets/images/wireframe/image.png',
-      '/assets/images/wireframe/image.png',
+      '/assets/images/wireframe/image-text.png',
     ],
   },
 ]

src/addons/Confirm/Confirm.js

@@ -59,16 +59,22 @@ class Confirm extends Component {
   }
 
   handleCancel = e => {
-    const { onCancel } = this.props
-
-    if (onCancel) onCancel(e, this.props)
+    _.invoke(this.props, 'onCancel', e, this.props)
   }
 
-  handleConfirm = e => {
-    const { onConfirm } = this.props
+  handleCancelOverrides = predefinedProps => ({
+    onClick: (e, buttonProps) => {
+      _.invoke(predefinedProps, 'onClick', e, buttonProps)
+      this.handleCancel(e)
+    },
+  })
 
-    if (onConfirm) onConfirm(e, this.props)
-  }
+  handleConfirmOverrides = predefinedProps => ({
+    onClick: (e, buttonProps) => {
+      _.invoke(predefinedProps, 'onClick', e, buttonProps)
+      _.invoke(this.props, 'onConfirm', e, this.props)
+    },
+  })
 
   render() {
     const {
@@ -91,10 +97,10 @@ class Confirm extends Component {
         {Modal.Header.create(header)}
         {Modal.Content.create(content)}
         <Modal.Actions>
-          {Button.create(cancelButton, { onClick: this.handleCancel })}
+          {Button.create(cancelButton, { overrideProps: this.handleCancelOverrides })}
           {Button.create(confirmButton, {
-            onClick: this.handleConfirm,
-            primary: true,
+            defaultProps: { primary: true },
+            overrideProps: this.handleConfirmOverrides,
           })}
         </Modal.Actions>
       </Modal>

src/collections/Breadcrumb/Breadcrumb.js

@@ -34,34 +34,18 @@ function Breadcrumb(props) {
   const rest = getUnhandledProps(Breadcrumb, props)
   const ElementType = getElementType(Breadcrumb, props)
 
-  if (!_.isNil(children)) {
-    return <ElementType {...rest} className={classes}>{children}</ElementType>
-  }
+  if (!_.isNil(children)) return <ElementType {...rest} className={classes}>{children}</ElementType>
 
   const childElements = []
 
   _.each(sections, (section, index) => {
     // section
-    const breadcrumbSection = BreadcrumbSection.create(section)
-    childElements.push(breadcrumbSection)
+    const breadcrumbElement = BreadcrumbSection.create(section)
+    childElements.push(breadcrumbElement)
 
     // divider
     if (index !== sections.length - 1) {
-      // TODO generate a key from breadcrumbSection.props once this is merged:
-      // https://github.com/Semantic-Org/Semantic-UI-React/pull/645
-      //
-      // Stringify the props of the section as the divider key.
-      //
-      // Section:     { content: 'Home', link: true, onClick: handleClick }
-      // Divider key: content=Home|link=true|onClick=handleClick
-      let key
-      if (section.key) {
-        key = `${section.key}_divider`
-      } else {
-        key = _.map(breadcrumbSection.props, (v, k) => {
-          return `${k}=${typeof v === 'function' ? v.name || 'func' : v}`
-        }).join('|')
-      }
+      const key = `${breadcrumbElement.key}_divider` || JSON.stringify(section)
       childElements.push(BreadcrumbDivider.create({ content: divider, icon, key }))
     }
   })

src/collections/Breadcrumb/BreadcrumbDivider.js

@@ -26,13 +26,14 @@ function BreadcrumbDivider(props) {
   const rest = getUnhandledProps(BreadcrumbDivider, props)
   const ElementType = getElementType(BreadcrumbDivider, props)
 
-  const iconElement = Icon.create(icon, { ...rest, className: classes })
-  if (iconElement) return iconElement
+  if (!_.isNil(icon)) return Icon.create(icon, { defaultProps: { ...rest, className: classes } })
+  if (!_.isNil(content)) return <ElementType {...rest} className={classes}>{content}</ElementType>
 
-  let breadcrumbContent = content
-  if (_.isNil(content)) breadcrumbContent = _.isNil(children) ? '/' : children
-
-  return <ElementType {...rest} className={classes}>{breadcrumbContent}</ElementType>
+  return (
+    <ElementType {...rest} className={classes}>
+      {_.isNil(children) ? '/' : children}
+    </ElementType>
+  )
 }
 
 BreadcrumbDivider._meta = {

src/collections/Breadcrumb/BreadcrumbSection.js

@@ -94,4 +94,4 @@ export default class BreadcrumbSection extends Component {
   }
 }
 
-BreadcrumbSection.create = createShorthandFactory(BreadcrumbSection, content => ({ content, link: true }), true)
+BreadcrumbSection.create = createShorthandFactory(BreadcrumbSection, content => ({ content, link: true }))

src/collections/Menu/Menu.js

@@ -133,24 +133,27 @@ class Menu extends Component {
   static Item = MenuItem
   static Menu = MenuMenu
 
-  handleItemClick = (e, itemProps) => {
-    const { index } = itemProps
-    const { items, onItemClick } = this.props
+  handleItemOverrides = predefinedProps => ({
+    onClick: (e, itemProps) => {
+      const { index } = itemProps
 
-    this.trySetState({ activeIndex: index })
+      this.trySetState({ activeIndex: index })
 
-    if (_.get(items[index], 'onClick')) items[index].onClick(e, itemProps)
-    if (onItemClick) onItemClick(e, itemProps)
-  }
+      _.invoke(predefinedProps, 'onClick', e, itemProps)
+      _.invoke(this.props, 'onItemClick', e, itemProps)
+    },
+  })
 
   renderItems() {
     const { items } = this.props
     const { activeIndex } = this.state
 
     return _.map(items, (item, index) => MenuItem.create(item, {
-      active: activeIndex === index,
-      index,
-      onClick: this.handleItemClick,
+      defaultProps: {
+        active: activeIndex === index,
+        index,
+      },
+      overrideProps: this.handleItemOverrides,
     }))
   }
 

src/collections/Menu/MenuItem.js

@@ -136,4 +136,4 @@ export default class MenuItem extends Component {
   }
 }
 
-MenuItem.create = createShorthandFactory(MenuItem, val => ({ content: val, name: val }), true)
+MenuItem.create = createShorthandFactory(MenuItem, val => ({ content: val, name: val }))

src/collections/Message/Message.js

@@ -3,7 +3,7 @@ import _ from 'lodash'
 import React, { Component, PropTypes } from 'react'
 
 import {
-  createShorthand,
+  createHTMLParagraph,
   customPropTypes,
   getElementType,
   getUnhandledProps,
@@ -181,7 +181,7 @@ export default class Message extends Component {
           <MessageContent>
             {MessageHeader.create(header)}
             {MessageList.create(list)}
-            {createShorthand('p', val => ({ children: val }), content)}
+            {createHTMLParagraph(content)}
           </MessageContent>
         )}
       </ElementType>

src/collections/Message/MessageItem.js

@@ -50,6 +50,6 @@ MessageItem.defaultProps = {
   as: 'li',
 }
 
-MessageItem.create = createShorthandFactory(MessageItem, content => ({ content }), true)
+MessageItem.create = createShorthandFactory(MessageItem, content => ({ content }))
 
 export default MessageItem

src/collections/Table/Table.js

@@ -90,7 +90,7 @@ function Table(props) {
 
   return (
     <ElementType {...rest} className={classes}>
-      {headerRow && <TableHeader>{TableRow.create(headerRow, { cellAs: 'th' })}</TableHeader>}
+      {headerRow && <TableHeader>{TableRow.create(headerRow, { defaultProps: { cellAs: 'th' } })}</TableHeader>}
       <TableBody>
         {renderBodyRow && _.map(tableData, (data, index) => TableRow.create(renderBodyRow(data, index)))}
       </TableBody>

src/collections/Table/TableCell.js

@@ -132,6 +132,6 @@ TableCell.propTypes = {
   width: PropTypes.oneOf(SUI.WIDTHS),
 }
 
-TableCell.create = createShorthandFactory(TableCell, content => ({ content }), true)
+TableCell.create = createShorthandFactory(TableCell, content => ({ content }))
 
 export default TableCell

src/collections/Table/TableRow.js

@@ -54,7 +54,7 @@ function TableRow(props) {
 
   return (
     <ElementType {...rest} className={classes}>
-      {_.map(cells, (cell) => TableCell.create(cell, { as: cellAs }))}
+      {_.map(cells, (cell) => TableCell.create(cell, { defaultProps: { as: cellAs } }))}
     </ElementType>
   )
 }
@@ -111,6 +111,6 @@ TableRow.propTypes = {
   warning: PropTypes.bool,
 }
 
-TableRow.create = createShorthandFactory(TableRow, cells => ({ cells }), true)
+TableRow.create = createShorthandFactory(TableRow, cells => ({ cells }))
 
 export default TableRow

src/elements/Button/Button.js

@@ -255,10 +255,10 @@ class Button extends Component {
       )
     }
 
-    const labelElement = Label.create(label, {
+    const labelElement = Label.create(label, { defaultProps: {
       basic: true,
       pointing: labelPosition === 'left' ? 'right' : 'left',
-    })
+    } })
 
     if (labelElement) {
       const classes = cx('ui', baseClasses, 'button', className)

src/elements/Input/Input.js

@@ -195,28 +195,22 @@ class Input extends Component {
 
     // Render Shorthand
     // ----------------------------------------
-    const actionElement = Button.create(action, elProps => ({
-      className: cx(
-        // all action components should have the button className
-        !_.includes(elProps.className, 'button') && 'button',
-      ),
-    }))
+    const actionElement = Button.create(action, { defaultProps: { className: 'button' } })
     const iconElement = Icon.create(icon)
-    const labelElement = Label.create(label, elProps => ({
+    const labelElement = Label.create(label, { defaultProps: {
       className: cx(
-        // all label components should have the label className
-        !_.includes(elProps.className, 'label') && 'label',
+        'label',
         // add 'left|right corner'
         _.includes(labelPosition, 'corner') && labelPosition,
       ),
-    }))
+    } })
 
     return (
       <ElementType {...rest} className={classes}>
         {actionPosition === 'left' && actionElement}
         {iconPosition === 'left' && iconElement}
         {labelPosition !== 'right' && labelElement}
-        {createHTMLInput(input || type, htmlInputProps)}
+        {createHTMLInput(input || type, { defaultProps: htmlInputProps })}
         {actionPosition !== 'left' && actionElement}
         {iconPosition !== 'left' && iconElement}
         {labelPosition === 'right' && labelElement}

src/elements/Label/Label.js

@@ -133,11 +133,12 @@ export default class Label extends Component {
     if (onClick) onClick(e, this.props)
   }
 
-  handleRemove = (e) => {
-    const { onRemove } = this.props
-
-    if (onRemove) onRemove(e, this.props)
-  }
+  handleIconOverrides = predefinedProps => ({
+    onClick: e => {
+      _.invoke(predefinedProps, 'onClick', e)
+      _.invoke(this.props, 'onRemove', e, this.props)
+    },
+  })
 
   render() {
     const {
@@ -202,7 +203,7 @@ export default class Label extends Component {
         {typeof image !== 'boolean' && Image.create(image)}
         {content}
         {createShorthand(LabelDetail, val => ({ content: val }), detail)}
-        {onRemove && Icon.create(removeIconShorthand, { onClick: this.handleRemove })}
+        {onRemove && Icon.create(removeIconShorthand, { overrideProps: this.handleIconOverrides })}
       </ElementType>
     )
   }

src/elements/List/ListItem.js

@@ -149,6 +149,6 @@ ListItem.propTypes = {
   value: PropTypes.string,
 }
 
-ListItem.create = createShorthandFactory(ListItem, content => ({ content }), true)
+ListItem.create = createShorthandFactory(ListItem, content => ({ content }))
 
 export default ListItem