Merge pull request FormidableLabs#416 from AugustinLF/feature/pan-onl…

…y-victory-zoom Make zoom optional in VictoryZoom closes FormidableLabs#429
nfcampos · Nov 21, 2016 · 0c685af · 0c685af
2 parents e0890b1 + 8c2b0dc
commit 0c685af
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 61 deletions.
diff --git a/demo/components/victory-brush-demo.js b/demo/components/victory-brush-demo.js
@@ -77,82 +77,78 @@ export default class App extends React.Component {
       <div className="demo">
         <h1>VictoryZoom</h1>
 
-          <VictoryZoom>
-            <VictoryGroup data={this.state.transitionData}>
-              <VictoryLine style={{data: this.state.style}} />
-            </VictoryGroup>
-          </VictoryZoom>
+        <VictoryZoom>
+          <VictoryGroup data={this.state.transitionData}>
+            <VictoryLine style={{data: this.state.style}} />
+          </VictoryGroup>
+        </VictoryZoom>
 
-          <VictoryZoom>
+        <VictoryZoom>
           <VictoryChart style={{parent: parentStyle}}>
-
-          <VictoryLine
-            style={{parent: parentStyle, data: this.state.style}}
-            data={this.state.data}
-            label={"label\none"}
-            animate={{duration: 1500}}
-          />
+            <VictoryLine
+              style={{parent: parentStyle, data: this.state.style}}
+              data={this.state.data}
+              label={"label\none"}
+              animate={{duration: 1500}}
+            />
           </VictoryChart>
         </VictoryZoom>
 
         <button onClick={() => this.setState({zoomDomain: this.getZoomDomain()})}>
           New domain
         </button>
         <VictoryZoom zoomDomain={this.state.zoomDomain}>
-        <VictoryChart style={{parent: parentStyle}}>
-
-          <VictoryLine
-            style={{parent: parentStyle, data: {stroke: "blue"}}}
-            y={(d) => Math.sin(2 * Math.PI * d.x)}
-            sample={25}
-          />
+          <VictoryChart style={{parent: parentStyle}}>
+            <VictoryLine
+              style={{parent: parentStyle, data: {stroke: "blue"}}}
+              y={(d) => Math.sin(2 * Math.PI * d.x)}
+              sample={25}
+            />
           </VictoryChart>
         </VictoryZoom>
 
         <VictoryZoom>
-        <VictoryChart style={{parent: parentStyle}}>
-
-          <VictoryLine
-            style={{
-              parent: parentStyle,
-              data: {stroke: "red", strokeWidth: 6}
-            }}
-            events={[{
-              target: "data",
-              eventHandlers: {
-                onClick: () => {
-                  return [
-                    {
-                      mutation: (props) => {
-                        return {style: merge({}, props.style, {stroke: "orange"})};
-                      }
-                    }, {
-                      target: "labels",
-                      mutation: () => {
-                        return {text: "hey"};
+          <VictoryChart style={{parent: parentStyle}}>
+            <VictoryLine
+              style={{
+                parent: parentStyle,
+                data: {stroke: "red", strokeWidth: 6}
+              }}
+              events={[{
+                target: "data",
+                eventHandlers: {
+                  onClick: () => {
+                    return [
+                      {
+                        mutation: (props) => {
+                          return {style: merge({}, props.style, {stroke: "orange"})};
+                        }
+                      }, {
+                        target: "labels",
+                        mutation: () => {
+                          return {text: "hey"};
+                        }
                       }
-                    }
-                  ];
+                    ];
+                  }
                 }
-              }
-            }]}
-            label={this.state.label}
-            data={range(0, 100)}
-            y={(d) => d * d}
-          />
+              }]}
+              label={this.state.label}
+              data={range(0, 100)}
+              y={(d) => d * d}
+            />
           </VictoryChart>
         </VictoryZoom>
-        <VictoryZoom>
-        <VictoryChart style={{parent: parentStyle}}>
 
+        <VictoryZoom>
+          <VictoryChart style={{parent: parentStyle}}>
             <VictoryArea
               style={{parent: parentStyle, data: {stroke: "#333", fill: "#888", opacity: 0.4}}}
               data={this.state.barData}
               interpolation="stepBefore"
             />
-            </VictoryChart>
-          </VictoryZoom>
-
+          </VictoryChart>
+        </VictoryZoom>
       </div>
     );
   }

diff --git a/src/components/victory-zoom/victory-zoom.js b/src/components/victory-zoom/victory-zoom.js
@@ -21,15 +21,17 @@ class VictoryZoom extends Component {
       y: CustomPropTypes.domain
     }),
     onDomainChange: PropTypes.func,
