collaborative-ui
Version:
React component library for building real-time collaborative editing applications.
87 lines (86 loc) • 5.21 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.JsonCrdtPatch = void 0;
const tslib_1 = require("tslib");
const Paper_1 = require("nice-ui/lib/4-card/Paper");
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 Iconista_1 = require("nice-ui/lib/icons/Iconista");
const MiniTitle_1 = require("nice-ui/lib/3-list-item/MiniTitle");
const BasicTooltip_1 = require("nice-ui/lib/4-card/BasicTooltip");
const Checkbox_1 = require("nice-ui/lib/2-inline-block/Checkbox");
const ContextMenu_1 = require("nice-ui/lib/4-card/ContextMenu");
const Popup_1 = require("nice-ui/lib/4-card/Popup");
const BasicButtonMore_1 = require("nice-ui/lib/2-inline-block/BasicButton/BasicButtonMore");
const useBehaviorSubject_1 = require("nice-ui/lib/hooks/useBehaviorSubject");
const React = tslib_1.__importStar(require("react"));
const nano_theme_1 = require("nano-theme");
const use_t_1 = require("use-t");
const TextBlock_1 = require("../TextBlock");
const LogicalTimestamp_1 = require("../LogicalTimestamp");
const JsonCrdtPatchState_1 = require("./JsonCrdtPatchState");
const ViewSelect_1 = require("./ViewSelect");
const DownloadButton_1 = require("./DownloadButton");
const JsonCrdtPatchBinary_1 = require("./JsonCrdtPatchBinary");
const JsonCrdtPatchVerbose_1 = require("./JsonCrdtPatchVerbose");
const JsonCrdtPatchCompact_1 = require("./JsonCrdtPatchCompact");
const css = {
header: (0, nano_theme_1.rule)({
pad: '8px 8px 8px 16px',
}),
content: (0, nano_theme_1.rule)({
pad: '0 8px 8px',
}),
};
const JsonCrdtPatch = ({ patch, state: _state, pinned, filename }) => {
const [t] = (0, use_t_1.useT)();
const state = React.useMemo(() => _state ?? new JsonCrdtPatchState_1.JsonCrdtPatchState(), [_state]);
const show = (0, useBehaviorSubject_1.useBehaviorSubject)(state.show$);
const view = (0, useBehaviorSubject_1.useBehaviorSubject)(state.view$);
const contextMenu = (React.createElement(Popup_1.Popup, { renderContext: () => (React.createElement(ContextMenu_1.ContextPane, { minWidth: 240 },
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', '_blank');
}, icon: React.createElement(Iconista_1.Iconista, { set: "auth0", icon: "external-link", width: 16, height: 16 }) },
t('About JSON CRDT Patch'),
' …'),
React.createElement(ContextMenu_1.ContextSep, null))) },
React.createElement(BasicTooltip_1.BasicTooltip, { nowrap: true, renderTooltip: () => t('Options') },
React.createElement(BasicButtonMore_1.BasicButtonMore, null))));
const header = (React.createElement(Split_1.Split, { style: { alignItems: 'center' } },
React.createElement(Flex_1.Flex, { style: { alignItems: 'center' } },
React.createElement("div", { style: { marginTop: -1 } },
React.createElement(MiniTitle_1.MiniTitle, null, t('Patch'))),
React.createElement(Space_1.Space, { horizontal: true, size: 1 }),
React.createElement(LogicalTimestamp_1.LogicalTimestamp, { sid: patch.getId()?.sid ?? 0, time: patch.getId()?.time ?? 0 })),
React.createElement("div", null,
React.createElement(Flex_1.Flex, { style: { alignItems: 'center' } },
React.createElement(DownloadButton_1.DownloadButton, { patch: patch, filename: filename }),
React.createElement(Space_1.Space, { horizontal: true, size: -1 }),
show && (React.createElement(React.Fragment, null,
React.createElement(ViewSelect_1.ViewSelect, { state: state }),
React.createElement(Space_1.Space, { horizontal: true, size: 1 }))),
contextMenu,
React.createElement(Space_1.Space, { horizontal: true, size: -1 }),
React.createElement(Checkbox_1.Checkbox, { as: 'span', small: true, on: show, onChange: state.toggleShow })))));
let content = null;
switch (view) {
case 'text':
content = React.createElement(TextBlock_1.TextBlock, { compact: true, src: patch.toString() });
break;
case 'binary':
content = React.createElement(JsonCrdtPatchBinary_1.JsonCrdtPatchBinary, { patch: patch });
break;
case 'verbose':
content = React.createElement(JsonCrdtPatchVerbose_1.JsonCrdtPatchVerbose, { patch: patch });
break;
case 'compact':
content = React.createElement(JsonCrdtPatchCompact_1.JsonCrdtPatchCompact, { patch: patch });
break;
}
return (React.createElement(Paper_1.Paper, { style: { borderTop: pinned ? `3px solid ${pinned}` : undefined }, contrast: true },
React.createElement("div", { className: css.header }, header),
show && React.createElement("div", { className: css.content }, content)));
};
exports.JsonCrdtPatch = JsonCrdtPatch;