reset data in anyOfRenderer, if data types dont match

closes #2173
eclipsesource · Sep 11, 2023 · 74f67e0 · 74f67e0
1 parent fba14a4
commit 74f67e0
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 43 deletions.
diff --git a/packages/material-renderers/src/complex/ConfirmDialog.tsx b/packages/material-renderers/src/complex/ConfirmDialog.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from '@mui/material';
+
+export interface ConfirmDialogProps {
+  open: boolean;
+  handleClose: () => void;
+  confirm: () => void;
+  cancel: () => void;
+  id: any;
+}
+
+export const ConfirmDialog = ({
+  open,
+  handleClose,
+  confirm,
+  cancel,
+  id,
+}: ConfirmDialogProps) => {
+  return (
+    <Dialog
+      open={open}
+      onClose={handleClose}
+      aria-labelledby='alert-dialog-title'
+      aria-describedby='alert-dialog-description'
+    >
+      <DialogTitle id='alert-dialog-title'>{'Clear form?'}</DialogTitle>
+      <DialogContent>
+        <DialogContentText id='alert-dialog-description'>
+          Your data will be cleared if you navigate away from this tab. Do you
+          want to proceed?
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={cancel} color='primary'>
+          No
+        </Button>
+        <Button
+          onClick={confirm}
+          color='primary'
+          autoFocus
+          id={`oneOf-${id}-confirm-yes`}
+        >
+          Yes
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
diff --git a/packages/material-renderers/src/complex/MaterialAnyOfRenderer.tsx b/packages/material-renderers/src/complex/MaterialAnyOfRenderer.tsx
@@ -25,18 +25,22 @@
 import React, { useCallback, useState } from 'react';
 
 import {
+  CombinatorRendererProps,
   createCombinatorRenderInfos,
+  createDefaultValue,
   isAnyOfControl,
   JsonSchema,
   RankedTester,
   rankWith,
-  StatePropsOfCombinator,
 } from '@jsonforms/core';
 import { JsonFormsDispatch, withJsonFormsAnyOfProps } from '@jsonforms/react';
 import { Hidden, Tab, Tabs } from '@mui/material';
 import CombinatorProperties from './CombinatorProperties';
+import isEmpty from 'lodash/isEmpty';
+import { ConfirmDialog } from './ConfirmDialog';
 
 export const MaterialAnyOfRenderer = ({
+  handleChange,
   schema,
   rootSchema,
   indexOfFittingSchema,
@@ -46,12 +50,41 @@ export const MaterialAnyOfRenderer = ({
   cells,
   uischema,
   uischemas,
-}: StatePropsOfCombinator) => {
+  id,
+  data,
+}: CombinatorRendererProps) => {
   const [selectedAnyOf, setSelectedAnyOf] = useState(indexOfFittingSchema || 0);
-  const handleChange = useCallback(
-    (_ev: any, value: number) => setSelectedAnyOf(value),
-    [setSelectedAnyOf]
+  const [open, setOpen] = useState(false);
+  const [newSelectedIndex, setNewSelectedIndex] = useState(0);
+
+  const handleClose = useCallback(() => setOpen(false), [setOpen]);
+
+  const handleTabChange = useCallback(
+    (_event: any, newIndex: number) => {
+      if (
+        isEmpty(data) ||
+        typeof data ===
+          typeof createDefaultValue(anyOfRenderInfos[newIndex].schema)
+      ) {
+        setSelectedAnyOf(newIndex);
+      } else {
+        setNewSelectedIndex(newIndex);
+        setOpen(true);
+      }
+    },
+    [setOpen, setSelectedAnyOf, data]
   );
+
+  const openNewTab = (newIndex: number) => {
+    handleChange(path, createDefaultValue(anyOfRenderInfos[newIndex].schema));
+    setSelectedAnyOf(newIndex);
+  };
+
+  const confirm = useCallback(() => {
+    openNewTab(newSelectedIndex);
+    setOpen(false);
+  }, [handleChange, createDefaultValue, newSelectedIndex]);
+
   const anyOf = 'anyOf';
   const anyOfRenderInfos = createCombinatorRenderInfos(
     (schema as JsonSchema).anyOf,
@@ -69,7 +102,7 @@ export const MaterialAnyOfRenderer = ({
         combinatorKeyword={anyOf}
         path={path}
       />
-      <Tabs value={selectedAnyOf} onChange={handleChange}>
+      <Tabs value={selectedAnyOf} onChange={handleTabChange}>
         {anyOfRenderInfos.map((anyOfRenderInfo) => (
           <Tab key={anyOfRenderInfo.label} label={anyOfRenderInfo.label} />
         ))}
@@ -87,6 +120,13 @@ export const MaterialAnyOfRenderer = ({
             />
           )
       )}
+      <ConfirmDialog
+        cancel={handleClose}
+        confirm={confirm}
+        id={id}
+        open={open}
+        handleClose={handleClose}
+      />
     </Hidden>
   );
 };

diff --git a/packages/material-renderers/src/complex/MaterialOneOfRenderer.tsx b/packages/material-renderers/src/complex/MaterialOneOfRenderer.tsx
@@ -25,6 +25,8 @@
 import React, { useCallback, useState } from 'react';
 import isEmpty from 'lodash/isEmpty';
 
+import { ConfirmDialog } from './ConfirmDialog';
+
 import {
   CombinatorRendererProps,
   createCombinatorRenderInfos,
@@ -35,17 +37,7 @@ import {
   RankedTester,
   rankWith,
 } from '@jsonforms/core';
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-  Hidden,
-  Tab,
-  Tabs,
-} from '@mui/material';
+import { Hidden, Tab, Tabs } from '@mui/material';
 import { JsonFormsDispatch, withJsonFormsOneOfProps } from '@jsonforms/react';
 import CombinatorProperties from './CombinatorProperties';
 
@@ -92,6 +84,7 @@ export const MaterialOneOfRenderer = ({
     openNewTab(newSelectedIndex);
     setOpen(false);
   }, [handleChange, createDefaultValue, newSelectedIndex]);
+
   const handleTabChange = useCallback(
     (_event: any, newOneOfIndex: number) => {
       setNewSelectedIndex(newOneOfIndex);
@@ -129,33 +122,13 @@ export const MaterialOneOfRenderer = ({
             />
           )
       )}
-      <Dialog
+      <ConfirmDialog
+        cancel={cancel}
+        confirm={confirm}
+        id={id}
         open={open}
-        onClose={handleClose}
-        aria-labelledby='alert-dialog-title'
-        aria-describedby='alert-dialog-description'
-      >
-        <DialogTitle id='alert-dialog-title'>{'Clear form?'}</DialogTitle>
-        <DialogContent>
-          <DialogContentText id='alert-dialog-description'>
-            Your data will be cleared if you navigate away from this tab. Do you
-            want to proceed?
-          </DialogContentText>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={cancel} color='primary'>
-            No
-          </Button>
-          <Button
-            onClick={confirm}
-            color='primary'
-            autoFocus
-            id={`oneOf-${id}-confirm-yes`}
-          >
-            Yes
-          </Button>
-        </DialogActions>
-      </Dialog>
+        handleClose={handleClose}
+      />
     </Hidden>
   );
 };