SimpleButton.tsx
1 import React, { Component } from 'react'; 2 3 import Spinner from './Spinner'; 4 import './SimpleButton.scss'; 5 6 const DEFAULT_BUTTON_TYPE = 'primary'; 7 const DEFAULT_BUTTON_SIZE = 'lg'; 8 9 type ButtonType = 'default' | 'primary' | 'success' | 'info' | 'warning' | 'danger'; 10 type ButtonSize = 'lg' | 'sm' | 'xs'; 11 12 interface Props { 13 text: string; 14 loading?: boolean; 15 disabled?: boolean; 16 loadingText?: string; 17 size?: ButtonSize; 18 type?: ButtonType; 19 onClick(): any; 20 } 21 22 export default class SimpleButton extends Component<Props, {}> { 23 public computedClass = () => { 24 return `btn btn-${this.props.size || DEFAULT_BUTTON_TYPE} btn-${this.props.type || 25 DEFAULT_BUTTON_SIZE}`; 26 }; 27 28 public render() { 29 const { loading, disabled, loadingText, text, onClick } = this.props; 30 return ( 31 <div> 32 <button onClick={onClick} disabled={loading || disabled} className={this.computedClass()}> 33 {loading ? ( 34 <div className="SimpleButton"> 35 <Spinner light={true} /> {loadingText || text} 36 </div> 37 ) : ( 38 <div>{text}</div> 39 )} 40 </button> 41 </div> 42 ); 43 } 44 }