Move Switch component to grafana-ui

public/app/core/components/Switch/Switch.tsx → packages/grafana-ui/src/components/Switch/Switch.tsx

@@ -4,10 +4,11 @@ import _ from 'lodash';
 export interface Props {
   label: string;
   checked: boolean;
+  className?: string;
   labelClass?: string;
   switchClass?: string;
   transparent?: boolean;
-  onChange: (event) => any;
+  onChange: (event?: React.SyntheticEvent<HTMLInputElement>) => void;
 }
 
 export interface State {
@@ -19,20 +20,21 @@ export class Switch extends PureComponent<Props, State> {
     id: _.uniqueId(),
   };
 
-  internalOnChange = event => {
+  internalOnChange = (event: React.FormEvent<HTMLInputElement>) => {
     event.stopPropagation();
-    this.props.onChange(event);
+
+    this.props.onChange();
   };
 
   render() {
-    const { labelClass = '', switchClass = '', label, checked, transparent } = this.props;
+    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">
+      <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} />

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';

public/app/features/dashboard/panel_editor/QueryOptions.tsx

@@ -5,7 +5,7 @@ import React, { PureComponent } from 'react';
 import { isValidTimeSpan } from 'app/core/utils/rangeutil';
 
 // Components
-import { Switch } from 'app/core/components/Switch/Switch';
+import { Switch } from '@grafana/ui';
 import { Input } from 'app/core/components/Form';
 import { EventsWithValidation } from 'app/core/components/Form/Input';
 import { InputStatus } from 'app/core/components/Form/Input';

public/app/features/datasources/settings/BasicSettings.tsx

@@ -1,6 +1,5 @@
 import React, { FC } from 'react';
-import { FormLabel } from '@grafana/ui';
-import { Switch } from '../../../core/components/Switch/Switch';
+import { FormLabel, Switch } from '@grafana/ui';
 
 export interface Props {
   dataSourceName: string;
@@ -31,6 +30,8 @@ const BasicSettings: FC<Props> = ({ dataSourceName, isDefault, onDefaultChange,
             required
           />
         </div>
+        {/*
+        //@ts-ignore */}
         <Switch label="Default" checked={isDefault} onChange={event => onDefaultChange(event.target.checked)} />
       </div>
     </div>

public/app/features/explore/Logs.tsx

@@ -4,7 +4,7 @@ import Highlighter from 'react-highlight-words';
 import classnames from 'classnames';
 
 import * as rangeUtil from 'app/core/utils/rangeutil';
-import { RawTimeRange } from '@grafana/ui';
+import { RawTimeRange, Switch } from '@grafana/ui';
 import {
   LogsDedupDescription,
   LogsDedupStrategy,
@@ -20,7 +20,6 @@ import {
   calculateFieldStats,
 } from 'app/core/logs_model';
 import { findHighlightChunksInText } from 'app/core/utils/text';
-import { Switch } from 'app/core/components/Switch/Switch';
 import ToggleButtonGroup, { ToggleButton } from 'app/core/components/ToggleButtonGroup/ToggleButtonGroup';
 
 import Graph from './Graph';

public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx

@@ -1,7 +1,6 @@
 import React, { PureComponent } from 'react';
-import { FormField, PanelOptionsProps, PanelOptionsGroup } from '@grafana/ui';
+import { FormField, PanelOptionsProps, PanelOptionsGroup, Switch } from '@grafana/ui';
 
-import { Switch } from 'app/core/components/Switch/Switch';
 import { GaugeOptions } from './types';
 
 export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<GaugeOptions>> {

public/app/plugins/panel/graph2/GraphPanelOptions.tsx

@@ -2,11 +2,9 @@
 import _ from 'lodash';
 import React, { PureComponent } from 'react';
 
-// Components
-import { Switch } from 'app/core/components/Switch/Switch';
 
 // Types
-import { PanelOptionsProps } from '@grafana/ui';
+import { PanelOptionsProps, Switch } from '@grafana/ui';
 import { Options } from './types';
 
 export class GraphPanelOptions extends PureComponent<PanelOptionsProps<Options>> {