in modules/monochrome/src/shared/toggle/index.js [128:165]
render() {
const {theme, className, style, value, label, isEnabled} = this.props;
const {knobSize = theme.controlSize} = style;
const styleProps = {
theme,
knobSize,
value,
isHovered: this.state.isHovered,
hasFocus: this.state.hasFocus,
isEnabled
};
return (
<WrapperComponent
className={className}
onMouseEnter={this._onMouseEnter}
onMouseLeave={this._onMouseLeave}
onClick={this._onClick}
userStyle={style.wrapper}
{...styleProps}
>
{label}
<ToggleComponent
userStyle={style.toggle}
{...styleProps}
tabIndex={isEnabled ? 0 : -1}
onKeyDown={this._onKeyDown}
onFocus={this._onFocus}
onBlur={this._onBlur}
>
<ToggleTrack userStyle={style.track} {...styleProps} />
<ToggleKnob userStyle={style.knob} {...styleProps} />
</ToggleComponent>
</WrapperComponent>
);
}