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}) => ( +