Function SnapshotExport

packages/sanddance-app/src/snapshots.tsx:267–319

(props: ExportProps)

}

export function SnapshotExport(props: ExportProps) {
    return (
        <controls.Dialog
            hidden={false}
            onDismiss={props.onDismiss}
            dialogContentProps={{
                className: `sanddance-dialog ${props.theme} sanddance-export`,
                type: base.fluentUI.DialogType.normal,
                title: strings.dialogTitleSnapshotsExport,
            }}
        >
            <ul>
                <li>
                    <strong>{strings.labelSnapshotsExportHTMLTitle}</strong>
                    <div>
                        {strings.labelSnapshotsExportHTMLDescription}
                    </div>
                    <base.fluentUI.PrimaryButton
                        iconProps={{ iconName: 'Download' }}
                        text={`${strings.buttonExport} ${strings.labelSnapshotsExportHTMLTitle}`}
                        onClick={e => {
                            const clean = cleanSnapshots(props.snapshots);
                            const html = getEmbedHTML(props.explorer.state.dataContent.data, props.dataSource.displayName, clean);
                            downloadData(html, `${props.dataSource.displayName}.html`);
                        }}
                    />
                </li>
                <li>
                    <strong>{strings.labelSnapshotsExportMarkdownTitle}</strong>
                    <div>
                        {strings.labelSnapshotsExportMarkdownDescription}
                    </div>
                    <base.fluentUI.PrimaryButton
                        iconProps={{ iconName: 'Download' }}
                        text={`${strings.buttonExport} ${strings.labelSnapshotsExportMarkdownTitle}`}
                        onClick={e => {
                            const sections = props.snapshots.map(snapshot => {
                                const section = [`## ${snapshot.title}`];
                                section.push(snapshot.description);
                                section.push('\n');
                                const url = `${location.origin}/#${encodeURIComponent(serializeSnapshot(snapshot))}`;
                                section.push(markdownImageLink(snapshot.title, snapshot.image, url));
                                return section.join('\n');
                            });
                            sections.unshift(`# ${props.dataSource.displayName}`);
                            downloadData(sections.join('\n\n'), `${props.dataSource.displayName}.snapshots.md`);
                        }}
                    />
                </li>
            </ul>
        </controls.Dialog>
    );
}