Merge pull request #299 from FormidableLabs/experiment/portal

Experiment/portal
FormidableLabs · Sep 25, 2017 · 2559e96 · 2559e96
2 parents e5afed1 + dcc2d2b
commit 2559e96
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 41 deletions.
diff --git a/src/victory-clip-container/victory-clip-container.js b/src/victory-clip-container/victory-clip-container.js
@@ -1,5 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
+import CustomPropTypes from "../victory-util/prop-types";
 import { assign, defaults, isFunction } from "lodash";
 import ClipPath from "../victory-primitives/clip-path";
 
@@ -12,18 +13,18 @@ export default class VictoryClipContainer extends React.Component {
       PropTypes.node
     ]),
     className: PropTypes.string,
-    clipHeight: PropTypes.number,
+    clipHeight: CustomPropTypes.nonNegative,
     clipId: PropTypes.number,
     clipPadding: PropTypes.shape({
       top: PropTypes.number, bottom: PropTypes.number,
       left: PropTypes.number, right: PropTypes.number
     }),
     clipPathComponent: PropTypes.element,
-    clipWidth: PropTypes.number,
+    clipWidth: CustomPropTypes.nonNegative,
     events: PropTypes.object,
-    origin: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }),
+    origin: PropTypes.shape({ x: CustomPropTypes.nonNegative, y: CustomPropTypes.nonNegative }),
     polar: PropTypes.bool,
-    radius: PropTypes.number,
+    radius: CustomPropTypes.nonNegative,
     style: PropTypes.object,
     transform: PropTypes.string,
     translateX: PropTypes.number,

diff --git a/src/victory-container/victory-container.js b/src/victory-container/victory-container.js
@@ -1,5 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
+import CustomPropTypes from "../victory-util/prop-types";
 import { assign, omit, defaults, uniqueId, isObject } from "lodash";
 import Portal from "../victory-portal/portal";
 import Timer from "../victory-util/timer";
@@ -16,19 +17,21 @@ export default class VictoryContainer extends React.Component {
     containerId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     desc: PropTypes.string,
     events: PropTypes.object,
-    height: PropTypes.number,
-    origin: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }),
+    height: CustomPropTypes.nonNegative,
+    origin: PropTypes.shape({ x: CustomPropTypes.nonNegative, y: CustomPropTypes.nonNegative }),
     polar: PropTypes.bool,
     portalComponent: PropTypes.element,
+    portalZIndex: CustomPropTypes.integer,
     responsive: PropTypes.bool,
     style: PropTypes.object,
     theme: PropTypes.object,
     title: PropTypes.string,
-    width: PropTypes.number
+    width: CustomPropTypes.nonNegative
   }
 
   static defaultProps = {
     portalComponent: <Portal/>,
+    portalZIndex: 99,
     responsive: true
   }
 
@@ -46,7 +49,7 @@ export default class VictoryContainer extends React.Component {
   constructor(props) {
     super(props);
     this.getTimer = this.getTimer.bind(this);
-    this.containerId = !(isObject(props) && typeof props.containerId === "undefined") ?
+    this.containerId = !isObject(props) || typeof props.containerId === "undefined" ?
       uniqueId("victory-container-") : props.containerId;
   }
 
@@ -94,27 +97,33 @@ export default class VictoryContainer extends React.Component {
     return props.children;
   }
 
-  // Overridden in victory-core-native
   renderContainer(props, svgProps, style) {
-    const { title, desc, portalComponent, className } = props;
+    const { title, desc, portalComponent, className, width, height, portalZIndex } = props;
     const children = this.getChildren(props);
-    const parentProps = defaults({ style, className }, svgProps);
+    const divStyle = { pointerEvents: "none", touchAction: "none" };
+    const svgStyle = { width: "100%", height: "100%" };
+    //eslint-disable-next-line no-magic-numbers
+    const marginTop = `-${Math.round(100 * height / width)}%`;
+    const portalProps = {
+      width, height, viewBox: svgProps.viewBox, style: assign({}, svgStyle, { overflow: "visible" })
+    };
     return (
-      <svg {...parentProps} overflow="visible">
-        <svg {...parentProps}>
-          {children}
-        </svg>
+      <div style={defaults({}, style, divStyle)} className={className}>
+        <svg {...svgProps} style={{ ...svgStyle, pointerEvents: "all" }}>
           {title ? <title id={this.getIdForElement("title")}>{title}</title> : null}
           {desc ? <desc id={this.getIdForElement("desc")}>{desc}</desc> : null}
-        {React.cloneElement(portalComponent, { ref: this.savePortalRef })}
-      </svg>
+          {children}
+        </svg>
+          <div style={{ ...divStyle, zIndex: portalZIndex, position: "relative", marginTop }}>
+            {React.cloneElement(portalComponent, { ...portalProps, ref: this.savePortalRef })}
+          </div>
+        </div>
     );
   }
 
   render() {
     const { width, height, responsive, events } = this.props;
     const style = responsive ? this.props.style : omit(this.props.style, ["height", "width"]);
-    const touchStyle = defaults({}, style, { touchAction: "none" });
     const svgProps = assign(
       {
         width, height, role: "img",
@@ -123,6 +132,6 @@ export default class VictoryContainer extends React.Component {
       },
       events
     );
-    return this.renderContainer(this.props, svgProps, touchStyle);
+    return this.renderContainer(this.props, svgProps, style);
   }
 }
diff --git a/src/victory-label/victory-label.js b/src/victory-label/victory-label.js
@@ -52,7 +52,7 @@ export default class VictoryLabel extends React.Component {
       CustomPropTypes.nonNegative,
       PropTypes.func
     ]),
