components.common.LambdaComponent.tsx Maven / Gradle / Ivy

import React from 'react';

/**
 * This component allows you to write both:
 *   1)  { (props) => ..... } 
 *   2)  { func } , where func is a function taking props as argument
 *   3)     , where 'props' is available inside Foo
 */

type LambdaProps = {
  props: any,
  children: React.ReactNode,
  level?: number,
};

const LambdaComponent = ({props, children, level = 0}: LambdaProps): JSX.Element => {
	if (Array.isArray(children)) {
		if (level <= 1) // only inject one level deep
	    return (
        
          { children
              .map((child, index) => 
                {child}
              )
          }
        
      )
		else 
      return (
        
          {children}
        
      )
	}
	else if (React.isValidElement(children))
		return React.cloneElement(children, props) 
	else if (typeof children === 'function') 
  // @ts-ignore
		return React.createElement(children, props) // component as children	
	else {
		console.error("Lambda child is not a function nor a react component: %o (is it a syntax error?)", children)
		return 
	}
}

export default LambdaComponent;