Merge pull request #120 from innius/fix/sensor_mapping_editor

fix: use StandardEditor for mappings / sensors configuration

src/customEditors/EditorMappingList.tsx

@@ -1,16 +1,12 @@
 import React from 'react';
 import { css } from 'emotion';
 import { stylesFactory, Button, useTheme } from '@grafana/ui';
-import { GrafanaTheme, SelectableValue } from '@grafana/data';
+import { GrafanaTheme, SelectableValue, StandardEditorProps } from '@grafana/data';
 import { EditorMappingItem } from './EditorMappingItem';
 import { Mapping } from 'types/Mapping';
 import MappingOperators from 'MappingOperators';
 
-interface Props {
-  mappings: Mapping[];
-
-  onChange: (mappings: Mapping[]) => void;
-}
+interface Props extends StandardEditorProps<Mapping[]> {}
 
 const getRandomID = function () {
   const randomString = Math.random().toString(36).substr(2, 5);
@@ -25,7 +21,8 @@ const operatorsOptions: SelectableValue[] = MappingOperators.map((mappingOperato
 }));
 
 export const EditorMappingList: React.FC<Props> = (props: Props) => {
-  const { mappings, onChange } = props;
+  const onChange = props.onChange;
+  const mappings = props.value;
 
   const theme = useTheme();
   const styles = getStyles(theme);

src/customEditors/EditorSensorList.tsx

@@ -3,13 +3,9 @@ import { css } from 'emotion';
 import { stylesFactory, useTheme, Button } from '@grafana/ui';
 import { EditorSensorItem } from './EditorSensorItem';
 import Sensor from '../types/Sensor';
-import { GrafanaTheme } from '@grafana/data';
+import { GrafanaTheme, StandardEditorProps } from '@grafana/data';
 
-interface Props {
-  sensors: Sensor[];
-
-  onChange: (sensors: Sensor[]) => void;
-}
+interface Props extends StandardEditorProps<Sensor[]> {}
 
 const defaultNewSensor: Sensor = {
   name: 'Name',
@@ -35,7 +31,8 @@ const defaultNewSensor: Sensor = {
 };
 
 export const EditorSensorList: React.FC<Props> = (props: Props) => {
-  const { sensors, onChange } = props;
+  const { onChange } = props;
+  const sensors = props.value;
 
   const theme = useTheme();
   const styles = getStyles(theme);

src/module.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { PanelPlugin } from '@grafana/data';
 import { SimpleOptions } from './types/SimpleOptions';
 import { ImageItPanel } from './ImageItPanel';
@@ -43,9 +42,7 @@ export const plugin = new PanelPlugin<SimpleOptions>(ImageItPanel)
         description: 'List of sensors',
         category: ['Sensors'],
         defaultValue: [],
-        editor(props) {
-          return <EditorSensorList sensors={props.value} onChange={props.onChange} />;
-        },
+        editor: EditorSensorList,
       })
       .addCustomEditor({
         id: 'mappings',
@@ -54,9 +51,7 @@ export const plugin = new PanelPlugin<SimpleOptions>(ImageItPanel)
         description: 'List of mappings',
         category: ['Mappings'],
         defaultValue: [],
-        editor(props) {
-          return <EditorMappingList mappings={props.value} onChange={props.onChange} />;
-        },
+        editor: EditorMappingList,
       });
 
     return panelOptionsBuilder;