/ common / components / ui / SimpleButton.tsx
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  }