collaborative-ui/lib/JsonBlock/index.js

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

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.JsonBlock = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const Split_1 = require("nice-ui/lib/3-list-item/Split");
const useBehaviorSubject_1 = require("nice-ui/lib/hooks/useBehaviorSubject");
const JsonBlockText_1 = require("./JsonBlockText");
const JsonBlockClickable_1 = require("./JsonBlockClickable");
const CodeblockLayout_1 = require("../CodeblockLayout");
const nano_theme_1 = require("nano-theme");
const JsonBlockState_1 = require("./JsonBlockState");
const JsonBlockToolbar_1 = require("./JsonBlockToolbar");
const JsonBlockToolbarRight_1 = require("./JsonBlockToolbarRight");
const css = {
    pointer: (0, nano_theme_1.rule)({
        ...nano_theme_1.theme.font.mono.mid,
        col: nano_theme_1.theme.color.sem.blue[0],
        fz: '12px',
        d: 'flex',
        pd: '1px 0 0',
        alignItems: 'center',
    }),
    body: (0, nano_theme_1.rule)({
        w: '100%',
        bxz: 'border-box',
        minH: '2em',
    }),
};
const JsonBlock = ({ value, compact, readonly, filename = 'file', state: controlledState, noToolbar, onChange, }) => {
    const state = React.useMemo(() => controlledState || new JsonBlockState_1.JsonBlockState(), [controlledState]);
    const view = (0, useBehaviorSubject_1.useBehaviorSubject)(state.view$);
    const path = (0, useBehaviorSubject_1.useBehaviorSubject)(state.path$);
    let content = null;
    switch (view) {
        case 'interactive':
            content = (React.createElement(JsonBlockClickable_1.JsonBlockClickable, { compact: compact, value: value, path: path, onChange: readonly ? undefined : onChange }));
            break;
        case 'json':
            content = React.createElement(JsonBlockText_1.JsonBlockText, { key: 'compact', value: value, path: path });
            break;
        case 'text':
            content = React.createElement(JsonBlockText_1.JsonBlockText, { key: 'text', plain: true, value: value, path: path });
            break;
        case 'minified':
            content = React.createElement(JsonBlockText_1.JsonBlockText, { key: 'minified', plain: true, wrap: true, tab: 0, value: value, path: path });
            break;
    }
    const header = noToolbar ? null : (React.createElement(Split_1.Split, null,
        React.createElement(JsonBlockToolbar_1.JsonBlockToolbar, { state: state }),
        React.createElement(JsonBlockToolbarRight_1.JsonBlockToolbarRight, { value: value, filename: filename, state: state })));
    return (React.createElement(CodeblockLayout_1.CodeblockLayout, null,
        header,
        React.createElement("div", { className: css.body }, content)));
};
exports.JsonBlock = JsonBlock;