Merge pull request #33634 from vincentjames501/add-react-csv

Add types for react-csv

types/react-csv/components/CommonPropTypes.d.ts

@@ -0,0 +1,22 @@
+import { MouseEventHandler } from "react";
+
+export interface LabelKeyObject {
+    label: string;
+    key: string;
+}
+
+export type Data = object[];
+export type Headers = LabelKeyObject[] | string[];
+export type SyncClickHandler = (event: MouseEventHandler<HTMLAnchorElement>) => boolean | void;
+export type AsyncClickHandler = (event: MouseEventHandler<HTMLAnchorElement>, done: (proceed?: boolean) => void) => void;
+
+export interface CommonPropTypes {
+    data: string | Data;
+    headers?: Headers;
+    enclosingCharacter?: string;
+    separator?: string;
+    filename?: string;
+    uFEFF?: boolean;
+    onClick?: SyncClickHandler | AsyncClickHandler;
+    asyncOnClick?: boolean;
+}

types/react-csv/components/Download.d.ts

@@ -0,0 +1,9 @@
+import { Component } from "react";
+import { CommonPropTypes } from "./CommonPropTypes";
+
+export interface DownloadPropTypes extends CommonPropTypes {
+    target?: string;
+}
+
+export default class Download extends Component<DownloadPropTypes> {
+}

types/react-csv/components/Link.d.ts

@@ -0,0 +1,5 @@
+import { Component } from "react";
+import { CommonPropTypes } from "./CommonPropTypes";
+
+export default class Link extends Component<CommonPropTypes> {
+}

types/react-csv/index.d.ts

@@ -0,0 +1,8 @@
+// Type definitions for react-csv 1.1
+// Project: https://github.com/react-csv/react-csv
+// Definitions by: Vincent Pizzo <https://github.com/vincentjames501>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.8
+
+export { default as CSVLink } from "./components/Link";
+export { default as CSVDownload } from "./components/Download";

types/react-csv/react-csv-tests.tsx

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { render } from "react-dom";
+import { CSVLink, CSVDownload } from "react-csv";
+
+const headers = [
+    {label: 'First Name', key: 'details.firstName'},
+    {label: 'Last Name', key: 'details.lastName'},
+    {label: 'Job', key: 'job'},
+];
+
+const headersStrings = ['foo', 'bar'];
+
+const data = [
+    {details: {firstName: 'Ahmed', lastName: 'Tomi'}, job: 'manager'},
+    {details: {firstName: 'John', lastName: 'Jones'}, job: 'developer'},
+];
+
+const dataString = `firstname,lastname
+Ahmed,Tomi
+Raed,Labes
+Yezzi,Min l3b
+`;
+
+const syncOnClickReturn = (event: React.MouseEventHandler<HTMLAnchorElement>) => {
+    window.console.log(event);
+    return true;
+};
+const syncOnClickVoid = (event: React.MouseEventHandler<HTMLAnchorElement>) => window.console.log(event);
+const asyncOnClickReturn = (event: React.MouseEventHandler<HTMLAnchorElement>, done: (proceed?: boolean) => void) => {
+    window.console.log(event);
+    done(true);
+};
+const asyncOnClickVoid = (event: React.MouseEventHandler<HTMLAnchorElement>, done: (proceed?: boolean) => void) => {
+    window.console.log(event);
+    done();
+};
+
+const node = document.getElementById("main");
+
+render(<CSVLink data={dataString}/>, node);
+render(<CSVLink data={dataString} headers={headersStrings}/>, node);
+render(<CSVLink data={data}/>, node);
+render(<CSVLink data={data} headers={headers}/>, node);
+render(<CSVLink data={data} headers={headers}/>, node);
+render(<CSVLink data={data} headers={headers} separator={','}/>, node);
+render(<CSVLink data={data} headers={headers} separator={','} filename={'bob.csv'}/>, node);
+render(<CSVLink data={data} headers={headers} separator={','} filename={'bob.csv'} uFEFF={true}/>, node);
+render(<CSVLink data={data} headers={headers} separator={','} filename={'bob.csv'} uFEFF={true}
+                enclosingCharacter={`'`}/>, node);
+render(<CSVLink data={data} headers={headers} separator={','} filename={'bob.csv'} uFEFF={true} enclosingCharacter={`'`}
+                onClick={syncOnClickReturn}/>, node);
+render(<CSVLink data={data} headers={headers} separator={','} filename={'bob.csv'} uFEFF={true} enclosingCharacter={`'`}
+                onClick={syncOnClickVoid}/>, node);
+render(<CSVLink data={data} headers={headers} separator={','} filename={'bob.csv'} uFEFF={true} enclosingCharacter={`'`}
+                onClick={asyncOnClickReturn} asyncOnClick={true}/>, node);
+render(<CSVLink data={data} headers={headers} separator={','} filename={'bob.csv'} uFEFF={true} enclosingCharacter={`'`}
+                onClick={asyncOnClickVoid} asyncOnClick={true}/>, node);
+
+render(<CSVDownload data={dataString}/>, node);
+render(<CSVDownload data={dataString} headers={headersStrings}/>, node);
+render(<CSVDownload data={data}/>, node);
+render(<CSVDownload data={data} headers={headers}/>, node);
+render(<CSVDownload data={data} headers={headers} target={'_blank'}/>, node);
+render(<CSVDownload data={data} headers={headers} target={'_blank'} separator={','}/>, node);
+render(<CSVDownload data={data} headers={headers} target={'_blank'} separator={','} filename={'bob.csv'}/>, node);
+render(<CSVDownload data={data} headers={headers} target={'_blank'} separator={','} filename={'bob.csv'}
+                    uFEFF={true}/>, node);
+render(<CSVDownload data={data} headers={headers} target={'_blank'} separator={','} filename={'bob.csv'}
+                    uFEFF={true}/>, node);
+render(<CSVDownload data={data} headers={headers} target={'_blank'} separator={','} filename={'bob.csv'} uFEFF={true}
+                    onClick={syncOnClickReturn}/>, node);
+render(<CSVDownload data={data} headers={headers} target={'_blank'} separator={','} filename={'bob.csv'} uFEFF={true}
+                    onClick={syncOnClickVoid}/>, node);
+render(<CSVDownload data={data} headers={headers} target={'_blank'} separator={','} filename={'bob.csv'} uFEFF={true}
+                    onClick={asyncOnClickReturn} asyncOnClick={true}/>, node);
+render(<CSVDownload data={data} headers={headers} target={'_blank'} separator={','} filename={'bob.csv'} uFEFF={true}
+                    onClick={asyncOnClickVoid} asyncOnClick={true}/>, node);

types/react-csv/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "baseUrl": "../",
+    "typeRoots": [
+      "../"
+    ],
+    "types": [],
+    "noEmit": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react",
+    "noUnusedParameters": true,
+    "noUnusedLocals": true
+  },
+  "files": [
+    "index.d.ts",
+    "components/CommonPropTypes.d.ts",
+    "components/Download.d.ts",
+    "components/Link.d.ts",
+    "react-csv-tests.tsx"
+  ]
+}

types/react-csv/tslint.json

@@ -0,0 +1,4 @@
+{
+  "extends": "dtslint/dt.json",
+  "rules": { }
+}