UNPKG

collaborative-ui

Version:

React component library for building real-time collaborative editing applications.

59 lines (58 loc) 2.5 kB
"use strict"; 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 }), };