collaborative-ui
Version:
React component library for building real-time collaborative editing applications.
68 lines (67 loc) • 3.91 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.JsonCrdtModelView = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const nano_theme_1 = require("nano-theme");
const JsonPatch_1 = require("json-joy/lib/json-crdt/json-patch/JsonPatch");
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 Separator_1 = require("nice-ui/lib/3-list-item/Separator");
const MiniTitle_1 = require("nice-ui/lib/3-list-item/MiniTitle");
const Scrollbox_1 = require("nice-ui/lib/4-card/Scrollbox");
const useBehaviorSubject_1 = require("nice-ui/lib/hooks/useBehaviorSubject");
const JsonBlock_1 = require("../../JsonBlock");
const JsonBlockToolbar_1 = require("../../JsonBlock/JsonBlockToolbar");
const JsonBlockToolbarRight_1 = require("../../JsonBlock/JsonBlockToolbarRight");
const useModelTick_1 = require("../../hooks/useModelTick");
const ReadonlyLabel_1 = require("../../atoms/ReadonlyLabel");
const css = {
header: (0, nano_theme_1.rule)({
d: 'flex',
ai: 'center',
pad: '8px 8px 8px 16px',
minH: '24px',
}),
content: (0, nano_theme_1.rule)({
pad: '0 8px 8px',
}),
};
const JsonCrdtModelView = ({ model, readonly, state, filename }) => {
const show = (0, useBehaviorSubject_1.useBehaviorSubject)(state.showView$);
(0, useModelTick_1.useModelTick)(model);
// biome-ignore lint: manual dependency list
const value = React.useMemo(() => {
return model.view();
}, [model.tick]);
const handleChange = React.useMemo(() => {
const patcher = new JsonPatch_1.JsonPatch(model);
return (ops) => {
patcher.apply(ops);
};
}, [model]);
return (React.createElement(React.Fragment, null,
React.createElement(Separator_1.Separator, null),
React.createElement("div", { className: css.header },
React.createElement(Split_1.Split, null,
React.createElement(Flex_1.Flex, { style: { alignItems: 'center' } },
React.createElement("div", { style: { marginTop: -1 } },
React.createElement(MiniTitle_1.MiniTitle, null, 'View')),
!!readonly && show && (React.createElement(React.Fragment, null,
React.createElement(Space_1.Space, { horizontal: true, size: 0 }),
React.createElement(ReadonlyLabel_1.LogReadonlyLabel, null))),
show && (React.createElement(React.Fragment, null,
React.createElement(Space_1.Space, { horizontal: true, size: 2 }),
React.createElement(JsonBlockToolbar_1.JsonBlockToolbar, { state: state.viewState })))),
React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
React.createElement(Flex_1.Flex, { style: { alignItems: 'center' } },
React.createElement(JsonBlockToolbarRight_1.JsonBlockToolbarRight, { value: value, filename: filename, state: state.viewState, compact: !show }),
React.createElement(Space_1.Space, { horizontal: true, size: 0 }),
React.createElement(Checkbox_1.Checkbox, { as: 'span', small: true, on: show, onChange: state.toggleShowView }))))),
show && (React.createElement(Scrollbox_1.Scrollbox, { style: { maxHeight: 500 } },
React.createElement("div", { className: css.content },
React.createElement(JsonBlock_1.JsonBlock, { noToolbar: true, value: value, readonly: readonly, filename: filename, state: state.viewState, onChange: handleChange }))))));
};
exports.JsonCrdtModelView = JsonCrdtModelView;