collaborative-ui/lib/JsonCrdtLog/DownloadButton.js

React component library for building real-time collaborative editing applications.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DownloadButton = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const use_t_1 = require("use-t");
const Split_1 = require("nice-ui/lib/3-list-item/Split");
const Sidetip_1 = require("nice-ui/lib/1-inline/Sidetip");
const ContextMenu_1 = require("nice-ui/lib/4-card/ContextMenu");
const Popup_1 = require("nice-ui/lib/4-card/Popup");
const BasicButton_1 = require("nice-ui/lib/2-inline-block/BasicButton");
const BasicTooltip_1 = require("nice-ui/lib/4-card/BasicTooltip");
const LogEncoder_1 = require("json-joy/lib/json-crdt/log/codec/LogEncoder");
const CborEncoder_1 = require("@jsonjoy.com/json-pack/lib/cbor/CborEncoder");
const DownloadIcon_1 = require("../icons/DownloadIcon");
const context_1 = require("./context");
const downloadBlob_1 = require("../util/downloadBlob");
const gzip_1 = require("@jsonjoy.com/util/lib/compression/gzip");
const DownloadButton = ({ filename = 'log' }) => {
    const [t] = (0, use_t_1.useT)();
    const state = (0, context_1.useLogState)();
    return (React.createElement(Popup_1.Popup, { renderContext: () => (React.createElement(ContextMenu_1.ContextPane, { minWidth: 260 },
            React.createElement(ContextMenu_1.ContextSep, null),
            React.createElement(ContextMenu_1.ContextTitle, null, t('Full history')),
            React.createElement(ContextMenu_1.ContextItem, { closePopup: true, inset: true, icon: React.createElement(DownloadIcon_1.DownloadIcon, null), onClick: async () => {
                    const cborEncoder = new CborEncoder_1.CborEncoder();
                    const encoder = new LogEncoder_1.LogEncoder({ cborEncoder });
                    const encoded = encoder.encode(state.log, {
                        format: 'seq.cbor',
                        history: 'binary',
                        model: 'none',
                        noView: true,
                    });
                    const compressed = await (0, gzip_1.gzip)(encoded);
                    const blob = new Blob([compressed], { type: 'application/octet-stream' });
                    (0, downloadBlob_1.downloadBlob)(blob, filename + '.seq.cbor.gz');
                } },
                React.createElement(Split_1.Split, null,
                    React.createElement("span", null, t('Download')),
                    React.createElement(Sidetip_1.Sidetip, { small: true }, '.seq.cbor.gz'))),
            React.createElement(ContextMenu_1.ContextSep, null))) },
        React.createElement(BasicTooltip_1.BasicTooltip, { nowrap: true, renderTooltip: () => t('Download') },
            React.createElement(BasicButton_1.BasicButton, null,
                React.createElement(DownloadIcon_1.DownloadIcon, null)))));
};
exports.DownloadButton = DownloadButton;