-    origin: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }),
+    origin: PropTypes.shape({ x: CustomPropTypes.nonNegative, y: CustomPropTypes.nonNegative }),
     polar: PropTypes.bool,
     renderInPortal: PropTypes.bool,
     style: PropTypes.oneOfType([
@@ -89,11 +89,11 @@ export default class VictoryLabel extends React.Component {
       PropTypes.func
     ]),
     x: PropTypes.oneOfType([
-      PropTypes.number,
+      CustomPropTypes.nonNegative,
       PropTypes.string
     ]),
     y: PropTypes.oneOfType([
-      PropTypes.number,
+      CustomPropTypes.nonNegative,
       PropTypes.string
     ])
   };

diff --git a/src/victory-legend/victory-legend.js b/src/victory-legend/victory-legend.js
@@ -71,9 +71,9 @@ class VictoryLegend extends React.Component {
       eventHandlers: PropTypes.object
     })),
     groupComponent: PropTypes.element,
-    gutter: PropTypes.number,
+    gutter: CustomPropTypes.nonNegative,
     height: CustomPropTypes.nonNegative,
-    itemsPerRow: PropTypes.number,
+    itemsPerRow: CustomPropTypes.nonNegative,
     labelComponent: PropTypes.element,
     orientation: PropTypes.oneOf(["horizontal", "vertical"]),
     padding: PropTypes.oneOfType([
@@ -103,8 +103,8 @@ class VictoryLegend extends React.Component {
     titleComponent: PropTypes.element,
     titleOrientation: PropTypes.oneOf(["top", "bottom", "left", "right"]),
     width: CustomPropTypes.nonNegative,
-    x: PropTypes.number,
-    y: PropTypes.number
+    x: CustomPropTypes.nonNegative,
+    y: CustomPropTypes.nonNegative
   };
 
   static defaultProps = {

diff --git a/src/victory-portal/portal.js b/src/victory-portal/portal.js
@@ -1,17 +1,18 @@
 import React from "react";
 import PropTypes from "prop-types";
+import CustomPropTypes from "../victory-util/prop-types";
 
 export default class Portal extends React.Component {
   static displayName = "Portal";
 
   static propTypes = {
-    groupComponent: PropTypes.element
+    className: PropTypes.string,
+    height: CustomPropTypes.nonNegative,
+    style: PropTypes.object,
+    viewBox: PropTypes.string,
+    width: CustomPropTypes.nonNegative
   }
 
-  static defaultProps = {
-    groupComponent: <g/>
-  };
-
   constructor(props) {
     super(props);
     this.map = {};
@@ -34,15 +35,15 @@ export default class Portal extends React.Component {
     delete this.map[key];
   }
 
+  getChildren() {
+    return Object.keys(this.map).map((key) => {
+      const el = this.map[key];
+      return el ? React.cloneElement(el, { key }) : el;
+    });
+  }
+
   // Overridden in victory-core-native
   render() {
-    return React.cloneElement(
-      this.props.groupComponent,
-      {},
-      Object.keys(this.map).map((key) => {
-        const el = this.map[key];
-        return el ? React.cloneElement(el, { key }) : el;
-      })
-    );
+    return <svg {...this.props}>{this.getChildren()}</svg>;
   }
 }
diff --git a/src/victory-tooltip/victory-tooltip.js b/src/victory-tooltip/victory-tooltip.js
@@ -81,8 +81,8 @@ export default class VictoryTooltip extends React.Component {
       CustomPropTypes.nonNegative,
       PropTypes.func
     ]),
-    x: PropTypes.number,
-    y: PropTypes.number
+    x: CustomPropTypes.nonNegative,
+    y: CustomPropTypes.nonNegative
   };
 
   static defaultProps = {