collaborative-ui
Version:
React component library for building real-time collaborative editing applications.
34 lines (33 loc) • 1.56 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.JsonCrdtModelClickable = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const clickable_json_1 = require("clickable-json");
const nano_theme_1 = require("nano-theme");
const JsonCrdtNodePreview_1 = require("../../JsonCrdtNodePreview");
const useModelTick_1 = require("../../hooks/useModelTick");
const useWindowSize_1 = tslib_1.__importDefault(require("react-use/lib/useWindowSize"));
const css = {
clickable: (0, nano_theme_1.rule)({
mr: 0,
pd: '1px 8px 8px 24px',
}),
};
const JsonCrdtModelClickable = ({ model, readonly }) => {
const { width } = (0, useWindowSize_1.default)();
const [focused, setFocused] = React.useState(null);
(0, useModelTick_1.useModelTick)(model);
let preview = null;
if (focused) {
preview = (React.createElement(JsonCrdtNodePreview_1.JsonCrdtNodePreviewById, { model: model, id: focused, readonly: readonly, onClose: () => setFocused(null) }));
}
return (React.createElement("div", null,
React.createElement("div", { className: css.clickable },
React.createElement(clickable_json_1.ClickableJsonCrdt, { key: width < 700 ? '10px' : '12px', model: model, showRoot: true, readonly: readonly, fontSize: width < 700 ? '10px' : '12px', onFocus: (id) => {
if (id)
setFocused(id);
} })),
preview));
};
exports.JsonCrdtModelClickable = JsonCrdtModelClickable;