Merge pull request #28 from qiushihe/dom-validation

Add validation and update README.

Author: izaakschroeder

README.md

@@ -47,19 +47,22 @@ To include an instance of FlowTip in your component:
 ```javascript
 import flowtip from 'flowtip/lib/dom';
 
-// Generate a FlowTip™ with the tail and content you want.
-const MyFlowTip = flowtip({
-  tail: toClass(({style, region}) => (
-    <div className={`flowtip-tail flowtip-tail-${region}`} style={style}/>
-  )),
-  content: toClass(({style, region, children}) => (
-    <div className={`flowtip-root flowtip-root-${region}`} style={style}>
-      {children}
-    </div>
-  )),
-});
-
-// Use your new FlowTip™.
+// Define the FlowTip content component
+const ContentComponent = ({style, region, children}) => (
+  <div className={`flowtip-root flowtip-root-${region}`} style={style}>
+    {children}
+  </div>
+);
+
+// Define the FlowTip tail component
+const TailComponent = ({style, region}) => (
+  <div className={`flowtip-tail flowtip-tail-${region}`} style={style} />
+);
+
+// Generate a FlowTip™ component with the content and tail components.
+const MyFlowTip = flowtip(ContentComponent, TailComponent);
+
+// Render the FlowTip™ component.
 const target = {
   top: 5,
   left: 5,
@@ -199,7 +202,7 @@ The tooltip will be squeezed to an adjacent region if the root of the tooltip ge
 
 ## Alignments
 
-Tool tip's alignments are divided into **root alignment** and **target alignment**, each with a corresponding **offset** attribute that controls the direction of the alignment and offset amount.
+Tooltip's alignments are divided into **root alignment** and **target alignment**, each with a corresponding **offset** attribute that controls the direction of the alignment and offset amount.
 
 ### Target Alignment
 
@@ -208,3 +211,11 @@ Target alignment refers to the alignment of the pivot relative to the target of
 ### Root Alignment
 
 Root alignment refers to the alignment of the tooltip's root relative to the pivot. See `rootAlign` and `rootAlignOffset`.
+
+## Clamping
+
+By default the tooltip is "clamped" to its parent. Meaning even if the target leaves the viewport, the tooltip would never leave the viewport. The clamping behaviour can be controlled via the `clamp` property.
+
+When `clamp` is `true`, the flyout will always remains in the parent even if the target is out of the parent.
+
+When `clamp` is `false`, the flyout will always attatch itself to the target, even if it’s outside the parent, but it will make a best effort to be in the parent.

demo/demo.js

@@ -29,12 +29,6 @@ class FlowTipDemo extends Component {
     this.updateTargetProperties();
   }
 
-  updateTargetProperties() {
-    this.setState({
-      target: ReactDOM.findDOMNode(this.refs.target).getBoundingClientRect(),
-    });
-  }
-
   handleTargetMove() {
     this.updateTargetProperties();
   }
@@ -45,6 +39,12 @@ class FlowTipDemo extends Component {
     });
   }
 
+  updateTargetProperties() {
+    this.setState({
+      target: ReactDOM.findDOMNode(this.refs.target).getBoundingClientRect(),
+    });
+  }
+
   render() {
     const flowtipProperties = {
       targetOffset: 10,
@@ -99,6 +99,16 @@ class FlowTipDemo extends Component {
 class FlowTipDemoTarget extends Component {
   state = {posX: 0, posY: 0, active: true};
 
+  componentDidMount() {
+    window.addEventListener('mousemove', this.handleMouseMove.bind(this));
+    window.addEventListener('click', this.handleMouseClick.bind(this));
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('mousemove', this.handleMouseMove.bind(this));
+    window.removeEventListener('click', this.handleMouseClick.bind(this));
+  }
+
   handleMouseMove(ev) {
     if (!this.state.active) {
       return;
@@ -117,16 +127,6 @@ class FlowTipDemoTarget extends Component {
     this.setState({active: !this.state.active});
   }
 
-  componentDidMount() {
-    window.addEventListener('mousemove', this.handleMouseMove.bind(this));
-    window.addEventListener('click', this.handleMouseClick.bind(this));
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('mousemove', this.handleMouseMove.bind(this));
-    window.removeEventListener('click', this.handleMouseClick.bind(this));
-  }
-
   render() {
     const style = {
       position: 'absolute',

package.json

@@ -52,6 +52,7 @@
     "react": "^15.3.1",
     "react-addons-test-utils": "^15.3.1",
     "react-dom": "^15.3.1",
+    "sinon": "^1.17.6",
     "webpack": "^1.12.11",
     "webpack-dev-server": "^1.14.1"
   },

src/dom.js

@@ -1,70 +1,20 @@
-/* global getComputedStyle window */
+/* global window */
 import {createElement, Component} from 'react';
 import ReactDOM from 'react-dom';
 
 import FlowTip from './flowtip';
 import ResizeObserver from 'react-resize-observer';
 
-/**
- * Find the closest node that will control the positioning of the FlowTip™
- * content.
- * @param   {Node} _node Initial node to search from.
- * @returns {Node} The anchor parent.
- */
-const getAnchorParent = (_node) => {
-  let node = _node.parentNode;
-  const isParentNode = (node) => {
-    const style = getComputedStyle(node);
-    return style && style.position !== 'static';
-  };
-
-  while (node) {
-    if (isParentNode(node) || node.tagName === 'BODY') {
-      return node;
-    }
-    node = node.parentNode;
+export default (Content, Tail) => {
+  if (typeof(Content) !== 'function') {
+    throw new TypeError('Content component is not a function.');
   }
-  return node;
-};
-
-/**
- * Find the closest node that should enclose the FlowTip™'s content. Basically
- * the nearest thing with scrollbars.
- * @param   {[type]} _node       [description]
- * @param   {[type]} parentClass =             null [description]
- * @returns {[type]}             [description]
- */
-const getBoundingParent = (_node, parentClass = null) => {
-  let node = _node.parentNode;
-  const scrollishStyle = (style) => [
-    'auto',
-    'hidden',
-    'scroll',
-  ].indexOf(style) !== -1;
-
-  const isParentNode = (node) => {
-    const style = getComputedStyle(node);
-    if (parentClass) {
-      return node.className.indexOf(parentClass) !== -1;
-    } else if (style) {
-      return scrollishStyle(style.overflow) ||
-        scrollishStyle(style.overflowX) ||
-        scrollishStyle(style.overflowY);
-    }
-    return false;
-  };
 
-  while (node) {
-    if (isParentNode(node) || node.tagName === 'BODY') {
-      return node;
-    }
-    node = node.parentNode;
+  if (typeof(Tail) !== 'function') {
+    throw new TypeError('Tail component is not a function.');
   }
-  return node;
-};
 
-export default (Content, Tail) => {
-  return class MyFlowTip extends Component {
+  return class FlowTipDOM extends Component {
     static defaultProps = {
       clamp: true,
     };
@@ -81,13 +31,75 @@ export default (Content, Tail) => {
       this.handleScroll = this.handleScroll.bind(this);
     }
 
+    getWindow() {
+      return window;
+    }
+
+    /**
+     * Find the closest node that will control the positioning of the FlowTip™
+     * content.
+     * @param   {Node} _node Initial node to search from.
+     * @returns {Node} The anchor parent.
+     */
+    getAnchorParent(_node) {
+      let node = _node.parentNode;
+      const isParentNode = (node) => {
+        const style = this.getWindow().getComputedStyle(node);
+        return style && style.position !== 'static';
+      };
+
+      while (node) {
+        if (isParentNode(node) || node.tagName === 'BODY') {
+          return node;
+        }
+        node = node.parentNode;
+      }
+      return node;
+    }
+
+    /**
+     * Find the closest node that should enclose the FlowTip™'s content.
+     * Basically the nearest thing with scrollbars.
+     * @param   {[type]} _node       [description]
+     * @param   {[type]} parentClass =             null [description]
+     * @returns {[type]}             [description]
+     */
+    getBoundingParent(_node, parentClass = null) {
+      let node = _node.parentNode;
+      const scrollishStyle = (style) => [
+        'auto',
+        'hidden',
+        'scroll',
+      ].indexOf(style) !== -1;
+
+      const isParentNode = (node) => {
+        const style = this.getWindow().getComputedStyle(node);
+        if (parentClass) {
+          return node.className.indexOf(parentClass) !== -1;
+        } else if (style) {
+          return scrollishStyle(style.overflow) ||
+            scrollishStyle(style.overflowX) ||
+            scrollishStyle(style.overflowY);
+        }
+        return false;
+      };
+
+      while (node) {
+        if (isParentNode(node) || node.tagName === 'BODY') {
+          return node;
+        }
+        node = node.parentNode;
+      }
+      return node;
+    }
+
     getAnchorElement() {
-      return getAnchorParent(ReactDOM.findDOMNode(this.refs.flowtip));
+      return this.getAnchorParent(ReactDOM.findDOMNode(this.refs.flowtip));
     }
 
     getParentElement() {
       const {parentClass} = this.props;
-      return getBoundingParent(this.getAnchorElement(), parentClass);
+      return this.getBoundingParent(this.getAnchorElement(), parentClass);
     }
 
     getAnchorRect() {
@@ -123,11 +135,11 @@ export default (Content, Tail) => {
         parent.top = Math.max(parent.top, 0);
         parent.height = Math.min(
           parent.height,
-          window.innerHeight - parent.top
+          this.getWindow().innerHeight - parent.top
         );
         parent.width = Math.min(
           parent.width,
-          window.innerWidth - parent.left
+          this.getWindow().innerWidth - parent.left
         );
       }
       parent.width -= scrollerWidth;
@@ -150,13 +162,13 @@ export default (Content, Tail) => {
     componentDidMount() {
       const parent = this.getParentElement();
       this.updateState();
-      window.addEventListener('scroll', this.handleScroll);
+      this.getWindow().addEventListener('scroll', this.handleScroll);
       parent.addEventListener('scroll', this.handleScroll);
     }
 
     componentWillUnmount() {
       const parent = this.getParentElement();
-      window.removeEventListener('scroll', this.handleScroll);
+      this.getWindow().removeEventListener('scroll', this.handleScroll);
       parent.removeEventListener('scroll', this.handleScroll);
     }