collaborative-ui
Version:
React component library for building real-time collaborative editing applications.
29 lines (28 loc) • 1.43 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Preview = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const context_1 = require("../context");
const useBehaviorSubject_1 = require("nice-ui/lib/hooks/useBehaviorSubject");
const FixedColumn_1 = require("nice-ui/lib/3-list-item/FixedColumn");
const useWindowSize_1 = tslib_1.__importDefault(require("react-use/lib/useWindowSize"));
const Title_1 = require("./Title");
const Display_1 = require("./Display");
const PreviewSideNav_1 = require("./PreviewSideNav");
const Preview = ({ id }) => {
const state = (0, context_1.useDemos)();
const file = (0, useBehaviorSubject_1.useBehaviorSubject)(state.file$);
const { width } = (0, useWindowSize_1.default)();
const isSmall = width < 1000;
if (!file)
return null;
return (React.createElement("div", null,
React.createElement(Title_1.Title, { file: file }),
React.createElement(FixedColumn_1.FixedColumn, { right: 320, stack: isSmall },
React.createElement("div", null,
React.createElement(Display_1.Display, { file: file })),
React.createElement("div", { style: { paddingLeft: isSmall ? 0 : 64, width: '100%', boxSizing: 'border-box' } },
React.createElement(PreviewSideNav_1.PreviewSideNav, { id: id })))));
};
exports.Preview = Preview;