-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathButton.js
More file actions
116 lines (96 loc) · 2.74 KB
/
Copy pathButton.js
File metadata and controls
116 lines (96 loc) · 2.74 KB
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
112
113
114
115
116
import React, { Component } from 'react';
import './Button.css';
class Button extends Component {
state = {
continuedPress: false,
}
onClick(event) {
const {onChange, onClick, value, quickPress, pressSpeed} = this.props;
if (!quickPress && value === undefined) {
const timeMs = pressSpeed || 150;
this.setState({continuedPress: true});
clearTimeout(this._lastTimeout);
this._lastTimeout = setTimeout(() => {
this.setState({
continuedPress: false,
});
}, timeMs);
}
if (onChange) {
event.target.value = !value;
onChange(event);
} else if (onClick) {
onClick(event);
} else {
console.error('Clicked on Kickstart Button without event.');
}
}
_makeIcon(content, isSpan = false, isRight = false) {
const cls = 'kc-Button-icon ' + (isRight ? 'kc-Button-icon--right' : '');
if (isSpan) {
return (
<span className={cls} role="img" aria-label="Icon">
{content}
</span>
);
} else {
return (
<img className={cls} src={content} />
);
}
}
renderContent() {
let {iconEmoji} = this.props;
const {value, icon, iconRight, iconEmojiRight} = this.props;
if (
(value === false || value === true) &&
(iconEmoji === undefined && iconEmojiRight === undefined)
) {
iconEmoji = value ? '☑' : '☐';
}
if (!icon && !iconRight && !iconEmoji && !iconEmojiRight) {
return this.props.children;
}
let imgLeft = null;
let imgRight = null;
if (icon) {
imgLeft = this._makeIcon(icon);
}
if (iconRight) {
imgRight = this._makeIcon(iconRight, false, true);
}
if (iconEmoji) {
imgLeft = this._makeIcon(iconEmoji, true);
}
if (iconEmojiRight) {
imgRight = this._makeIcon(iconEmojiRight, true, true);
}
return (
<div className="kc-Button-contentsWrapper">
{imgLeft}
<div className="kc-Button-childrenWrapper">
{this.props.children}
</div>
{imgRight}
</div>
);
}
render() {
// Build button classes based on props
const {style, type, shape, size, depth, value} = this.props;
let classNames = ['kc-Button'];
classNames.push(`kc-Button--${type || 'default'}`);
classNames.push(`kc-Button--${size || 'medium'}`);
classNames.push(`kc-Button--${depth || 'medium'}Depth`);
classNames.push(`kc-Button--${shape || 'square'}`);
if (value === true || this.state.continuedPress) {
classNames.push('kc-Button--depressed');
}
return (
<div style={style} className={classNames.join(' ')} onClick={this.onClick.bind(this)}>
{this.renderContent()}
</div>
);
}
}
export default Button;