@patternfly/chatbot 2.1.0-prerelease.17

package/dist/esm/CodeModal/CodeModal.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ChatbotDisplayMode } from '../Chatbot';
+export interface CodeModalProps {
+    /** Class applied to code editor */
+    codeEditorControlClassName?: string;
+    /** Text shown in code editor */
+    code: string;
+    /** Filename, including extension, of file shown in editor */
+    fileName: string;
+    /** Whether copying code is allowed */
+    isCopyEnabled?: boolean;
+    /** Whether line numbers show in the code editor */
+    isLineNumbersVisible?: boolean;
+    /** Whether code is read-only */
+    isReadOnly?: boolean;
+    /** Action assigned to primary modal button */
+    onPrimaryAction: (event: React.MouseEvent | MouseEvent | KeyboardEvent, code?: string) => void;
+    /** Action assigned to secondary modal button */
+    onSecondaryAction: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+    /** Name of primary modal button */
+    primaryActionBtn: string;
+    /** Name of secondary modal button */
+    secondaryActionBtn: string;
+    /** Function that handles modal toggle */
+    handleModalToggle: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+    /** Whether modal is open */
+    isModalOpen: boolean;
+    /** Title of modal */
+    title: string;
+    /** Display mode for the Chatbot parent; this influences the styles applied */
+    displayMode?: ChatbotDisplayMode;
+}
+export declare const CodeModal: React.FunctionComponent<CodeModalProps>;
+export default CodeModal;

package/dist/esm/CodeModal/CodeModal.js

@@ -0,0 +1,75 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// ============================================================================
+// Code Modal - Chatbot Modal with Code Editor
+// ============================================================================
+import React from 'react';
+import path from 'path-browserify';
+// Import PatternFly components
+import { CodeEditor } from '@patternfly/react-code-editor';
+import { Button, ModalBody, ModalFooter, ModalHeader, Stack, StackItem } from '@patternfly/react-core';
+import FileDetails, { extensionToLanguage } from '../FileDetails';
+import { ChatbotDisplayMode } from '../Chatbot';
+import ChatbotModal from '../ChatbotModal/ChatbotModal';
+export const CodeModal = (_a) => {
+    var { fileName, code, codeEditorControlClassName: codeEditorClassName, handleModalToggle, isCopyEnabled, isLineNumbersVisible, isModalOpen, isReadOnly, onPrimaryAction, onSecondaryAction, primaryActionBtn, secondaryActionBtn, title, displayMode = ChatbotDisplayMode.default } = _a, props = __rest(_a, ["fileName", "code", "codeEditorControlClassName", "handleModalToggle", "isCopyEnabled", "isLineNumbersVisible", "isModalOpen", "isReadOnly", "onPrimaryAction", "onSecondaryAction", "primaryActionBtn", "secondaryActionBtn", "title", "displayMode"]);
+    const [newCode, setNewCode] = React.useState(code);
+    const handlePrimaryAction = (_event) => {
+        handleModalToggle(_event);
+        if (!isReadOnly) {
+            onPrimaryAction(_event, newCode);
+        }
+        else {
+            onPrimaryAction(_event);
+        }
+    };
+    const handleSecondaryAction = (_event) => {
+        handleModalToggle(_event);
+        onSecondaryAction(_event);
+    };
+    const onEditorDidMount = (editor, monaco) => {
+        editor.layout();
+        editor.focus();
+        monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });
+    };
+    const onCodeChange = (value) => {
+        if (!isReadOnly) {
+            setNewCode(value);
+        }
+    };
+    /* eslint-disable indent */
+    const getHeight = (displayMode) => {
+        switch (displayMode) {
+            case ChatbotDisplayMode.docked:
+                return '100vh';
+            default:
+                return '45vh';
+        }
+    };
+    /* eslint-enable indent */
+    const modal = (React.createElement(ChatbotModal, { isOpen: isModalOpen, onClose: handleModalToggle, ouiaId: "CodeModal", "aria-labelledby": "code-modal-title", "aria-describedby": "code-modal", className: `pf-chatbot__code-modal pf-chatbot__code-modal--${displayMode}`, displayMode: displayMode },
+        React.createElement(ModalHeader, { title: title, labelId: "code-modal-title" }),
+        React.createElement(ModalBody, { id: "code-modal-body" },
+            React.createElement(Stack, { className: "pf-chatbot__code-modal-body" },
+                React.createElement(StackItem, { className: "pf-chatbot__code-modal-file-details" },
+                    React.createElement(FileDetails, { fileName: fileName })),
+                React.createElement(StackItem, null,
+                    React.createElement(CodeEditor, Object.assign({ isDarkTheme: true, isLineNumbersVisible: isLineNumbersVisible, isLanguageLabelVisible: true, isCopyEnabled: isCopyEnabled, isReadOnly: isReadOnly, code: newCode, language: extensionToLanguage[path.extname(fileName).slice(1)], onEditorDidMount: onEditorDidMount, onCodeChange: onCodeChange, className: codeEditorClassName, height: getHeight(displayMode), options: {
+                            glyphMargin: false,
+                            folding: false
+                        } }, props))))),
+        React.createElement(ModalFooter, null,
+            React.createElement(Button, { isBlock: true, key: "code-modal-primary", variant: "primary", onClick: handlePrimaryAction, form: "code-modal-form" }, primaryActionBtn),
+            React.createElement(Button, { isBlock: true, key: "code-modal-secondary", variant: "link", onClick: handleSecondaryAction }, secondaryActionBtn))));
+    return modal;
+};
+export default CodeModal;

package/dist/esm/CodeModal/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './CodeModal';
+export * from './CodeModal';

package/dist/esm/CodeModal/index.js

@@ -0,0 +1,2 @@
+export { default } from './CodeModal';
+export * from './CodeModal';