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

package/src/complex/MaterialTableControl.tsx

@@ -27,7 +27,7 @@ import union from 'lodash/union';
 import {
   DispatchCell,
   JsonFormsStateContext,
-  useJsonForms
+  useJsonForms,
 } from '@jsonforms/react';
 import startCase from 'lodash/startCase';
 import range from 'lodash/range';
@@ -42,7 +42,7 @@ import {
   TableCell,
   TableHead,
   TableRow,
-  Typography
+  Typography,
 } from '@mui/material';
 import {
   ArrayLayoutProps,
@@ -54,7 +54,8 @@ import {
   Resolve,
   JsonFormsRendererRegistryEntry,
   JsonFormsCellRendererRegistryEntry,
-  encode
+  encode,
+  ArrayTranslations,
 } from '@jsonforms/core';
 import DeleteIcon from '@mui/icons-material/Delete';
 import ArrowDownward from '@mui/icons-material/ArrowDownward';
@@ -73,15 +74,15 @@ const styles = {
     height: '50px',
     paddingLeft: 0,
     paddingRight: 0,
-    textAlign: 'center'
+    textAlign: 'center',
   },
   fixedCellSmall: {
     width: '50px',
     height: '50px',
     paddingLeft: 0,
     paddingRight: 0,
-    textAlign: 'center'
-  }
+    textAlign: 'center',
+  },
 };
 
 const generateCells = (
@@ -92,7 +93,7 @@ const generateCells = (
   cells?: JsonFormsCellRendererRegistryEntry[]
 ) => {
   if (schema.type === 'object') {
-    return getValidColumnProps(schema).map(prop => {
+    return getValidColumnProps(schema).map((prop) => {
       const cellPath = Paths.compose(rowPath, prop);
       const props = {
         propName: prop,
@@ -101,7 +102,7 @@ const generateCells = (
         rowPath,
         cellPath,
         enabled,
-        cells
+        cells,
       };
       return <Cell key={cellPath} {...props} />;
     });
@@ -111,16 +112,19 @@ const generateCells = (
       schema,
       rowPath,
       cellPath: rowPath,
-      enabled
+      enabled,
     };
     return <Cell key={rowPath} {...props} />;
   }
 };
 
 const getValidColumnProps = (scopedSchema: JsonSchema) => {
-  if (scopedSchema.type === 'object' && typeof scopedSchema.properties === 'object') {
+  if (
+    scopedSchema.type === 'object' &&
+    typeof scopedSchema.properties === 'object'
+  ) {
     return Object.keys(scopedSchema.properties).filter(
-      prop => scopedSchema.properties[prop].type !== 'array'
+      (prop) => scopedSchema.properties[prop].type !== 'array'
     );
   }
   // primitives
@@ -129,12 +133,13 @@ const getValidColumnProps = (scopedSchema: JsonSchema) => {
 
 export interface EmptyTableProps {
   numColumns: number;
+  translations: ArrayTranslations;
 }
 
-const EmptyTable = ({ numColumns }: EmptyTableProps) => (
+const EmptyTable = ({ numColumns, translations }: EmptyTableProps) => (
   <TableRow>
     <NoBorderTableCell colSpan={numColumns}>
-      <Typography align='center'>No data</Typography>
+      <Typography align='center'>{translations.noDataMessage}</Typography>
     </NoBorderTableCell>
   </TableRow>
 );
@@ -143,9 +148,11 @@ interface TableHeaderCellProps {
   title: string;
 }
 
-const TableHeaderCell = React.memo(({ title }: TableHeaderCellProps) => (
-  <TableCell>{title}</TableCell>
-));
+const TableHeaderCell = React.memo(function TableHeaderCell({
+  title,
+}: TableHeaderCellProps) {
+  return <TableCell>{title}</TableCell>;
+});
 
 interface NonEmptyCellProps extends OwnPropsOfNonEmptyCell {
   rootSchema: JsonSchema;
@@ -173,7 +180,7 @@ const ctxToNonEmptyCellProps = (
       errorsAt(
         path,
         ownProps.schema,
-        p => p === path
+        (p) => p === path
       )(ctx.core.errors).map((error: ErrorObject) => error.message)
     )
   );
@@ -186,28 +193,38 @@ const ctxToNonEmptyCellProps = (
     path,
     enabled: ownProps.enabled,
     cells: ownProps.cells || ctx.cells,
-    renderers: ownProps.renderers || ctx.renderers
+    renderers: ownProps.renderers || ctx.renderers,
   };
 };
 
 const controlWithoutLabel = (scope: string): ControlElement => ({
   type: 'Control',
   scope: scope,
-  label: false
+  label: false,
 });
 
 interface NonEmptyCellComponentProps {
-  path: string,
-  propName?: string,
-  schema: JsonSchema,
-  rootSchema: JsonSchema,
-  errors: string,
-  enabled: boolean,
-  renderers?: JsonFormsRendererRegistryEntry[],
-  cells?: JsonFormsCellRendererRegistryEntry[],
-  isValid: boolean
+  path: string;
+  propName?: string;
+  schema: JsonSchema;
+  rootSchema: JsonSchema;
+  errors: string;
+  enabled: boolean;
+  renderers?: JsonFormsRendererRegistryEntry[];
+  cells?: JsonFormsCellRendererRegistryEntry[];
+  isValid: boolean;
 }
-const NonEmptyCellComponent = React.memo(({path, propName, schema, rootSchema, errors, enabled, renderers, cells, isValid}:NonEmptyCellComponentProps) => {
+const NonEmptyCellComponent = React.memo(function NonEmptyCellComponent({
+  path,
+  propName,
+  schema,
+  rootSchema,
+  errors,
+  enabled,
+  renderers,
+  cells,
+  isValid,
+}: NonEmptyCellComponentProps) {
   return (
     <NoBorderTableCell>
       {schema.properties ? (
@@ -243,85 +260,99 @@ const NonEmptyCell = (ownProps: OwnPropsOfNonEmptyCell) => {
   const emptyCellProps = ctxToNonEmptyCellProps(ctx, ownProps);
 
   const isValid = isEmpty(emptyCellProps.errors);
-  return <NonEmptyCellComponent {...emptyCellProps} isValid={isValid}/>
+  return <NonEmptyCellComponent {...emptyCellProps} isValid={isValid} />;
 };
 
 interface NonEmptyRowProps {
   childPath: string;
   schema: JsonSchema;
   rowIndex: number;
-  moveUpCreator: (path:string, position: number)=> ()=> void;
-  moveDownCreator: (path:string, position: number)=> ()=> void;
+  moveUpCreator: (path: string, position: number) => () => void;
+  moveDownCreator: (path: string, position: number) => () => void;
   enableUp: boolean;
   enableDown: boolean;
   showSortButtons: boolean;
   enabled: boolean;
   cells?: JsonFormsCellRendererRegistryEntry[];
   path: string;
+  translations: ArrayTranslations;
 }
 
-const NonEmptyRowComponent = 
-  ({
-    childPath,
-    schema,
-    rowIndex,
-    openDeleteDialog,
-    moveUpCreator,
-    moveDownCreator,
-    enableUp,
-    enableDown,
-    showSortButtons,
-    enabled,
-    cells,
-    path
-  }: NonEmptyRowProps & WithDeleteDialogSupport) => {
-    const moveUp = useMemo(() => moveUpCreator(path, rowIndex),[moveUpCreator, path, rowIndex]);
-    const moveDown = useMemo(() => moveDownCreator(path, rowIndex),[moveDownCreator, path, rowIndex]);
-    return (
-      <TableRow key={childPath} hover>
-        {generateCells(NonEmptyCell, schema, childPath, enabled, cells)}
-        {enabled ? (
-          <NoBorderTableCell
-            style={showSortButtons ? styles.fixedCell : styles.fixedCellSmall}
+const NonEmptyRowComponent = ({
+  childPath,
+  schema,
+  rowIndex,
+  openDeleteDialog,
+  moveUpCreator,
+  moveDownCreator,
+  enableUp,
+  enableDown,
+  showSortButtons,
+  enabled,
+  cells,
+  path,
+  translations,
+}: NonEmptyRowProps & WithDeleteDialogSupport) => {
+  const moveUp = useMemo(
+    () => moveUpCreator(path, rowIndex),
+    [moveUpCreator, path, rowIndex]
+  );
+  const moveDown = useMemo(
+    () => moveDownCreator(path, rowIndex),
+    [moveDownCreator, path, rowIndex]
+  );
+  return (
+    <TableRow key={childPath} hover>
+      {generateCells(NonEmptyCell, schema, childPath, enabled, cells)}
+      {enabled ? (
+        <NoBorderTableCell
+          style={showSortButtons ? styles.fixedCell : styles.fixedCellSmall}
+        >
+          <Grid
+            container
+            direction='row'
+            justifyContent='flex-end'
+            alignItems='center'
           >
-            <Grid
-              container
-              direction='row'
-              justifyContent='flex-end'
-              alignItems='center'
-            >
-              {showSortButtons ? (
-                <Fragment>
-                  <Grid item>
-                    <IconButton aria-label={`Move up`} onClick={moveUp} disabled={!enableUp} size='large'>
-                      <ArrowUpward />
-                    </IconButton>
-                  </Grid>
-                  <Grid item>
-                    <IconButton
-                      aria-label={`Move down`}
-                      onClick={moveDown}
-                      disabled={!enableDown}
-                      size='large'>
-                      <ArrowDownward />
-                    </IconButton>
-                  </Grid>
-                </Fragment>
-              ) : null}
-              <Grid item>
-                <IconButton
-                  aria-label={`Delete`}
-                  onClick={() => openDeleteDialog(childPath, rowIndex)}
-                  size='large'>
-                  <DeleteIcon />
-                </IconButton>
-              </Grid>
+            {showSortButtons ? (
+              <Fragment>
+                <Grid item>
+                  <IconButton
+                    aria-label={translations.upAriaLabel}
+                    onClick={moveUp}
+                    disabled={!enableUp}
+                    size='large'
+                  >
+                    <ArrowUpward />
+                  </IconButton>
+                </Grid>
+                <Grid item>
+                  <IconButton
+                    aria-label={translations.downAriaLabel}
+                    onClick={moveDown}
+                    disabled={!enableDown}
+                    size='large'
+                  >
+                    <ArrowDownward />
+                  </IconButton>
+                </Grid>
+              </Fragment>
+            ) : null}
+            <Grid item>
+              <IconButton
+                aria-label={translations.removeAriaLabel}
+                onClick={() => openDeleteDialog(childPath, rowIndex)}
+                size='large'
+              >
+                <DeleteIcon />
+              </IconButton>
             </Grid>
-          </NoBorderTableCell>
-        ) : null}
-      </TableRow>
-    );
-  };
+          </Grid>
+        </NoBorderTableCell>
+      ) : null}
+    </TableRow>
+  );
+};
 export const NonEmptyRow = React.memo(NonEmptyRowComponent);
 interface TableRowsProp {
   data: number;
@@ -333,6 +364,7 @@ interface TableRowsProp {
   cells?: JsonFormsCellRendererRegistryEntry[];
   moveUp?(path: string, toMove: number): () => void;
   moveDown?(path: string, toMove: number): () => void;
+  translations: ArrayTranslations;
 }
 const TableRows = ({
   data,
@@ -344,12 +376,18 @@ const TableRows = ({
   uischema,
   config,
   enabled,
-  cells
+  cells,
+  translations,
 }: TableRowsProp & WithDeleteDialogSupport) => {
   const isEmptyTable = data === 0;
 
   if (isEmptyTable) {
-    return <EmptyTable numColumns={getValidColumnProps(schema).length + 1} />;
+    return (
+      <EmptyTable
+        numColumns={getValidColumnProps(schema).length + 1}
+        translations={translations}
+      />
+    );
   }
 
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
@@ -370,10 +408,14 @@ const TableRows = ({
             moveDownCreator={moveDown}
             enableUp={index !== 0}
             enableDown={index !== data - 1}
-            showSortButtons={appliedUiSchemaOptions.showSortButtons || appliedUiSchemaOptions.showArrayTableSortButtons}
+            showSortButtons={
+              appliedUiSchemaOptions.showSortButtons ||
+              appliedUiSchemaOptions.showArrayTableSortButtons
+            }
             enabled={enabled}
             cells={cells}
             path={path}
+            translations={translations}
           />
         );
       })}
@@ -397,7 +439,8 @@ export class MaterialTableControl extends React.Component<
       openDeleteDialog,
       visible,
       enabled,
-      cells
+      cells,
+      translations,
     } = this.props;
 
     const controlElement = uischema as ControlElement;
@@ -420,6 +463,7 @@ export class MaterialTableControl extends React.Component<
               schema={schema}
               rootSchema={rootSchema}
               enabled={enabled}
+              translations={translations}
             />
             {isObjectSchema && (
               <TableRow>
@@ -429,7 +473,11 @@ export class MaterialTableControl extends React.Component<
             )}
           </TableHead>
           <TableBody>
-            <TableRows openDeleteDialog={openDeleteDialog} {...this.props} />
+            <TableRows
+              openDeleteDialog={openDeleteDialog}
+              translations={translations}
+              {...this.props}
+            />
           </TableBody>
         </Table>
       </Hidden>

package/src/complex/NoBorderTableCell.tsx

@@ -27,13 +27,11 @@ import { TableCell } from '@mui/material';
 import React from 'react';
 
 const StyledTableCell = styled(TableCell)({
-  borderBottom: 'none'
+  borderBottom: 'none',
 });
 
 const NoBorderTableCell = ({ children, ...otherProps }: any) => (
-  <StyledTableCell {...otherProps}>
-    {children}
-  </StyledTableCell>
+  <StyledTableCell {...otherProps}>{children}</StyledTableCell>
 );
 
-export default (NoBorderTableCell);
+export default NoBorderTableCell;

package/src/complex/TableToolbar.tsx

@@ -27,13 +27,9 @@ import {
   ControlElement,
   createDefaultValue,
   JsonSchema,
+  ArrayTranslations,
 } from '@jsonforms/core';
-import {
-  IconButton,
-  TableRow,
-  Tooltip
-} from '@mui/material';
-import { Grid, Typography } from '@mui/material';
+import { IconButton, TableRow, Tooltip, Grid, Typography } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import ValidationIcon from './ValidationIcon';
 import NoBorderTableCell from './NoBorderTableCell';
@@ -47,24 +43,26 @@ export interface MaterialTableToolbarProps {
   schema: JsonSchema;
   rootSchema: JsonSchema;
   enabled: boolean;
+  translations: ArrayTranslations;
   addItem(path: string, value: any): () => void;
 }
 
 const fixedCellSmall = {
   paddingLeft: 0,
   paddingRight: 0,
-}
+};
 
-const TableToolbar = React.memo(
-  ({
-    numColumns,
-    errors,
-    label,
-    path,
-    addItem,
-    schema,
-    enabled
-  }: MaterialTableToolbarProps) => (
+const TableToolbar = React.memo(function TableToolbar({
+  numColumns,
+  errors,
+  label,
+  path,
+  addItem,
+  schema,
+  enabled,
+  translations,
+}: MaterialTableToolbarProps) {
+  return (
     <TableRow>
       <NoBorderTableCell colSpan={numColumns}>
         <Grid
@@ -77,35 +75,36 @@ const TableToolbar = React.memo(
             <Typography variant={'h6'}>{label}</Typography>
           </Grid>
           <Grid item>
-            {errors.length !== 0 &&
+            {errors.length !== 0 && (
               <Grid item>
                 <ValidationIcon
                   id='tooltip-validation'
                   errorMessages={errors}
                 />
               </Grid>
-            }
+            )}
           </Grid>
         </Grid>
       </NoBorderTableCell>
       {enabled ? (
-        <NoBorderTableCell align='right' style={ fixedCellSmall }>
+        <NoBorderTableCell align='right' style={fixedCellSmall}>
           <Tooltip
             id='tooltip-add'
-            title={`Add to ${label}`}
+            title={translations.addTooltip}
             placement='bottom'
           >
             <IconButton
-              aria-label={`Add to ${label}`}
+              aria-label={translations.addAriaLabel}
               onClick={addItem(path, createDefaultValue(schema))}
-              size='large'>
+              size='large'
+            >
               <AddIcon />
             </IconButton>
           </Tooltip>
         </NoBorderTableCell>
       ) : null}
     </TableRow>
-  )
-);
+  );
+});
 
 export default TableToolbar;

package/src/complex/ValidationIcon.tsx

@@ -25,14 +25,10 @@
 import React from 'react';
 
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
-import {
-  Badge,
-  Tooltip,
-  styled
-} from '@mui/material';
+import { Badge, Tooltip, styled } from '@mui/material';
 
 const StyledBadge = styled(Badge)(({ theme }: any) => ({
-  color: theme.palette.error.main
+  color: theme.palette.error.main,
 }));
 
 export interface ValidationProps {
@@ -40,18 +36,14 @@ export interface ValidationProps {
   id: string;
 }
 
-const ValidationIcon: React.FC<ValidationProps> =
-  ({ errorMessages, id }) => {
-    return (
-      <Tooltip
-        id={id}
-        title={errorMessages}
-      >
-        <StyledBadge badgeContent={errorMessages.split('\n').length}>
-          <ErrorOutlineIcon color='inherit'/>
-        </StyledBadge>
-      </Tooltip>
-    );
+const ValidationIcon: React.FC<ValidationProps> = ({ errorMessages, id }) => {
+  return (
+    <Tooltip id={id} title={errorMessages}>
+      <StyledBadge badgeContent={errorMessages.split('\n').length}>
+        <ErrorOutlineIcon color='inherit' />
+      </StyledBadge>
+    </Tooltip>
+  );
 };
 
 export default ValidationIcon;

package/src/complex/index.ts

@@ -22,42 +22,45 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import {
-  isObjectArrayControl,
-  isPrimitiveArrayControl,
-  or,
-  RankedTester,
-  rankWith
-} from '@jsonforms/core';
-import MaterialArrayControlRenderer from './MaterialArrayControlRenderer';
-import MaterialObjectRenderer, {
-  materialObjectControlTester
-} from './MaterialObjectRenderer';
 import MaterialAllOfRenderer, {
-  materialAllOfControlTester
+  materialAllOfControlTester,
 } from './MaterialAllOfRenderer';
 import MaterialAnyOfRenderer, {
-  materialAnyOfControlTester
+  materialAnyOfControlTester,
 } from './MaterialAnyOfRenderer';
-import MaterialOneOfRenderer, {
-  materialOneOfControlTester
-} from './MaterialOneOfRenderer';
+import MaterialArrayControlRenderer, {
+  materialArrayControlTester,
+} from './MaterialArrayControlRenderer';
 import MaterialEnumArrayRenderer, {
-  materialEnumArrayRendererTester
+  materialEnumArrayRendererTester,
 } from './MaterialEnumArrayRenderer';
+import MaterialObjectRenderer, {
+  materialObjectControlTester,
+} from './MaterialObjectRenderer';
+import MaterialOneOfRenderer, {
+  materialOneOfControlTester,
+} from './MaterialOneOfRenderer';
+
+export {
+  materialAllOfControlTester,
+  MaterialAllOfRenderer,
+  materialAnyOfControlTester,
+  MaterialAnyOfRenderer,
+  materialArrayControlTester,
+  MaterialArrayControlRenderer,
+  materialEnumArrayRendererTester,
+  MaterialEnumArrayRenderer,
+  materialObjectControlTester,
+  MaterialObjectRenderer,
+  materialOneOfControlTester,
+  MaterialOneOfRenderer,
+};
+
+export * from './CombinatorProperties';
+export * from './DeleteDialog';
+export * from './MaterialTableControl';
+export * from './TableToolbar';
+export * from './ValidationIcon';
 
-export const materialArrayControlTester: RankedTester = rankWith(
-  3,
-  or(isObjectArrayControl, isPrimitiveArrayControl)
-);
-export { MaterialArrayControlRenderer };
-export { MaterialObjectRenderer };
-export { MaterialAllOfRenderer };
-export { MaterialAnyOfRenderer };
-export { MaterialOneOfRenderer };
-export { MaterialEnumArrayRenderer };
-export { materialObjectControlTester };
-export { materialAllOfControlTester };
-export { materialAnyOfControlTester };
-export { materialOneOfControlTester };
-export { materialEnumArrayRendererTester };
+import NoBorderTableCell from './NoBorderTableCell';
+export { NoBorderTableCell };