fix children check and custom propType checker

This commit is contained in:
Rodrigo Antinarelli 2020-03-24 18:14:24 -03:00 committed by James A. Petts
parent bf2c731807
commit 062b0f5b99
2 changed files with 50 additions and 8 deletions

View File

@ -11,9 +11,11 @@ const TableHead = ({ children, className, style }) => {
)} )}
style={style} style={style}
> >
{React.cloneElement(children, { {React.isValidElement(children)
isTableHead: true, ? React.cloneElement(children, {
})} isTableHead: true,
})
: children}
</div> </div>
); );
}; };
@ -24,7 +26,26 @@ TableHead.defaultProps = {
}; };
TableHead.propTypes = { TableHead.propTypes = {
children: PropTypes.node.isRequired, children: function(props, propName, componentName) {
const elements = React.Children.toArray(props.children);
const isString = elements.some(child => typeof child === 'string');
if (isString) {
return new Error(
`Failed prop type: Invalid prop ${propName} supplied to ${componentName}, expected a valid element instead of a string.`
);
}
const isInvalidElement = elements.some(
child => !React.isValidElement(child)
);
if (isInvalidElement) {
return new Error(
`Failed prop type: Invalid prop ${propName} supplied to ${componentName}, expected a valid node element.`
);
}
},
className: PropTypes.string, className: PropTypes.string,
style: PropTypes.object, style: PropTypes.object,
}; };

View File

@ -5,9 +5,11 @@ import classnames from 'classnames';
const TableRow = ({ children, className, isTableHead, style }) => { const TableRow = ({ children, className, isTableHead, style }) => {
return ( return (
<div className={classnames('w-full flex', className)} style={style}> <div className={classnames('w-full flex', className)} style={style}>
{React.Children.map(children, child => {React.isValidElement(children)
React.cloneElement(child, { isTableHead }) ? React.Children.map(children, child =>
)} React.cloneElement(child, { isTableHead })
)
: children}
</div> </div>
); );
}; };
@ -20,7 +22,26 @@ TableRow.defaultProps = {
TableRow.propTypes = { TableRow.propTypes = {
isTableHead: PropTypes.bool, isTableHead: PropTypes.bool,
children: PropTypes.node.isRequired, children: function(props, propName, componentName) {
const elements = React.Children.toArray(props.children);
const isString = elements.some(child => typeof child === 'string');
if (isString) {
return new Error(
`Failed prop type: Invalid prop ${propName} supplied to ${componentName}, expected a valid element instead of a string.`
);
}
const isInvalidElement = elements.some(
child => !React.isValidElement(child)
);
if (isInvalidElement) {
return new Error(
`Failed prop type: Invalid prop ${propName} supplied to ${componentName}, expected a valid node element.`
);
}
},
className: PropTypes.string, className: PropTypes.string,
style: PropTypes.object, style: PropTypes.object,
}; };