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}
>
{React.cloneElement(children, {
isTableHead: true,
})}
{React.isValidElement(children)
? React.cloneElement(children, {
isTableHead: true,
})
: children}
</div>
);
};
@ -24,7 +26,26 @@ TableHead.defaultProps = {
};
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,
style: PropTypes.object,
};

View File

@ -5,9 +5,11 @@ import classnames from 'classnames';
const TableRow = ({ children, className, isTableHead, style }) => {
return (
<div className={classnames('w-full flex', className)} style={style}>
{React.Children.map(children, child =>
React.cloneElement(child, { isTableHead })
)}
{React.isValidElement(children)
? React.Children.map(children, child =>
React.cloneElement(child, { isTableHead })
)
: children}
</div>
);
};
@ -20,7 +22,26 @@ TableRow.defaultProps = {
TableRow.propTypes = {
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,
style: PropTypes.object,
};