Add support for onMouseOver

src/__tests__/USAState.js

@@ -9,14 +9,17 @@ describe("Component: USAState", () => {
   let element;
   let componentProps;
   let onClickStateMock;
+  let onMouseOverStateMock;
 
   beforeEach(() => {
     onClickStateMock = jest.fn();
+    onMouseOverStateMock = jest.fn();
     componentProps = {
       dimensions: "M161.1,453.7 l-0.3,85.4 1.6,1 3.1,0.2 1.5,-1.1 h2.6 l0.2,2.9 7,6.8 0.5,2.6 3.4,-1.9 0.6,-0.2 0.3,-3.1 1.5,-1.6 1.1,-0.2 1.9,-1.5 3.1,2.1 0.6,2.9 1.9,1.1 1.1,2.4 3.9,1.8 3.4,6 2.7,3.9 2.3,2.7 1.5,3.7 5,1.8 5.2,2.1 1,4.4 0.5,3.1 -1,3.4 -1.8,2.3 -1.6,-0.8 -1.5,-3.1 -2.7,-1.5 -1.8,-1.1 -0.8,0.8 1.5,2.7 0.2,3.7 -1.1,0.5 -1.9,-1.9 -2.1,-1.3 0.5,1.6 1.3,1.8 -0.8,0.8 c0,0 -0.8,-0.3 -1.3,-1 -0.5,-0.6 -2.1,-3.4 -2.1,-3.4 l-1,-2.3 c0,0 -0.3,1.3 -1,1 -0.6,-0.3 -1.3,-1.5 -1.3,-1.5 l1.8,-1.9 -1.5,-1.5 v-5 h-0.8 l-0.8,3.4 -1.1,0.5 -1,-3.7 -0.6,-3.7 -0.8,-0.5 0.3,5.7 v1.1 l-1.5,-1.3 -3.6,-6 -2.1,-0.5 -0.6,-3.7 -1.6,-2.9 -1.6,-1.1 v-2.3 l2.1,-1.3 -0.5,-0.3 -2.6,0.6 -3.4,-2.4 -2.6,-2.9 -4.8,-2.6 -4,-2.6 1.3,-3.2 v-1.6 l-1.8,1.6 -2.9,1.1 -3.7,-1.1 -5.7,-2.4 h-5.5 l-0.6,0.5 -6.5,-3.9 -2.1,-0.3 -2.7,-5.8 -3.6,0.3 -3.6,1.5 0.5,4.5 1.1,-2.9 1,0.3 -1.5,4.4 3.2,-2.7 0.6,1.6 -3.9,4.4 -1.3,-0.3 -0.5,-1.9 -1.3,-0.8 -1.3,1.1 -2.7,-1.8 -3.1,2.1 -1.8,2.1 -3.4,2.1 -4.7,-0.2 -0.5,-2.1 3.7,-0.6 v-1.3 l-2.3,-0.6 1,-2.4 2.3,-3.9 v-1.8 l0.2,-0.8 4.4,-2.3 1,1.3 h2.7 l-1.3,-2.6 -3.7,-0.3 -5,2.7 -2.4,3.4 -1.8,2.6 -1.1,2.3 -4.2,1.5 -3.1,2.6 -0.3,1.6 2.3,1 0.8,2.1 -2.7,3.2 -6.5,4.2 -7.8,4.2 -2.1,1.1 -5.3,1.1 -5.3,2.3 1.8,1.3 -1.5,1.5 -0.5,1.1 -2.7,-1 -3.2,0.2 -0.8,2.3 h-1 l0.3,-2.4 -3.6,1.3 -2.9,1 -3.4,-1.3 -2.9,1.9 h-3.2 l-2.1,1.3 -1.6,0.8 -2.1,-0.3 -2.6,-1.1 -2.3,0.6 -1,1 -1.6,-1.1 v-1.9 l3.1,-1.3 6.3,0.6 4.4,-1.6 2.1,-2.1 2.9,-0.6 1.8,-0.8 2.7,0.2 1.6,1.3 1,-0.3 2.3,-2.7 3.1,-1 3.4,-0.6 1.3,-0.3 0.6,0.5 h0.8 l1.3,-3.7 4,-1.5 1.9,-3.7 2.3,-4.5 1.6,-1.5 0.3,-2.6 -1.6,1.3 -3.4,0.6 -0.6,-2.4 -1.3,-0.3 -1,1 -0.2,2.9 -1.5,-0.2 -1.5,-5.8 -1.3,1.3 -1.1,-0.5 -0.3,-1.9 -4,0.2 -2.1,1.1 -2.6,-0.3 1.5,-1.5 0.5,-2.6 -0.6,-1.9 1.5,-1 1.3,-0.2 -0.6,-1.8 v-4.4 l-1,-1 -0.8,1.5 h-6.1 l-1.5,-1.3 -0.6,-3.9 -2.1,-3.6 v-1 l2.1,-0.8 0.2,-2.1 1.1,-1.1 -0.8,-0.5 -1.3,0.5 -1.1,-2.7 1,-5 4.5,-3.2 2.6,-1.6 1.9,-3.7 2.7,-1.3 2.6,1.1 0.3,2.4 2.4,-0.3 3.2,-2.4 1.6,0.6 1,0.6 h1.6 l2.3,-1.3 0.8,-4.4 c0,0 0.3,-2.9 1,-3.4 0.6,-0.5 1,-1 1,-1 l-1.1,-1.9 -2.6,0.8 -3.2,0.8 -1.9,-0.5 -3.6,-1.8 -5,-0.2 -3.6,-3.7 0.5,-3.9 0.6,-2.4 -2.1,-1.8 -1.9,-3.7 0.5,-0.8 6.8,-0.5 h2.1 l1,1 h0.6 l-0.2,-1.6 3.9,-0.6 2.6,0.3 1.5,1.1 -1.5,2.1 -0.5,1.5 2.7,1.6 5,1.8 1.8,-1 -2.3,-4.4 -1,-3.2 1,-0.8 -3.4,-1.9 -0.5,-1.1 0.5,-1.6 -0.8,-3.9 -2.9,-4.7 -2.4,-4.2 2.9,-1.9 h3.2 l1.8,0.6 4.2,-0.2 3.7,-3.6 1.1,-3.1 3.7,-2.4 1.6,1 2.7,-0.6 3.7,-2.1 1.1,-0.2 1,0.8 4.5,-0.2 2.7,-3.1 h1.1 l3.6,2.4 1.9,2.1 -0.5,1.1 0.6,1.1 1.6,-1.6 3.9,0.3 0.3,3.7 1.9,1.5 7.1,0.6 6.3,4.2 1.5,-1 5.2,2.6 2.1,-0.6 1.9,-0.8 4.8,1.9z m-115.1,28.9 2.1,5.3 -0.2,1 -2.9,-0.3 -1.8,-4 -1.8,-1.5 h-2.4 l-0.2,-2.6 1.8,-2.4 1.1,2.4 1.5,1.5z m-2.6,33.5 3.7,0.8 3.7,1 0.8,1 -1.6,3.7 -3.1,-0.2 -3.4,-3.6z m-20.7,-14.1 1.1,2.6 1.1,1.6 -1.1,0.8 -2.1,-3.1 v-1.9z m-13.7,73.1 3.4,-2.3 3.4,-1 2.6,0.3 0.5,1.6 1.9,0.5 1.9,-1.9 -0.3,-1.6 2.7,-0.6 2.9,2.6 -1.1,1.8 -4.4,1.1 -2.7,-0.5 -3.7,-1.1 -4.4,1.5 -1.6,0.3z m48.9,-4.5 1.6,1.9 2.1,-1.6 -1.5,-1.3z m2.9,3 1.1,-2.3 2.1,0.3 -0.8,1.9 h-2.4z m23.6,-1.9 1.5,1.8 1,-1.1 -0.8,-1.9z m8.8,-12.5 1.1,5.8 2.9,0.8 5,-2.9 4.4,-2.6 -1.6,-2.4 0.5,-2.4 -2.1,1.3 -2.9,-0.8 1.6,-1.1 1.9,0.8 3.9,-1.8 0.5,-1.5 -2.4,-0.8 0.8,-1.9 -2.7,1.9 -4.7,3.6 -4.8,2.9z m42.3,-19.8 2.4,-1.5 -1,-1.8 -1.8,1z",
       state: "AK",
       fill: "DC1",
-      onClickState: onClickStateMock
+      onClickState: onClickStateMock,
+      onMouseOverState: onMouseOverStateMock
     };
     element = shallow(<USAState {...componentProps} />);
   });
@@ -38,4 +41,10 @@ describe("Component: USAState", () => {
     element.simulate("click");
     expect(onClickStateMock.mock.calls.length).toEqual(1);
   });
+
+  it("should calls `onMouseOverState` when the component is moused over", () => {
+    expect(onMouseOverStateMock.mock.calls.length).toEqual(0);
+    element.simulate("mouseover");
+    expect(onMouseOverStateMock.mock.calls.length).toEqual(1);
+  });
 });

