collaborative-ui
Version:
React component library for building real-time collaborative editing applications.
58 lines (57 loc) • 3.84 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TraceSelector = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const Popup_1 = require("nice-ui/lib/4-card/Popup");
const ContextMenu_1 = require("nice-ui/lib/4-card/ContextMenu");
const Button_1 = require("nice-ui/lib/2-inline-block/Button");
const Iconista_1 = require("nice-ui/lib/icons/Iconista");
const traces = tslib_1.__importStar(require("./traces"));
const use_t_1 = require("use-t");
const context_1 = require("../context");
const icon = (trace) => {
switch (trace.type) {
case 'json':
return React.createElement(Iconista_1.Iconista, { width: 16, height: 16, set: 'ant_outline', icon: 'apartment' });
case 'text':
return React.createElement(Iconista_1.Iconista, { width: 16, height: 16, set: "elastic", icon: "vis_text" });
case 'rich-text':
return React.createElement(Iconista_1.Iconista, { width: 16, height: 16, set: "ant_outline", icon: "highlight" });
default:
return null;
}
};
const TraceSelector = ({ width = 240, expanded }) => {
const [t] = (0, use_t_1.useT)();
const [loading, setLoading] = React.useState(false);
const state = (0, context_1.useExplorer)();
const load = async (trace) => {
setLoading(true);
const blob = await traces.loadTrace(trace);
state.addTrace(blob, trace);
setLoading(false);
};
return (React.createElement(Popup_1.Popup, { block: true, renderContext: () => (React.createElement(ContextMenu_1.ContextPane, { style: { width: width + 8 } },
React.createElement(ContextMenu_1.ContextSep, null),
React.createElement(ContextMenu_1.ContextTitle, null, "Rich-text"),
traces.quill.map((trace) => (React.createElement(ContextMenu_1.ContextItem, { closePopup: true, key: trace.id, inset: true, icon: icon(trace), onClick: () => load(trace) }, trace.name))),
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, "Forms"),
traces.json.map((trace) => (React.createElement(ContextMenu_1.ContextItem, { closePopup: true, key: trace.id, inset: true, icon: icon(trace), onClick: () => load(trace) }, trace.name))),
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('Plain text')),
traces.text.map((trace) => (React.createElement(ContextMenu_1.ContextItem, { closePopup: true, key: trace.id, inset: true, icon: icon(trace), onClick: () => load(trace) }, trace.name))),
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('Fuzzer')),
traces.fuzzer.map((trace) => (React.createElement(ContextMenu_1.ContextItem, { closePopup: true, key: trace.id, inset: true, icon: icon(trace), onClick: () => load(trace) }, trace.name))),
React.createElement(ContextMenu_1.ContextSep, null))) },
React.createElement(Button_1.Button, { block: true, ghost: true, round: true, icon: React.createElement(Iconista_1.Iconista, { width: 16, height: 16, set: "ant_outline", icon: "shop" }), loading: loading, disabled: loading, size: expanded ? 1 : 0 }, "Load")));
};
exports.TraceSelector = TraceSelector;