All files / src/Button Button.js

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { Component } from 'preact';
import PropTypes from 'prop-types';
import { StyledButton } from './styles';
 
/**
 * This button is used to add dimension to mostly flat layouts and emphasizes important functions on your page.
 *
 * @example ./../../docs/components/Button.md
 */
class Button extends Component {
    static propTypes = {
        /**
         * Button label.
         */
        children: PropTypes.string.isRequired,
 
        /**
         * The size of the Button
         */
        size: PropTypes.oneOf(['small', 'normal', 'large']),
 
        /**
         * If true, the button will be rounded corners
         */
        rounded: PropTypes.bool,
 
        /**
         * If true, the button will use the theme's primary color
         */
        primary: PropTypes.bool,
 
        /**
         * If true, the button will use the theme's secondary color
         */
        secondary: PropTypes.bool,
 
        /**
         * If true, the button will be disabled
         */
        disabled: PropTypes.bool,
 
        /**
         * Gets called when the user clicks on the button
         *
         * @param {SyntheticEvent} event The react `SyntheticEvent`
         */
        onClick: PropTypes.func,
    };
 
    static defaultProps = {
        primary: false,
        secondary: false,
        clicked: false,
    };
 
    static contextTypes = {
        theme: PropTypes.object,
    };
 
    _handleClick = event => {
        this.setState({
            clicked: true,
        });
 
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => this.setState({ clicked: false }), 500);
 
        const onClick = this.props.onClick;
        if (onClick) {
            onClick(event);
        }
    };
 
    componentWillUnmount() {
        if (this.timeout) {
            clearTimeout(this.timeout);
        }
    }
 
    render() {
        const clicked = this.state.clicked ? 'clicked' : '';
        const {
            badge = '',
            loading = false,
            className,
            left,
            right,
        } = this.props;
        const { theme } = this.context;
 
        return (
            <StyledButton
                {...this.props}
                onClick={this._handleClick}
                className={`${clicked} ${loading && 'loading'}
				${className}`}
                theme={theme}
            >
                <span className="item-left">{left}</span>
                {this.props.children}
                <span className="item-right">{right}</span>
                <span className={`${badge && 'badge'}`}>
                    {badge && badge.value}
                </span>
            </StyledButton>
        );
    }
}
 
export default Button;