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

Move Switch component to grafana-ui

Browse Source
This commit is contained in:
Dominik Prokop 2019-01-24 15:35:50 +01:00
parent ce440b85fc
commit 1d3122632f
7 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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} />

1
packages/grafana-ui/src/components/index.ts
View File

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

2
public/app/features/dashboard/panel_editor/QueryOptions.tsx
View File

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

5
public/app/features/datasources/settings/BasicSettings.tsx
View File

@ -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>

3
public/app/features/explore/Logs.tsx
View File

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

3
public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx
View File

@ -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>> {

4
public/app/plugins/panel/graph2/GraphPanelOptions.tsx
View File

@ -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>> {