collaborative-ui
Version:
React component library for building real-time collaborative editing applications.
57 lines (56 loc) • 3.87 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.JsonBlockToolbarRight = 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 BasicButton_1 = require("nice-ui/lib/2-inline-block/BasicButton");
const BasicTooltip_1 = require("nice-ui/lib/4-card/BasicTooltip");
const Split_1 = require("nice-ui/lib/3-list-item/Split");
const Flex_1 = require("nice-ui/lib/3-list-item/Flex");
const Space_1 = require("nice-ui/lib/3-list-item/Space");
const ContextMenu_1 = require("nice-ui/lib/4-card/ContextMenu");
const useBehaviorSubject_1 = require("nice-ui/lib/hooks/useBehaviorSubject");
const Sidetip_1 = require("nice-ui/lib/1-inline/Sidetip");
const Popup_1 = require("nice-ui/lib/4-card/Popup");
const CopyButton_1 = require("../../CopyButton");
const select_1 = require("../../util/select");
const DownloadIcon_1 = require("../../icons/DownloadIcon");
const downloadBlob_1 = require("../../util/downloadBlob");
const JsonBlockToolbarRight = ({ value, filename = 'file', compact, state, }) => {
const [t] = (0, use_t_1.useT)();
const view = (0, useBehaviorSubject_1.useBehaviorSubject)(state.view$);
const path = (0, useBehaviorSubject_1.useBehaviorSubject)(state.path$);
const handleCopy = () => JSON.stringify((0, select_1.select)(value, path), null, view === 'minified' ? 0 : 2);
const downloadIcon = (React.createElement(BasicTooltip_1.BasicTooltip, { renderTooltip: () => t('Download') },
React.createElement(Popup_1.Popup, { renderContext: () => (React.createElement(ContextMenu_1.ContextPane, { minWidth: 220 },
React.createElement(ContextMenu_1.ContextSep, null),
React.createElement(ContextMenu_1.ContextItem, { closePopup: true, inset: true, icon: React.createElement(DownloadIcon_1.DownloadIcon, null), onClick: () => {
const json = JSON.stringify(value, 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 JSON')),
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)(value);
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 CBOR')),
React.createElement(Sidetip_1.Sidetip, { small: true }, '.cbor'))),
React.createElement(ContextMenu_1.ContextSep, null))) },
React.createElement(BasicButton_1.BasicButton, null,
React.createElement(DownloadIcon_1.DownloadIcon, null)))));
return (React.createElement("div", null,
React.createElement(Flex_1.Flex, null,
!compact && (React.createElement(React.Fragment, null,
React.createElement(BasicTooltip_1.BasicTooltip, { renderTooltip: () => t('Copy') },
React.createElement(CopyButton_1.CopyButton, { onCopy: handleCopy })),
React.createElement(Space_1.Space, { horizontal: true, size: -2 }))),
downloadIcon)));
};
exports.JsonBlockToolbarRight = JsonBlockToolbarRight;