collaborative-ui
Version:
React component library for building real-time collaborative editing applications.
97 lines (96 loc) • 6.6 kB
JavaScript
"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 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 shared_1 = require("@jsonjoy.com/json-pack/lib/cbor/shared");
const encode_1 = require("json-joy/lib/json-crdt-patch/codec/verbose/encode");
const encode_2 = require("json-joy/lib/json-crdt-patch/codec/compact/encode");
const DownloadButton = ({ patch, filename = 'patch' }) => {
const [t] = (0, use_t_1.useT)();
const id = patch.getId();
const idFormatted = id?.sid + '-' + id?.time;
const name = filename + ' - ' + idFormatted;
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('Structural')),
React.createElement(ContextMenu_1.ContextItem, { closePopup: true, inset: true, icon: React.createElement(DownloadIcon_1.DownloadIcon, null), onClick: () => {
const uint8 = patch.toBinary();
const blob = new Blob([uint8], { type: 'application/octet-stream' });
(0, downloadBlob_1.downloadBlob)(blob, name + '.crdt.patch');
} },
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.patch'))),
React.createElement(ContextMenu_1.ContextItem, { closePopup: true, inset: true, icon: React.createElement(DownloadIcon_1.DownloadIcon, null), onClick: () => {
const json = JSON.stringify((0, encode_1.encode)(patch), null, 2);
const blob = new Blob([json], { type: 'application/json' });
(0, downloadBlob_1.downloadBlob)(blob, name + '.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)((0, encode_1.encode)(patch));
const blob = new Blob([uint8], { type: 'application/cbor' });
(0, downloadBlob_1.downloadBlob)(blob, name + '.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((0, encode_2.encode)(patch), null, 2);
const blob = new Blob([json], { type: 'application/json' });
(0, downloadBlob_1.downloadBlob)(blob, name + '.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.ContextItem, { closePopup: true, inset: true, icon: React.createElement(DownloadIcon_1.DownloadIcon, null), onClick: () => {
const uint8 = (0, shared_1.encode)((0, encode_2.encode)(patch));
const blob = new Blob([uint8], { type: 'application/cbor' });
(0, downloadBlob_1.downloadBlob)(blob, name + '.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.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-patch/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;