<commit_before>import XLSX from 'xlsx';
import React, {
    Component
} from 'react';
import { IDerivedData, IVisibleColumn } from 'dash-table/components/Table/props';
import { createWorkbook, createHeadings, createWorksheet } from './utils';
import getHeaderRows from 'dash-table/derived/header/headerRows';

interface IExportButtonProps {
    export_format: string;
    virtual_data: IDerivedData;
    columns: IVisibleColumn[];
    export_headers: string;
}

export default class ExportButton extends Component<IExportButtonProps, any> {

    handleExport = () => {
        const { columns, export_format, virtual_data, export_headers } = this.props;
        const columnID = columns.map(column => column.id);
        const columnHeaders = columns.map(column => column.name);
        const maxLength = getHeaderRows(columns);
        const heading = (export_headers !== 'none') ? createHeadings(columnHeaders, maxLength) : [];
        const ws = createWorksheet(heading, virtual_data.data, columnID, export_headers);
        const wb = createWorkbook(ws, heading, export_headers);
        if (export_format === 'xlsx') {
            XLSX.writeFile(wb, 'Data.xlsx', {bookType: 'xlsx', type: 'buffer'});
        } else if (export_format === 'csv') {
            XLSX.writeFile(wb, 'Data.csv', {bookType: 'csv', type: 'buffer'});
        }

    }

    render() {
        const { export_format } = this.props;
        const isFormatSupported = export_format === 'csv' || export_format === 'xlsx';

        return (
            <div>
                { !isFormatSupported ? null : (
                    <button className='export' onClick={this.handleExport}>Export</button>
            )}
            </div>
        );
    }
}<commit_msg>change to functional component and use React.memo<commit_after>import XLSX from 'xlsx';
import React from 'react';
import { IDerivedData, IVisibleColumn } from 'dash-table/components/Table/props';
import { createWorkbook, createHeadings, createWorksheet } from './utils';
import getHeaderRows from 'dash-table/derived/header/headerRows';

interface IExportButtonProps {
    export_format: string;
    virtual_data: IDerivedData;
    columns: IVisibleColumn[];
    export_headers: string;
}

export default React.memo((props: IExportButtonProps) => {

    const { columns, export_format, virtual_data, export_headers } = props;
    const isFormatSupported = export_format === 'csv' || export_format === 'xlsx';

    const handleExport = () => {
        const columnID = columns.map(column => column.id);
        const columnHeaders = columns.map(column => column.name);
        const maxLength = getHeaderRows(columns);
        const heading = (export_headers !== 'none') ? createHeadings(columnHeaders, maxLength) : [];
        const ws = createWorksheet(heading, virtual_data.data, columnID, export_headers);
        const wb = createWorkbook(ws, heading, export_headers);
        if (export_format === 'xlsx') {
            XLSX.writeFile(wb, 'Data.xlsx', {bookType: 'xlsx', type: 'buffer'});
        } else if (export_format === 'csv') {
            XLSX.writeFile(wb, 'Data.csv', {bookType: 'csv', type: 'buffer'});
        }
    };

    return (
            <div>
                { !isFormatSupported ? null : (
                    <button className='export' onClick={handleExport}>Export</button>
            )}
            </div>
        );
});
{'fraction_non_alphanumeric': 0.1305375073833432, 'fraction_numerical': 0.0, 'mean_word_length': 3.0514354066985647, 'pattern_counts': {'":': 0, '<': 12, '<?xml version=': 0, '>': 19, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6975685', 'n_tokens_mistral': 981, 'n_tokens_neox': 963, 'n_words': 225}