Implement as React package

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "react", "stage-0"]
+}

.eslintignore

@@ -0,0 +1 @@
+node_modules/*

.eslintrc

@@ -0,0 +1,153 @@
+{
+  "env": {
+    "browser": true,
+    "node": true
+  },
+
+  "parser": "babel-eslint",
+
+  "plugins": [
+    "react"
+  ],
+
+  "ecmaFeatures": {
+    "jsx": true
+  },
+
+  "rules": {
+    // For a complete reference, check out http://eslint.org/docs/rules/
+
+    //-------------------------------------------------------------------------
+    // Best practices
+    //-------------------------------------------------------------------------
+
+    // Prevent abbreviated blocks for clarity
+    "curly": 2,
+
+    // Enforce a reasonable cap on functions spiralling out of control
+    // with many branches.
+    "complexity": [2, 10],
+
+    // Prefer foo.x over foo['x']; static properties are always preferable
+    // to dynamic strings.
+    "dot-notation": 2,
+
+    "dot-location": [2, "property"],
+
+    // enforce === and !== for comparisons
+    "eqeqeq": [2, "smart"],
+
+    "guard-for-in": 2,
+
+    "no-floating-decimal": 2,
+
+    // Avoid funny things with parseInt.
+    // See: http://stackoverflow.com/questions/850341
+    "radix": 2,
+
+    // Avoid pitfalls when trying to call a just-declared function.
+    "wrap-iife": 2,
+
+    // May the force be with you.
+    "yoda": [0, "always"],
+
+    //-------------------------------------------------------------------------
+    // Strict Mode
+    //-------------------------------------------------------------------------
+
+    // Transpilers deal with the effects of strict, so ignore it.
+    "strict": [2, "never"],
+
+    //-------------------------------------------------------------------------
+    // Variable declaration
+    //-------------------------------------------------------------------------
+    "no-use-before-define": 2,
+
+    "no-undefined": 2,
+
+    "no-unused-vars": 2,
+
+    //-------------------------------------------------------------------------
+    // Code style
+    //-------------------------------------------------------------------------
+
+    // The one true brace style.
+    "brace-style": [2, "1tbs"],
+
+    "camelcase": 0,
+
+    "comma-spacing": [2, { "before": false, "after": true }],
+
+    "consistent-this": [2, "_this"],
+
+    "eol-last": 2,
+
+    "indent": [2, 2],
+
+    "key-spacing": [2, { "beforeColon": false, "afterColon": true }],
+
+    "new-cap": 2,
+
+    "no-lonely-if": 2,
+
+    "no-mixed-spaces-and-tabs": [2, true],
+
+    "no-multiple-empty-lines": 2,
+
+    // Nested ternaries are just plain confusing. Avoiding them keeps the
+    // code readable.
+    "no-nested-ternary": 2,
+
+    // There are no such thing as "private" properties. Use closure
+    // variables if you really need isolation.
+    "no-underscore-dangle": 0,
+
+    "no-spaced-func": 2,
+
+    // use one variable declaration for each variable you want to define
+    "one-var": [2, "never"],
+
+    // enforce double quotes
+    "quotes": [2, "double"],
+
+    // Enforce whitespace for visual clarity.
+    "space-after-keywords": [2, "always"],
+    "spaced-comment": [2, "always", { "exceptions": ["-"] }],
+
+    //-------------------------------------------------------------------------
+    // ECMAScript 6
+    //-------------------------------------------------------------------------
+
+    // Enforce `const` and `let` to describe what's going on.
+    "no-var": 2,
+
+    //-------------------------------------------------------------------------
+    // React
+    //-------------------------------------------------------------------------
+    "jsx-quotes": [2, "prefer-double"],
+    "react/jsx-uses-vars": 2,
+    "react/jsx-uses-react": 2,
+
+    // Display name is not needed when using ES6-style components
+    "react/display-name": 0,
+
+    // Make things consistent and readable – prefer `x={true}` over `x`
+    "react/jsx-boolean-value": 2,
+
+    // Keep the quote style consistent with Javascript land
+    "react/jsx-no-undef": 2,
+    "react/jsx-sort-props": 0,
+    "react/jsx-sort-prop-types": 0,
+    "react/no-did-mount-set-state": 1,
+    "react/no-did-update-set-state": 1,
+    "react/no-multi-comp": 2,
+    "react/no-unknown-property": 2,
+    "react/react-in-jsx-scope": 1,
+    "react/self-closing-comp": 2,
+    "react/wrap-multilines": 2,
+
+    // Potential issue in React ESLint package- receiving 'Can't add property
+    // react, object is not extensible' when used with eslint-loader.
+    "react/prop-types": 0
+  }
+}

.gitignore

@@ -0,0 +1 @@
+node_modules

.npmignore

@@ -0,0 +1,2 @@
+node_modules/
+build/*

README.md

@@ -1,16 +1,13 @@
 # FlowTip
 
-*A flexible, adaptable and easy to use tooltip positioning library.*
+*A flexible, adaptable and easy to use tooltip component for React.js*
 
-* [Website](http://qiushihe.github.io/flowtip)
-* [Interactive Demo](http://qiushihe.github.io/flowtip/demo.html)
-* [Github Repo](https://github.com/qiushihe/flowtip)
+Looking for the non-React.js version? It's in the [v1](v1) folder.
 
 ## Dependencies
 
-* [jQuery](http://jquery.com)
-* [Unerscore.js](http://underscorejs.org)
-* [CoffeeScript](http://coffeescript.org) (development only)
+* React
+* ReactDOM
 
 ## Glossaries
 
@@ -38,40 +35,35 @@ then in term aligned to the pivot.
 
 ## Basic Usage
 
-Creates an instance of the **FlowTip** object:
+To include an instance of FlowTip in your component:
 
-    var tooltip = new FlowTip();
+```
+<FlowTip target={targetProperties} parent={parentProperties} {...flowtipProperties}>
+  <b>Holy Shit!</b>
+  <br />
+  FlowTip as React Component
+</FlowTip>
+```
 
-An instance of the **FlowTip** can be created with options (see **Attributes** section below):
+The `target` and `parent` properties specifies the position and dimension of the tooltip's
+target and parent, and for `parent` scroll positions should be included as well:
 
-    var myFlowTip = new FlowTip({
-        region: "bottom"
-        className: "my-tip"
-        hasTail: false
-    })
+```
+targetProperties = {
+  top: ##, left: ##, width: ##, height: ##
+};
 
-At this point, the tooltip is not yet "attached" to a target. The tooltip's target can be set by
-calling `setTarget`:
+parentProperties = {
+  top: ##, left: ##, width: ##, height: ##,
+  scrollTop: ##, scrollLeft: ##
+};
+```
 
-    tooltip.setTarget(tooltipTarget);
+... where all `##` above should be integer values (i.e. not `##px`).
 
-... where `tooltipTarget` may be a DOM object or a jQuery selection.
+For possible values of `flowtipProperties` see [FlowTip Properties](#flowtip-properties) below.
 
-To make the tooltip visible, call `show`:
-
-    tooltip.show();
-
-This will render the tooltip is it's not already rendered, and position the tooltip in the
-appropriate region (see `region` in **Attributes** section below) with proper alignments
-(see **Alignments** section below).
-
-It's important to note that instances of **FlowTip** does **not** automatically re-position
-themselves when their targets move. The responsibility of detecting target movement lies outside
-the scope of this library. To update the tooltip's position against its target:
-
-    tooltip.reposition();
-
-## Attributes
+## FlowTip Properties
 
 ### `className`: **String**
 
@@ -91,24 +83,6 @@ _Default value: ""_
 
 Additional class name(s) for the tooltip's tail.
 
-### `appendTo`: **Element**
-
-_Default value: null_
-
-The element within which the tooltip will be inserted into. Can be set or updated by calling
-`setAppendTo`. Default value is the document's `body` and the tooltip would thus be free to appear
-and move anywhere on the page and edge detection will only be performed on the edge of the page.
-
-If `appendTo` is set to an element then edge detection will be performed on the edge of
-the element instead.
-
-### `tooltipContent`: **String** or **Element**
-
-_Default value: null_
-
-The content of the tooltip. May be specified as (HTML) string or DOM element. Can be set original
-updated by calling `setTooltipContent`.
-
 ### `region`: **String**
 
 _Default value: top_
@@ -273,56 +247,6 @@ pivot. When this value is positive, the clockwise edge will be used, and the cou
 edge will be used when this value is negative. The absolute value of this value controls the
 amount of shifting.
 
-## Public Methods
-
-### `constructor`
-
-Accepts a hash of options. See **Attributes**.
-
-### `render`
-
-Render the tooltip's root (if not already rendered), content and insert the tooltip into the DOM.
-If called repeatedly, only re-render the tooltip's content.
-
-### `setAppendTo`
-
-Set the tooltip's containing element. If the tooltip has already been rendered, the tooltip will
-be moved/inserted into the new containing element.
-
-### `setTarget`
-
-Set the tooltip's target. The target is the element to which the tooltip will be pointing at.
-
-### `setClientRectTarget`
-
-Set the tooltip's target to be a ClientRect instead of a html element. The target is the
-ClientRect to which the tooltip will be pointing at.
-
-### `setTooltipContent`
-
-Set the tooltip's content. If `render` is set to `true` for `options`, the `render()` method will
-be called to re-render the content.
-
-### `reposition`
-
-Perform edge detection and position calculations to update the tooltip's position.
-
-### `show`
-
-Show the tooltip. Also update the tooltip's `visible` attribute.
-
-### `hide`
-
-Hide the tooltip. Also update the tooltip's `visible` attribute.
-
-### `trigger`
-
-Trigger an event from the root of the tooltip.
-
-### `destroy`
-
-Remove the tooltip's root from DOM.
-
 ## Edge Detection
 
 There are three strategies for detection: **flip**, **rotate** and **squeeze**.
@@ -362,8 +286,3 @@ Target alignment refers to the alignment of the pivot relative to the target of
 
 Root alignment refers to the alignment of the tooltip's root relative to the pivot. See
 `rootAlign` and `rootAlignOffset`.
-
-## Coordinator
-
-_TODO: Add documentation for `FlowTip.Coordinator`_
-

demo/index.css

@@ -0,0 +1,21 @@
+body {
+  position: relative;
+  margin: 0px;
+  padding: 0px;
+}
+
+.flowtipDemoArea {
+  background-color: gainsboro;
+}
+
+.flowtipDemoTarget {
+  background-color: black;
+}
+
+.flowtip-tail {
+  background-color: red;
+}
+
+.flowtip-root {
+  background-color: gray;
+}

demo/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>FlowTip.React Demo</title>
+    <link rel="stylesheet" href="/index.css" />
+  </head>
+  <body>
+    <div id="demo"></div>
+  </body>
+  <script src="/demo.js"></script>
+</body>
+</html>
+