import classnames from 'classnames' ; import m from 'mithril' ; import { Icon } from '../icon' ; import { Spinner } from '../spinner' ; import { Classes , IActionItemAttrs , IAttrs , ISizeAttrs , IIntentAttrs , Align , isNullOrEmpty } from '../../_shared' ; export interface IButtonAttrs extends IAttrs , IActionItemAttrs , ISizeAttrs , IIntentAttrs { default align ? : Align ; /** Toggles basic styling (no borders/background) */ basic ? : boolean ; /** Reduces horizontal padding */ compact ? : boolean ; /** Sets anchor tag URL (anchor button only) */ href ? : string ; /** Toggles loading animation */ loading ? : boolean ; /** Toggles rounded styling */ rounded ? : boolean ; /** Fills width of parent container */ fluid ? : boolean ; /** Toggles outlined styling */ outlined ? : boolean ; /** Sublabel */ sublabel ? : m . Child ; [ htmlAttrs ] : any ; } export class Button implements m . Component < IButtonAttrs > { public view ( { attrs } ) { const { align = 'center' , active , basic , compact , class : className , disabled , fluid , href , iconLeft , iconLeftAttrs , iconRight , iconRightAttrs , intent , loading , label , onclick , outlined , rounded , size , sublabel , ... htmlAttrs } = attrs ; const tag = href ? 'a' : 'button' ; const isAnchor = tag === 'a' ; const classes = classnames ( Classes . BUTTON , align && `${ Classes . ALIGN }-${ align }` , active && Classes . ACTIVE , compact && Classes . COMPACT , disabled && Classes . DISABLED , fluid && Classes . FLUID , loading && Classes . LOADING , size && `cui-${ size }` , intent && `cui-${ intent }` , rounded && Classes . ROUNDED , basic && Classes . BASIC , outlined && Classes . OUTLINED , isNullOrEmpty ( label ) && isNullOrEmpty ( sublabel ) && ( ! iconLeft || ! iconRight ) && Classes . BUTTON_ICON , className ) ; const content = [ loading && m ( Spinner , { active : true , fill : true } ) , iconLeft && m ( Icon , { name : iconLeft , ... iconLeftAttrs } ) , ! isNullOrEmpty ( sublabel ) && m ( 'span' , { class : Classes . BUTTON_SUBLABEL } , sublabel ) , ! isNullOrEmpty ( label ) && m ( 'span' , { class : Classes . BUTTON_LABEL } , label ) , iconRight && m ( Icon , { name : iconRight , ... iconRightAttrs } ) ] ; return m ( tag , { type : isAnchor ? undefined : 'button' , role : isAnchor ? 'button' : undefined , ... htmlAttrs , class : classes , disabled , href : disabled ? undefined : href , onclick : disabled ? undefined : onclick , tabIndex : disabled ? undefined : htmlAttrs . tabIndex } , content ) ; } }