From 43567553a0384bb7e1d6be7f72d62f1d0c95019e Mon Sep 17 00:00:00 2001 From: Alexander Fedyashov Date: Mon, 23 Jan 2017 22:02:10 +0200 Subject: [PATCH 1/2] style(Breadcrumb): update typings and propTypes usage --- src/collections/Breadcrumb/Breadcrumb.js | 26 +++++++++++++------ .../Breadcrumb/BreadcrumbDivider.js | 21 ++++++++------- .../Breadcrumb/BreadcrumbSection.js | 16 ++++++------ src/collections/Breadcrumb/index.d.ts | 24 +++++++++++------ .../collections/Breadcrumb/Breadcrumb-test.js | 1 + .../Breadcrumb/BreadcrumbDivider-test.js | 4 ++- .../Breadcrumb/BreadcrumbSection-test.js | 2 ++ 7 files changed, 60 insertions(+), 34 deletions(-) diff --git a/src/collections/Breadcrumb/Breadcrumb.js b/src/collections/Breadcrumb/Breadcrumb.js index 9a4222923d..ccc5bf8971 100644 --- a/src/collections/Breadcrumb/Breadcrumb.js +++ b/src/collections/Breadcrumb/Breadcrumb.js @@ -1,5 +1,5 @@ -import _ from 'lodash' import cx from 'classnames' +import _ from 'lodash' import React, { PropTypes } from 'react' import { @@ -16,8 +16,21 @@ import BreadcrumbSection from './BreadcrumbSection' * A breadcrumb is used to show hierarchy between content. */ function Breadcrumb(props) { - const { children, className, divider, icon, size, sections } = props - const classes = cx('ui', className, size, 'breadcrumb') + const { + children, + className, + divider, + icon, + sections, + size, + } = props + + const classes = cx( + 'ui', + size, + 'breadcrumb', + className, + ) const rest = getUnhandledProps(Breadcrumb, props) const ElementType = getElementType(Breadcrumb, props) @@ -59,9 +72,6 @@ function Breadcrumb(props) { Breadcrumb._meta = { name: 'Breadcrumb', type: META.TYPES.COLLECTION, - props: { - size: _.without(SUI.SIZES, 'medium'), - }, } Breadcrumb.propTypes = { @@ -90,8 +100,8 @@ Breadcrumb.propTypes = { /** Shorthand array of props for Breadcrumb.Section. */ sections: customPropTypes.collectionShorthand, - /** Size of Breadcrumb */ - size: PropTypes.oneOf(Breadcrumb._meta.props.size), + /** Size of Breadcrumb. */ + size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium')), } Breadcrumb.Divider = BreadcrumbDivider diff --git a/src/collections/Breadcrumb/BreadcrumbDivider.js b/src/collections/Breadcrumb/BreadcrumbDivider.js index e266458c80..712e7ce34d 100644 --- a/src/collections/Breadcrumb/BreadcrumbDivider.js +++ b/src/collections/Breadcrumb/BreadcrumbDivider.js @@ -1,5 +1,5 @@ -import _ from 'lodash' import cx from 'classnames' +import _ from 'lodash' import React, { PropTypes } from 'react' import { @@ -15,20 +15,23 @@ import Icon from '../../elements/Icon' * A divider sub-component for Breadcrumb component. */ function BreadcrumbDivider(props) { - const { children, content, icon, className } = props - const classes = cx(className, 'divider') + const { + children, + className, + content, + icon, + } = props + + const classes = cx('divider', className) const rest = getUnhandledProps(BreadcrumbDivider, props) const ElementType = getElementType(BreadcrumbDivider, props) const iconElement = Icon.create(icon, { ...rest, className: classes }) if (iconElement) return iconElement - let breadcrumbContent - if (_.isNil(content)) { - breadcrumbContent = _.isNil(children) ? '/' : children - } else { - breadcrumbContent = content - } + let breadcrumbContent = content + if (_.isNil(content)) breadcrumbContent = _.isNil(children) ? '/' : children + return {breadcrumbContent} } diff --git a/src/collections/Breadcrumb/BreadcrumbSection.js b/src/collections/Breadcrumb/BreadcrumbSection.js index e466f474a5..13a06bc429 100644 --- a/src/collections/Breadcrumb/BreadcrumbSection.js +++ b/src/collections/Breadcrumb/BreadcrumbSection.js @@ -1,5 +1,5 @@ -import _ from 'lodash' import cx from 'classnames' +import _ from 'lodash' import React, { Component, PropTypes } from 'react' import { @@ -12,7 +12,7 @@ import { } from '../../lib' /** - * A section sub-component for Breadcrumb component + * A section sub-component for Breadcrumb component. */ export default class BreadcrumbSection extends Component { static propTypes = { @@ -31,18 +31,18 @@ export default class BreadcrumbSection extends Component { /** Shorthand for primary content. */ content: customPropTypes.contentShorthand, - /** Render as an `a` tag instead of a `div`. */ - link: customPropTypes.every([ - customPropTypes.disallow(['href']), - PropTypes.bool, - ]), - /** Render as an `a` tag instead of a `div` and adds the href attribute. */ href: customPropTypes.every([ customPropTypes.disallow(['link']), PropTypes.string, ]), + /** Render as an `a` tag instead of a `div`. */ + link: customPropTypes.every([ + customPropTypes.disallow(['href']), + PropTypes.bool, + ]), + /** * Called on click. When passed, the component will render as an `a` * tag by default instead of a `div`. diff --git a/src/collections/Breadcrumb/index.d.ts b/src/collections/Breadcrumb/index.d.ts index 491b28819c..f79b16eec9 100644 --- a/src/collections/Breadcrumb/index.d.ts +++ b/src/collections/Breadcrumb/index.d.ts @@ -1,7 +1,8 @@ -import { ReactMouseEvents, SemanticSIZES } from '../..'; import * as React from 'react'; -interface BreadcrumbProps extends ReactMouseEvents { +interface BreadcrumbProps { + [key: string]: any; + /** An element type to render as (string or function). */ as?: any; @@ -12,7 +13,7 @@ interface BreadcrumbProps extends ReactMouseEvents { className?: string; /** Shorthand for primary content of the Breadcrumb.Divider. */ - divider?: any; + divider?: React.ReactNode; /** For use with the sections prop. Render as an `Icon` component with `divider` class instead of a `div` in * Breadcrumb.Divider. @@ -23,7 +24,7 @@ interface BreadcrumbProps extends ReactMouseEvents { sections?: Array; /** Size of Breadcrumb */ - size?: SemanticSIZES; + size?: 'mini' | 'tiny' | 'small' | 'large' | 'big' | 'huge' | 'massive'; } interface BreadcrumbClass extends React.ComponentClass { @@ -34,6 +35,8 @@ interface BreadcrumbClass extends React.ComponentClass { export const Breadcrumb: BreadcrumbClass; interface BreadcrumbDividerProps { + [key: string]: any; + /** An element type to render as (string or function). */ as?: any; @@ -43,19 +46,24 @@ interface BreadcrumbDividerProps { /** Additional classes. */ className?: string; + /** Shorthand for primary content. */ + content?: React.ReactNode; + /** Render as an `Icon` component with `divider` class instead of a `div`. */ icon?: any; } -export const BreadcrumbDivider: React.ComponentClass; +export const BreadcrumbDivider: React.StatelessComponent; interface BreadcrumbSectionProps { - /** Style as the currently active section. */ - active?: boolean; + [key: string]: any; /** An element type to render as (string or function). */ as?: any; + /** Style as the currently active section. */ + active?: boolean; + /** Primary content. */ children?: React.ReactNode; @@ -75,7 +83,7 @@ interface BreadcrumbSectionProps { * @param {SyntheticEvent} event - React's original SyntheticEvent. * @param {object} data - All props. */ - onClick?: React.MouseEventHandler; + onClick?: (event: React.MouseEvent, data: BreadcrumbSectionProps) => void; } export const BreadcrumbSection: React.ComponentClass; diff --git a/test/specs/collections/Breadcrumb/Breadcrumb-test.js b/test/specs/collections/Breadcrumb/Breadcrumb-test.js index 0942399f2d..1bf2f8e5f7 100644 --- a/test/specs/collections/Breadcrumb/Breadcrumb-test.js +++ b/test/specs/collections/Breadcrumb/Breadcrumb-test.js @@ -1,4 +1,5 @@ import React from 'react' + import Breadcrumb from 'src/collections/Breadcrumb/Breadcrumb' import * as common from 'test/specs/commonTests' import { sandbox } from 'test/utils' diff --git a/test/specs/collections/Breadcrumb/BreadcrumbDivider-test.js b/test/specs/collections/Breadcrumb/BreadcrumbDivider-test.js index 5176e8f5c9..78678a527f 100644 --- a/test/specs/collections/Breadcrumb/BreadcrumbDivider-test.js +++ b/test/specs/collections/Breadcrumb/BreadcrumbDivider-test.js @@ -1,15 +1,17 @@ import React from 'react' + import BreadcrumbDivider from 'src/collections/Breadcrumb/BreadcrumbDivider' import * as common from 'test/specs/commonTests' describe('BreadcrumbDivider', () => { common.isConformant(BreadcrumbDivider) + common.rendersChildren(BreadcrumbDivider) + common.implementsIconProp(BreadcrumbDivider, { shorthandDefaultProps: { className: 'divider', }, }) - common.rendersChildren(BreadcrumbDivider) it('renders as a div by default', () => { shallow() diff --git a/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js b/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js index c6a0fbd3d2..85ba364cdf 100644 --- a/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js +++ b/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js @@ -1,10 +1,12 @@ import React from 'react' + import BreadcrumbSection from 'src/collections/Breadcrumb/BreadcrumbSection' import * as common from 'test/specs/commonTests' describe('BreadcrumbSection', () => { common.isConformant(BreadcrumbSection) common.rendersChildren(BreadcrumbSection) + common.propKeyOnlyToClassName(BreadcrumbSection, 'active') it('renders as a div by default', () => { From be9ed59a121df210b7ac600f1d62ee0cf36d69ef Mon Sep 17 00:00:00 2001 From: Alexander Fedyashov Date: Mon, 23 Jan 2017 22:12:28 +0200 Subject: [PATCH 2/2] style(Breadcrumb): fix type --- src/collections/Breadcrumb/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/collections/Breadcrumb/index.d.ts b/src/collections/Breadcrumb/index.d.ts index f79b16eec9..e735647cc4 100644 --- a/src/collections/Breadcrumb/index.d.ts +++ b/src/collections/Breadcrumb/index.d.ts @@ -83,7 +83,7 @@ interface BreadcrumbSectionProps { * @param {SyntheticEvent} event - React's original SyntheticEvent. * @param {object} data - All props. */ - onClick?: (event: React.MouseEvent, data: BreadcrumbSectionProps) => void; + onClick?: (event: React.MouseEvent, data: BreadcrumbSectionProps) => void; } export const BreadcrumbSection: React.ComponentClass;