# All files / lib/button index.tsx

100% Statements 19/19
100% Branches 8/8
100% Functions 2/2
100% Lines 14/14

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    492x

    2x
    2x
    2x

    2x

    6x

    6x

    6x
    2x
    1x

    6x

    6x

    2x

    2ximport * as React from 'react';
    import {ButtonHTMLAttributes, CSSProperties} from "react";
    import sc from 'utils/classname';
    import Icon from '../icon/icon';
    import './index.scss';

    interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>{
      type?: 'primary' | 'danger' | 'warning' | 'success' | 'midnightBlue' | 'dark',
      loading?: boolean,
      className?: string,
      style?: CSSProperties,
      onClick?: React.MouseEventHandler
    }

    const Button: React.FunctionComponent<ButtonProps> = (props) => {

      const {onClick, className, type, loading, ...restProps} = props;

      const btnClasses = sc(className, 'wen-button', type, loading ? 'wen-loading' : '');

      const onButtonClick:React.MouseEventHandler = (e) => {
        if (loading) return;
        onClick && onClick(e)
      }

      const iconWrapper = loading ?
        (
          <div className="wen-loading-icon-wrapper">
            <Icon name="loading" className="wen-loading-icon"/>
          </div>
        )
        :
        '';

      return (
        <button className={btnClasses} onClick={onButtonClick} {...restProps}>
          {iconWrapper}
          <span className="wen-button-inner">
            {props.children}
          </span>
        </button>
      );
    };

    Button.defaultProps = {
      loading: false,
    };

    export default Button;