IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -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> { export class Switch extends PureComponent<Props, State> {
state = { state = {
id: _.uniqueId(), id: _.uniqueId('check-'),
}; };
internalOnChange = (event: React.FormEvent<HTMLInputElement>) => { internalOnChange = (event: React.FormEvent<HTMLInputElement>) => {
@ -29,18 +29,20 @@ export class Switch extends PureComponent<Props, State> {
render() { render() {
const { labelClass = '', switchClass = '', label, checked, transparent, className } = this.props; 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 labelClassName = `gf-form-label ${labelClass} ${transparent ? 'gf-form-label--transparent' : ''} pointer`;
const switchClassName = `gf-form-switch ${switchClass} ${transparent ? 'gf-form-switch--transparent' : ''}`; const switchClassName = `gf-form-switch ${switchClass} ${transparent ? 'gf-form-switch--transparent' : ''}`;
return ( return (
<label htmlFor={labelId} className={`gf-form gf-form-switch-container ${className}`}> <div className="gf-form-switch-container-react">
{label && <div className={labelClassName}>{label}</div>} <label htmlFor={labelId} className={`gf-form gf-form-switch-container ${className || ''}`}>
<div className={switchClassName}> {label && <div className={labelClassName}>{label}</div>}
<input id={labelId} type="checkbox" checked={checked} onChange={this.internalOnChange} /> <div className={switchClassName}>
<span className="gf-form-switch__slider" /> <input id={labelId} type="checkbox" checked={checked} onChange={this.internalOnChange} />
</div> <span className="gf-form-switch__slider" />
</label> </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 { .gf-form-switch-container {
display: flex; display: flex;
cursor: pointer; cursor: pointer;