import * as React from 'react' ; import classNames from 'classnames' ; export interface IAlignProps { vertical ? : boolean ; className ? : string ; columns ? : Array < number > ; margin ? : string ; children ? : any ; fill ? : boolean ; style ? : any ; alignItems ? : string ; } export interface IAlignChildProps { columns ? : Array < number > ; vertical ? : boolean ; width ? : number ; element ? : JSX . Element ; margin ? : string ; } export interface IAlignState { widthArray ? : Array < number > ; maxColumnsLength ? : number ; } const AlignChild = ( props ) => { let { columns , vertical , width , element , margin } = props ; let alignChildStyle = { flex : columns || vertical ? 'none' : '1 !important' , padding : margin , width : ! vertical ? width + '%' : null , height : vertical ? width + '%' : null } ; return ( < div className = "r-Align__Child" style = { alignChildStyle } > { element } < /div>); } ; export default class Align extends React . Component < IAlignProps , IAlignState > { constructor ( props ) { super ( props ) ; this . state = { widthArray : [ ] , maxColumnsLength : 0 } ; } componentDidMount ( ) { this . props . columns ? this . alignColumns ( this . props . columns ) : null ; } componentDidUpdate ( prevProps ) { if ( prevProps . columns !== this . props . columns ) { this . alignColumns ( this . props . columns ) ; } } alignUpdate ( widthArray , singleColumnLength , maxColumnsLength ) { this . setState ( { maxColumnsLength : maxColumnsLength } , ( ) => { widthArray . push ( singleColumnLength / this . state . maxColumnsLength * 100 ) ; this . setState ( { widthArray : widthArray } ) ; } ) ; } alignColumns ( columns ) { let widthArray = [ ] ; let maxColumnsLength = 0 ; if ( columns ) { columns . map ( ( singleColumnLength ) => { maxColumnsLength += singleColumnLength ; this . alignUpdate ( widthArray , singleColumnLength , maxColumnsLength ) ; } ) ; } } alignChildren = ( element , key ) => { let { columns , margin , vertical } = this . props ; return ( < AlignChild key = { key } element = { element } width = { this . state . widthArray [ key ] } columns = { columns } margin = { margin } vertical = { vertical } / > ) ; } ; render ( ) { const self = this ; const props = self . props ; let { vertical , children , className , fill , alignItems } = props ; let alignClass = classNames ( 'r-Align' , { 'e-vertical' : vertical } , { 'e-horizontal' : ! vertical } , { 'e-fill' : fill } , 'e-align-' + alignItems , className ) ; return ( < div style = { this . props . style } className = { alignClass } > { children . length > 1 ? children . map ( this . alignChildren ) : this . props . children } < /div>); } }