/**
* @typedef {import('react')} React
*/
/**
* Conditionaly render component A or B based on condition
*
* @param {Function|Object} condition - function or object returning render and props as in {render: true, props: {foo: 'bar'}}
* @param {React.ComponentType} A - React component
* @param {React.ComponentType} B - React component
* @return {React.ComponentType} React component
*/
export const Conditional = ( condition, A, B ) => ( componentProps ) => {
/**
* If condition is a function, call it with componentProps
* Otherwise, use it as an object
* If function, it should return {render: true, props: {foo: 'bar'}},
* otherwise it should be {render: true, props: {foo: 'bar'}}
*
* @param {Object} condition - object or function
*/
const { render, props } =
typeof condition === 'function'
? condition( componentProps )
: condition;
if ( render ) {
return <A { ...componentProps } { ...( props ?? {} ) } />;
}
return <B { ...componentProps } { ...( props ?? {} ) } />;
};