chore: Fix typings and remove bindings for arrow functions in DashboardGrid

public/app/features/dashboard/dashgrid/DashboardGrid.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { hot } from 'react-hot-loader';
-import ReactGridLayout from 'react-grid-layout';
+import ReactGridLayout, { ItemCallback } from 'react-grid-layout';
 import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT } from 'app/core/constants';
 import { DashboardPanel } from './DashboardPanel';
 import { DashboardModel } from '../dashboard_model';
@@ -11,6 +11,21 @@ import sizeMe from 'react-sizeme';
 let lastGridWidth = 1200;
 let ignoreNextWidthChange = false;
 
+interface GridWrapperProps {
+  size: { width: number; };
+  layout: ReactGridLayout.Layout[];
+  onLayoutChange: (layout: ReactGridLayout.Layout[]) => void;
+  children: JSX.Element | JSX.Element[];
+  onDragStop: ItemCallback;
+  onResize: ItemCallback;
+  onResizeStop: ItemCallback;
+  onWidthChange: () => void;
+  className: string;
+  isResizable?: boolean;
+  isDraggable?: boolean;
+  isFullscreen?: boolean;
+}
+
 function GridWrapper({
   size,
   layout,
@@ -24,7 +39,7 @@ function GridWrapper({
   isResizable,
   isDraggable,
   isFullscreen,
-}) {
+}: GridWrapperProps)  {
   const width = size.width > 0 ? size.width : lastGridWidth;
 
   // logic to ignore width changes (optimization)
@@ -43,7 +58,6 @@ function GridWrapper({
       className={className}
       isDraggable={isDraggable}
       isResizable={isResizable}
-      measureBeforeMount={false}
       containerPadding={[0, 0]}
       useCSSTransforms={false}
       margin={[GRID_CELL_VMARGIN, GRID_CELL_VMARGIN]}
@@ -71,22 +85,17 @@ export class DashboardGrid extends React.Component<DashboardGridProps> {
   gridToPanelMap: any;
   panelMap: { [id: string]: PanelModel };
 
-  constructor(props) {
+  constructor(props: DashboardGridProps) {
     super(props);
-    this.onLayoutChange = this.onLayoutChange.bind(this);
-    this.onResize = this.onResize.bind(this);
-    this.onResizeStop = this.onResizeStop.bind(this);
-    this.onDragStop = this.onDragStop.bind(this);
-    this.onWidthChange = this.onWidthChange.bind(this);
 
     // subscribe to dashboard events
     const dashboard = this.props.dashboard;
-    dashboard.on('panel-added', this.triggerForceUpdate.bind(this));
-    dashboard.on('panel-removed', this.triggerForceUpdate.bind(this));
-    dashboard.on('repeats-processed', this.triggerForceUpdate.bind(this));
-    dashboard.on('view-mode-changed', this.onViewModeChanged.bind(this));
-    dashboard.on('row-collapsed', this.triggerForceUpdate.bind(this));
-    dashboard.on('row-expanded', this.triggerForceUpdate.bind(this));
+    dashboard.on('panel-added', this.triggerForceUpdate);
+    dashboard.on('panel-removed', this.triggerForceUpdate);
+    dashboard.on('repeats-processed', this.triggerForceUpdate);
+    dashboard.on('view-mode-changed', this.onViewModeChanged);
+    dashboard.on('row-collapsed', this.triggerForceUpdate);
+    dashboard.on('row-expanded', this.triggerForceUpdate);
   }
 
   buildLayout() {
@@ -123,7 +132,7 @@ export class DashboardGrid extends React.Component<DashboardGridProps> {
     return layout;
   }
 
-  onLayoutChange(newLayout) {
+  onLayoutChange = (newLayout: ReactGridLayout.Layout[]) => {
     for (const newPos of newLayout) {
       this.panelMap[newPos.i].updateGridPos(newPos);
     }
@@ -131,22 +140,22 @@ export class DashboardGrid extends React.Component<DashboardGridProps> {
     this.props.dashboard.sortPanelsByGridPos();
   }
 
-  triggerForceUpdate() {
+  triggerForceUpdate = () => {
     this.forceUpdate();
   }
 
-  onWidthChange() {
+  onWidthChange = () => {
     for (const panel of this.props.dashboard.panels) {
       panel.resizeDone();
     }
   }
 
-  onViewModeChanged(payload) {
+  onViewModeChanged = () => {
     ignoreNextWidthChange = true;
     this.forceUpdate();
   }
 
-  updateGridPos(item, layout) {
+  updateGridPos = (item: ReactGridLayout.Layout, layout: ReactGridLayout.Layout[]) => {
     this.panelMap[item.i].updateGridPos(item);
 
     // react-grid-layout has a bug (#670), and onLayoutChange() is only called when the component is mounted.
@@ -154,16 +163,17 @@ export class DashboardGrid extends React.Component<DashboardGridProps> {
     this.onLayoutChange(layout);
   }
 
-  onResize(layout, oldItem, newItem) {
+  onResize: ItemCallback = (layout, oldItem, newItem) => {
+    console.log();
     this.panelMap[newItem.i].updateGridPos(newItem);
   }
 
-  onResizeStop(layout, oldItem, newItem) {
+  onResizeStop: ItemCallback = (layout, oldItem, newItem) => {
     this.updateGridPos(newItem, layout);
     this.panelMap[newItem.i].resizeDone();
   }
 
-  onDragStop(layout, oldItem, newItem) {
+  onDragStop: ItemCallback = (layout, oldItem, newItem) => {
     this.updateGridPos(newItem, layout);
   }