Hover plugin

src/module.d.ts

@@ -403,6 +403,8 @@ export namespace plugins {
         disablePointerEvents?: boolean;
     }
     var PositionPlugin : (settings: PositionSettings) => GriddlePlugin;
+
+    var HoverPlugin : GriddlePlugin;
 }
 
 export const ColumnDefinition;

src/module.js

@@ -9,10 +9,12 @@ import utils from './utils';
 
 import LocalPlugin from './plugins/local';
 import PositionPlugin from './plugins/position';
+import HoverPlugin from './plugins/hover';
 
 const plugins = {
   LocalPlugin,
   PositionPlugin,
+  HoverPlugin
 };
 
 const ColumnDefinition = components.ColumnDefinition;

src/plugins/hover/actions.js

@@ -0,0 +1,5 @@
+import { GRIDDLE_ROW_MOUSE_ENTER, GRIDDLE_ROW_MOUSE_LEAVE } from './constants';
+
+export const rowMouseEnter = griddleKey => ({type: GRIDDLE_ROW_MOUSE_ENTER, griddleKey});
+
+export const rowMouseLeave = () => ({type: GRIDDLE_ROW_MOUSE_LEAVE});

src/plugins/hover/components.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import compose from 'recompose/compose';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import components from '../../components';
+import { rowMouseEnter, rowMouseLeave } from './actions';
+
+export const RowContainer = compose(
+    connect(
+        state => {
+            return {
+                hoveredRowKey: state.get('hoveredRowKey', null)
+            };
+        },
+        (dispatch, {griddleKey}) => bindActionCreators({
+            focusIn: rowMouseEnter.bind(this, griddleKey),
+            focusOut: rowMouseLeave
+        }, dispatch)
+    ),
+    components.RowContainer
+);
+
+export const Row = ({Cell, griddleKey, columnIds, style, className, focusIn, focusOut, hoveredRowKey}) => (
+    <tr
+        key={griddleKey}
+        style={style}
+        className={className}
+        onMouseEnter={focusIn}
+        onMouseLeave={focusOut}
+    >
+        { columnIds && columnIds.map(c => (
+            <Cell
+                key={`${c}-${griddleKey}`}
+                griddleKey={griddleKey}
+                columnId={c}
+                style={style}
+                className={className}
+                hoveredRowKey={hoveredRowKey}
+            />
+        ))}
+    </tr>
+);

src/plugins/hover/constants.js

@@ -0,0 +1,2 @@
+export const GRIDDLE_ROW_MOUSE_ENTER = 'GRIDDLE_ROW_MOUSE_ENTER';
+export const GRIDDLE_ROW_MOUSE_LEAVE = 'GRIDDLE_ROW_MOUSE_LEAVE';

src/plugins/hover/index.js

@@ -0,0 +1,7 @@
+import * as components from './components';
+import * as reducer from './reducers';
+
+export default {
+    components,
+    reducer
+};

src/plugins/hover/reducers.js

@@ -0,0 +1,5 @@
+export const GRIDDLE_ROW_MOUSE_ENTER = (state, {griddleKey}) =>
+    state.set('hoveredRowKey', griddleKey);
+
+export const GRIDDLE_ROW_MOUSE_LEAVE = (state, action) =>
+    state.delete('hoveredRowKey');

stories/index.tsx

@@ -14,7 +14,7 @@ import GenericGriddle, { actions, components, selectors, plugins, utils, ColumnD
 const { Cell, Row, Table, TableContainer, TableBody, TableHeading, TableHeadingCell } = components;
 const { SettingsWrapper, SettingsToggle, Settings } = components;
 
-const { LocalPlugin, PositionPlugin } = plugins;
+const { LocalPlugin, PositionPlugin, HoverPlugin } = plugins;
 const { rowDataSelector } = LocalPlugin.selectors;
 
 import fakeData, { FakeData } from './fakeData';
@@ -1020,3 +1020,19 @@ storiesOf('Settings', module)
       <Griddle data={fakeData} plugins={[LocalPlugin,PageSizeDropDownPlugin(pluginConfig)]} settingsComponentObjects={{ columnChooser: null }} />
     );
   })
+
+  storiesOf('HoverPlugin', module)
+    .add('base', () => {
+      const ButtonsColumn = ({griddleKey,hoveredRowKey}) =>
+        (griddleKey === hoveredRowKey) ? <button>Edit</button> : null;
+
+      return <Griddle data={fakeData} plugins={[LocalPlugin,HoverPlugin]}>
+        <RowDefinition>
+          <ColumnDefinition id='name'/>
+          <ColumnDefinition id='city'/>
+          <ColumnDefinition id='state'/>
+          <ColumnDefinition id='country'/>
+          <ColumnDefinition id='button' title=' ' visible={true} locked={true} sortable={false} width='100px' customComponent={ButtonsColumn}/>
+        </RowDefinition>
+      </Griddle>;
+    });