diff --git a/src/app.tsx b/src/app.tsx index 0ae5fae..3d45076 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -272,6 +272,26 @@ export class App extends React.Component { this.props.history.push(location); }; + private onPrint = () => { + analyticsEvent('print'); + this.chartRef && this.chartRef.print(); + }; + + private onDownloadPdf = () => { + analyticsEvent('download_pdf'); + this.chartRef && this.chartRef.downloadPdf(); + }; + + private onDownloadPng = () => { + analyticsEvent('download_png'); + this.chartRef && this.chartRef.downloadPng(); + }; + + private onDownloadSvg = () => { + analyticsEvent('download_svg'); + this.chartRef && this.chartRef.downloadSvg(); + }; + private renderMainArea = () => { if (this.state.data && this.state.selection) { return ( @@ -316,22 +336,12 @@ export class App extends React.Component { ) } standalone={this.state.standalone} - onSelection={this.onSelection} - onPrint={() => { - analyticsEvent('print'); - this.chartRef && this.chartRef.print(); - }} - onDownloadPdf={() => { - analyticsEvent('download_pdf'); - this.chartRef && this.chartRef.downloadPdf(); - }} - onDownloadPng={() => { - analyticsEvent('download_png'); - this.chartRef && this.chartRef.downloadPng(); - }} - onDownloadSvg={() => { - analyticsEvent('download_svg'); - this.chartRef && this.chartRef.downloadSvg(); + eventHandlers={{ + onSelection: this.onSelection, + onPrint: this.onPrint, + onDownloadPdf: this.onDownloadPdf, + onDownloadPng: this.onDownloadPng, + onDownloadSvg: this.onDownloadSvg, }} /> )} diff --git a/src/top_bar.tsx b/src/top_bar.tsx index 484cc49..fa11c7f 100644 --- a/src/top_bar.tsx +++ b/src/top_bar.tsx @@ -30,10 +30,7 @@ interface State { searchResults: SearchResult[]; } -interface Props { - showingChart: boolean; - gedcom?: GedcomData; - standalone: boolean; +interface EventHandlers { onSelection: (indiInfo: IndiInfo) => void; onPrint: () => void; onDownloadPdf: () => void; @@ -41,6 +38,13 @@ interface Props { onDownloadSvg: () => void; } +interface Props { + showingChart: boolean; + gedcom?: GedcomData; + standalone: boolean; + eventHandlers: EventHandlers; +} + function loadFileAsText(file: File): Promise { return new Promise((resolve, reject) => { const reader = new FileReader(); @@ -174,7 +178,7 @@ export class TopBar extends React.Component< /** On search result selected. */ handleResultSelect(id: string) { analyticsEvent('search_result_selected'); - this.props.onSelection({id, generation: 0}); + this.props.eventHandlers.onSelection({id, generation: 0}); this.searchRef!.setValue(''); } @@ -265,7 +269,7 @@ export class TopBar extends React.Component< const chartMenus = this.props.showingChart ? ( <> - this.props.onPrint()}> + this.props.eventHandlers.onPrint()}> @@ -280,13 +284,19 @@ export class TopBar extends React.Component< className="item" > - this.props.onDownloadPdf()}> + this.props.eventHandlers.onDownloadPdf()} + > - this.props.onDownloadPng()}> + this.props.eventHandlers.onDownloadPng()} + > - this.props.onDownloadSvg()}> + this.props.eventHandlers.onDownloadSvg()} + >