collaborative-ui
Version:
React component library for building real-time collaborative editing applications.
59 lines (58 loc) • 2.5 kB
JavaScript
Object.defineProperty(exports, "__esModule", { value: true });
exports.HistoryWithPreview = exports.History = exports.Default = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const _1 = require(".");
const JsonCrdtModel_1 = require("../../JsonCrdtModel");
const json_crdt_1 = require("json-joy/lib/json-crdt");
const JsonPatchStore_1 = require("json-joy/lib/json-crdt/json-patch/JsonPatchStore");
const JsonCrdtLog_1 = require("../../JsonCrdtLog");
const Log_1 = require("json-joy/lib/json-crdt/log/Log");
const opt_1 = require("../../util/opt");
exports.default = {
component: _1.Todos,
title: 'examples/<Todos>',
};
const ModelDemo = () => {
const [model, store] = React.useMemo(() => {
const model = json_crdt_1.Model.create(json_crdt_1.s.obj({
todos: json_crdt_1.s.obj({}),
}));
const store = new JsonPatchStore_1.JsonPatchStore(model, ['todos']);
return [model, store];
}, []);
return React.createElement(JsonCrdtModel_1.JsonCrdtModel, { model: model, renderDisplay: () => React.createElement(_1.Todos, { store: store }) });
};
exports.Default = {
render: () => React.createElement(ModelDemo, null),
};
const LogDemo = ({ preview }) => {
const [log] = React.useMemo(() => {
const model = json_crdt_1.Model.create(json_crdt_1.s.obj({
todos: json_crdt_1.s.obj({
list: json_crdt_1.s.arr([]),
}),
}));
const log = Log_1.Log.fromNewModel(model);
log.end.api.autoFlush();
return [log];
}, []);
return (React.createElement(React.Fragment, null,
!!preview && (React.createElement("div", { style: { display: 'flex', justifyContent: 'center', padding: '0 0 32px' } },
React.createElement(_1.Todos, { store: (0, opt_1.opt)(() => new JsonPatchStore_1.JsonPatchStore(log.end, ['todos'])) }))),
React.createElement(JsonCrdtLog_1.JsonCrdtLog, { view: !preview ? 'model' : undefined, log: log, renderDisplay: (model) => {
try {
return React.createElement(_1.Todos, { store: new JsonPatchStore_1.JsonPatchStore(model, ['todos']) });
}
catch {
return null;
}
} })));
};
exports.History = {
render: () => React.createElement(LogDemo, null),
};
exports.HistoryWithPreview = {
render: () => React.createElement(LogDemo, { preview: true }),
};
;