-    clipContainerComponent: PropTypes.element.isRequired
+    clipContainerComponent: PropTypes.element.isRequired,
+    allowZoom: PropTypes.bool
   }
 
   static childContextTypes = {
     getTimer: React.PropTypes.func
   }
 
   static defaultProps = {
-    clipContainerComponent: <VictoryClipContainer/>
+    clipContainerComponent: <VictoryClipContainer/>,
+    allowZoom: true
   }
 
   constructor(props) {
@@ -45,7 +47,7 @@ class VictoryZoom extends Component {
     this.width = chart.props.width || fallbackProps.width;
     this.state = { domain: props.zoomDomain || this.getDataDomain() };
 
-    this.events = this.getEvents();
+    this.events = this.getEvents(props.allowZoom);
     this.clipDataComponents = this.clipDataComponents.bind(this);
     this.getTimer = this.getTimer.bind(this);
   }
@@ -71,11 +73,15 @@ class VictoryZoom extends Component {
    this.getTimer().stop();
  }
 
- componentWillReceiveProps({zoomDomain: nextDomain}) {
-   const {zoomDomain} = this.props;
+ componentWillReceiveProps({allowZoom: nextAllowZoom, zoomDomain: nextDomain}) {
+   const {allowZoom, zoomDomain} = this.props;
    if (!isEqual(zoomDomain, nextDomain)) {
      this.setState({domain: nextDomain});
    }
+
+   if (allowZoom !== nextAllowZoom) {
+     this.events = this.getEvents(nextAllowZoom);
+   }
  }
 
   getDataDomain() {
@@ -87,7 +93,7 @@ class VictoryZoom extends Component {
     };
   }
 
-  getEvents() {
+  getEvents(allowZoom) {
     return [{
       target: "parent",
       eventHandlers: {
@@ -113,7 +119,7 @@ class VictoryZoom extends Component {
             });
           }
         },
-        onWheel: (evt) => {
+        ...allowZoom && {onWheel: (evt) => {
           evt.preventDefault();
           const deltaY = evt.deltaY;
           requestAnimationFrame(() => { // eslint-disable-line no-undef
@@ -124,7 +130,7 @@ class VictoryZoom extends Component {
             const nextXDomain = ZoomHelpers.scale(x, xBounds, 1 + (deltaY / 300));
             this.setDomain({x: nextXDomain});
           });
-        }
+        }}
       }
     }];
   }

diff --git a/test/client/spec/components/victory-zoom/victory-zoom.spec.js b/test/client/spec/components/victory-zoom/victory-zoom.spec.js
@@ -0,0 +1,29 @@
+/**
+ * Client tests
+ */
+/*eslint-disable max-nested-callbacks */
+/* eslint no-unused-expressions: 0 */
+import React from "react";
+import { shallow } from "enzyme";
+import VictoryZoom from "src/components/victory-zoom/victory-zoom";
+import VictoryChart from "src/components/victory-chart/victory-chart";
+
+describe("components/victory-zoom", () => {
+  describe("allowZoom property", () => {
+    it("should allow or disallow zooming on the chart", () => {
+      const wrapper = shallow(
+        <VictoryZoom>
+          <VictoryChart />
+        </VictoryZoom>
+      );
+      const getHandlersList = (chart) => Object.keys(chart.props().events[0].eventHandlers);
+
+      const zoomableChart = wrapper.find(VictoryChart);
+      expect(getHandlersList(zoomableChart).indexOf("onWheel") !== -1).to.equal(true);
+
+      wrapper.setProps({allowZoom: false});
+      const nonZoomableChart = wrapper.find(VictoryChart);
+      expect(getHandlersList(nonZoomableChart).indexOf("onWheel") === -1).to.equal(true);
+    });
+  });
+});