fix(factories): remove circular references (#550)

* fix(factories): remove circular references * refactor(factories): move to /lib
Semantic-Org · Sep 26, 2016 · 8468706 · 8468706
1 parent 9ea6ba9
commit 8468706
Show file tree

Hide file tree

Showing 31 changed files with 68 additions and 59 deletions.
diff --git a/src/collections/Breadcrumb/BreadcrumbDivider.js b/src/collections/Breadcrumb/BreadcrumbDivider.js
@@ -7,7 +7,7 @@ import {
   getElementType,
   META,
 } from '../../lib'
-import { createIcon } from '../../factories'
+import { Icon } from '../../elements'
 
 /**
  * A divider sub-component for Breadcrumb component.
@@ -18,7 +18,7 @@ function BreadcrumbDivider(props) {
   const classes = cx(className, 'divider')
   const ElementType = getElementType(BreadcrumbDivider, props)
 
-  if (icon) return createIcon(icon, { ...rest, className: classes })
+  if (icon) return Icon.create(icon, { ...rest, className: classes })
 
   return <ElementType {...rest} className={classes}>{children || '/'}</ElementType>
 }

diff --git a/src/collections/Menu/Menu.js b/src/collections/Menu/Menu.js
@@ -4,6 +4,7 @@ import React, { PropTypes } from 'react'
 
 import {
   AutoControlledComponent as Component,
+  createShorthand,
   customPropTypes,
   getElementType,
   getUnhandledProps,
@@ -14,7 +15,6 @@ import {
   useValueAndKey,
   useWidthProp,
 } from '../../lib'
-import { createShorthand } from '../../factories'
 import MenuHeader from './MenuHeader'
 import MenuItem from './MenuItem'
 import MenuMenu from './MenuMenu'

diff --git a/src/collections/Menu/MenuItem.js b/src/collections/Menu/MenuItem.js
@@ -11,7 +11,7 @@ import {
   useKeyOnly,
   useKeyOrValueAndKey,
 } from '../../lib'
-import { createIcon } from '../../factories'
+import { Icon } from '../../elements'
 
 function MenuItem(props) {
   const {
@@ -46,7 +46,7 @@ function MenuItem(props) {
 
   return (
     <ElementType {...rest} className={classes} onClick={handleClick}>
-      {createIcon(icon)}
+      {Icon.create(icon)}
       {content || _.startCase(name)}
     </ElementType>
   )

diff --git a/src/collections/Message/Message.js b/src/collections/Message/Message.js
@@ -3,6 +3,7 @@ import React, { PropTypes } from 'react'
 import cx from 'classnames'
 
 import {
+  createShorthand,
   customPropTypes,
   getElementType,
   getUnhandledProps,
@@ -11,7 +12,6 @@ import {
   useKeyOnly,
   useKeyOrValueAndKey,
 } from '../../lib'
-import { createIcon, createShorthand } from '../../factories'
 import { Icon } from '../../elements'
 import MessageContent from './MessageContent'
 import MessageHeader from './MessageHeader'
@@ -74,7 +74,7 @@ function Message(props) {
     return (
       <ElementType {...rest} className={classes}>
         {dismissIcon}
-        {createIcon(icon)}
+        {Icon.create(icon)}
         {(header || content || list) && (
           <MessageContent>
             {createShorthand(MessageHeader, val => ({ children: val }), header)}

diff --git a/src/elements/Button/Button.js b/src/elements/Button/Button.js
@@ -3,6 +3,7 @@ import React, { PropTypes } from 'react'
 
 import {
   customPropTypes,
+  createShorthandFactory,
   getElementType,
   getUnhandledProps,
   makeDebugger,
@@ -12,7 +13,7 @@ import {
   useKeyOrValueAndKey,
   useValueAndKey,
 } from '../../lib'
-import { createIcon, createLabel } from '../../factories'
+import { Icon, Label } from '../'
 import ButtonContent from './ButtonContent'
 import ButtonGroup from './ButtonGroup'
 import ButtonOr from './ButtonOr'
@@ -77,15 +78,15 @@ function Button(props) {
     const classes = cx('ui', baseClasses, 'button', className)
     const containerClasses = cx('ui', labeledClasses, 'button', className)
     debug('render label:', { classes, containerClasses }, props)
-    const labelElement = createLabel(label, {
+    const labelElement = Label.create(label, {
       basic: true,
       pointing: labeled === 'left' ? 'right' : 'left',
     })
     return (
       <ElementType {...rest} className={containerClasses}>
         {labeled === 'left' && labelElement}
         <button className={classes}>
-          {createIcon(icon)} {content}
+          {Icon.create(icon)} {content}
         </button>
         {(labeled === 'right' || !labeled) && labelElement}
       </ElementType>
@@ -97,7 +98,7 @@ function Button(props) {
     debug('render icon && !label:', { classes })
     return (
       <ElementType {...rest} className={classes} tabIndex={tabIndex}>
-        {createIcon(icon)} {content}
+        {Icon.create(icon)} {content}
       </ElementType>
     )
   }
@@ -250,4 +251,6 @@ Button.defaultProps = {
   as: 'button',
 }
 
+Button.create = createShorthandFactory(Button, value => ({ content: value }))
+
 export default Button
diff --git a/src/elements/Header/Header.js b/src/elements/Header/Header.js
@@ -2,6 +2,7 @@ import _ from 'lodash'
 import cx from 'classnames'
 import React, { PropTypes } from 'react'
 import {
+  createShorthand,
   customPropTypes,
   getElementType,
   getUnhandledProps,
@@ -12,7 +13,7 @@ import {
   useKeyOrValueAndKey,
   useKeyOnly,
 } from '../../lib'
-import { createIcon, createImage, createShorthand } from '../../factories'
+import { Icon, Image } from '../../elements'
 import HeaderSubheader from './HeaderSubheader'
 import HeaderContent from './HeaderContent'
 
@@ -57,7 +58,7 @@ function Header(props) {
   if ((image && typeof image !== 'boolean') || (icon && typeof icon !== 'boolean')) {
     return (
       <ElementType {...rest} className={classes}>
-        {createIcon(icon) || createImage(image)}
+        {Icon.create(icon) || Image.create(image)}
         {(content || subheader) && (
           <HeaderContent>
             {content}

diff --git a/src/elements/Icon/Icon.js b/src/elements/Icon/Icon.js
@@ -2,6 +2,7 @@ import cx from 'classnames'
 import React, { PropTypes } from 'react'
 
 import {
+  createShorthandFactory,
   customPropTypes,
   getElementType,
   getUnhandledProps,
@@ -113,4 +114,6 @@ Icon.defaultProps = {
   as: 'i',
 }
 
+Icon.create = createShorthandFactory(Icon, value => ({ name: value }))
+
 export default Icon
diff --git a/src/elements/Image/Image.js b/src/elements/Image/Image.js
@@ -3,6 +3,7 @@ import React, { PropTypes } from 'react'
 
 import {
   getElementType,
+  createShorthandFactory,
   customPropTypes,
   getUnhandledProps,
   META,
@@ -160,4 +161,6 @@ Image.defaultProps = {
   ui: true,
 }
 
+Image.create = createShorthandFactory(Image, value => ({ src: value }))
+
 export default Image
diff --git a/src/elements/Input/Input.js b/src/elements/Input/Input.js
@@ -8,7 +8,7 @@ import {
   getUnhandledProps,
   META,
 } from '../../lib'
-import { createIcon } from '../../factories'
+import { Icon } from '../../elements'
 
 const inputPropNames = [
   // React
@@ -109,7 +109,7 @@ export default class Input extends Component {
         {isLeftLabeled && labelChildren}
         {isLeftAction && actionChildren}
         <input {...inputProps} {...input} type={type} />
-        {createIcon(icon)}
+        {Icon.create(icon)}
         {isRightLabeled && labelChildren}
         {isRightAction && actionChildren}
       </ElementType>

diff --git a/src/elements/Label/Label.js b/src/elements/Label/Label.js
@@ -2,6 +2,8 @@ import cx from 'classnames'
 import React, { PropTypes } from 'react'
 
 import {
+  createShorthand,
+  createShorthandFactory,
   customPropTypes,
   getElementType,
   getUnhandledProps,
@@ -11,8 +13,7 @@ import {
   useKeyOrValueAndKey,
   useValueAndKey,
 } from '../../lib'
-import { createIcon, createImage, createShorthand } from '../../factories'
-import { Icon } from '../'
+import { Icon, Image } from '../'
 import LabelDetail from './LabelDetail'
 
 /**
@@ -28,8 +29,8 @@ function Label(props) {
   const handleRemove = e => onRemove && onRemove(e, props)
 
   const pointingClass = pointing === true && 'pointing'
-      || (pointing === 'left' || pointing === 'right') && `${pointing} pointing`
-      || (pointing === 'above' || pointing === 'below') && `pointing ${pointing}`
+    || (pointing === 'left' || pointing === 'right') && `${pointing} pointing`
+    || (pointing === 'above' || pointing === 'below') && `pointing ${pointing}`
 
   const classes = cx('ui',
     size,
@@ -58,8 +59,8 @@ function Label(props) {
 
   return (
     <ElementType className={classes} onClick={handleClick} {...rest}>
-      {createIcon(icon)}
-      {typeof image !== 'boolean' && createImage(image)}
+      {Icon.create(icon)}
+      {typeof image !== 'boolean' && Image.create(image)}
       {content}
       {createShorthand(LabelDetail, val => ({ content: val }), detail)}
       {(removable || onRemove) && (
@@ -194,4 +195,6 @@ Label.propTypes = {
 
 Label.Detail = LabelDetail
 
+Label.create = createShorthandFactory(Label, value => ({ content: value }))
+
 export default Label
diff --git a/src/elements/List/ListItem.js b/src/elements/List/ListItem.js
@@ -6,7 +6,7 @@ import {
   getElementType,
   META,
 } from '../../lib'
-import { createIcon, createImage } from '../../factories'
+import { Icon, Image } from '../../elements'
 
 export default class ListItem extends Component {
   static propTypes = {
@@ -31,7 +31,7 @@ export default class ListItem extends Component {
     const { children, className, description, header, icon, image, ...rest } = this.props
     const classes = cx(className, 'item')
 
-    const media = createIcon(icon) || createImage(image)
+    const media = Icon.create(icon) || Image.create(image)
     const _description = description || children
 
     let content = header ? [

diff --git a/src/elements/Step/Step.js b/src/elements/Step/Step.js
@@ -8,7 +8,7 @@ import {
   META,
   useKeyOnly,
 } from '../../lib'
-import { createIcon } from '../../factories'
+import { Icon } from '../../elements'
 import StepContent from './StepContent'
 import StepDescription from './StepDescription'
 import StepGroup from './StepGroup'
@@ -45,7 +45,7 @@ function Step(props) {
       href={href}
       onClick={handleClick}
     >
-      {!children && createIcon(icon)}
+      {!children && Icon.create(icon)}
       {children || <StepContent description={description} title={title} />}
     </ElementType>
   )

diff --git a/src/elements/Step/StepContent.js b/src/elements/Step/StepContent.js
@@ -2,12 +2,12 @@ import React, { PropTypes } from 'react'
 import cx from 'classnames'
 
 import {
+  createShorthand,
   customPropTypes,
   getElementType,
   getUnhandledProps,
   META,
 } from '../../lib'
-import { createShorthand } from '../../factories'
 import StepDescription from './StepDescription'
 import StepTitle from './StepTitle'
 

diff --git a/src/factories.js → src/lib/factories.js b/src/factories.js → src/lib/factories.js
@@ -2,10 +2,6 @@ import _ from 'lodash'
 import cx from 'classnames'
 import React, { isValidElement } from 'react'
 
-import Icon from './elements/Icon/Icon'
-import Image from './elements/Image/Image'
-import Label from './elements/Label/Label'
-
 /**
  * Merges props and classNames.
  *
@@ -50,21 +46,18 @@ export function createShorthand(Component, mapValueToProps, val, defaultProps =
 
   // Map values to props and create a ReactElement
   if (_.isString(val) || _.isNumber(val)) {
-    return <Component {...mergePropsAndClassName(defaultProps, mapValueToProps(val))} />
+    return <Component {...mergePropsAndClassName(mapValueToProps(val), defaultProps)} />
   }
 
   // Otherwise null
   return null
 }
 
-function createShorthandFactory(Component, mapValueToProps) {
+export function createShorthandFactory(Component, mapValueToProps) {
   return _.partial(createShorthand, Component, mapValueToProps)
 }
 
 // ----------------------------------------
-// Factories
+// HTML Factories
 // ----------------------------------------
-export const createIcon = createShorthandFactory(Icon, value => ({ name: value }))
-export const createImage = createShorthandFactory(Image, value => ({ src: value }))
 export const createHTMLImage = createShorthandFactory('img', value => ({ src: value }))
-export const createLabel = createShorthandFactory(Label, value => ({ content: value }))
diff --git a/src/lib/index.js b/src/lib/index.js
@@ -17,6 +17,7 @@ export {
   makeDebugger,
 } from './debug'
 
+export * from './factories'
 export { default as getUnhandledProps } from './getUnhandledProps'
 export { default as getElementType } from './getElementType'
 export * as META from './META'

diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js
@@ -4,6 +4,7 @@ import React, { Children, cloneElement, PropTypes } from 'react'
 
 import {
   AutoControlledComponent as Component,
+  createShorthand,
   customPropTypes,
   getElementType,
   getUnhandledProps,
@@ -14,7 +15,7 @@ import {
   useKeyOnly,
   useKeyOrValueAndKey,
 } from '../../lib'
-import { createIcon, createShorthand } from '../../factories'
+import { Icon } from '../../elements'
 import { Label } from '../../elements'
 import DropdownDivider from './DropdownDivider'
 import DropdownItem from './DropdownItem'
@@ -966,7 +967,7 @@ export default class Dropdown extends Component {
         {this.renderSearchInput()}
         {this.renderSearchSizer()}
         {trigger || this.renderText()}
-        {createIcon(icon)}
+        {Icon.create(icon)}
         {this.renderMenu()}
       </ElementType>
     )

diff --git a/src/modules/Dropdown/DropdownHeader.js b/src/modules/Dropdown/DropdownHeader.js
@@ -7,7 +7,7 @@ import {
   getUnhandledProps,
   META,
 } from '../../lib'
-import { createIcon } from '../../factories'
+import { Icon } from '../../elements'
 
 function DropdownHeader(props) {
   const { className, children, content, icon } = props
@@ -25,7 +25,7 @@ function DropdownHeader(props) {
 
   return (
     <ElementType className={classes} {...rest}>
-      {createIcon(icon)}
+      {Icon.create(icon)}
       {content}
     </ElementType>
   )