IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-09 23:16:16 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fixes #15506

Browse Source
This commit is contained in:
Hugo Häggmark 2019-02-19 11:17:40 +01:00
parent 14d8a94273
commit d2893c2d1a
2 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/grafana-ui/src/components/Switch/Switch.tsx
View File

@ -17,7 +17,7 @@ export interface State {
export class Switch extends PureComponent<Props, State> {
state = {
id: _.uniqueId(),
id: _.uniqueId('check-'),
};
internalOnChange = (event: React.FormEvent<HTMLInputElement>) => {
@ -29,18 +29,20 @@ export class Switch extends PureComponent<Props, State> {
render() {
const { labelClass = '', switchClass = '', label, checked, transparent, className } = this.props;
const labelId = `check-${this.state.id}`;
const labelId = this.state.id;
const labelClassName = `gf-form-label ${labelClass} ${transparent ? 'gf-form-label--transparent' : ''} pointer`;
const switchClassName = `gf-form-switch ${switchClass} ${transparent ? 'gf-form-switch--transparent' : ''}`;
return (
<label htmlFor={labelId} className={`gf-form gf-form-switch-container ${className}`}>
{label && <div className={labelClassName}>{label}</div>}
<div className={switchClassName}>
<input id={labelId} type="checkbox" checked={checked} onChange={this.internalOnChange} />
<span className="gf-form-switch__slider" />
</div>
</label>
<div className="gf-form-switch-container-react">
<label htmlFor={labelId} className={`gf-form gf-form-switch-container ${className || ''}`}>
{label && <div className={labelClassName}>{label}</div>}
<div className={switchClassName}>
<input id={labelId} type="checkbox" checked={checked} onChange={this.internalOnChange} />
<span className="gf-form-switch__slider" />
</div>
</label>
</div>
);
}
}

4
public/sass/components/_switch.scss
View File

@ -13,6 +13,10 @@ gf-form-switch[disabled] {
}
}
.gf-form-switch-container-react {
display: flex;
}
.gf-form-switch-container {
display: flex;
cursor: pointer;