redoing input props

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

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>

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