src/__tests__/usa-map-dimensions.js

@@ -10,11 +10,15 @@ describe("Component: USAMap", () => {
   let element;
   let componentProps;
   let onClickMock;
+  let onMouseOverMock;
   let customisedClickHandleMock;
+  let customisedMouseOverHandleMock;
 
   beforeEach(() => {
     onClickMock = jest.fn();
+    onMouseOverMock = jest.fn();
     customisedClickHandleMock = jest.fn();
+    customisedMouseOverHandleMock = jest.fn();
     componentProps = {
       width: 959,
       height: 593,
@@ -29,17 +33,20 @@ describe("Component: USAMap", () => {
           clickHandler: customisedClickHandleMock,
         }
       },
-      onClick: onClickMock
+      onClick: onClickMock,
+      onMouseOver: onMouseOverMock
     };
     element = shallow(<USAMap {...componentProps} />);
   });
 
   afterEach(() => {
     onClickMock.mockReset();
+    onMouseOverMock.mockReset();
   });
 
   it("should render all states based on `usa-map-dimensions` file", () => {
     expect(onClickMock.mock.calls.length).toEqual(0);
+    expect(onMouseOverMock.mock.calls.length).toEqual(0);
     const statesLength = element.find("USAState").length;
     expect(Object.keys(data).length).toEqual(statesLength);
   });
@@ -57,6 +64,14 @@ describe("Component: USAMap", () => {
     expect(customisedClickHandleMock.mock.calls.length).toEqual(0);
   });
 
+  it("should calls `onMouseOver` when the component is moused over", () => {
+    expect(onMouseOverMock.mock.calls.length).toEqual(0);
+    const state = element.find(".state .DC2");
+    state.simulate("mouseover");
+    expect(onMouseOverMock.mock.calls[0]).toEqual([undefined]);
+    expect(customisedMouseOverHandleMock.mock.calls.length).toEqual(0);
+  });
+
   it("should calls customise method is customise property has click handler", () => {
     // You have to mount instead of shallow because of dom-child of USAState.
     // We can simulate click only on that child, not in parent.
@@ -67,4 +82,15 @@ describe("Component: USAMap", () => {
     expect(onClickMock.mock.calls.length).toEqual(0);
     expect(customisedClickHandleMock.mock.calls.length).toEqual(1);
   });
+
+  it("should calls customise method is customise property has mouse over handler", () => {
+    // You have to mount instead of shallow because of dom-child of USAState.
+    // We can simulate mouse over only on that child, not in parent.
+    element = mount(<USAMap {...componentProps} />);
+    const state = element.find(`USAState[fill="${componentProps.customize.NJ.fill}"]`).last();
+    expect(state.length).toEqual(1);
+    state.simulate("mouseover");
+    expect(onMouseOverMock.mock.calls.length).toEqual(0);
+    expect(customisedMouseOverHandleMock.mock.calls.length).toEqual(1);
+  });
 });

src/components/USAState.js

@@ -2,7 +2,7 @@ import React from "react";
 
 const USAState = (props) => {
   return (
-    <path d={props.dimensions} fill={props.fill} data-name={props.state} className={`${props.state} state`} onClick={props.onClickState}>
+    <path d={props.dimensions} fill={props.fill} data-name={props.state} className={`${props.state} state`} onClick={props.onClickState} onMouseOver={props.onMouseOverState}>
       <title>{props.stateName}</title>
     </path>
   );

src/index.js

@@ -9,6 +9,10 @@ class USAMap extends React.Component {
     this.props.onClick(stateAbbreviation);
   };
 
+  mouseOverHandler = (stateAbbreviation) => {
+    this.props.onMouseOver(stateAbbreviation);
+  };
+
   fillStateColor = (state) => {
     if (this.props.customize && this.props.customize[state] && this.props.customize[state].fill) {
       return this.props.customize[state].fill;
@@ -24,10 +28,17 @@ class USAMap extends React.Component {
     return this.clickHandler;
   }
 
+  stateMouseOverHandler = (state) => {
+    if (this.props.customize && this.props.customize[state] && this.props.customize[state].mouseOverHandler) {
+      return this.props.customize[state].mouseOverHandler
+    }
+    return this.mouseOverHandler;
+  }
+
   buildPaths = () => {
     let paths = [];
     for (let stateKey in data) {
-      const path = <USAState key={stateKey} stateName={data[stateKey].name} dimensions={data[stateKey]["dimensions"]} state={stateKey} fill={this.fillStateColor(stateKey)} onClickState={this.stateClickHandler(stateKey)} />
+      const path = <USAState key={stateKey} stateName={data[stateKey].name} dimensions={data[stateKey]["dimensions"]} state={stateKey} fill={this.fillStateColor(stateKey)} onClickState={this.stateClickHandler(stateKey)} onMouseOverState={this.stateMouseOverHandler(stateKey)} />
       paths.push(path);
     };
     return paths;