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

redoing input props

Browse Source
This commit is contained in:
Peter Holmberg 2019-01-16 14:43:22 +00:00
parent 0d95527924
commit 01251927b3
5 changed files with 24 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/grafana-ui/src/components/FormField/FormField.test.tsx
View File

@ -6,10 +6,8 @@ const setup = (propOverrides?: object) => {
const props: Props = {
label: 'Test',
labelWidth: 11,
inputProps: {
value: 10,
onChange: jest.fn(),
},
value: 10,
onChange: jest.fn(),
};
Object.assign(props, propOverrides);

6
packages/grafana-ui/src/components/FormField/FormField.tsx
View File

@ -1,20 +1,18 @@
import React, { InputHTMLAttributes, FunctionComponent } from 'react';
import { Label } from '..';
export interface Props {
export interface Props extends InputHTMLAttributes<HTMLInputElement> {
label: string;
inputProps: InputHTMLAttributes<HTMLInputElement>;
labelWidth?: number;
inputWidth?: number;
}
const defaultProps = {
labelWidth: 6,
inputProps: {},
inputWidth: 12,
};
const FormField: FunctionComponent<Props> = ({ label, labelWidth, inputProps, inputWidth }) => {
const FormField: FunctionComponent<Props> = ({ label, labelWidth, inputWidth, ...inputProps }) => {
return (
<div className="form-field">
<Label width={labelWidth}>{label}</Label>

24
packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx
View File

@ -64,22 +64,18 @@ export default class MappingRow extends PureComponent<Props, State> {
<FormField
label="From"
labelWidth={4}
inputProps={{
onChange: (event: ChangeEvent<HTMLInputElement>) => this.onMappingFromChange(event),
onBlur: () => this.updateMapping(),
value: from,
}}
inputWidth={8}
onChange={(event: ChangeEvent<HTMLInputElement>) => this.onMappingFromChange(event)}
onBlur={() => this.updateMapping()}
value={from}
/>
<FormField
label="To"
labelWidth={4}
inputProps={{
onBlur: () => this.updateMapping,
onChange: (event: ChangeEvent<HTMLInputElement>) => this.onMappingToChange(event),
value: to,
}}
inputWidth={8}
onBlur={() => this.updateMapping}
onChange={(event: ChangeEvent<HTMLInputElement>) => this.onMappingToChange(event)}
value={to}
/>
<div className="gf-form gf-form--grow">
<Label width={4}>Text</Label>
@ -99,11 +95,9 @@ export default class MappingRow extends PureComponent<Props, State> {
<FormField
label="Value"
labelWidth={4}
inputProps={{
onBlur: () => this.updateMapping,
onChange: (event: ChangeEvent<HTMLInputElement>) => this.onMappingValueChange(event),
value: value,
}}
onBlur={() => this.updateMapping}
onChange={(event: ChangeEvent<HTMLInputElement>) => this.onMappingValueChange(event)}
value={value}
inputWidth={8}
/>
<div className="gf-form gf-form--grow">

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

@ -21,16 +21,8 @@ export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<
return (
<PanelOptionsGroup title="Gauge">
<FormField
label="Min value"
labelWidth={8}
inputProps={{ onChange: event => this.onMinValueChange(event), value: minValue }}
/>
<FormField
label="Max value"
labelWidth={8}
inputProps={{ onChange: event => this.onMaxValueChange(event), value: maxValue }}
/>
<FormField label="Min value" labelWidth={8} onChange={event => this.onMinValueChange(event)} value={minValue} />
<FormField label="Max value" labelWidth={8} onChange={event => this.onMaxValueChange(event)} value={maxValue} />
<Switch
label="Show labels"
labelClass="width-8"

24
public/app/plugins/panel/gauge/ValueOptions.tsx
View File

@ -1,5 +1,5 @@
import React, { PureComponent } from 'react';
import { FormField, Label, PanelOptionsProps, PanelOptionsGroup, Select } from '@grafana/ui';
import { FormField, Label, PanelOptionsProps, PanelOptionsGroup, Select } from '@grafana/ui';
import UnitPicker from 'app/core/components/Select/UnitPicker';
import { GaugeOptions } from './types';
@ -55,28 +55,22 @@ export default class ValueOptions extends PureComponent<PanelOptionsProps<GaugeO
<FormField
label="Decimals"
labelWidth={labelWidth}
inputProps={{
placeholder: 'auto',
onChange: event => this.onDecimalChange(event),
value: decimals || '',
type: 'number',
}}
placeholder="auto"
onChange={event => this.onDecimalChange(event)}
value={decimals || ''}
type="number"
/>
<FormField
label="Prefix"
labelWidth={labelWidth}
inputProps={{
onChange: event => this.onPrefixChange(event),
value: prefix || '',
}}
onChange={event => this.onPrefixChange(event)}
value={prefix || ''}
/>
<FormField
label="Suffix"
labelWidth={labelWidth}
inputProps={{
onChange: event => this.onSuffixChange(event),
value: suffix || '',
}}
onChange={event => this.onSuffixChange(event)}
value={suffix || ''}
/>
</PanelOptionsGroup>
);