Implement

Author: seanchas116

.gitignore

@@ -35,3 +35,6 @@ jspm_packages
 
 # Optional REPL history
 .node_repl_history
+
+__tests__/**/*.d.ts
+__tests__/**/*.js

__tests__/test.tsx

@@ -0,0 +1,15 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import FindElement from ".."
+
+class Component extends FindElement<{}, {}> {
+}
+
+test("FindElement finds child DOM element", () => {
+  const root = document.createElement("div")
+  const view = <Component>
+    <div id="elem" />
+  </Component>
+  const component = ReactDOM.render(view, root) as Component
+  expect(component.element.id).toBe("elem")
+})

index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import * as React from "react";
+export default class FindElement<TProps, TState> extends React.Component<TProps, TState> {
+    element: Element | undefined;
+    mapElement(elem: React.ReactChild): React.ReactChild;
+    render(): React.ReactElement<any>;
+}

index.js

@@ -0,0 +1,47 @@
+"use strict";
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+var React = require("react");
+var FindElement = (function (_super) {
+    __extends(FindElement, _super);
+    function FindElement() {
+        _super.apply(this, arguments);
+    }
+    FindElement.prototype.mapElement = function (elem) {
+        var _this = this;
+        if (typeof elem == "object") {
+            if (typeof elem.type == "string") {
+                var origRef_1 = elem.ref;
+                return React.cloneElement(elem, {
+                    ref: function (elem) {
+                        if (origRef_1) {
+                            origRef_1(elem);
+                        }
+                        _this.element = elem;
+                    }
+                });
+            }
+            else {
+                return React.cloneElement(elem, {
+                    children: React.Children.map(elem.props.children, this.mapElement.bind(this))
+                });
+            }
+        }
+        return elem;
+    };
+    FindElement.prototype.render = function () {
+        var child = this.mapElement(React.Children.only(this.props.children));
+        if (typeof child == "object") {
+            return child;
+        }
+        else {
+            throw new Error("Child must not be string nor number");
+        }
+    };
+    return FindElement;
+}(React.Component));
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = FindElement;

index.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+
+export default
+class FindElement<TProps, TState> extends React.Component<TProps, TState> {
+  element: Element|undefined
+
+  mapElement(elem: React.ReactChild): React.ReactChild {
+    if (typeof elem == "object") {
+      if (typeof elem.type == "string") {
+        const origRef = (elem as any).ref
+        return React.cloneElement(elem, {
+          ref: (elem: Element) => {
+            if (origRef) {
+              origRef(elem)
+            }
+            this.element = elem
+          }
+        })
+      } else {
+        return React.cloneElement(elem, {
+          children: React.Children.map(elem.props.children, this.mapElement.bind(this))
+        })
+      }
+    }
+    return elem
+  }
+
+  render() {
+    const child = this.mapElement(React.Children.only(this.props.children))
+    if (typeof child == "object") {
+      return child
+    } else {
+      throw new Error("Child must not be string nor number")
+    }
+  }
+}

package.json

@@ -4,7 +4,9 @@
   "description": "Base class for React components that finds and taps descendant DOM element",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "tsc",
+    "pretest": "npm run build",
+    "test": "jest"
   },
   "repository": {
     "type": "git",
@@ -15,5 +17,19 @@
   "bugs": {
     "url": "https://github.com/sketchglass/react-find-element/issues"
   },
-  "homepage": "https://github.com/sketchglass/react-find-element#readme"
+  "homepage": "https://github.com/sketchglass/react-find-element#readme",
+  "devDependencies": {
+    "@types/jest": "^16.0.0",
+    "@types/react": "^0.14.50",
+    "@types/react-dom": "^0.14.19",
+    "jest": "^17.0.3",
+    "jest-cli": "^17.0.3",
+    "react": "^15.4.1",
+    "react-dom": "^15.4.1",
+    "typescript": "^2.0.10"
+  },
+  "jest": {
+    "verbose": true,
+    "watchman": false
+  }
 }

tsconfig.json

@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "target": "es5",
+        "noImplicitAny": true,
+        "declaration": true,
+        "jsx": "react"
+    }
+}