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

Merge pull request #15531 from grafana/hugoh/react-switch-works-outside-switch

Browse Source 
Surrounded Switch with div to restrict size
This commit is contained in:
Torkel Ödegaard 2019-02-19 12:06:59 +01:00 committed by GitHub
commit 3f1c4c3ed9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
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 htmlFor={labelId} className={`gf-form gf-form-switch-container ${className || ''}`}>
{label && <div className={labelClassName}>{label}</div>} {label && <div className={labelClassName}>{label}</div>}
<div className={switchClassName}> <div className={switchClassName}>
<input id={labelId} type="checkbox" checked={checked} onChange={this.internalOnChange} /> <input id={labelId} type="checkbox" checked={checked} onChange={this.internalOnChange} />
<span className="gf-form-switch__slider" /> <span className="gf-form-switch__slider" />
</div> </div>
</label> </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;