collaborative-ui
Version:
React component library for building real-time collaborative editing applications.
36 lines (35 loc) • 2.15 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Display = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const use_t_1 = require("use-t");
const Paper_1 = tslib_1.__importDefault(require("nice-ui/lib/4-card/Paper"));
const useModel_1 = require("../../hooks/useModel");
const demos = tslib_1.__importStar(require("../demos"));
const clickable_json_1 = require("clickable-json");
const Space_1 = require("nice-ui/lib/3-list-item/Space");
const JsonCrdtModel_1 = require("../../JsonCrdtModel");
const JsonCrdtModelState_1 = require("../../JsonCrdtModel/JsonCrdtModelState");
const MiniTitle_1 = require("nice-ui/lib/3-list-item/MiniTitle");
const Display = ({ file }) => {
const [t] = (0, use_t_1.useT)();
const model = file.session.model;
const demo = (0, useModel_1.useModel)(model, () => model.s.demo.toView());
// biome-ignore lint: manual dependency list
const devtools = React.useMemo(() => {
const devtools = new JsonCrdtModelState_1.JsonCrdtModelState();
devtools.showModel$.next(false);
devtools.showView$.next(false);
return devtools;
}, [model]);
const definition = demos.get(demo);
return (React.createElement(React.Fragment, null,
React.createElement(Paper_1.default, { contrast: true, round: definition?.frame === 'spacious', hoverElevate: true }, !!definition ? (React.createElement("div", { style: { width: '100%', height: 'calc(max(300px, 50vh))', display: 'flex', overflowY: 'auto' } }, definition.render({ model }))) : (React.createElement("div", { style: { padding: 32 } },
React.createElement(clickable_json_1.ClickableJsonCrdt, { model: model })))),
React.createElement(Space_1.Space, { size: 6 }),
React.createElement(MiniTitle_1.MiniTitle, null, t('Developer Tools')),
React.createElement(Space_1.Space, null),
React.createElement(JsonCrdtModel_1.JsonCrdtModel, { model: model, state: devtools, renderDisplay: definition ? (model, readonly) => definition.render({ model, readonly }) : undefined })));
};
exports.Display = Display;