@jsonforms/material-renderers 3.1.0-alpha.0 → 3.1.0-alpha.2

package/src/cells/MaterialOneOfEnumCell.tsx

@@ -28,19 +28,29 @@ import {
   isOneOfEnumControl,
   RankedTester,
   rankWith,
-  WithClassname
+  WithClassname,
 } from '@jsonforms/core';
-import { TranslateProps, withJsonFormsOneOfEnumCellProps, withTranslateProps } from '@jsonforms/react';
+import {
+  TranslateProps,
+  withJsonFormsOneOfEnumCellProps,
+  withTranslateProps,
+} from '@jsonforms/react';
 import { MuiSelect } from '../mui-controls/MuiSelect';
 
-export const MaterialOneOfEnumCell = (props: EnumCellProps & WithClassname & TranslateProps) => (
-  <MuiSelect {...props} />
-);
+export const MaterialOneOfEnumCell = (
+  props: EnumCellProps & WithClassname & TranslateProps
+) => <MuiSelect {...props} />;
 
 /**
  * Default tester for oneOf enum controls.
  * @type {RankedTester}
  */
-export const materialOneOfEnumCellTester: RankedTester = rankWith(2, isOneOfEnumControl);
+export const materialOneOfEnumCellTester: RankedTester = rankWith(
+  2,
+  isOneOfEnumControl
+);
 
-export default withJsonFormsOneOfEnumCellProps(withTranslateProps(React.memo(MaterialOneOfEnumCell)), false);
+export default withJsonFormsOneOfEnumCellProps(
+  withTranslateProps(React.memo(MaterialOneOfEnumCell)),
+  false
+);

package/src/cells/MaterialTextCell.tsx

@@ -28,7 +28,7 @@ import {
   isStringControl,
   RankedTester,
   rankWith,
-  WithClassname
+  WithClassname,
 } from '@jsonforms/core';
 import { withJsonFormsCellProps } from '@jsonforms/react';
 import { MuiInputText } from '../mui-controls/MuiInputText';

package/src/cells/MaterialTimeCell.tsx

@@ -28,7 +28,7 @@ import {
   isTimeControl,
   RankedTester,
   rankWith,
-  WithClassname
+  WithClassname,
 } from '@jsonforms/core';
 import { withJsonFormsCellProps } from '@jsonforms/react';
 import { MuiInputTime } from '../mui-controls/MuiInputTime';

package/src/cells/index.ts

@@ -23,24 +23,24 @@
   THE SOFTWARE.
 */
 import MaterialBooleanCell, {
-  materialBooleanCellTester
+  materialBooleanCellTester,
 } from './MaterialBooleanCell';
 import MaterialBooleanToggleCell, {
-  materialBooleanToggleCellTester
+  materialBooleanToggleCellTester,
 } from './MaterialBooleanToggleCell';
 import MaterialDateCell, { materialDateCellTester } from './MaterialDateCell';
 import MaterialEnumCell, { materialEnumCellTester } from './MaterialEnumCell';
 import MaterialIntegerCell, {
-  materialIntegerCellTester
+  materialIntegerCellTester,
 } from './MaterialIntegerCell';
 import MaterialNumberCell, {
-  materialNumberCellTester
+  materialNumberCellTester,
 } from './MaterialNumberCell';
 import MaterialNumberFormatCell, {
-  materialNumberFormatCellTester
+  materialNumberFormatCellTester,
 } from './MaterialNumberFormatCell';
 import MaterialOneOfEnumCell, {
-  materialOneOfEnumCellTester
+  materialOneOfEnumCellTester,
 } from './MaterialOneOfEnumCell';
 import MaterialTextCell, { materialTextCellTester } from './MaterialTextCell';
 import MaterialTimeCell, { materialTimeCellTester } from './MaterialTimeCell';
@@ -65,7 +65,7 @@ export {
   MaterialTextCell,
   materialTextCellTester,
   MaterialTimeCell,
-  materialTimeCellTester
+  materialTimeCellTester,
 };
 import * as Customizable from './CustomizableCells';
 export { Customizable };

package/src/complex/CombinatorProperties.tsx

@@ -23,7 +23,12 @@
   THE SOFTWARE.
 */
 import React from 'react';
