diff --git a/lib/link.js b/lib/link.js index e352eec5..eca2e798 100644 --- a/lib/link.js +++ b/lib/link.js @@ -11,8 +11,16 @@ export default class Link extends Component { static propTypes = { children: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.element + PropTypes.element, + (props, propName) => { + const value = props[propName] + + if (typeof value === 'string') { + warnLink(`Warning: You're using a string directly inside . This usage has been deprecated. Please add an tag as child of `) + } + + return null + } ]).isRequired } @@ -54,28 +62,24 @@ export default class Link extends Component { } render () { - const children = Children.map(this.props.children, (child) => { - const props = { - onClick: this.linkClicked - } + let { children } = this.props + // Deprecated. Warning shown by propType check. If the childen provided is a string (example) we wrap it in an tag + if (typeof children === 'string') { + children = {children} + } - const isAnchor = child && child.type === 'a' + // This will return the first child, if multiple are provided it will throw an error + const child = Children.only(children) + const props = { + onClick: this.linkClicked + } - // if child does not specify a href, specify it - // so that repetition is not needed by the user - if (!isAnchor || !('href' in child.props)) { - props.href = this.props.as || this.props.href - } + // If child is an tag and doesn't have a href attribute we specify it so that repetition is not needed by the user + if (child.type === 'a' && !('href' in child.props)) { + props.href = this.props.as || this.props.href + } - if (isAnchor) { - return React.cloneElement(child, props) - } else { - warnLink(`Warning: Every Link must be the parent of an anchor, this pattern is deprecated. Please add an anchor inside the .`) - return {child} - } - }) - - return children[0] + return React.cloneElement(child, props) } }