const exportTypes:()

in packages/sanddance-explorer/src/controls/dataExporter.tsx [40:187]


const exportTypes: ([DataExportType, string])[] = [
    ['json', strings.labelExportJSON],
    ['csv', strings.labelExportCSV],
    ['tsv', strings.labelExportTSV],
    ['html', strings.labelExportHTML]
];

function _DataExportPicker(props: Props) {

    class __DataExportPicker extends base.react.Component<Props, State> {
        constructor(props: Props) {
            super(props);
            this.state = this.getInitialState(this.props);
        }

        private getInitialState(props: Props) {
            const initialState: State = {
                initializer: props.initializer,
                dialogHidden: true,
                exportType: exportTypes[0][0],
                fileName: props.initializer.fileName,
                fileNameError: '',
                working: false
            };
            return initialState;
        }

        componentDidUpdate() {
            if (!util.deepCompare(this.props.initializer, this.state.initializer)) {
                this.setState(this.getInitialState(this.props));
            }
        }

        // Converts to dataExport type and calls dataExportHandler to deal with data
        private createExport(exportType: DataExportType, displayName: string) {
            const final = (data: any) => {
                this.props.dataExportHandler(data, exportType, displayName);
                this.close();
            };
            const json = JSON.stringify(this.props.data, columnReplacer);
            switch (exportType) {
                case 'json': {
                    final(json);
                    break;
                }
                case 'csv': {
                    final(convertToDelimited(JSON.parse(json), ','));
                    break;
                }
                case 'tsv': {
                    final(convertToDelimited(JSON.parse(json), '\t'));
                    break;
                }
                case 'html': {
                    const csv = convertToDelimited(JSON.parse(json), ',');
                    const html = embedHtml(`${strings.appName} - ${escape(displayName)}`, embedScript(csv, displayName));
                    final(html);
                }
            }
        }

        private close() {
            this.setState({ dialogHidden: true, working: false });
        }

        render() {
            const closeDialog = () => this.close();

            if (this.state.delayAction) {
                requestAnimationFrame(() => {
                    //allow render to complete
                    if (this.state.delayAction) {
                        this.state.delayAction();
                        this.setState({ delayAction: null });
                    }
                });
            }

            const disabled = this.state.working || this.state.dialogHidden;

            return (
                <div className="sanddance-dataExporter">
                    <base.fluentUI.DefaultButton
                        className="search-action search-bottom-action"
                        text={strings.buttonExportCount(this.props.data.length)}
                        onClick={() => this.setState({ dialogHidden: false })}
                        disabled={this.props.disabled}
                    />
                    <Dialog
                        hidden={this.state.dialogHidden}
                        onDismiss={closeDialog}
                        dialogContentProps={{
                            className: `sanddance-dialog ${this.props.theme}`,
                            type: base.fluentUI.DialogType.normal,
                            title: strings.labelExport
                        }}
                        buttons={[
                            (
                                <base.fluentUI.PrimaryButton
                                    key={0}
                                    disabled={disabled || !!this.state.fileNameError}
                                    onClick={e => this.setState({
                                        delayAction: () => this.createExport(this.state.exportType, this.state.fileName),
                                        working: true
                                    })}
                                    text={strings.buttonExport}
                                    iconProps={{
                                        iconName: 'Download'
                                    }}
                                />
                            )
                        ]}
                    >
                        <base.fluentUI.TextField
                            label={strings.labelExportFileName}
                            onChange={(e, displayName) => {
                                const displayNameError = getFileNameError(displayName);
                                this.setState({ fileName: displayName, fileNameError: displayNameError });
                            }}
                            errorMessage={this.state.fileNameError}
                            value={this.state.fileName}
                        />
                        <base.fluentUI.ChoiceGroup
                            className="sanddance-form-separate"
                            disabled={disabled}
                            options={
                                exportTypes.map(([exportType, text]) => {
                                    return {
                                        key: exportType,
                                        text,
                                        disabled: false,
                                        checked: exportType === this.state.exportType
                                    } as FluentUITypes.IChoiceGroupOption;
                                })
                            }
                            onChange={(ev: React.FormEvent<HTMLInputElement>, option: FluentUITypes.IChoiceGroupOption) =>
                                this.setState({ exportType: option.key as DataExportType })
                            }
                            label={strings.labelExportFormat}
                        />
                    </Dialog>
                </div>
            );
        }
    }

    return new __DataExportPicker(props);
}