Merge pull request #3 from EmpaticoOrg/onHover

added onHover for CellPlot and Rectangle components

Author: cainlevy

src/CellPlot.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import Frame from './Frame';
-import Cells from './Cells';
+import Cells, {Coordinate} from './Cells';
 import {PlotContext, PlotContextProps} from './PlotContext';
 import {PlotConsumer, PlotConsumerProps} from './PlotConsumer';
 
@@ -14,7 +14,8 @@ export interface Props {
   horizontalBorders?: string[]; // a cyclic sequence of strings for the css border property
   ys: number[];
 
-  onClick?: (x: number, y: number) => void;
+  onClick?: (x: number, y: number) => void; // TODO: convert to Coordinate in 2.x release
+  onHover?: (coordinate: Coordinate) => void;
 }
 
 function snap(value: number, interval: number): number {
@@ -92,7 +93,8 @@ export default class CellPlot extends React.Component<Props> {
           verticalBorders={this.props.verticalBorders}
           ys={this.props.ys}
           horizontalBorders={this.props.horizontalBorders}
-          onClick={this.props.onClick} />
+          onClick={this.props.onClick}
+          onHover={this.props.onHover} />
 
         {this.props.children}
       </Frame>

src/Cells.tsx

@@ -1,12 +1,18 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
+export interface Coordinate {
+  x: number;
+  y: number;
+}
+
 export interface Props {
   xs: any[];
   ys: any[];
   verticalBorders?: string[];
   horizontalBorders?: string[];
   onClick?: (x: any, y: any) => void;
+  onHover?: (coordinate: Coordinate | null) => void;
 }
 
 const Columns = styled.div`
@@ -31,7 +37,7 @@ const Cell = styled.div`
  * Cells can be placed inside a Frame to create vertical and horizontal gridlines. It acts as a
  * background layer, and does not render children.
  */
-const Cells: React.SFC<Props> = ({xs, ys, verticalBorders, horizontalBorders, onClick}) => {
+const Cells: React.SFC<Props> = ({xs, ys, verticalBorders, horizontalBorders, onClick, onHover}) => {
   return (
     <Columns>
       {xs.map((x, idx) => (
@@ -44,6 +50,9 @@ const Cells: React.SFC<Props> = ({xs, ys, verticalBorders, horizontalBorders, on
             <Cell
               key={y}
               onClick={() => onClick && onClick(x, y)}
+              onMouseOver={() => onHover && onHover({x, y})}
+              onMouseEnter={() => onHover && onHover({x, y})}
+              onMouseLeave={() => onHover && onHover(null)}
               style={{
                 borderBottom: horizontalBorders && horizontalBorders[(idy + 1) % horizontalBorders.length]
               }} />

src/Rectangle.tsx

@@ -8,6 +8,7 @@ export interface Props {
   y: number;
   width: number | string;
   height: number | string;
+  onHover?: (hovering: boolean) => void;
 }
 
 const Container = styled.div`
@@ -24,7 +25,7 @@ export default class Rectangle extends React.Component<Props & React.HTMLAttribu
   context: PlotContext;
 
   render() {
-    const {x, y, height, width, style, ...remaining} = this.props;
+    const {x, y, height, width, style, onHover, ...remaining} = this.props;
 
     // invisible, don't render
     if (
@@ -55,6 +56,12 @@ export default class Rectangle extends React.Component<Props & React.HTMLAttribu
     };
 
     // provided styles override calculated styles.
-    return <Container {...remaining} style={{...layout, ...style}} />;
+    return <Container
+      onMouseEnter={() => onHover && onHover(true)}
+      onMouseOver={() => onHover && onHover(true)}
+      onMouseLeave={() => onHover && onHover(false)}
+      {...remaining}
+      style={{...layout, ...style}}
+    />;
   }
 }