import m from 'mithril' ; import classnames from 'classnames' ; import { Classes , IAttrs , Breakpoints } from '../../_shared' ; import { IBreakpointMap } from './Grid' ; export interface IColAttrs extends IAttrs { /** Width of column; between 1-12 */ span ? : number | IBreakpointMap ; /** Column order */ order ? : number | IBreakpointMap ; /** Column offset */ offset ? : number | IBreakpointMap ; [ htmlAttrs ] : any ; } export class Col implements m . Component < IColAttrs > { public view ( { attrs , children } ) { const { span , order , offset , class : className , ... htmlAttrs } = attrs ; let breakpointClasses = '' ; Object . keys ( Breakpoints ) . map ( breakpoint => { breakpointClasses = classnames ( breakpointClasses , typeof span === 'object' && span [ breakpoint ] && `${ Classes . COL }-${ breakpoint }-${ span [ breakpoint ] }` , typeof order === 'object' && order [ breakpoint ] && `${ Classes . COL }-${ breakpoint }-order-${ order [ breakpoint ] }` , typeof offset === 'object' && offset [ breakpoint ] && `${ Classes . COL }-${ breakpoint }-offset-${ offset [ breakpoint ] }` ) ; } ) ; const classes = classnames ( breakpointClasses , typeof span === 'number' && `${ Classes . COL }-${ span }` , typeof order === 'number' && `${ Classes . COL }-order-${ order }` , typeof offset === 'number' && `${ Classes . COL }-offset-${ offset }` , className ) ; return m ( '' , { ... htmlAttrs , class : classes } , children ) ; } }