From 01251927b3c085aee6df85c4bf1bc54b5a61355f Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Wed, 16 Jan 2019 14:43:22 +0000
Subject: [PATCH] redoing input props

---
 .../components/FormField/FormField.test.tsx   |  6 ++---
 .../src/components/FormField/FormField.tsx    |  6 ++---
 .../ValueMappingsEditor/MappingRow.tsx        | 24 +++++++------------
 .../panel/gauge/GaugeOptionsEditor.tsx        | 12 ++--------
 .../app/plugins/panel/gauge/ValueOptions.tsx  | 24 +++++++------------
 5 files changed, 24 insertions(+), 48 deletions(-)

diff --git a/packages/grafana-ui/src/components/FormField/FormField.test.tsx b/packages/grafana-ui/src/components/FormField/FormField.test.tsx
index 4474b0680c5..3c89a347e86 100644
--- a/packages/grafana-ui/src/components/FormField/FormField.test.tsx
+++ b/packages/grafana-ui/src/components/FormField/FormField.test.tsx
@@ -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);
diff --git a/packages/grafana-ui/src/components/FormField/FormField.tsx b/packages/grafana-ui/src/components/FormField/FormField.tsx
index aa026a74197..14bec79b57f 100644
--- a/packages/grafana-ui/src/components/FormField/FormField.tsx
+++ b/packages/grafana-ui/src/components/FormField/FormField.tsx
@@ -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>
diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx b/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx
index 3da2cfc2d98..db970046fc4 100644
--- a/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx
+++ b/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx
@@ -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">
diff --git a/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx b/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx
index b971e67939c..6b8c92e3fe7 100644
--- a/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx
+++ b/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx
@@ -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"
diff --git a/public/app/plugins/panel/gauge/ValueOptions.tsx b/public/app/plugins/panel/gauge/ValueOptions.tsx
index e0dbb36bdf5..f197b84ee78 100644
--- a/public/app/plugins/panel/gauge/ValueOptions.tsx
+++ b/public/app/plugins/panel/gauge/ValueOptions.tsx
@@ -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>
     );