import * as React from 'react' ; import classnames from 'classnames' ; import IReactComponentProps from '../../../common/structures/IReactComponentProps' ; import { ContainerMarginHelper , ContainerMarginLookupType } from './ContainerMarginHelper' ; export interface IContainerProps extends IReactComponentProps { /** Whether to include the container (false) or exclude it (true) */ disabled ? : boolean ; /** The container element or tag (if string) to be used as the container. */ element ? : React . ReactElement | string ; /** Margin values to be set to 'style' prop */ margin ? : ContainerMarginLookupType ; marginBottom ? : ContainerMarginLookupType ; marginLeft ? : ContainerMarginLookupType ; marginRight ? : ContainerMarginLookupType ; marginTop ? : ContainerMarginLookupType ; } const defaultProps = { } ; export const Container = ( props ) => { const Tag = props . element || 'div' ; const element = props . element as React . ReactElement ; const propsWithoutDefaults = { ... props } ; delete propsWithoutDefaults . children ; delete propsWithoutDefaults . disabled ; const doRenderOnlyChildren = props . disabled === true || Object . keys ( propsWithoutDefaults ) . length === 0 ; const doRenderContainerWithTagName = typeof props . element === 'string' || props . element === undefined ; return ( doRenderOnlyChildren ? < > { props . children } < /> : doRenderContainerWithTagName ? < Tag className = { classnames ( props . className ) } id = { props . id } style = { { ... props . style , ... ContainerMarginHelper . getContainerMarginStyle ( props ) , } } > { props . children } < /Tag> : React . cloneElement ( element , { children : Array ( props . children || [ ] ) . concat ( element . props . children || [ ] ) , className : classnames ( props . className , element . props . className ) , style : { ... props . style , ... element . props . style , ... ContainerMarginHelper . getContainerMarginStyle ( props ) , } , } ) ) ; } ; Container . defaultProps = defaultProps ;