collaborative-ui
Version:
React component library for building real-time collaborative editing applications.
78 lines (77 loc) • 4.88 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StrNodeCard = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const NodeCard_1 = require("../NodeCard");
const ContextMenu_1 = require("nice-ui/lib/4-card/ContextMenu");
const Iconista_1 = require("nice-ui/lib/icons/Iconista");
const Popup_1 = require("nice-ui/lib/4-card/Popup");
const Separator_1 = require("nice-ui/lib/3-list-item/Separator");
const Space_1 = require("nice-ui/lib/3-list-item/Space");
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 CopyText_1 = require("../../CopyText");
const CollaborativeFlexibleInput_1 = require("../../CollaborativeFlexibleInput");
const StrNodeCard = (props) => {
const [t] = (0, use_t_1.useT)();
const [view, setView] = React.useState('textual');
let viewBtnLabel = t('Textual');
switch (view) {
case 'raw':
viewBtnLabel = t('Raw');
break;
case 'edit':
viewBtnLabel = t('Edit');
break;
case 'json':
viewBtnLabel = t('JSON');
break;
}
const right = props.collapsed ? null : (React.createElement(Popup_1.Popup, { onClick: (e) => {
e.stopPropagation();
}, style: { margin: '-3px 0' }, renderContext: () => (React.createElement(ContextMenu_1.ContextPane, { minWidth: 240 },
React.createElement(ContextMenu_1.ContextSep, null),
React.createElement(ContextMenu_1.ContextItem, { closePopup: true, inset: true, onClick: () => setView('textual'), grey: view === 'textual', icon: React.createElement(Iconista_1.Iconista, { set: "elastic", icon: "vis_text", width: 16, height: 16 }) }, t('Textual')),
!props.readonly && (React.createElement(ContextMenu_1.ContextItem, { closePopup: true, inset: true, onClick: () => setView('edit'), grey: view === 'edit' }, t('Edit'))),
React.createElement(ContextMenu_1.ContextItem, { closePopup: true, inset: true, onClick: () => setView('raw'), grey: view === 'raw' }, t('Raw')),
React.createElement(ContextMenu_1.ContextItem, { closePopup: true, inset: true, onClick: () => setView('json'), grey: view === 'json' }, t('JSON')),
React.createElement(ContextMenu_1.ContextSep, null))) },
React.createElement(BasicTooltip_1.BasicTooltip, { nowrap: true, renderTooltip: () => t('Model view') },
React.createElement(BasicButton_1.BasicButton, { width: 'auto', compact: true, border: true }, viewBtnLabel))));
let content = null;
if (!props.collapsed) {
switch (view) {
case 'raw': {
content = (React.createElement("pre", { style: { margin: 0, padding: 0, fontSize: '11px' } },
React.createElement(CopyText_1.CopyText, { src: () => props.node.view() + '' })));
break;
}
case 'json': {
content = (React.createElement("pre", { style: { margin: 0, padding: 0, fontSize: '11px' } },
React.createElement(CopyText_1.CopyText, { src: () => JSON.stringify(props.node.view()) })));
break;
}
case 'edit': {
content = props.readonly ? null : (React.createElement("pre", { style: { margin: 0, padding: 0, fontSize: '11px', display: 'block', width: '100%' } },
React.createElement(CollaborativeFlexibleInput_1.CollaborativeFlexibleInput, { focus: true, wrap: true, fullWidth: true, multiline: true, str: () => props.model.api.wrap(props.node) })));
break;
}
default: {
content = (React.createElement(React.Fragment, null,
!props.readonly && props.node.size() < 256 ? (React.createElement(React.Fragment, null,
React.createElement("pre", { style: { margin: 0, padding: 0, fontSize: '11px' } },
React.createElement(CollaborativeFlexibleInput_1.CollaborativeFlexibleInput, { wrap: true, fullWidth: true, multiline: true, str: () => props.model.api.wrap(props.node) })),
React.createElement(Space_1.Space, { size: -1 }),
React.createElement(Separator_1.Separator, null),
React.createElement(Space_1.Space, { size: -1 }))) : null,
React.createElement("pre", { style: { margin: 0, padding: 0, fontSize: '11px' } },
React.createElement(CopyText_1.CopyText, { src: () => props.node + '' }))));
break;
}
}
}
return (React.createElement(NodeCard_1.NodeCard, { ...props, right: right }, content));
};
exports.StrNodeCard = StrNodeCard;