@jsonforms/material-renderers 3.1.0-alpha.1 → 3.1.0-alpha.3

package/src/layouts/ArrayToolbar.tsx

@@ -1,59 +1,55 @@
-import { 
-  Grid,
-  IconButton,
-  Toolbar,
-  Tooltip,
-  Typography
-} from '@mui/material';
+import { Grid, IconButton, Toolbar, Tooltip, Typography } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import React from 'react';
 import ValidationIcon from '../complex/ValidationIcon';
+import { ArrayTranslations } from '@jsonforms/core';
 export interface ArrayLayoutToolbarProps {
   label: string;
   errors: string;
   path: string;
   addItem(path: string, data: any): () => void;
   createDefault(): any;
+  translations: ArrayTranslations;
 }
-export const ArrayLayoutToolbar = React.memo(
-  ({
-    label,
-    errors,
-    addItem,
-    path,
-    createDefault
-  }: ArrayLayoutToolbarProps) => {
-    return (
-      <Toolbar disableGutters={true}>
-        <Grid container alignItems='center' justifyContent='space-between'>
+export const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({
+  label,
+  errors,
+  addItem,
+  path,
+  createDefault,
+  translations,
+}: ArrayLayoutToolbarProps) {
+  return (
+    <Toolbar disableGutters={true}>
+      <Grid container alignItems='center' justifyContent='space-between'>
+        <Grid item>
+          <Typography variant={'h6'}>{label}</Typography>
+        </Grid>
+        {errors.length !== 0 && (
           <Grid item>
-            <Typography variant={'h6'}>{label}</Typography>
+            <ValidationIcon id='tooltip-validation' errorMessages={errors} />
           </Grid>
-          {errors.length !== 0 &&
+        )}
+        <Grid item>
+          <Grid container>
             <Grid item>
-              <ValidationIcon id='tooltip-validation' errorMessages={errors} />
-            </Grid>
-          }
-          <Grid item>
-            <Grid container>
-              <Grid item>
-                <Tooltip
-                  id='tooltip-add'
-                  title={`Add to ${label}`}
-                  placement='bottom'
+              <Tooltip
+                id='tooltip-add'
+                title={translations.addTooltip}
+                placement='bottom'
+              >
+                <IconButton
+                  aria-label={translations.addAriaLabel}
+                  onClick={addItem(path, createDefault())}
+                  size='large'
                 >
-                  <IconButton
-                    aria-label={`Add to ${label}`}
-                    onClick={addItem(path, createDefault())}
-                    size='large'>
-                    <AddIcon />
-                  </IconButton>
-                </Tooltip>
-              </Grid>
+                  <AddIcon />
+                </IconButton>
+              </Tooltip>
             </Grid>
           </Grid>
         </Grid>
-      </Toolbar>
-    );
-  }
-);
+      </Grid>
+    </Toolbar>
+  );
+});

package/src/layouts/ExpandPanelRenderer.tsx

@@ -1,10 +1,19 @@
 import merge from 'lodash/merge';
 import get from 'lodash/get';
