collaborative-ui
Version:
React component library for building real-time collaborative editing applications.
71 lines (70 loc) • 4.79 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ViewSelect = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const Iconista_1 = require("nice-ui/lib/icons/Iconista");
const ContextMenu_1 = require("nice-ui/lib/4-card/ContextMenu");
const Split_1 = require("nice-ui/lib/3-list-item/Split");
const Sidetip_1 = require("nice-ui/lib/1-inline/Sidetip");
const Popup_1 = require("nice-ui/lib/4-card/Popup");
const BasicButton_1 = require("nice-ui/lib/2-inline-block/BasicButton");
const useBehaviorSubject_1 = require("nice-ui/lib/hooks/useBehaviorSubject");
const BasicTooltip_1 = require("nice-ui/lib/4-card/BasicTooltip");
const use_t_1 = require("use-t");
const ViewSelect = ({ state }) => {
const [t] = (0, use_t_1.useT)();
const modelView = (0, useBehaviorSubject_1.useBehaviorSubject)(state.modelView$);
let text = t('Explore');
switch (modelView) {
case 'debug':
text = t('Textual');
break;
case 'index':
text = t('Index');
break;
case 'binary':
text = t('Binary');
break;
case 'verbose':
text = t('Verbose');
break;
case 'compact':
text = t('Compact');
break;
case 'indexed':
text = t('Indexed');
break;
case 'sidecar':
text = t('Sidecar');
break;
}
return (React.createElement(Popup_1.Popup, { renderContext: () => (React.createElement(ContextMenu_1.ContextPane, { minWidth: 240 },
React.createElement(ContextMenu_1.ContextSep, null),
React.createElement(ContextMenu_1.ContextItem, { closePopup: true, inset: true, onClick: () => state.setModelView('interactive'), grey: modelView === 'interactive', icon: React.createElement(Iconista_1.Iconista, { set: "auth0", icon: "cube", width: 16, height: 16 }) }, t('Explore')),
React.createElement(ContextMenu_1.ContextItem, { closePopup: true, inset: true, onClick: () => state.setModelView('index'), grey: modelView === 'index', icon: React.createElement(Iconista_1.Iconista, { set: "auth0", icon: "hooks", width: 16, height: 16 }) }, t('Node index')),
React.createElement(ContextMenu_1.ContextItem, { closePopup: true, inset: true, onClick: () => state.setModelView('debug'), grey: modelView === 'debug', icon: React.createElement(Iconista_1.Iconista, { set: "elastic", icon: "vis_text", width: 16, height: 16 }) }, t('Textual')),
React.createElement(ContextMenu_1.ContextSep, null),
React.createElement(ContextMenu_1.ContextSep, { line: true }),
React.createElement(ContextMenu_1.ContextSep, null),
React.createElement(ContextMenu_1.ContextTitle, null, t('Structural')),
React.createElement(ContextMenu_1.ContextItem, { closePopup: true, inset: true, onClick: () => state.setModelView('binary'), grey: modelView === 'binary' }, t('Binary')),
React.createElement(ContextMenu_1.ContextItem, { closePopup: true, inset: true, onClick: () => state.setModelView('verbose'), grey: modelView === 'verbose' },
React.createElement(Split_1.Split, null,
React.createElement("span", null, t('Verbose')),
React.createElement(Sidetip_1.Sidetip, { small: true }, 'JSON'))),
React.createElement(ContextMenu_1.ContextItem, { closePopup: true, inset: true, onClick: () => state.setModelView('compact'), grey: modelView === 'compact' },
React.createElement(Split_1.Split, null,
React.createElement("span", null, t('Compact')),
React.createElement(Sidetip_1.Sidetip, { small: true }, 'JSON'))),
React.createElement(ContextMenu_1.ContextSep, null),
React.createElement(ContextMenu_1.ContextSep, { line: true }),
React.createElement(ContextMenu_1.ContextSep, null),
React.createElement(ContextMenu_1.ContextTitle, null, t('Other')),
React.createElement(ContextMenu_1.ContextItem, { closePopup: true, inset: true, onClick: () => state.setModelView('indexed'), grey: modelView === 'indexed' }, 'Indexed'),
React.createElement(ContextMenu_1.ContextItem, { closePopup: true, inset: true, onClick: () => state.setModelView('sidecar'), grey: modelView === 'sidecar' }, 'Sidecar'),
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 }, text))));
};
exports.ViewSelect = ViewSelect;