Move Switch component to grafana-ui

packages/grafana-ui/src/components/Switch/Switch.tsx

@@ -0,0 +1,46 @@
+import React, { PureComponent } from 'react';
+import _ from 'lodash';
+
+export interface Props {
+  label: string;
+  checked: boolean;
+  className?: string;
+  labelClass?: string;
+  switchClass?: string;
+  transparent?: boolean;
+  onChange: (event?: React.SyntheticEvent<HTMLInputElement>) => void;
+}
+
+export interface State {
+  id: any;
+}
+
+export class Switch extends PureComponent<Props, State> {
+  state = {
+    id: _.uniqueId(),
+  };
+
+  internalOnChange = (event: React.FormEvent<HTMLInputElement>) => {
+    event.stopPropagation();
+
+    this.props.onChange();
+  };
+
+  render() {
+    const { labelClass = '', switchClass = '', label, checked, transparent, className } = this.props;
+
+    const labelId = `check-${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>
+    );
+  }
+}

packages/grafana-ui/src/components/index.ts

@@ -22,3 +22,4 @@ export { PanelOptionsGroup } from './PanelOptionsGroup/PanelOptionsGroup';
 export { PanelOptionsGrid } from './PanelOptionsGrid/PanelOptionsGrid';
 export { ValueMappingsEditor } from './ValueMappingsEditor/ValueMappingsEditor';
 export { Gauge } from './Gauge/Gauge';
+export { Switch } from './Switch/Switch';