-import { Generate, JsonSchema, Layout, UISchemaElement } from '@jsonforms/core';
+import {
+  Generate,
+  JsonSchema,
+  UISchemaElement,
+  isLayout,
+} from '@jsonforms/core';
 import { JsonFormsDispatch } from '@jsonforms/react';
 import omit from 'lodash/omit';
 
@@ -33,17 +38,23 @@ interface CombinatorPropertiesProps {
   path: string;
 }
 
-export const isLayout = (uischema: UISchemaElement): uischema is Layout =>
-  uischema.hasOwnProperty('elements');
-
-export class CombinatorProperties extends React.Component<CombinatorPropertiesProps, {}> {
-
+export class CombinatorProperties extends React.Component<
+  CombinatorPropertiesProps,
+  // TODO fix @typescript-eslint/ban-types
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  {}
+> {
   render() {
-
     const { schema, combinatorKeyword, path } = this.props;
 
-    const otherProps: JsonSchema = omit(schema, combinatorKeyword) as JsonSchema;
-    const foundUISchema: UISchemaElement = Generate.uiSchema(otherProps, 'VerticalLayout');
+    const otherProps: JsonSchema = omit(
+      schema,
+      combinatorKeyword
+    ) as JsonSchema;
+    const foundUISchema: UISchemaElement = Generate.uiSchema(
+      otherProps,
+      'VerticalLayout'
+    );
     let isLayoutWithElements = false;
     if (foundUISchema !== null && isLayout(foundUISchema)) {
       isLayoutWithElements = foundUISchema.elements.length > 0;

package/src/complex/DeleteDialog.tsx

@@ -24,50 +24,61 @@
 */
 import React from 'react';
 import {
-    Button,
-    Dialog,
-    DialogActions,
-    DialogContent,
-    DialogContentText,
-    DialogTitle,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
 } from '@mui/material';
 
 export interface DeleteDialogProps {
-    open: boolean;
-    onClose(): void;
-    onConfirm(): void;
-    onCancel(): void;
+  open: boolean;
+  onClose(): void;
+  onConfirm(): void;
+  onCancel(): void;
+  title: string;
+  message: string;
+  acceptText: string;
+  declineText: string;
 }
 
 export interface WithDeleteDialogSupport {
   openDeleteDialog(path: string, data: number): void;
 }
 
-export const DeleteDialog = React.memo(({ open, onClose, onConfirm, onCancel }: DeleteDialogProps) => {
-    return (
-        <Dialog
-            open={open}
-            keepMounted
-            onClose={onClose}
-            aria-labelledby='alert-dialog-confirmdelete-title'
-            aria-describedby='alert-dialog-confirmdelete-description'
-        >
-            <DialogTitle id='alert-dialog-confirmdelete-title'>
-                {'Confirm Deletion'}
-            </DialogTitle>
-            <DialogContent>
-                <DialogContentText id='alert-dialog-confirmdelete-description'>
-                    Are you sure you want to delete the selected entry?
-                </DialogContentText>
-            </DialogContent>
-            <DialogActions>
-                <Button onClick={onCancel} color='primary'>
-                    No
-                </Button>
-                <Button onClick={onConfirm} color='primary'>
-                    Yes
-                </Button>
-            </DialogActions>
-        </Dialog>
-    );
+export const DeleteDialog = React.memo(function DeleteDialog({
+  open,
+  onClose,
+  onConfirm,
+  onCancel,
+  title,
+  message,
+  acceptText,
+  declineText,
+}: DeleteDialogProps) {
+  return (
+    <Dialog
+      open={open}
+      keepMounted
+      onClose={onClose}
+      aria-labelledby='alert-dialog-confirmdelete-title'
+      aria-describedby='alert-dialog-confirmdelete-description'
+    >
+      <DialogTitle id='alert-dialog-confirmdelete-title'>{title}</DialogTitle>
+      <DialogContent>
+        <DialogContentText id='alert-dialog-confirmdelete-description'>
+          {message}
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onCancel} color='primary'>
+          {declineText}
+        </Button>
+        <Button onClick={onConfirm} color='primary'>
+          {acceptText}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
 });

package/src/complex/MaterialAllOfRenderer.tsx

@@ -32,7 +32,7 @@ import {
   JsonSchema,
   RankedTester,
   rankWith,
-  StatePropsOfCombinator
+  StatePropsOfCombinator,
 } from '@jsonforms/core';
 import { JsonFormsDispatch, withJsonFormsAllOfProps } from '@jsonforms/react';
 
@@ -44,7 +44,7 @@ export const MaterialAllOfRenderer = ({
   cells,
   path,
   uischemas,
-  uischema
+  uischema,
 }: StatePropsOfCombinator) => {
   const delegateUISchema = findMatchingUISchema(uischemas)(
     schema,

package/src/complex/MaterialAnyOfRenderer.tsx

@@ -30,7 +30,7 @@ import {
   JsonSchema,
   RankedTester,
   rankWith,
-  StatePropsOfCombinator
+  StatePropsOfCombinator,
 } from '@jsonforms/core';
 import { JsonFormsDispatch, withJsonFormsAnyOfProps } from '@jsonforms/react';
 import { Hidden, Tab, Tabs } from '@mui/material';
@@ -45,7 +45,7 @@ export const MaterialAnyOfRenderer = ({
   renderers,
   cells,
   uischema,
-  uischemas
+  uischemas,
 }: StatePropsOfCombinator) => {
   const [selectedAnyOf, setSelectedAnyOf] = useState(indexOfFittingSchema || 0);
   const handleChange = useCallback(
@@ -70,7 +70,7 @@ export const MaterialAnyOfRenderer = ({
         path={path}
       />
       <Tabs value={selectedAnyOf} onChange={handleChange}>
-        {anyOfRenderInfos.map(anyOfRenderInfo => (
+        {anyOfRenderInfos.map((anyOfRenderInfo) => (
           <Tab key={anyOfRenderInfo.label} label={anyOfRenderInfo.label} />
         ))}
       </Tabs>

package/src/complex/MaterialArrayControlRenderer.tsx

@@ -23,7 +23,14 @@
   THE SOFTWARE.
 */
 import React, { useCallback, useState } from 'react';
-import { ArrayLayoutProps } from '@jsonforms/core';
+import {
+  ArrayLayoutProps,
+  RankedTester,
+  isObjectArrayControl,
+  isPrimitiveArrayControl,
+  or,
+  rankWith,
+} from '@jsonforms/core';
 import { withJsonFormsArrayLayoutProps } from '@jsonforms/react';
 import { MaterialTableControl } from './MaterialTableControl';
 import { Hidden } from '@mui/material';
@@ -35,14 +42,17 @@ export const MaterialArrayControlRenderer = (props: ArrayLayoutProps) => {
   const [rowData, setRowData] = useState(undefined);
   const { removeItems, visible } = props;
 
-  const openDeleteDialog = useCallback((p: string, rowIndex: number) => {
-    setOpen(true);
-    setPath(p);
-    setRowData(rowIndex);
-  }, [setOpen, setPath, setRowData]);
+  const openDeleteDialog = useCallback(
+    (p: string, rowIndex: number) => {
+      setOpen(true);
+      setPath(p);
+      setRowData(rowIndex);
+    },
+    [setOpen, setPath, setRowData]
+  );
   const deleteCancel = useCallback(() => setOpen(false), [setOpen]);
   const deleteConfirm = useCallback(() => {
-    const p = path.substring(0, path.lastIndexOf(('.')));
+    const p = path.substring(0, path.lastIndexOf('.'));
     removeItems(p, [rowData])();
     setOpen(false);
   }, [setOpen, path, rowData]);
@@ -50,18 +60,24 @@ export const MaterialArrayControlRenderer = (props: ArrayLayoutProps) => {
 
   return (
     <Hidden xsUp={!visible}>
-      <MaterialTableControl
-        {...props}
-        openDeleteDialog={openDeleteDialog}
-      />
+      <MaterialTableControl {...props} openDeleteDialog={openDeleteDialog} />
       <DeleteDialog
         open={open}
         onCancel={deleteCancel}
         onConfirm={deleteConfirm}
         onClose={deleteClose}
+        acceptText={props.translations.deleteDialogAccept}
+        declineText={props.translations.deleteDialogDecline}
+        title={props.translations.deleteDialogTitle}
+        message={props.translations.deleteDialogMessage}
       />
     </Hidden>
   );
 };
 
+export const materialArrayControlTester: RankedTester = rankWith(
+  3,
+  or(isObjectArrayControl, isPrimitiveArrayControl)
+);
+
 export default withJsonFormsArrayLayoutProps(MaterialArrayControlRenderer);

package/src/complex/MaterialEnumArrayRenderer.tsx

@@ -10,7 +10,7 @@ import {
   rankWith,
   schemaMatches,
   schemaSubPathMatches,
-  uiTypeIs
+  uiTypeIs,
 } from '@jsonforms/core';
 
 import { withJsonFormsMultiEnumProps } from '@jsonforms/react';
@@ -20,7 +20,7 @@ import {
   FormControlLabel,
   FormGroup,
   FormHelperText,
-  Hidden
+  Hidden,
 } from '@mui/material';
 import isEmpty from 'lodash/isEmpty';
 import React from 'react';
@@ -34,7 +34,7 @@ export const MaterialEnumArrayRenderer = ({
   data,
   addItem,
   removeItem,
-  handleChange,
+  handleChange: _handleChange,
   ...otherProps
 }: ControlProps & OwnPropsOfEnum & DispatchPropsOfMultiEnumControl) => {
   return (
@@ -72,9 +72,7 @@ export const MaterialEnumArrayRenderer = ({
             );
           })}
         </FormGroup>
-        <FormHelperText error>
-          {errors}
-        </FormHelperText>
+        <FormHelperText error>{errors}</FormHelperText>
       </FormControl>
     </Hidden>
   );
@@ -96,12 +94,12 @@ export const materialEnumArrayRendererTester: RankedTester = rankWith(
     uiTypeIs('Control'),
     and(
       schemaMatches(
-        schema =>
+        (schema) =>
           hasType(schema, 'array') &&
           !Array.isArray(schema.items) &&
           schema.uniqueItems === true
       ),
-      schemaSubPathMatches('items', schema => {
+      schemaSubPathMatches('items', (schema) => {
         return hasOneOfItems(schema) || hasEnumItems(schema);
       })
     )

package/src/complex/MaterialObjectRenderer.tsx

@@ -29,7 +29,7 @@ import {
   isObjectControl,
   RankedTester,
   rankWith,
-  StatePropsOfControlWithDetail
+  StatePropsOfControlWithDetail,
 } from '@jsonforms/core';
 import { JsonFormsDispatch, withJsonFormsDetailProps } from '@jsonforms/react';
 import { Hidden } from '@mui/material';
@@ -45,7 +45,7 @@ export const MaterialObjectRenderer = ({
   visible,
   enabled,
   uischema,
-  rootSchema
+  rootSchema,
 }: StatePropsOfControlWithDetail) => {
   const detailUiSchema = useMemo(
     () =>
@@ -54,7 +54,10 @@ export const MaterialObjectRenderer = ({
         schema,
         uischema.scope,
         path,
-        () => isEmpty(path) ? Generate.uiSchema(schema, 'VerticalLayout') : {...Generate.uiSchema(schema, 'Group'), label},
+        () =>
+          isEmpty(path)
+            ? Generate.uiSchema(schema, 'VerticalLayout')
+            : { ...Generate.uiSchema(schema, 'Group'), label },
         uischema,
         rootSchema
       ),

package/src/complex/MaterialOneOfRenderer.tsx

@@ -44,108 +44,125 @@ import {
   DialogTitle,
   Hidden,
   Tab,
-  Tabs
+  Tabs,
 } from '@mui/material';
-import {
-  JsonFormsDispatch,
-  withJsonFormsOneOfProps
-} from '@jsonforms/react';
+import { JsonFormsDispatch, withJsonFormsOneOfProps } from '@jsonforms/react';
 import CombinatorProperties from './CombinatorProperties';
 
 export interface OwnOneOfProps extends OwnPropsOfControl {
   indexOfFittingSchema?: number;
 }
 
-export const MaterialOneOfRenderer =
-  ({ handleChange, schema, path, renderers, cells, rootSchema, id, visible, indexOfFittingSchema, uischema, uischemas, data }: CombinatorRendererProps) => {
-    const [open, setOpen] = useState(false);
-    const [selectedIndex, setSelectedIndex] = useState(indexOfFittingSchema || 0);
-    const [newSelectedIndex, setNewSelectedIndex] = useState(0);
-    const handleClose = useCallback(() => setOpen(false), [setOpen]);
-    const cancel = useCallback(() => {
-      setOpen(false);
-    }, [setOpen]);
-    const oneOfRenderInfos = createCombinatorRenderInfos(
-      (schema as JsonSchema).oneOf,
-      rootSchema,
-      'oneOf',
-      uischema,
-      path,
-      uischemas
-      );
+export const MaterialOneOfRenderer = ({
+  handleChange,
+  schema,
+  path,
+  renderers,
+  cells,
+  rootSchema,
+  id,
+  visible,
+  indexOfFittingSchema,
+  uischema,
+  uischemas,
+  data,
+}: CombinatorRendererProps) => {
+  const [open, setOpen] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(indexOfFittingSchema || 0);
+  const [newSelectedIndex, setNewSelectedIndex] = useState(0);
+  const handleClose = useCallback(() => setOpen(false), [setOpen]);
+  const cancel = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+  const oneOfRenderInfos = createCombinatorRenderInfos(
+    (schema as JsonSchema).oneOf,
+    rootSchema,
+    'oneOf',
+    uischema,
+    path,
+    uischemas
+  );
 
-    const openNewTab = (newIndex: number) => {
-      handleChange(
-        path,
-        createDefaultValue(oneOfRenderInfos[newIndex].schema)
-      );
-      setSelectedIndex(newIndex);
-    }
+  const openNewTab = (newIndex: number) => {
+    handleChange(path, createDefaultValue(oneOfRenderInfos[newIndex].schema));
+    setSelectedIndex(newIndex);
+  };
 
-    const confirm = useCallback(() => {
-      openNewTab(newSelectedIndex)
-      setOpen(false);
-    }, [handleChange, createDefaultValue, newSelectedIndex]);
-    const handleTabChange = useCallback((_event: any, newOneOfIndex: number) => {
+  const confirm = useCallback(() => {
+    openNewTab(newSelectedIndex);
+    setOpen(false);
+  }, [handleChange, createDefaultValue, newSelectedIndex]);
+  const handleTabChange = useCallback(
+    (_event: any, newOneOfIndex: number) => {
       setNewSelectedIndex(newOneOfIndex);
-      if(isEmpty(data)) {
-        openNewTab(newOneOfIndex)
+      if (isEmpty(data)) {
+        openNewTab(newOneOfIndex);
       } else {
         setOpen(true);
       }
+    },
+    [setOpen, setSelectedIndex, data]
+  );
 
-    }, [setOpen, setSelectedIndex, data]);
-
-    return (
-      <Hidden xsUp={!visible}>
-        <CombinatorProperties
-          schema={schema}
-          combinatorKeyword={'oneOf'}
-          path={path}
-        />
-        <Tabs value={selectedIndex} onChange={handleTabChange}>
-          {oneOfRenderInfos.map(oneOfRenderInfo => <Tab key={oneOfRenderInfo.label} label={oneOfRenderInfo.label} />)}
-        </Tabs>
-        {
-          oneOfRenderInfos.map((oneOfRenderInfo, oneOfIndex) => (
-            selectedIndex === oneOfIndex && (
-              <JsonFormsDispatch
-                key={oneOfIndex}
-                schema={oneOfRenderInfo.schema}
-                uischema={oneOfRenderInfo.uischema}
-                path={path}
-                renderers={renderers}
-                cells={cells}
-              />
-            )
-          ))
-        }
-        <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>
-      </Hidden>
-    );
-  };
+  return (
+    <Hidden xsUp={!visible}>
+      <CombinatorProperties
+        schema={schema}
+        combinatorKeyword={'oneOf'}
+        path={path}
+      />
+      <Tabs value={selectedIndex} onChange={handleTabChange}>
+        {oneOfRenderInfos.map((oneOfRenderInfo) => (
+          <Tab key={oneOfRenderInfo.label} label={oneOfRenderInfo.label} />
+        ))}
+      </Tabs>
+      {oneOfRenderInfos.map(
+        (oneOfRenderInfo, oneOfIndex) =>
+          selectedIndex === oneOfIndex && (
+            <JsonFormsDispatch
+              key={oneOfIndex}
+              schema={oneOfRenderInfo.schema}
+              uischema={oneOfRenderInfo.uischema}
+              path={path}
+              renderers={renderers}
+              cells={cells}
+            />
+          )
+      )}
+      <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>
+    </Hidden>
+  );
+};
 
-export const materialOneOfControlTester: RankedTester = rankWith(3, isOneOfControl);
+export const materialOneOfControlTester: RankedTester = rankWith(
+  3,
+  isOneOfControl
+);
 
 export default withJsonFormsOneOfProps(MaterialOneOfRenderer);