collaborative-ui/lib/DemoDisplay/index.js

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

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DemoDisplay = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const SpinnerBars_1 = require("nice-ui/lib/2-inline-block/SpinnerBars");
const DisplayTodos = React.lazy(() => Promise.resolve().then(() => tslib_1.__importStar(require('./DisplayTodos'))));
const DisplayBlogPost = React.lazy(() => Promise.resolve().then(() => tslib_1.__importStar(require('./DisplayBlogPost'))));
const DisplayText = React.lazy(() => Promise.resolve().then(() => tslib_1.__importStar(require('./DisplayText'))));
const DisplayCodeMirror = React.lazy(() => Promise.resolve().then(() => tslib_1.__importStar(require('./DisplayCodeMirror'))));
const DisplayMonaco = React.lazy(() => Promise.resolve().then(() => tslib_1.__importStar(require('./DisplayMonaco'))));
const DisplayQuill = React.lazy(() => Promise.resolve().then(() => tslib_1.__importStar(require('./DisplayQuill'))));
const DemoDisplay = (props) => {
    const { model, comp } = props;
    const [cnt, setCnt] = React.useState(0);
    // biome-ignore lint: manual dependency list
    React.useEffect(() => {
        setCnt((prev) => prev + 1);
    }, [model]);
    if (!model || !comp)
        return null;
    let element = null;
    if (comp === 'todo')
        element = React.createElement(DisplayTodos, { ...props });
    else if (comp === 'blogpost')
        element = React.createElement(DisplayBlogPost, { ...props });
    else if (comp === 'text')
        element = React.createElement(DisplayText, { ...props });
    else if (comp === 'monaco')
        element = React.createElement(DisplayMonaco, { ...props });
    else if (comp === 'codemirror')
        element = React.createElement(DisplayCodeMirror, { ...props });
    else if (comp === 'quill')
        element = React.createElement(DisplayQuill, { ...props });
    if (!element)
        return null;
    return (React.createElement(React.Suspense, { key: cnt, fallback: React.createElement("div", { style: {
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-around',
                width: '100%',
                boxSizing: 'border-box',
            } },
            React.createElement(SpinnerBars_1.SpinnerBars, null)) }, element));
};
exports.DemoDisplay = DemoDisplay;