@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
47 lines • 4.05 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MarkdownToolbar = void 0;
const react_1 = __importDefault(require("react"));
const Button_1 = require("../../../components/Button/Button");
const ContextOverlay_1 = require("../../../components/ContextOverlay");
const Icon_1 = require("../../../components/Icon");
const Menu_1 = require("../../../components/Menu");
const Spacing_1 = require("../../../components/Separation/Spacing");
const Toolbar_1 = require("../../../components/Toolbar");
const markdown_command_1 = __importDefault(require("./commands/markdown.command"));
const MarkdownToolbar = ({ view, togglePreviewStatus, showPreview, disabled, readonly, translate }) => {
const commandRef = react_1.default.useRef(null);
react_1.default.useEffect(() => {
if (view) {
commandRef.current = new markdown_command_1.default(view);
}
}, [view]);
const getTranslation = (fallback) => {
const key = fallback.toLowerCase().replace(" ", "-");
return translate(key) || fallback;
};
const { basic, lists, attachments } = markdown_command_1.default.commands;
return (react_1.default.createElement(Toolbar_1.Toolbar, { noWrap: true },
react_1.default.createElement(Toolbar_1.ToolbarSection, { canShrink: true, hideOverflow: true },
react_1.default.createElement(ContextOverlay_1.ContextMenu, { togglerElement: react_1.default.createElement(Button_1.Button, { rightIcon: react_1.default.createElement(Icon_1.Icon, { name: "toggler-showmore" }), text: getTranslation("Paragraphs"), minimal: true, fill: true, ellipsizeText: true, disabled: showPreview || disabled || readonly }) }, markdown_command_1.default.commands.paragraphs.map((p, i) => (react_1.default.createElement(Menu_1.MenuItem, { key: p, text: react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("span", { style: p.startsWith("Head") ? { fontSize: 22 - (i * (22 - 12)) / 5 } : {} }, getTranslation(p))), onClick: () => { var _a; return (_a = commandRef.current) === null || _a === void 0 ? void 0 : _a.executeCommand(p); } }))))),
react_1.default.createElement(Toolbar_1.ToolbarSection, { canShrink: true },
react_1.default.createElement(Spacing_1.Spacing, { vertical: true, hasDivider: true, size: "tiny" })),
[basic, lists, attachments].map((section, i) => {
return (react_1.default.createElement(react_1.default.Fragment, { key: i },
react_1.default.createElement(Toolbar_1.ToolbarSection, null, section.map((command) => {
return (react_1.default.createElement(Icon_1.IconButton, { key: command.title, name: command.icon, onClick: () => { var _a; return (_a = commandRef.current) === null || _a === void 0 ? void 0 : _a.executeCommand(command.title); }, text: getTranslation(command.title), disabled: showPreview || disabled || readonly }));
})),
i < 2 && (react_1.default.createElement(Toolbar_1.ToolbarSection, { canShrink: true },
react_1.default.createElement(Spacing_1.Spacing, { vertical: true, hasDivider: true, size: "tiny" })))));
}),
react_1.default.createElement(Toolbar_1.ToolbarSection, { canGrow: true, canShrink: true },
react_1.default.createElement(Spacing_1.Spacing, { vertical: true, size: "small" })),
react_1.default.createElement(Toolbar_1.ToolbarSection, { canShrink: true, hideOverflow: true },
react_1.default.createElement(Button_1.Button, { minimal: true, ellipsizeText: true, onClick: togglePreviewStatus, text: showPreview ? getTranslation("Continue editing") : getTranslation("Preview"), icon: showPreview ? "item-edit" : "item-viewdetails", disabled: disabled }))));
};
exports.MarkdownToolbar = MarkdownToolbar;
//# sourceMappingURL=markdown.toolbar.js.map