collaborative-ui
Version:
React component library for building real-time collaborative editing applications.
38 lines (37 loc) • 2.45 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 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 view = (0, useBehaviorSubject_1.useBehaviorSubject)(state.view$);
let text = t('Explore');
switch (view) {
case 'timeline':
text = t('Timeline');
break;
case 'model':
text = t('Model');
break;
case 'text':
text = t('Textual');
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.setView('timeline'), grey: view === 'timeline', icon: React.createElement(Iconista_1.Iconista, { set: "auth0", icon: "chart-bars", width: 16, height: 16 }) }, t('Timeline')),
React.createElement(ContextMenu_1.ContextItem, { closePopup: true, inset: true, onClick: () => state.setView('model'), grey: view === 'model', icon: React.createElement(Iconista_1.Iconista, { set: "auth0", icon: "chart-bars", width: 16, height: 16 }) }, t('Timeline with model')),
React.createElement(ContextMenu_1.ContextItem, { closePopup: true, inset: true, onClick: () => state.setView('text'), grey: view === 'text', 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(BasicTooltip_1.BasicTooltip, { nowrap: true, renderTooltip: () => t('Model view') },
React.createElement(BasicButton_1.BasicButton, { width: 'auto', compact: true, border: true }, text))));
};
exports.ViewSelect = ViewSelect;