collaborative-ui
Version:
React component library for building real-time collaborative editing applications.
65 lines (64 loc) • 3.44 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Display = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const nano_theme_1 = require("nano-theme");
const Space_1 = require("nice-ui/lib/3-list-item/Space");
const Checkbox_1 = require("nice-ui/lib/2-inline-block/Checkbox");
const Scrollbox_1 = require("nice-ui/lib/4-card/Scrollbox");
const Split_1 = require("nice-ui/lib/3-list-item/Split");
const MiniTitle_1 = require("nice-ui/lib/3-list-item/MiniTitle");
const useBehaviorSubject_1 = require("nice-ui/lib/hooks/useBehaviorSubject");
const Iconista_1 = require("nice-ui/lib/icons/Iconista");
const BasicButton_1 = require("nice-ui/lib/2-inline-block/BasicButton");
const BasicTooltip_1 = require("nice-ui/lib/4-card/BasicTooltip");
const use_t_1 = require("use-t");
const ReadonlyLabel_1 = require("../atoms/ReadonlyLabel");
const css = {
header: (0, nano_theme_1.rule)({
d: 'flex',
ai: 'center',
pad: '8px 8px 8px 16px',
minH: '24px',
}),
content: (0, nano_theme_1.rule)({
d: 'flex',
justifyContent: 'center',
alignItems: 'center',
pad: '4px 16px 16px',
}),
debug: (0, nano_theme_1.rule)({
'& *': {
out: '1px solid blue !important',
},
'& div': {
out: '1px solid red !important',
},
'& span': {
out: '1px solid green !important',
},
}),
};
exports.Display = React.memo(({ state, model, readonly, renderDisplay }) => {
const [t] = (0, use_t_1.useT)();
const show = (0, useBehaviorSubject_1.useBehaviorSubject)(state.showDisplay$);
const showOutlines = (0, useBehaviorSubject_1.useBehaviorSubject)(state.showDisplayOutlines$);
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: css.header },
React.createElement(Split_1.Split, null,
React.createElement("div", { style: { marginTop: -1 } },
React.createElement(MiniTitle_1.MiniTitle, null, 'Display'),
!!readonly && show && (React.createElement(React.Fragment, null,
React.createElement(Space_1.Space, { horizontal: true, size: 0 }),
React.createElement(ReadonlyLabel_1.LogReadonlyLabel, null)))),
React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
show && (React.createElement(React.Fragment, null,
React.createElement(BasicTooltip_1.BasicTooltip, { nowrap: true, renderTooltip: () => t('Outline') },
React.createElement(BasicButton_1.BasicButton, { onClick: () => state.showDisplayOutlines$.next(!state.showDisplayOutlines$.getValue()) },
React.createElement(Iconista_1.Iconista, { set: "elastic", icon: "vector", width: 16, height: 16 }))),
React.createElement(Space_1.Space, { horizontal: true }))),
React.createElement(Checkbox_1.Checkbox, { as: 'span', small: true, on: show, onChange: state.toggleShowDisplay })))),
show && (React.createElement(Scrollbox_1.Scrollbox, { style: { maxHeight: 500 } },
React.createElement("div", { className: css.content + (showOutlines ? css.debug : '') }, renderDisplay(model, !!readonly))))));
});