Merge pull request #217 from TechnologyAdvice/feature/common-tests

Create common tests

src/collections/Menu/Menu.js

@@ -1,8 +1,11 @@
-import React, { Component, PropTypes } from 'react'
-import classNames from 'classnames'
-import META from '../../utils/Meta'
-import getUnhandledProps from '../../utils/getUnhandledProps'
+import React, { Children, Component, cloneElement, PropTypes } from 'react'
+import cx from 'classnames'
+
 import MenuItem from './MenuItem'
+import META from '../../utils/Meta'
+
+// TODO make generic and move to child utils
+const getMenuItems = (children) => Children.toArray(children).find(({ type }) => type === MenuItem)
 
 export default class Menu extends Component {
   static propTypes = {
@@ -11,7 +14,15 @@ export default class Menu extends Component {
     className: PropTypes.string,
   }
 
-  state = { activeItem: this.props.activeItem }
+  constructor(props, context) {
+    super(props, context)
+    const { activeItem, children } = this.props
+    const firstMenuItem = getMenuItems(children)
+
+    this.state = {
+      activeItem: activeItem || firstMenuItem && firstMenuItem.props.name,
+    }
+  }
 
   handleClickItem = (activeItem) => {
     this.setState({ activeItem })
@@ -26,26 +37,23 @@ export default class Menu extends Component {
   static Item = MenuItem
 
   render() {
-    const classes = classNames(
-      'sd-menu',
-      'ui',
-      this.props.className,
-      'menu'
-    )
-    const hasActiveItem = !!this.state.activeItem || !!this.props.activeItem
-    const children = React.Children.map(this.props.children, (child, i) => {
-      const activeItemName = !hasActiveItem && i === 0
-        ? child.props.name
-        : this.state.activeItem || this.props.activeItem
-      return child && React.cloneElement(child, {
-        activeItem: activeItemName,
-        callbackParent: this.handleClickItem,
+    const { activeItem, children, className, ...rest } = this.props
+
+    const classes = cx('sd-menu ui', className, 'menu')
+
+    const _children = Children.map(children, (child) => {
+      const { type, props } = child
+
+      if (type !== MenuItem) return child
+
+      return cloneElement(child, {
+        active: props.name === this.state.activeItem || props.name === activeItem,
+        __onClick: this.handleClickItem,
       })
     })
-    const props = getUnhandledProps(this)
     return (
-      <div {...props} className={classes}>
-        {children}
+      <div {...rest} className={classes}>
+        {_children}
       </div>
     )
   }

src/collections/Menu/MenuItem.js

@@ -1,50 +1,48 @@
-import React, { Component, PropTypes } from 'react'
+import React, { PropTypes } from 'react'
 import classNames from 'classnames'
 import META from '../../utils/Meta'
 
-export default class MenuItem extends Component {
-  static propTypes = {
-    activeItem: PropTypes.string,
-    callbackParent: PropTypes.func,
-    children: PropTypes.node,
-    className: PropTypes.string,
-    label: PropTypes.oneOfType([
-      PropTypes.number,
-      PropTypes.string,
-    ]),
-    name: PropTypes.string,
-    onClick: PropTypes.func,
+const MenuItem = ({ __onClick, active, children, className, label, name, onClick, ...rest }) => {
+  const handleClick = (e) => {
+    __onClick(name)
+    if (onClick) onClick(name)
   }
 
-  handleClick = e => {
-    if (this.props.onClick) {
-      this.props.onClick(this.props.name)
-    }
-    this.props.callbackParent(this.props.name)
-  }
+  const menuLabel = label && <div className='sd-menu-label ui blue label'>{label}</div>
+  const classes = classNames(
+    'sd-menu-item',
+    active && 'active',
+    className,
+    'item',
+  )
 
-  static _meta = {
-    library: META.library.semanticUI,
-    name: 'MenuItem',
-    type: META.type.collection,
-    parent: 'Menu',
-  }
+  return (
+    <a {...rest} className={classes} onClick={handleClick}>
+      {name}
+      {menuLabel}
+      {children}
+    </a>
+  )
+}
 
-  render() {
-    const menuLabel = <div className='sd-menu-label ui blue label'>{this.props.label}</div>
-    const isActive = this.props.activeItem === this.props.name
-    const classes = classNames(
-      'sd-menu-item',
-      this.props.className,
-      'item',
-      { active: isActive }
-    )
-    return (
-      <a {...this.props} className={classes} onClick={this.handleClick}>
-        {this.props.name}
-        {this.props.label && menuLabel}
-        {this.props.children}
-      </a>
-    )
-  }
+MenuItem._meta = {
+  library: META.library.semanticUI,
+  name: 'MenuItem',
+  type: META.type.collection,
+  parent: 'Menu',
 }
+
+MenuItem.propTypes = {
+  __onClick: PropTypes.func,
+  active: PropTypes.bool,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  label: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string,
+  ]),
+  name: PropTypes.string,
+  onClick: PropTypes.func,
+}
+
+export default MenuItem

src/collections/Table/TableColumn.js

@@ -1,27 +1,22 @@
-import React, { Component, PropTypes } from 'react'
-import classNames from 'classnames'
+import React, { PropTypes } from 'react'
 import META from '../../utils/Meta'
 
-export default class TableColumn extends Component {
-  static propTypes = {
-    cellRenderer: PropTypes.func,
-    className: PropTypes.string,
-    dataKey: PropTypes.string,
-    headerRenderer: PropTypes.func,
-  }
+// This is an abstract component
+// it is only used by the user to configure a Table
+const TableColumn = (props) => <noscript />
 
-  static _meta = {
-    library: META.library.semanticUI,
-    name: 'TableColumn',
-    type: META.type.collection,
-    parent: 'Table',
-  }
+TableColumn.propTypes = {
+  cellRenderer: PropTypes.func,
+  className: PropTypes.string,
+  dataKey: PropTypes.string,
+  headerRenderer: PropTypes.func,
+}
 
-  render() {
-    const classes = classNames(
-      'sd-table-column',
-      this.props.className
-    )
-    return <div {...this.props} className={classes}></div>
-  }
+TableColumn._meta = {
+  library: META.library.semanticUI,
+  name: 'TableColumn',
+  type: META.type.collection,
+  parent: 'Table',
 }
+
+export default TableColumn

src/elements/Segment/Segment.js

@@ -1,7 +1,7 @@
 import React, { Component, PropTypes } from 'react'
 import classNames from 'classnames'
 import META from '../../utils/Meta'
-import Segments from './Segments'
+import Segments from './SegmentSegments'
 
 /**
  * A segment is used to create a grouping of related content.

src/elements/Segment/Segments.js → src/elements/Segment/SegmentSegments.js

@@ -6,7 +6,7 @@ import { customPropTypes } from '../../utils/propUtils'
 /**
  * A group of segments can be formatted to appear together.
  */
-export default class Segments extends Component {
+export default class SegmentSegments extends Component {
   static propTypes = {
     /**
      * Must be of type Segment, Segments, H1, H2, H3, H4, H5, H6, Subheader or Message.
@@ -23,7 +23,7 @@ export default class Segments extends Component {
 
   static _meta = {
     library: META.library.semanticUI,
-    name: 'Segments',
+    name: 'SegmentSegments',
     type: META.type.element,
     parent: 'Segment',
   }
@@ -32,7 +32,7 @@ export default class Segments extends Component {
     const { children } = this.props
 
     const classes = classNames(
-      'sd-segments',
+      'sd-segment-segments',
       'ui',
       this.props.className,
       'segments'

src/index.js

@@ -46,7 +46,7 @@ export { _List as List }
 export const ListItem = deprecateComponent('ListItem', 'Use "List.Item" instead.', _List.Item)
 
 export Segment from './elements/Segment/Segment'
-export Segments from './elements/Segment/Segments'
+export Segments from './elements/Segment/SegmentSegments'
 
 // ----------------------------------------
 // Modules
@@ -66,6 +66,7 @@ export Dropdown from './modules/Dropdown/Dropdown'
 // Views
 // ----------------------------------------
 
-export Item from './views/Items/Item'
-export Items from './views/Items/Items'
+import _Item from './views/Item/Item'
+export { _Item as Item }
+export const Items = deprecateComponent('Items', 'Use "Item.Items" instead.', _Item.Items)
 export Statistic from './views/Statistic/Statistic'

src/views/Items/Item.js → src/views/Item/Item.js

@@ -4,6 +4,8 @@ import cx from 'classnames'
 import { customPropTypes } from '../../utils/propUtils'
 import META from '../../utils/Meta'
 
+import ItemItems from './ItemItems'
+
 export default class Item extends Component {
   static propTypes = {
     children: PropTypes.node,
@@ -26,6 +28,8 @@ export default class Item extends Component {
     type: META.type.view,
   }
 
+  static Items = ItemItems
+
   render() {
     const { children, className, contentClassName, description, extra, header, image, meta, ...rest } = this.props
 

src/views/Item/ItemItems.js

@@ -0,0 +1,24 @@
+import React, { PropTypes } from 'react'
+import cx from 'classnames'
+import META from '../../utils/Meta'
+
+const ItemItems = (props) => {
+  const { className, children, ...rest } = props
+  const classes = cx('sd-item-items ui', className, 'items')
+
+  return <div {...rest} className={classes}>{children}</div>
+}
+
+ItemItems.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+}
+
+ItemItems._meta = {
+  library: META.library.semanticUI,
+  name: 'ItemItems',
+  type: META.type.view,
+  parent: 'Item',
+}
+
+export default ItemItems