Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(factories): remove circular references #550

Merged
merged 2 commits into from
Sep 26, 2016
Merged

fix(factories): remove circular references #550

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c5818d9
fix(factories): remove circular references
levithomason Sep 26, 2016
496c2c9
refactor(factories): move to /lib
levithomason Sep 26, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/collections/Breadcrumb/BreadcrumbDivider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
getElementType,
META,
} from '../../lib'
import { createIcon } from '../../factories'
import { Icon } from '../../elements'

/**
* A divider sub-component for Breadcrumb component.
Expand All @@ -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 })
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Example static shorthand create method for the Icon. I think this cohesion makes more sense anyhow. Keeping the mapValueToProps method in the same file as the component that it is creating.


return <ElementType {...rest} className={classes}>{children || '/'}</ElementType>
}
Expand Down
2 changes: 1 addition & 1 deletion src/collections/Menu/Menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import React, { PropTypes } from 'react'

import {
AutoControlledComponent as Component,
createShorthand,
customPropTypes,
getElementType,
getUnhandledProps,
Expand All @@ -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'
Expand Down
4 changes: 2 additions & 2 deletions src/collections/Menu/MenuItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
useKeyOnly,
useKeyOrValueAndKey,
} from '../../lib'
import { createIcon } from '../../factories'
import { Icon } from '../../elements'

function MenuItem(props) {
const {
Expand Down Expand Up @@ -46,7 +46,7 @@ function MenuItem(props) {

return (
<ElementType {...rest} className={classes} onClick={handleClick}>
{createIcon(icon)}
{Icon.create(icon)}
{content || _.startCase(name)}
</ElementType>
)
Expand Down
4 changes: 2 additions & 2 deletions src/collections/Message/Message.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import React, { PropTypes } from 'react'
import cx from 'classnames'

import {
createShorthand,
customPropTypes,
getElementType,
getUnhandledProps,
Expand All @@ -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'
Expand Down Expand Up @@ -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)}
Expand Down
11 changes: 7 additions & 4 deletions src/elements/Button/Button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import React, { PropTypes } from 'react'

import {
customPropTypes,
createShorthandFactory,
getElementType,
getUnhandledProps,
makeDebugger,
Expand All @@ -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'
Expand Down Expand Up @@ -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>
Expand All @@ -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>
)
}
Expand Down Expand Up @@ -250,4 +251,6 @@ Button.defaultProps = {
as: 'button',
}

Button.create = createShorthandFactory(Button, value => ({ content: value }))
Copy link
Member Author

@levithomason levithomason Sep 26, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Example definition of a static shorthand create() method for our components.

This is where we could pull out the mapValueToProps method and also make it a static on the Button (see TODO 3 in PR description):

Button.mapValueToProps = value => ({ content: value })
Button.create = createShorthandFactory(Button, Button.mapValueToProps)


export default Button
5 changes: 3 additions & 2 deletions src/elements/Header/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import _ from 'lodash'
import cx from 'classnames'
import React, { PropTypes } from 'react'
import {
createShorthand,
customPropTypes,
getElementType,
getUnhandledProps,
Expand All @@ -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'

Expand Down Expand Up @@ -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}
Expand Down
3 changes: 3 additions & 0 deletions src/elements/Icon/Icon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import cx from 'classnames'
import React, { PropTypes } from 'react'

import {
createShorthandFactory,
customPropTypes,
getElementType,
getUnhandledProps,
Expand Down Expand Up @@ -113,4 +114,6 @@ Icon.defaultProps = {
as: 'i',
}

Icon.create = createShorthandFactory(Icon, value => ({ name: value }))

export default Icon
3 changes: 3 additions & 0 deletions src/elements/Image/Image.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import React, { PropTypes } from 'react'

import {
getElementType,
createShorthandFactory,
customPropTypes,
getUnhandledProps,
META,
Expand Down Expand Up @@ -160,4 +161,6 @@ Image.defaultProps = {
ui: true,
}

Image.create = createShorthandFactory(Image, value => ({ src: value }))

export default Image
4 changes: 2 additions & 2 deletions src/elements/Input/Input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
getUnhandledProps,
META,
} from '../../lib'
import { createIcon } from '../../factories'
import { Icon } from '../../elements'

const inputPropNames = [
// React
Expand Down Expand Up @@ -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>
Expand Down
15 changes: 9 additions & 6 deletions src/elements/Label/Label.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import cx from 'classnames'
import React, { PropTypes } from 'react'

import {
createShorthand,
createShorthandFactory,
customPropTypes,
getElementType,
getUnhandledProps,
Expand All @@ -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'

/**
Expand All @@ -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,
Expand Down Expand Up @@ -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) && (
Expand Down Expand Up @@ -194,4 +195,6 @@ Label.propTypes = {

Label.Detail = LabelDetail

Label.create = createShorthandFactory(Label, value => ({ content: value }))

export default Label
4 changes: 2 additions & 2 deletions src/elements/List/ListItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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 ? [
Expand Down
4 changes: 2 additions & 2 deletions src/elements/Step/Step.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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>
)
Expand Down
2 changes: 1 addition & 1 deletion src/elements/Step/StepContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down
13 changes: 3 additions & 10 deletions src/factories.js → src/lib/factories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*
Expand Down Expand Up @@ -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 }))
1 change: 1 addition & 0 deletions src/lib/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
5 changes: 3 additions & 2 deletions src/modules/Dropdown/Dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import React, { Children, cloneElement, PropTypes } from 'react'

import {
AutoControlledComponent as Component,
createShorthand,
customPropTypes,
getElementType,
getUnhandledProps,
Expand All @@ -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'
Expand Down Expand Up @@ -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>
)
Expand Down
4 changes: 2 additions & 2 deletions src/modules/Dropdown/DropdownHeader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -25,7 +25,7 @@ function DropdownHeader(props) {

return (
<ElementType className={classes} {...rest}>
{createIcon(icon)}
{Icon.create(icon)}
{content}
</ElementType>
)
Expand Down
Loading