From 17d4291ac3d300af75d84398d6794da21c1cd072 Mon Sep 17 00:00:00 2001
From: Kirill Voronin <yoursdearboy@gmail.com>
Date: Tue, 11 Apr 2017 16:34:57 +0300
Subject: [PATCH] Hover plugin

---
 src/module.d.ts                 |  2 ++
 src/module.js                   |  2 ++
 src/plugins/hover/actions.js    |  5 ++++
 src/plugins/hover/components.js | 43 +++++++++++++++++++++++++++++++++
 src/plugins/hover/constants.js  |  2 ++
 src/plugins/hover/index.js      |  7 ++++++
 src/plugins/hover/reducers.js   |  5 ++++
 stories/index.tsx               | 18 +++++++++++++-
 8 files changed, 83 insertions(+), 1 deletion(-)
 create mode 100644 src/plugins/hover/actions.js
 create mode 100644 src/plugins/hover/components.js
 create mode 100644 src/plugins/hover/constants.js
 create mode 100644 src/plugins/hover/index.js
 create mode 100644 src/plugins/hover/reducers.js

diff --git a/src/module.d.ts b/src/module.d.ts
index 5fcc5851..d2e5dbe9 100644
--- a/src/module.d.ts
+++ b/src/module.d.ts
@@ -403,6 +403,8 @@ export namespace plugins {
         disablePointerEvents?: boolean;
     }
     var PositionPlugin : (settings: PositionSettings) => GriddlePlugin;
+
+    var HoverPlugin : GriddlePlugin;
 }
 
 export const ColumnDefinition;
diff --git a/src/module.js b/src/module.js
index 1baf0b2f..8888ff1f 100644
--- a/src/module.js
+++ b/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;
diff --git a/src/plugins/hover/actions.js b/src/plugins/hover/actions.js
new file mode 100644
index 00000000..30502b87
--- /dev/null
+++ b/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});
diff --git a/src/plugins/hover/components.js b/src/plugins/hover/components.js
new file mode 100644
index 00000000..969ce2a9
--- /dev/null
+++ b/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>
+);
diff --git a/src/plugins/hover/constants.js b/src/plugins/hover/constants.js
new file mode 100644
index 00000000..63ceeb01
--- /dev/null
+++ b/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';
diff --git a/src/plugins/hover/index.js b/src/plugins/hover/index.js
new file mode 100644
index 00000000..752b5e45
--- /dev/null
+++ b/src/plugins/hover/index.js
@@ -0,0 +1,7 @@
+import * as components from './components';
+import * as reducer from './reducers';
+
+export default {
+    components,
+    reducer
+};
diff --git a/src/plugins/hover/reducers.js b/src/plugins/hover/reducers.js
new file mode 100644
index 00000000..64380bf8
--- /dev/null
+++ b/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');
diff --git a/stories/index.tsx b/stories/index.tsx
index 1f334fab..5ec62b70 100644
--- a/stories/index.tsx
+++ b/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>;
+    });