collaborative-ui/lib/JsonCrdtModel/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 shared_1 = require("@jsonjoy.com/json-pack/lib/cbor/shared");
const Encoder_1 = require("json-joy/lib/json-crdt/codec/structural/verbose/Encoder");
const Encoder_2 = require("json-joy/lib/json-crdt/codec/structural/compact/Encoder");
const Encoder_3 = require("json-joy/lib/json-crdt/codec/indexed/binary/Encoder");
const Encoder_4 = require("json-joy/lib/json-crdt/codec/sidecar/binary/Encoder");
const Code_1 = require("nice-ui/lib/1-inline/Code");
const Iconista_1 = require("nice-ui/lib/icons/Iconista");
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 DownloadIcon_1 = require("../icons/DownloadIcon");
const downloadBlob_1 = require("../util/downloadBlob");
const DownloadButton = ({ model, filename = 'model' }) => {
    const [t] = (0, use_t_1.useT)();
    return (React.createElement(Popup_1.Popup, { renderContext: () => (React.createElement(ContextMenu_1.ContextPane, { minWidth: 240 },
            React.createElement(ContextMenu_1.ContextSep, null),
            React.createElement(ContextMenu_1.ContextTitle, null, t('Structural')),
            React.createElement(ContextMenu_1.ContextItem, { closePopup: true, inset: true, icon: React.createElement(DownloadIcon_1.DownloadIcon, null), onClick: () => {
                    const uint8 = model.toBinary();
                    const blob = new Blob([uint8], { type: 'application/octet-stream' });
                    (0, downloadBlob_1.downloadBlob)(blob, filename + '.crdt');
                } },
                React.createElement(Split_1.Split, null,
                    React.createElement("span", null,
                        t('Download'),
                        ' ',
                        React.createElement(Code_1.Code, { gray: true, size: 0, spacious: true }, "binary")),
                    React.createElement(Sidetip_1.Sidetip, { small: true }, '.crdt'))),
            React.createElement(ContextMenu_1.ContextItem, { closePopup: true, inset: true, icon: React.createElement(DownloadIcon_1.DownloadIcon, null), onClick: () => {
                    const uint8 = (0, shared_1.encode)(new Encoder_1.Encoder().encode(model));
                    const blob = new Blob([uint8], { type: 'application/cbor' });
                    (0, downloadBlob_1.downloadBlob)(blob, filename + '.cbor');
                } },
                React.createElement(Split_1.Split, null,
                    React.createElement("span", null,
                        t('Download'),
                        ' ',
                        React.createElement(Code_1.Code, { gray: true, size: 0, spacious: true }, "verbose")),
                    React.createElement(Sidetip_1.Sidetip, { small: true }, '.cbor'))),
            React.createElement(ContextMenu_1.ContextItem, { closePopup: true, inset: true, icon: React.createElement(DownloadIcon_1.DownloadIcon, null), onClick: () => {
                    const json = JSON.stringify(new Encoder_1.Encoder().encode(model), null, 2);
                    const blob = new Blob([json], { type: 'application/json' });
                    (0, downloadBlob_1.downloadBlob)(blob, filename + '.json');
                } },
                React.createElement(Split_1.Split, null,
                    React.createElement("span", null,
                        t('Download'),
                        ' ',
                        React.createElement(Code_1.Code, { gray: true, size: 0, spacious: true }, "verbose")),
                    React.createElement(Sidetip_1.Sidetip, { small: true }, '.json'))),
            React.createElement(ContextMenu_1.ContextItem, { closePopup: true, inset: true, icon: React.createElement(DownloadIcon_1.DownloadIcon, null), onClick: () => {
                    const uint8 = (0, shared_1.encode)(new Encoder_2.Encoder().encode(model));
                    const blob = new Blob([uint8], { type: 'application/cbor' });
                    (0, downloadBlob_1.downloadBlob)(blob, filename + '.cbor');
                } },
                React.createElement(Split_1.Split, null,
                    React.createElement("span", null,
                        t('Download'),
                        ' ',
                        React.createElement(Code_1.Code, { gray: true, size: 0, spacious: true }, "compact")),
                    React.createElement(Sidetip_1.Sidetip, { small: true }, '.cbor'))),
            React.createElement(ContextMenu_1.ContextItem, { closePopup: true, inset: true, icon: React.createElement(DownloadIcon_1.DownloadIcon, null), onClick: () => {
                    const json = JSON.stringify(new Encoder_2.Encoder().encode(model), null, 2);
                    const blob = new Blob([json], { type: 'application/json' });
                    (0, downloadBlob_1.downloadBlob)(blob, filename + '.json');
                } },
                React.createElement(Split_1.Split, null,
                    React.createElement("span", null,
                        t('Download'),
                        ' ',
                        React.createElement(Code_1.Code, { gray: true, size: 0, spacious: true }, "compact")),
                    React.createElement(Sidetip_1.Sidetip, { small: true }, '.json'))),
            React.createElement(ContextMenu_1.ContextSep, null),
            React.createElement(ContextMenu_1.ContextSep, { line: true }),
            React.createElement(ContextMenu_1.ContextSep, null),
            React.createElement(ContextMenu_1.ContextTitle, null, t('Indexed')),
            React.createElement(ContextMenu_1.ContextItem, { closePopup: true, inset: true, icon: React.createElement(DownloadIcon_1.DownloadIcon, null), onClick: () => {
                    const uint8 = (0, shared_1.encode)(new Encoder_3.Encoder().encode(model));
                    const blob = new Blob([uint8], { type: 'application/cbor' });
                    (0, downloadBlob_1.downloadBlob)(blob, filename + ' - indexed.cbor');
                } },
                React.createElement(Split_1.Split, null,
                    React.createElement("span", null,
                        t('Download'),
                        ' ',
                        React.createElement(Code_1.Code, { gray: true, size: 0, spacious: true }, "binary")),
                    React.createElement(Sidetip_1.Sidetip, { small: true }, '.cbor'))),
            React.createElement(ContextMenu_1.ContextSep, null),
            React.createElement(ContextMenu_1.ContextSep, { line: true }),
            React.createElement(ContextMenu_1.ContextSep, null),
            React.createElement(ContextMenu_1.ContextTitle, null, t('Sidecar')),
            React.createElement(ContextMenu_1.ContextItem, { closePopup: true, inset: true, icon: React.createElement(DownloadIcon_1.DownloadIcon, null), onClick: () => {
                    const [, sidecar] = new Encoder_4.Encoder().encode(model);
                    const uint8 = (0, shared_1.encode)(sidecar);
                    const blob = new Blob([uint8], { type: 'application/octet-stream' });
                    (0, downloadBlob_1.downloadBlob)(blob, filename + ' - sidecar.crdt');
                } },
                React.createElement(Split_1.Split, null,
                    React.createElement("span", null,
                        t('Download'),
                        ' ',
                        React.createElement(Code_1.Code, { gray: true, size: 0, spacious: true }, "binary")),
                    React.createElement(Sidetip_1.Sidetip, { small: true }, '.crdt'))),
            React.createElement(ContextMenu_1.ContextSep, null),
            React.createElement(ContextMenu_1.ContextSep, { line: true }),
            React.createElement(ContextMenu_1.ContextSep, null),
            React.createElement(ContextMenu_1.ContextItem, { closePopup: true, inset: true, onClick: () => {
                    window.open('https://jsonjoy.com/specs/json-crdt/encoding', '_blank');
                }, icon: React.createElement(Iconista_1.Iconista, { set: "auth0", icon: "external-link", width: 16, height: 16 }) },
                t('About encoding formats'),
                ' …'),
            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;