Merge pull request #34009 from jlismore/react-csv-link-extends-HTMLAnchor-props

react-csv Extend anchor props on CSVLink
This commit is contained in:
Sheetal Nandi
2019-03-22 12:09:48 -07:00
committed by GitHub
2 changed files with 229 additions and 49 deletions
+13 -2
View File
@@ -1,5 +1,16 @@
import { Component } from "react";
import { CommonPropTypes } from "./CommonPropTypes";
export default class Link extends Component<CommonPropTypes> {
}
// tslint:disable-next-line strict-export-declare-modifiers
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
export interface LinkProps
extends CommonPropTypes,
Omit<
React.DetailedHTMLProps<
React.AnchorHTMLAttributes<HTMLAnchorElement>,
HTMLAnchorElement
>,
"onClick"
> {}
export default class Link extends Component<LinkProps> {}
+216 -47
View File
@@ -3,16 +3,16 @@ 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'},
{ label: "First Name", key: "details.firstName" },
{ label: "Last Name", key: "details.lastName" },
{ label: "Job", key: "job" }
];
const headersStrings = ['foo', 'bar'];
const headersStrings = ["foo", "bar"];
const data = [
{details: {firstName: 'Ahmed', lastName: 'Tomi'}, job: 'manager'},
{details: {firstName: 'John', lastName: 'Jones'}, job: 'developer'},
{ details: { firstName: "Ahmed", lastName: "Tomi" }, job: "manager" },
{ details: { firstName: "John", lastName: "Jones" }, job: "developer" }
];
const dataString = `firstname,lastname
@@ -21,57 +21,226 @@ Raed,Labes
Yezzi,Min l3b
`;
const syncOnClickReturn = (event: React.MouseEventHandler<HTMLAnchorElement>) => {
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) => {
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) => {
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(<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(
<CSVLink
data={data}
headers={headers}
separator={","}
filename={"bob.csv"}
uFEFF={true}
enclosingCharacter={`'`}
onClick={asyncOnClickVoid}
asyncOnClick={true}
className="test"
target="_blank"
/>,
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);
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
);