-import React, { ComponentType, Dispatch, Fragment, ReducerAction, useMemo, useState, useEffect, useCallback } from 'react';
+import React, {
+  ComponentType,
+  Dispatch,
+  Fragment,
+  ReducerAction,
+  useMemo,
+  useState,
+  useEffect,
+  useCallback,
+} from 'react';
 import {
   JsonFormsDispatch,
   JsonFormsStateContext,
-  withJsonFormsContext
+  withJsonFormsContext,
 } from '@jsonforms/react';
 import {
   composePaths,
@@ -20,7 +29,8 @@ import {
   JsonFormsUISchemaRegistryEntry,
   getFirstPrimitiveProp,
   createId,
-  removeId
+  removeId,
+  ArrayTranslations,
 } from '@jsonforms/core';
 import {
   Accordion,
@@ -28,7 +38,7 @@ import {
   AccordionDetails,
   Avatar,
   Grid,
-  IconButton
+  IconButton,
 } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import DeleteIcon from '@mui/icons-material/Delete';
@@ -53,6 +63,7 @@ interface OwnPropsOfExpandPanel {
   config: any;
   childLabelProp?: string;
   handleExpansion(panel: string): (event: any, expanded: boolean) => void;
+  translations: ArrayTranslations;
 }
 
 interface StatePropsOfExpandPanel extends OwnPropsOfExpandPanel {
@@ -103,7 +114,8 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
     uischemas,
     renderers,
     cells,
-    config
+    config,
+    translations,
   } = props;
 
   const foundUISchema = useMemo(
@@ -121,7 +133,9 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
   );
 
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
-  const showSortButtons = appliedUiSchemaOptions.showSortButtons || appliedUiSchemaOptions.showArrayLayoutSortButtons;
+  const showSortButtons =
+    appliedUiSchemaOptions.showSortButtons ||
+    appliedUiSchemaOptions.showArrayLayoutSortButtons;
 
   return (
     <Accordion
@@ -157,8 +171,9 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
                           onClick={moveUp(path, index)}
                           style={iconStyle}
                           disabled={!enableMoveUp}
-                          aria-label={`Move up`}
-                          size='large'>
+                          aria-label={translations.upAriaLabel}
+                          size='large'
+                        >
                           <ArrowUpward />
                         </IconButton>
                       </Grid>
@@ -167,8 +182,9 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
                           onClick={moveDown(path, index)}
                           style={iconStyle}
                           disabled={!enableMoveDown}
-                          aria-label={`Move down`}
-                          size='large'>
+                          aria-label={translations.downAriaLabel}
+                          size='large'
+                        >
                           <ArrowDownward />
                         </IconButton>
                       </Grid>
@@ -180,8 +196,9 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
                     <IconButton
                       onClick={removeItems(path, [index])}
                       style={iconStyle}
-                      aria-label={`Delete`}
-                      size='large'>
+                      aria-label={translations.removeAriaLabel}
+                      size='large'
+                    >
                       <DeleteIcon />
                     </IconButton>
                   </Grid>
@@ -206,7 +223,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
   );
 };
 
-const ExpandPanelRenderer = React.memo(ExpandPanelRendererComponent);
+export const ExpandPanelRenderer = React.memo(ExpandPanelRendererComponent);
 
 /**
  * Maps state to dispatch properties of an expand pandel control.
@@ -216,37 +233,49 @@ const ExpandPanelRenderer = React.memo(ExpandPanelRendererComponent);
  */
 export const ctxDispatchToExpandPanelProps: (
   dispatch: Dispatch<ReducerAction<any>>
-) => DispatchPropsOfExpandPanel = dispatch => ({
-  removeItems: useCallback((path: string, toDelete: number[]) => (event: any): void => {
-    event.stopPropagation();
-    dispatch(
-      update(path, array => {
-        toDelete
-          .sort()
-          .reverse()
-          .forEach(s => array.splice(s, 1));
-        return array;
-      })
-    );
-  }, [dispatch]),
-  moveUp: useCallback((path: string, toMove: number) => (event: any): void => {
-    event.stopPropagation();
-    dispatch(
-      update(path, array => {
-        moveUp(array, toMove);
-        return array;
-      })
-    );
-  }, [dispatch]),
-  moveDown: useCallback((path: string, toMove: number) => (event: any): void => {
-    event.stopPropagation();
-    dispatch(
-      update(path, array => {
-        moveDown(array, toMove);
-        return array;
-      })
-    );
-  }, [dispatch])
+) => DispatchPropsOfExpandPanel = (dispatch) => ({
+  removeItems: useCallback(
+    (path: string, toDelete: number[]) =>
+      (event: any): void => {
+        event.stopPropagation();
+        dispatch(
+          update(path, (array) => {
+            toDelete
+              .sort()
+              .reverse()
+              .forEach((s) => array.splice(s, 1));
+            return array;
+          })
+        );
+      },
+    [dispatch]
+  ),
+  moveUp: useCallback(
+    (path: string, toMove: number) =>
+      (event: any): void => {
+        event.stopPropagation();
+        dispatch(
+          update(path, (array) => {
+            moveUp(array, toMove);
+            return array;
+          })
+        );
+      },
+    [dispatch]
+  ),
+  moveDown: useCallback(
+    (path: string, toMove: number) =>
+      (event: any): void => {
+        event.stopPropagation();
+        dispatch(
+          update(path, (array) => {
+            moveDown(array, toMove);
+            return array;
+          })
+        );
+      },
+    [dispatch]
+  ),
 });
 
 /**
@@ -257,33 +286,33 @@ export const ctxDispatchToExpandPanelProps: (
  */
 export const withContextToExpandPanelProps = (
   Component: ComponentType<ExpandPanelProps>
-): ComponentType<OwnPropsOfExpandPanel> => ({
-  ctx,
-  props
-}: JsonFormsStateContext & ExpandPanelProps) => {
-  const dispatchProps = ctxDispatchToExpandPanelProps(ctx.dispatch);
-  const { childLabelProp, schema, path, index, uischemas } = props;
-  const childPath = composePaths(path, `${index}`);
-  const childData = Resolve.data(ctx.core.data, childPath);
-  const childLabel = childLabelProp
-    ? get(childData, childLabelProp, '')
-    : get(childData, getFirstPrimitiveProp(schema), '');
+): ComponentType<OwnPropsOfExpandPanel> =>
+  function WithContextToExpandPanelProps({
+    ctx,
+    props,
+  }: JsonFormsStateContext & ExpandPanelProps) {
+    const dispatchProps = ctxDispatchToExpandPanelProps(ctx.dispatch);
+    const { childLabelProp, schema, path, index, uischemas } = props;
+    const childPath = composePaths(path, `${index}`);
+    const childData = Resolve.data(ctx.core.data, childPath);
+    const childLabel = childLabelProp
+      ? get(childData, childLabelProp, '')
+      : get(childData, getFirstPrimitiveProp(schema), '');
 
-  return (
-    <Component
-      {...props}
-      {...dispatchProps}
-      childLabel={childLabel}
-      childPath={childPath}
-      uischemas={uischemas}
-    />
-  );
-};
+    return (
+      <Component
+        {...props}
+        {...dispatchProps}
+        childLabel={childLabel}
+        childPath={childPath}
+        uischemas={uischemas}
+      />
+    );
+  };
 
 export const withJsonFormsExpandPanelProps = (
   Component: ComponentType<ExpandPanelProps>
 ): ComponentType<OwnPropsOfExpandPanel> =>
-  withJsonFormsContext(
-    withContextToExpandPanelProps(Component));
+  withJsonFormsContext(withContextToExpandPanelProps(Component));
 
 export default withJsonFormsExpandPanelProps(ExpandPanelRenderer);

package/src/layouts/MaterialArrayLayout.tsx

@@ -23,7 +23,7 @@
   THE SOFTWARE.
 */
 import range from 'lodash/range';
-import React, {useState, useCallback} from 'react';
+import React, { useState, useCallback } from 'react';
 import {
   ArrayLayoutProps,
   composePaths,
@@ -35,15 +35,21 @@ import { ArrayLayoutToolbar } from './ArrayToolbar';
 import ExpandPanelRenderer from './ExpandPanelRenderer';
 import merge from 'lodash/merge';
 
-const MaterialArrayLayoutComponent = (props: ArrayLayoutProps)=> {
-  const [expanded, setExpanded] = useState<string|boolean>(false);
-  const innerCreateDefaultValue = useCallback(() => createDefaultValue(props.schema), [props.schema]);
-  const handleChange = useCallback((panel: string) => (_event: any, expandedPanel: boolean) => {
-    setExpanded(expandedPanel ? panel : false)
-  }, []);
-  const isExpanded = (index: number) => 
+const MaterialArrayLayoutComponent = (props: ArrayLayoutProps) => {
+  const [expanded, setExpanded] = useState<string | boolean>(false);
+  const innerCreateDefaultValue = useCallback(
+    () => createDefaultValue(props.schema),
+    [props.schema]
+  );
+  const handleChange = useCallback(
+    (panel: string) => (_event: any, expandedPanel: boolean) => {
+      setExpanded(expandedPanel ? panel : false);
+    },
+    []
+  );
+  const isExpanded = (index: number) =>
     expanded === composePaths(props.path, `${index}`);
-  
+
   const {
     enabled,
     data,
@@ -58,17 +64,15 @@ const MaterialArrayLayoutComponent = (props: ArrayLayoutProps)=> {
     required,
     rootSchema,
     config,
-    uischemas
+    uischemas,
+    translations,
   } = props;
-  const appliedUiSchemaOptions = merge(
-    {},
-    config,
-    props.uischema.options
-  );
+  const appliedUiSchemaOptions = merge({}, config, props.uischema.options);
 
   return (
     <div>
       <ArrayLayoutToolbar
+        translations={translations}
         label={computeLabel(
           label,
           required,
@@ -81,7 +85,7 @@ const MaterialArrayLayoutComponent = (props: ArrayLayoutProps)=> {
       />
       <div>
         {data > 0 ? (
-          map(range(data), index => {
+          map(range(data), (index) => {
             return (
               <ExpandPanelRenderer
                 enabled={enabled}
@@ -100,6 +104,7 @@ const MaterialArrayLayoutComponent = (props: ArrayLayoutProps)=> {
                 config={config}
                 childLabelProp={appliedUiSchemaOptions.elementLabelProp}
                 uischemas={uischemas}
+                translations={translations}
               />
             );
           })

package/src/layouts/MaterialArrayLayoutRenderer.tsx

@@ -28,7 +28,7 @@ import {
   ArrayLayoutProps,
   isObjectArrayWithNesting,
   RankedTester,
-  rankWith
+  rankWith,
 } from '@jsonforms/core';
 import { Hidden } from '@mui/material';
 import { MaterialArrayLayout } from './MaterialArrayLayout';
@@ -39,16 +39,13 @@ export const MaterialArrayLayoutRenderer = ({
   addItem,
   ...props
 }: ArrayLayoutProps) => {
-  const addItemCb = useCallback((p: string, value: any) => addItem(p, value), [
-    addItem
-  ]);
+  const addItemCb = useCallback(
+    (p: string, value: any) => addItem(p, value),
+    [addItem]
+  );
   return (
     <Hidden xsUp={!visible}>
-      <MaterialArrayLayout
-        visible={visible}
-        addItem={addItemCb}
-        {...props}
-      />
+      <MaterialArrayLayout visible={visible} addItem={addItemCb} {...props} />
     </Hidden>
   );
 };

package/src/layouts/MaterialCategorizationLayout.tsx

@@ -22,7 +22,7 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import React, {useState, useMemo} from 'react';
+import React, { useState, useMemo } from 'react';
 import { AppBar, Hidden, Tab, Tabs } from '@mui/material';
 import {
   and,
@@ -35,14 +35,18 @@ import {
   StatePropsOfLayout,
   Tester,
   UISchemaElement,
-  uiTypeIs
+  uiTypeIs,
 } from '@jsonforms/core';
-import { TranslateProps, withJsonFormsLayoutProps, withTranslateProps } from '@jsonforms/react';
+import {
+  TranslateProps,
+  withJsonFormsLayoutProps,
+  withTranslateProps,
+} from '@jsonforms/react';
 import {
   AjvProps,
   MaterialLayoutRenderer,
   MaterialLayoutRendererProps,
-  withAjvProps
+  withAjvProps,
 } from '../util/layout';
 
 export const isSingleLevelCategorization: Tester = and(
@@ -69,14 +73,18 @@ export interface CategorizationState {
 }
 
 export interface MaterialCategorizationLayoutRendererProps
-  extends StatePropsOfLayout, AjvProps, TranslateProps {
+  extends StatePropsOfLayout,
+    AjvProps,
+    TranslateProps {
   selected?: number;
   ownState?: boolean;
   data?: any;
   onChange?(selected: number, prevSelected: number): void;
 }
 
-export const MaterialCategorizationLayoutRenderer = (props: MaterialCategorizationLayoutRendererProps) => {
+export const MaterialCategorizationLayoutRenderer = (
+  props: MaterialCategorizationLayoutRendererProps
+) => {
   const {
     data,
     path,
@@ -89,50 +97,73 @@ export const MaterialCategorizationLayoutRenderer = (props: MaterialCategorizati
     selected,
     onChange,
     ajv,
-    t
+    t,
   } = props;
   const categorization = uischema as Categorization;
-  const [activeCategory, setActiveCategory]= useState<number|undefined>(selected??0);
-  const categories = useMemo(() => categorization.elements.filter((category: Category) =>
-    isVisible(category, data, undefined, ajv)
-  ),[categorization, data, ajv]);
+  const [previousCategorization, setPreviousCategorization] =
+    useState<Categorization>(uischema as Categorization);
+  const [activeCategory, setActiveCategory] = useState<number>(selected ?? 0);
+  const categories = useMemo(
+    () =>
+      categorization.elements.filter((category: Category) =>
+        isVisible(category, data, undefined, ajv)
+      ),
+    [categorization, data, ajv]
+  );
+
+  if (categorization !== previousCategorization) {
+    setActiveCategory(0);
+    setPreviousCategorization(categorization);
+  }
+
+  const safeCategory =
+    activeCategory >= categorization.elements.length ? 0 : activeCategory;
+
   const childProps: MaterialLayoutRendererProps = {
-    elements: categories[activeCategory].elements,
+    elements: categories[safeCategory] ? categories[safeCategory].elements : [],
     schema,
     path,
     direction: 'column',
     enabled,
     visible,
     renderers,
-    cells
+    cells,
   };
   const onTabChange = (_event: any, value: any) => {
     if (onChange) {
-      onChange(value, activeCategory);
+      onChange(value, safeCategory);
     }
     setActiveCategory(value);
   };
 
   const tabLabels = useMemo(() => {
-    return categories.map((e: Category) => 
-      deriveLabelForUISchemaElement(e, t)
-    )
-  }, [categories, t])
+    return categories.map((e: Category) => deriveLabelForUISchemaElement(e, t));
+  }, [categories, t]);
 
   return (
     <Hidden xsUp={!visible}>
       <AppBar position='static'>
-        <Tabs value={activeCategory} onChange={onTabChange} textColor='inherit' indicatorColor='secondary' variant='scrollable'>
+        <Tabs
+          value={safeCategory}
+          onChange={onTabChange}
+          textColor='inherit'
+          indicatorColor='secondary'
+          variant='scrollable'
+        >
           {categories.map((_, idx: number) => (
             <Tab key={idx} label={tabLabels[idx]} />
           ))}
         </Tabs>
       </AppBar>
       <div style={{ marginTop: '0.5em' }}>
-        <MaterialLayoutRenderer {...childProps} />
+        <MaterialLayoutRenderer {...childProps} key={safeCategory} />
       </div>
     </Hidden>
   );
 };
 
-export default withAjvProps(withTranslateProps(withJsonFormsLayoutProps(MaterialCategorizationLayoutRenderer)));
+export default withAjvProps(
+  withTranslateProps(
+    withJsonFormsLayoutProps(MaterialCategorizationLayoutRenderer)
+  )
+);