gwchq-textjam 0.5.19 → 0.5.20

package/dist/index.js

@@ -46543,7 +46543,7 @@ var Project = props => {
   (0,external_react_.useMemo)(() => {
     var isDesktop = params["width-larger-than-720"];
     setDefaultWidth(isDesktop ? "50%" : "100%");
-    setDefaultHeight(isDesktop ? "100%" : "33.33%");
+    setDefaultHeight(isDesktop ? "100%" : "50%");
     setMaxWidth(isDesktop ? "75%" : "100%");
     setHandleDirection(isDesktop ? "right" : "bottom");
   }, [params["width-larger-than-720"]]);
@@ -46597,7 +46597,8 @@ var Project = props => {
           }), /*#__PURE__*/(0,jsx_runtime_.jsx)((OutputStack_default()), {
             renderOutput: renderOutput,
             outputMeta: outputMeta,
-            panelOrder: panelOrder
+            panelOrder: panelOrder,
+            tabbed: !params["width-larger-than-720"]
           })]
         })]
       })]
@@ -80064,14 +80065,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(71178);
 const OutputTabPanel_1 = __webpack_require__(25931);
+const OutputTabs_1 = __webpack_require__(32982);
 const ResizableWithHandle_1 = __importDefault(__webpack_require__(32694));
 const stores_1 = __webpack_require__(32132);
 const EditorTypes_1 = __webpack_require__(42108);
 const styles_module_scss_1 = __importDefault(__webpack_require__(12914));
-const OutputStack = ({ renderOutput, outputMeta, panelOrder, }) => {
+const OutputStack = ({ renderOutput, outputMeta, panelOrder, tabbed = false, }) => {
     const readOnly = (0, stores_1.useAppSelector)((state) => state.editor.readOnly);
     const isPreviewMode = (0, stores_1.useAppSelector)((state) => state.editor.isOutputOnly);
     const [topKind, bottomKind] = panelOrder;
+    if (tabbed && !isPreviewMode) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.outputStackContainer, children: (0, jsx_runtime_1.jsx)(OutputTabs_1.OutputTabs, { outputTypes: panelOrder, outputMeta: outputMeta, renderOutput: renderOutput, readOnly: readOnly }) }));
+    }
     return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.outputStackContainer, children: [(0, jsx_runtime_1.jsx)(OutputTabPanel_1.OutputTabPanel, { title: outputMeta[topKind].label, icon: outputMeta[topKind].icon, readOnly: readOnly, extraTabContent: outputMeta[topKind].extraHeaderContent, tabPanelClassName: topKind === EditorTypes_1.OutputType.VISUAL ? styles_module_scss_1.default.visualPanePadding : undefined, children: renderOutput(topKind) }), !isPreviewMode && ((0, jsx_runtime_1.jsx)(ResizableWithHandle_1.default, { "data-testid": "proj-console-container", handleDirection: "top", separatorLabel: `Resize the ${outputMeta[topKind].label} and ${outputMeta[bottomKind].label} panels`, defaultHeight: "50%", className: styles_module_scss_1.default.resizeContainer, handleClassName: styles_module_scss_1.default.resizeHandleContainer, children: (0, jsx_runtime_1.jsx)(OutputTabPanel_1.OutputTabPanel, { title: outputMeta[bottomKind].label, icon: outputMeta[bottomKind].icon, readOnly: readOnly, extraTabContent: outputMeta[bottomKind].extraHeaderContent, tabPanelClassName: bottomKind === EditorTypes_1.OutputType.VISUAL
                         ? styles_module_scss_1.default.visualPanePadding
                         : undefined, children: renderOutput(bottomKind) }) }))] }));
@@ -80111,6 +80116,35 @@ const OutputTabPanel = ({ title, icon: Icon, readOnly, children, outputWrapperCl
 exports.OutputTabPanel = OutputTabPanel;
 
 
+/***/ }),
+
+/***/ 32982:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.OutputTabs = void 0;
+const jsx_runtime_1 = __webpack_require__(71178);
+const react_1 = __webpack_require__(13327);
+const classnames_1 = __importDefault(__webpack_require__(46942));
+const react_tabs_1 = __webpack_require__(60627);
+const Text_1 = __webpack_require__(82803);
+const SvgIcon_1 = __webpack_require__(82917);
+const EditorTypes_1 = __webpack_require__(42108);
+const styles_module_scss_1 = __importDefault(__webpack_require__(12914));
+const OutputTabs = ({ outputTypes, outputMeta, renderOutput, readOnly, }) => {
+    const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(0);
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.outputPanel, children: (0, jsx_runtime_1.jsxs)(react_tabs_1.Tabs, { selectedIndex: selectedIndex, onSelect: setSelectedIndex, forceRenderTabPanel: true, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("tabContainer", { readOnly: readOnly }), children: (0, jsx_runtime_1.jsx)(react_tabs_1.TabList, { className: (0, classnames_1.default)("react-tabs__tab-list", { readOnly: readOnly }), children: outputTypes.map((outputType) => {
+                            const { label, icon, extraHeaderContent } = outputMeta[outputType];
+                            return ((0, jsx_runtime_1.jsx)(react_tabs_1.Tab, { className: (0, classnames_1.default)("react-tabs__tab", { readOnly: readOnly }), children: (0, jsx_runtime_1.jsxs)(Text_1.Text, { size: 12, weight: "medium", className: "tabText", children: [(0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: icon, size: 18 }), label, extraHeaderContent] }) }, outputType));
+                        }) }) }), outputTypes.map((outputType) => ((0, jsx_runtime_1.jsx)(react_tabs_1.TabPanel, { className: (0, classnames_1.default)("react-tabs__tab-panel", outputType === EditorTypes_1.OutputType.VISUAL && styles_module_scss_1.default.visualPanePadding), children: renderOutput(outputType) }, outputType)))] }) }));
+};
+exports.OutputTabs = OutputTabs;
+
+
 /***/ }),
 
 /***/ 39626:

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gwchq-textjam",
   "description": "Embeddable React editor used in Raspberry Pi text-based projects.",
-  "version": "0.5.19",
+  "version": "0.5.20",
   "license": "Apache-2.0",
   "homepage": "https://github.com/GirlsFirst/gwchq-textjam",
   "author": "Girls Who Code HQ",