Created
June 4, 2019 14:16
-
-
Save endymion1818/6def1ab048e6e70bf37f502e94073aef to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, {FC} from 'react' | |
import Column from '../Atoms/Column' | |
import Row from '../Atoms/Row' | |
export interface IContentProps { | |
/** | |
* an array of objects with JSX elements | |
* @default <> </> | |
*/ | |
innerContent: JSX.Element | |
} | |
export interface IRenderContentProps { | |
/** | |
* an array of objects with JSX elements | |
* @default <> </> | |
*/ | |
item: IContentProps | |
/** | |
* index | |
* @default 0 | |
*/ | |
index: number | |
/** | |
* text alignment | |
* @default 'left' | |
*/ | |
textAlign?: string | |
/** | |
* buffer top | |
* @default '0rem' | |
*/ | |
bufferTop?: string | |
/** | |
* buffer bottom | |
* @default '0rem' | |
*/ | |
bufferBottom?: string | |
/** | |
* vertical align | |
* @default 'top' | |
*/ | |
verticalAlign?: string | |
} | |
export const renderContent:FC<IRenderContentProps> = ({ | |
item, | |
index, | |
textAlign = 'left', | |
bufferBottom = '0rem', | |
bufferTop = '0rem', | |
verticalAlign = 'top' | |
}) => ( | |
<Column | |
key={index} | |
textAlign={textAlign} | |
bufferBottom={bufferBottom} | |
bufferTop={bufferTop} | |
verticalAlign={verticalAlign} | |
> | |
{item.innerContent} | |
</Column> | |
) | |
export interface IEvenColumnsProps extends IContentProps { | |
/** | |
* an array of objects with JSX elements | |
* @default <> </> | |
*/ | |
content: Array<{innerContent: JSX.Element}> | |
/** | |
* index | |
* @default 0 | |
*/ | |
index: number | |
/** | |
* text alignment | |
* @default 'left' | |
*/ | |
textAlign?: string | |
/** | |
* buffer top | |
* @default '0rem' | |
*/ | |
bufferTop?: string | |
/** | |
* buffer bottom | |
* @default '0rem' | |
*/ | |
bufferBottom?: string | |
/** | |
* vertical align | |
* @default 'top' | |
*/ | |
verticalAlign?: string | |
} | |
const EvenColumns: FC<IEvenColumnsProps> = ({ | |
content, | |
textAlign, | |
bufferBottom, | |
bufferTop, | |
verticalAlign | |
}) => ( | |
<Row size={content.length}> | |
{content.map((item, index) => | |
renderContent({ | |
item, | |
index, | |
textAlign, | |
bufferBottom, | |
bufferTop, | |
verticalAlign | |
}) | |
)} | |
</Row> | |
) | |
Column.defaultProps = { | |
} | |
export default EvenColumns; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment