score:0

i overhauled childrenof with support for react-hot-loader 4.x:

import { arecomponentsequal } from 'react-hot-loader';

export function childrenof(...types) {
    return requirable((props, propname, componentname, location, propfullname) => {
        const component = props[propname];
        if(!location) {
            location = 'prop';
        }
        if(!propfullname) {
            propfullname = propname;
        }
        const check = c => types.some(type => arecomponentsequal(type,c.type));
        const valid = array.isarray(component) ? component.every(check) : check(component);
        if(!valid) {
            return new error(
                `invalid ${location} \`${propfullname}\` supplied to \`${componentname}\`. every element must be a <${types.map(t => getdisplayname(t)).join('|')}>.`
            );
        }
        return null;
    });
}

function requirable(predicate) {
    const proptype = (props, propname, ...rest) => {
        // don't do any validation if empty
        if(props[propname] === undefined) {
            return null;
        }

        return predicate(props, propname, ...rest);
    };

    proptype.isrequired = (props, propname, componentname, ...rest) => {
        // warn if empty
        if(props[propname] === undefined) {
            return new error(`required prop \`${propname}\` was not specified in \`${componentname}\`.`);
        }

        return predicate(props, propname, componentname, ...rest);
    };

    return proptype;
}

usage example:

export function tbody({children, ...attrs}) {
    return <tbody {...attrs}>{children}</tbody>;
}

tbody.proptypes = {
    children: wxtypes.childrenof(trow),
};

score:4

did some digging, came up with this helper function based on josephmartin09's solution:

export function childrenof(...types) {
    let fieldtype = proptypes.shape({
        type: proptypes.oneof(types),
    });

    return proptypes.oneoftype([
        fieldtype,
        proptypes.arrayof(fieldtype),
    ]);
}

usage:

columncontainer.proptypes = {
    children: childrenof(column).isrequired,
};

it's not ideal because it doesn't support native dom elements like 'div' and the error message is worthless, but it'll do for now.


Related Query

More Query from same tag