TypeScript Support

lib/portal.d.ts

@@ -0,0 +1,16 @@
+interface PortalProps extends React.Props<any> {
+	isOpened?: boolean;
+	openByClickOn?: React.ReactElement<any>;
+	closeOnEsc?: boolean;
+	closeOnOutsideClick?: boolean;
+	onOpen?: (domNode: HTMLElement) => void;
+	beforeClose?: (domNode: HTMLElement, removeFromDom: () => void) => void;
+	onClose?: () => void;
+	onUpdate?: () => void;
+	closePortal?: () => void;
+	openPortal?: () => void;
+}
+
+declare const Portal: (props: PortalProps) => JSX.Element;
+
+export = Portal;

package.json

@@ -3,6 +3,7 @@
   "version": "3.0.0",
   "description": "React component for transportation of modals, lightboxes, loading bars... to document.body",
   "main": "build/portal",
+  "types": "lib/portal.d.ts",
   "files": [
     "*.md",
     "LICENSE",
@@ -38,6 +39,7 @@
     "transportation"
   ],
   "devDependencies": {
+    "@types/react": "^0.14.54",
     "babel-cli": "^6.8.0",
     "babel-core": "^6.8.0",
     "babel-eslint": "^6.0.4",
@@ -64,6 +66,8 @@
     "rimraf": "^2.5.0",
     "sinon": "^1.17.4",
     "tween.js": "^16.3.1",
+    "typescript": "^2.1.4",
+    "typescript-definition-tester": "0.0.5",
     "webpack": "^1.13.0",
     "webpack-dev-middleware": "^1.6.1",
     "webpack-hot-middleware": "^2.6.0"

test/typescript/exercise-all-props.ts

@@ -0,0 +1,20 @@
+import * as Portal from '../../lib/portal';
+import * as React from 'react';
+
+let beforeClosed = false;
+let closed = false;
+let removedFromDom = false;
+let openedWithDomNode;
+let updated = false;
+
+export const portal = React.createElement(Portal, {
+    isOpened: true,
+    openByClickOn: React.createElement('div'),
+    closeOnEsc: true,
+    closeOnOutsideClick: false,
+    onOpen: function (domNode: HTMLElement) { return openedWithDomNode = domNode; },
+    beforeClose: function (domNode: HTMLElement, removeFromDom: () => void) { beforeClosed = true; removeFromDom(); },
+    onClose: function () { return closed = true; },
+    onUpdate: function () { return updated = true; },
+    children: React.createElement('div')
+});

test/typescript/manually-open-and-close.ts

@@ -0,0 +1,7 @@
+import * as Portal from '../../lib/portal';
+import * as React from 'react';
+
+export const portal = React.createElement(Portal);
+
+portal.props.openPortal();
+portal.props.closePortal();

test/typescript_spec.js

@@ -0,0 +1,63 @@
+import Portal from '../lib/portal';
+import { mount } from 'enzyme';
+import assert from 'assert';
+import * as tt from 'typescript-definition-tester';
+import * as ts from 'typescript';
+import * as fs from 'fs';
+
+const TYPESCRIPT_FILE_PATH = './test/typescript/exercise-all-props.ts';
+
+function getPortalInstance(callback) {
+  const compileOptions = {
+    noEmitOnError: true, noImplicitAny: true,
+    target: ts.ScriptTarget.ES5, module: ts.ModuleKind.CommonJS,
+  };
+
+  fs.readFile(TYPESCRIPT_FILE_PATH, 'utf-8', (err, data) => {
+    if (err) throw err;
+    const code = data.replace('../../lib', '../lib');
+    /* eslint-disable */
+    const portal = eval(ts.transpileModule(code, compileOptions).outputText);
+    /* eslint-enable */
+    callback(portal);
+  });
+}
+
+describe('TypeScript', () => {
+  it('should compile correctly against the TypeScript type definitions', done => {
+    tt.compileDirectory(
+      `${__dirname}/typescript`,
+      fileName => fileName.match(/\.ts$/),
+      () => done()
+    );
+  });
+
+  describe('Creating a Portal instance with TypeScript', () => {
+    let portal;
+
+    before(done => {
+      getPortalInstance((portalFromTypeScript) => {
+        portal = portalFromTypeScript;
+        done();
+      });
+    });
+
+    it('should successfully mount', () => {
+      mount(portal);
+      assert.equal(document.body.childElementCount, 1);
+    });
+
+    it('should contain exactly the props that are allowed in Portal.propTypes', () => {
+      const supportedProps = Object.keys(Portal.propTypes);
+      const actualProps = Object.keys(portal.props);
+
+      actualProps.forEach(propName => {
+        assert.notEqual(supportedProps.indexOf(propName), -1);
+      });
+
+      supportedProps.forEach(propName => {
+        assert.notEqual(actualProps.indexOf(propName), -1);
+      });
+    });
+  });
+});