From acd4c61167be75cddd628ef32a90e72ba2da7f3d Mon Sep 17 00:00:00 2001
From: Cleve Littlefield <clevel@payscale.com>
Date: Mon, 7 Aug 2017 00:48:55 -0700
Subject: [PATCH] withFauxDOM, connectFauxDOM, animateFauxDOM? support

---
 types/react-faux-dom/index.d.ts               |  7 +++++
 types/react-faux-dom/react-faux-dom-tests.tsx | 29 ++++++++++++++++++-
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/types/react-faux-dom/index.d.ts b/types/react-faux-dom/index.d.ts
index 0a363de3f0..c0f1bae645 100644
--- a/types/react-faux-dom/index.d.ts
+++ b/types/react-faux-dom/index.d.ts
@@ -28,3 +28,10 @@ export function createElement(nodeName: string): Element;
 export function createElementNS(namespace: string, nodeName: string): Element;
 
 export function compareDocumentPosition(): number;
+
+export interface IReactFauxDomProps {
+    connectFauxDOM?(node: string, name: string, discardNode?: any): Element;
+    animateFauxDOM?(duration: number): void;
+}
+
+export function withFauxDOM<P>(WrappedComponent: any): React.ClassicComponentClass<P & IReactFauxDomProps>;
\ No newline at end of file
diff --git a/types/react-faux-dom/react-faux-dom-tests.tsx b/types/react-faux-dom/react-faux-dom-tests.tsx
index 0410306f6b..bad1bccc03 100644
--- a/types/react-faux-dom/react-faux-dom-tests.tsx
+++ b/types/react-faux-dom/react-faux-dom-tests.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as d3 from 'd3';
-import { createElement, Element } from 'react-faux-dom';
+import { createElement, Element, IReactFauxDomProps, withFauxDOM } from 'react-faux-dom';
 
 class SomeChart extends React.Component {
   render() {
@@ -21,3 +21,30 @@ class SomeChart extends React.Component {
     return el.toReact();
   }
 }
+
+interface ChartProps extends IReactFauxDomProps {
+  chart?: any;
+}
+
+class MyReactComponent extends React.Component<ChartProps> {
+  componentDidMount() {
+    if (this.props.connectFauxDOM && this.props.animateFauxDOM) {
+      const faux = this.props.connectFauxDOM('div', 'chart');
+      d3.select(faux)
+        .append('div')
+        .html('Hello World!');
+      this.props.animateFauxDOM(800);
+    }
+  }
+
+  render() {
+    return <div>
+      <h2>Here is some fancy data:</h2>
+      <div className='renderedD3'>
+        {this.props.chart}
+      </div>
+    </div>;
+  }
+}
+
+const AdvancedComponent = withFauxDOM<ChartProps>(MyReactComponent);