Add hook to disable tab buttons

aehrc · Feb 13, 2025 · 726cd02 · 726cd02
1 parent 34a5984
commit 726cd02
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 11 deletions.
diff --git a/apps/smart-forms-app/package.json b/apps/smart-forms-app/package.json
@@ -25,8 +25,8 @@
   "homepage": "https://github.com/aehrc/smart-forms#readme",
   "dependencies": {
     "@aehrc/sdc-assemble": "^1.3.1",
-    "@aehrc/sdc-populate": "^3.0.0",
-    "@aehrc/smart-forms-renderer": "^1.0.0-alpha.14",
+    "@aehrc/sdc-populate": "^3.0.1",
+    "@aehrc/smart-forms-renderer": "^1.0.0-alpha.15",
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
     "@fontsource/material-icons": "^5.0.18",

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/smart-forms-renderer/package.json b/packages/smart-forms-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@aehrc/smart-forms-renderer",
-  "version": "1.0.0-alpha.14",
+  "version": "1.0.0-alpha.15",
   "description": "FHIR Structured Data Captured (SDC) rendering engine for Smart Forms",
   "main": "lib/index.js",
   "scripts": {
@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/aehrc/smart-forms#readme",
   "dependencies": {
-    "@aehrc/sdc-populate": "^3.0.0",
+    "@aehrc/sdc-populate": "^3.0.1",
     "@iconify/react": "^4.1.1",
     "dayjs": "^1.11.10",
     "deep-diff": "^1.0.2",

diff --git a/packages/smart-forms-renderer/src/components/FormComponents/GroupItem/PageButtonWrapper.tsx b/packages/smart-forms-renderer/src/components/FormComponents/GroupItem/PageButtonWrapper.tsx
@@ -54,7 +54,7 @@ const PageButtonsWrapper = memo(function PageButtonsWrapper(props: PageButtonsWr
     return null;
   }
 
-  // Disable page buttons - currently only available via disableTabButtons API
+  // Disable page buttons - currently only available via disablePageButtons API
   if (disablePageButtons) {
     return null;
   }

diff --git a/packages/smart-forms-renderer/src/components/FormComponents/GroupItem/TabButtonsWrapper.tsx b/packages/smart-forms-renderer/src/components/FormComponents/GroupItem/TabButtonsWrapper.tsx
@@ -18,7 +18,7 @@
 import React, { memo } from 'react';
 import Box from '@mui/material/Box';
 import type { Tabs } from '../../../interfaces/tab.interface';
-import { useQuestionnaireStore } from '../../../stores';
+import { useQuestionnaireStore, useRendererStylingStore } from '../../../stores';
 import NextTabButton from './NextTabButton';
 import PreviousTabButton from './PreviousTabButton';
 import useNextAndPreviousVisibleTabs from '../../../hooks/useNextAndPreviousVisibleTabs';
@@ -32,6 +32,7 @@ const TabButtonsWrapper = memo(function TabButtonsWrapper(props: TabButtonsWrapp
   const { currentTabIndex, tabs } = props;
 
   const switchTab = useQuestionnaireStore.use.switchTab();
+  const disableTabButtons = useRendererStylingStore.use.disableTabButtons();
 
   const { previousTabIndex, nextTabIndex, numOfVisibleTabs } = useNextAndPreviousVisibleTabs(
     currentTabIndex,
@@ -67,6 +68,11 @@ const TabButtonsWrapper = memo(function TabButtonsWrapper(props: TabButtonsWrapp
     return null;
   }
 
+  // Disable tab buttons - currently only available via disableTabButtons API
+  if (disableTabButtons) {
+    return null;
+  }
+
   const previousTabButtonHidden = previousTabIndex === null;
   const nextTabButtonHidden = nextTabIndex === null;
 

diff --git a/packages/smart-forms-renderer/src/stores/rendererStylingStore.ts b/packages/smart-forms-renderer/src/stores/rendererStylingStore.ts
@@ -50,6 +50,7 @@ export interface RendererStyling {
   enableWhenAsReadOnly?: boolean | Set<QuestionnaireItem['type']>; // The Set<QuestionnaireItem['type']> is used to store the types of items that should be displayed as readOnly when hidden by enableWhen
   disablePageCardView?: boolean;
   disablePageButtons?: boolean;
+  disableTabButtons?: boolean;
 }
 
 /**
@@ -80,6 +81,7 @@ export interface RendererStylingStoreType {
   enableWhenAsReadOnly: boolean | Set<QuestionnaireItem['type']>;
   disablePageCardView: boolean;
   disablePageButtons: boolean;
+  disableTabButtons: boolean;
   setRendererStyling: (params: RendererStyling) => void;
 }
 
@@ -99,6 +101,7 @@ export const rendererStylingStore = createStore<RendererStylingStoreType>()((set
   enableWhenAsReadOnly: false,
   disablePageCardView: false,
   disablePageButtons: false,
+  disableTabButtons: false,
   setRendererStyling: (params: RendererStyling) => {
     set(() => ({
       itemLabelFontWeight: params.itemLabelFontWeight ?? 'default',
@@ -112,7 +115,8 @@ export const rendererStylingStore = createStore<RendererStylingStoreType>()((set
       hideQuantityComparatorField: params.hideQuantityComparatorField ?? false,
       enableWhenAsReadOnly: params.enableWhenAsReadOnly ?? false,
       disablePageCardView: params.disablePageCardView ?? false,
-      disablePageButtons: params.disablePageButtons ?? false
+      disablePageButtons: params.disablePageButtons ?? false,
+      disableTabButtons: params.disableTabButtons ?? false
     }));
   }
 }));