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);
}