| 7 | static elementType = 'CheckboxButton'; |
| 8 | |
| 9 | render(): React.DOM { |
| 10 | const group = this.context.ElCheckboxGroup; |
| 11 | |
| 12 | return ( |
| 13 | <label style={this.style()} className={this.className('el-checkbox-button', group.props.size ? 'el-checkbox-button--' + group.props.size : '', { |
| 14 | 'is-disabled': this.props.disabled, |
| 15 | 'is-checked': this.state.checked, |
| 16 | 'is-focus': this.state.focus |
| 17 | })}> |
| 18 | <input |
| 19 | className="el-checkbox-button__original" |
| 20 | type="checkbox" |
| 21 | checked={this.state.checked} |
| 22 | disabled={this.props.disabled} |
| 23 | onFocus={this.onFocus.bind(this)} |
| 24 | onBlur={this.onBlur.bind(this)} |
| 25 | onChange={this.onChange.bind(this)} |
| 26 | /> |
| 27 | <span className="el-checkbox-button__inner" style={this.state.checked ? { |
| 28 | boxShadow: '-1px 0 0 0 ' + group.props.fill, |
| 29 | backgroundColor: group.props.fill || '', |
| 30 | borderColor: group.props.fill || '', |
| 31 | color: group.props.textColor || '' |
| 32 | }: {}}> |
| 33 | {this.state.label || this.props.children} |
| 34 | </span> |
| 35 | </label> |
| 36 | ) |
| 37 | } |
| 38 | } |