import * as React from 'react' ; import { IActionProps , ProgressActionState } from './IProgress' ; import styles from './Progress.module.scss' ; import { Spinner , SpinnerSize } from 'office-ui-fabric-react/lib/Spinner' ; import { Icon } from 'office-ui-fabric-react/lib/Icon' ; import { Label } from 'office-ui-fabric-react/lib/Label' ; import { css } from 'office-ui-fabric-react/lib/Utilities' ; export class Action extends React . Component < IActionProps , { } > { /**
     * Default React render method
     */ public render ( ) { const { state , subActionsTitles , errorMessage , title , className , successIconName , errorIconName , inProgressIconName } = this . props ; const inactive = state === ProgressActionState . notStarted ; const labelClassName = inactive ? css ( styles . label , styles . inactive ) : styles . label ; let iconName = '' ; let iconClassName = '' ; switch ( state ) { case ProgressActionState . finished : iconName = successIconName || 'CheckMark' ; iconClassName = styles . successIcon ; break ; case ProgressActionState . notStarted : iconName = successIconName || 'CheckMark' ; iconClassName = styles . inactiveIcon ; break ; case ProgressActionState . errored : iconName = errorIconName || 'Error' ; iconClassName = styles . errorIcon ; break ; case ProgressActionState . inProgress : iconName = inProgressIconName ; break ; } return ( < div className = { css ( styles . actionContainer , className ) } > < div className = { styles . actionHeader } > { iconName ? ( < Icon className = { css ( styles . actionIcon , iconClassName ) } iconName = { iconName } / > ) : ( < Spinner className = { css ( styles . actionIcon , styles . spinner ) } size = { SpinnerSize . small } / > ) } < div className = { labelClassName } > { title } < /div> < /div> { subActionsTitles && ( < div className = { styles . subActionsContainer } > { subActionsTitles . map ( ( saTitle , index ) => ( < div className = { labelClassName } key = { index } > { saTitle } < /div>))} < /div>)} { state === ProgressActionState . errored && ( < div className = { styles . errorContainer } > < Label className = { styles . errorMessage } > { errorMessage } < /Label> < /div>)} < /div>); } }