collaborative-ui
Version:
React component library for building real-time collaborative editing applications.
144 lines (143 loc) • 9.39 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.JsonCrdtModel = void 0;
const tslib_1 = require("tslib");
const Paper_1 = require("nice-ui/lib/4-card/Paper");
const Checkbox_1 = require("nice-ui/lib/2-inline-block/Checkbox");
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 Separator_1 = require("nice-ui/lib/3-list-item/Separator");
const Scrollbox_1 = require("nice-ui/lib/4-card/Scrollbox");
const BasicTooltip_1 = require("nice-ui/lib/4-card/BasicTooltip");
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 JsonCrdtModelView_1 = require("./JsonCrdtModelView");
const use_t_1 = require("use-t");
const JsonCrdtModelClickable_1 = require("./JsonCrdtModelClickable");
const JsonCrdtModelVerbose_1 = require("./JsonCrdtModelVerbose");
const JsonCrdtModelCompact_1 = require("./JsonCrdtModelCompact");
const JsonCrdtModelState_1 = require("./JsonCrdtModelState");
const JsonCrdtModelBinary_1 = require("./JsonCrdtModelBinary");
const JsonCrdtModelIndexed_1 = require("./JsonCrdtModelIndexed");
const JsonCrdtModelSidecar_1 = require("./JsonCrdtModelSidecar");
const ViewSelect_1 = require("./ViewSelect");
const DownloadButton_1 = require("./DownloadButton");
const JsonCrdtModelIndex_1 = require("./JsonCrdtModelIndex");
const JsonCrdtModelTextual_1 = require("./JsonCrdtModelTextual");
const Display_1 = require("./Display");
const ReadonlyLabel_1 = require("../atoms/ReadonlyLabel");
const ModelLogicalTimestamp_1 = require("../LogicalTimestamp/ModelLogicalTimestamp");
const css = {
header: (0, nano_theme_1.rule)({
pad: '8px 8px 8px 16px',
}),
content: (0, nano_theme_1.rule)({
pad: '0 8px 8px',
}),
};
const JsonCrdtModel = ({ model, readonly, state: _state, filename, renderLeftToolbar, renderDisplay, renderContext, }) => {
const [t] = (0, use_t_1.useT)();
// biome-ignore lint: manual dependency list
const state = React.useMemo(() => {
const s = _state ?? new JsonCrdtModelState_1.JsonCrdtModelState();
s.readonly$.next(!!readonly);
return s;
}, []);
const showModel = (0, useBehaviorSubject_1.useBehaviorSubject)(state.showModel$);
const modelView = (0, useBehaviorSubject_1.useBehaviorSubject)(state.modelView$);
const contextMenu = (React.createElement(Popup_1.Popup, { renderContext: () => (React.createElement(ContextMenu_1.ContextPane, { minWidth: 248 },
React.createElement(ContextMenu_1.ContextSep, null),
React.createElement(ContextMenu_1.ContextTitle, null, t('Panels')),
React.createElement(ContextMenu_1.ContextItem, { closePopup: true, inset: true, onClick: state.toggleShowModel },
React.createElement(Split_1.Split, { style: { alignItems: 'center' } },
React.createElement("span", null, t('Model')),
React.createElement(Checkbox_1.Checkbox, { as: 'span', small: true, on: state.showModel$.getValue(), onChange: () => { } }))),
React.createElement(ContextMenu_1.ContextItem, { closePopup: true, inset: true, onClick: state.toggleShowView },
React.createElement(Split_1.Split, { style: { alignItems: 'center' } },
React.createElement("span", null, t('View')),
React.createElement(Checkbox_1.Checkbox, { as: 'span', small: true, on: state.showView$.getValue(), onChange: () => { } }))),
!!renderDisplay && (React.createElement(ContextMenu_1.ContextItem, { closePopup: true, inset: true, onClick: state.toggleShowDisplay },
React.createElement(Split_1.Split, { style: { alignItems: 'center' } },
React.createElement("span", null, t('Display')),
React.createElement(Checkbox_1.Checkbox, { as: 'span', small: true, on: state.showDisplay$.getValue(), onChange: () => { } })))),
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/model-document', '_blank');
}, icon: React.createElement(Iconista_1.Iconista, { set: "auth0", icon: "external-link", width: 16, height: 16 }) },
t('About JSON CRDT model'),
' …'),
React.createElement(ContextMenu_1.ContextSep, null),
!!renderContext && (React.createElement(React.Fragment, null,
React.createElement(ContextMenu_1.ContextSep, { line: true }),
React.createElement(ContextMenu_1.ContextSep, null),
renderContext(),
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, 'Model')),
React.createElement(Space_1.Space, { horizontal: true, size: 1 }),
React.createElement(ModelLogicalTimestamp_1.ModelLogicalTimestamp, { model: model }),
!!readonly && showModel && (React.createElement(React.Fragment, null,
React.createElement(Space_1.Space, { horizontal: true, size: 0 }),
React.createElement(ReadonlyLabel_1.LogReadonlyLabel, null))),
!!renderLeftToolbar && (React.createElement(React.Fragment, null,
React.createElement(Space_1.Space, { horizontal: true, size: 1 }),
renderLeftToolbar()))),
React.createElement("div", null,
React.createElement(Flex_1.Flex, { style: { alignItems: 'center' } },
React.createElement(DownloadButton_1.DownloadButton, { model: model, filename: filename }),
React.createElement(Space_1.Space, { horizontal: true, size: -1 }),
showModel && (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: showModel, onChange: state.toggleShowModel })))));
let content = null;
switch (modelView) {
case 'interactive':
content = React.createElement(JsonCrdtModelClickable_1.JsonCrdtModelClickable, { model: model, readonly: readonly });
break;
case 'index':
content = React.createElement(JsonCrdtModelIndex_1.JsonCrdtModelIndex, { model: model, readonly: readonly });
break;
case 'verbose':
content = React.createElement(JsonCrdtModelVerbose_1.JsonCrdtModelVerbose, { model: model });
break;
case 'compact':
content = React.createElement(JsonCrdtModelCompact_1.JsonCrdtModelCompact, { model: model });
break;
case 'binary':
content = React.createElement(JsonCrdtModelBinary_1.JsonCrdtModelBinary, { model: model });
break;
case 'indexed':
content = React.createElement(JsonCrdtModelIndexed_1.JsonCrdtModelIndexed, { model: model });
break;
case 'sidecar':
content = React.createElement(JsonCrdtModelSidecar_1.JsonCrdtModelSidecar, { model: model });
break;
case 'debug':
content = React.createElement(JsonCrdtModelTextual_1.JsonCrdtModelTextual, { model: model });
break;
}
return (React.createElement(Paper_1.Paper, null,
React.createElement("div", { className: css.header }, header),
showModel && (React.createElement(Scrollbox_1.Scrollbox, { key: modelView, style: { maxHeight: 600 } },
React.createElement("div", { className: css.content }, content))),
React.createElement(JsonCrdtModelView_1.JsonCrdtModelView, { readonly: readonly, model: model, state: state, filename: filename }),
!!renderDisplay && React.createElement(Separator_1.Separator, null),
!!renderDisplay && React.createElement(Display_1.Display, { state: state, model: model, readonly: readonly, renderDisplay: renderDisplay })));
};
exports.JsonCrdtModel = JsonCrdtModel;