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

package/src/controls/unwrapped.ts

@@ -0,0 +1,57 @@
+/*
+  The MIT License
+  
+  Copyright (c) 2017-2019 EclipseSource Munich
+  https://github.com/eclipsesource/jsonforms
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+import { MaterialAnyOfStringOrEnumControl } from './MaterialAnyOfStringOrEnumControl';
+import { MaterialBooleanControl } from './MaterialBooleanControl';
+import { MaterialBooleanToggleControl } from './MaterialBooleanToggleControl';
+import { MaterialDateControl } from './MaterialDateControl';
+import { MaterialDateTimeControl } from './MaterialDateTimeControl';
+import { MaterialEnumControl } from './MaterialEnumControl';
+import { MaterialIntegerControl } from './MaterialIntegerControl';
+import { MaterialNativeControl } from './MaterialNativeControl';
+import { MaterialNumberControl } from './MaterialNumberControl';
+import { MaterialOneOfEnumControl } from './MaterialOneOfEnumControl';
+import { MaterialOneOfRadioGroupControl } from './MaterialOneOfRadioGroupControl';
+import { MaterialRadioGroupControl } from './MaterialRadioGroupControl';
+import { MaterialSliderControl } from './MaterialSliderControl';
+import { MaterialTextControl } from './MaterialTextControl';
+import { MaterialTimeControl } from './MaterialTimeControl';
+
+export const UnwrappedControls = {
+  MaterialAnyOfStringOrEnumControl,
+  MaterialBooleanControl,
+  MaterialBooleanToggleControl,
+  MaterialDateControl,
+  MaterialDateTimeControl,
+  MaterialEnumControl,
+  MaterialIntegerControl,
+  MaterialNativeControl,
+  MaterialNumberControl,
+  MaterialOneOfEnumControl,
+  MaterialOneOfRadioGroupControl,
+  MaterialSliderControl,
+  MaterialRadioGroupControl,
+  MaterialTextControl,
+  MaterialTimeControl,
+};

package/src/index.ts

@@ -24,7 +24,7 @@
 */
 import {
   JsonFormsCellRendererRegistryEntry,
-  JsonFormsRendererRegistryEntry
+  JsonFormsRendererRegistryEntry,
 } from '@jsonforms/core';
 import {
   materialAllOfControlTester,
@@ -38,13 +38,13 @@ import {
   materialOneOfControlTester,
   MaterialOneOfRenderer,
   MaterialEnumArrayRenderer,
-  materialEnumArrayRendererTester
+  materialEnumArrayRendererTester,
 } from './complex';
 import {
   MaterialLabelRenderer,
   materialLabelRendererTester,
   MaterialListWithDetailRenderer,
-  materialListWithDetailTester
+  materialListWithDetailTester,
 } from './additional';
 import {
   MaterialAnyOfStringOrEnumControl,
@@ -76,7 +76,7 @@ import {
   MaterialTextControl,
   materialTextControlTester,
   MaterialOneOfRadioGroupControl,
-  materialOneOfRadioGroupControlTester
+  materialOneOfRadioGroupControlTester,
 } from './controls';
 import {
   MaterialArrayLayout,
@@ -88,7 +88,7 @@ import {
   MaterialHorizontalLayout,
   materialHorizontalLayoutTester,
   MaterialVerticalLayout,
-  materialVerticalLayoutTester
+  materialVerticalLayoutTester,
 } from './layouts';
 import {
   MaterialBooleanCell,
@@ -110,16 +110,17 @@ import {
   MaterialTextCell,
   materialTextCellTester,
   MaterialTimeCell,
-  materialTimeCellTester
+  materialTimeCellTester,
 } from './cells';
 import MaterialCategorizationStepperLayout, {
-  materialCategorizationStepperTester
+  materialCategorizationStepperTester,
 } from './layouts/MaterialCategorizationStepperLayout';
 
+export * from './additional';
+export * from './cells';
 export * from './complex';
 export * from './controls';
 export * from './layouts';
-export * from './cells';
 export * from './mui-controls';
 export * from './util';
 
@@ -127,10 +128,13 @@ export const materialRenderers: JsonFormsRendererRegistryEntry[] = [
   // controls
   {
     tester: materialArrayControlTester,
-    renderer: MaterialArrayControlRenderer
+    renderer: MaterialArrayControlRenderer,
   },
   { tester: materialBooleanControlTester, renderer: MaterialBooleanControl },
-  { tester: materialBooleanToggleControlTester, renderer: MaterialBooleanToggleControl },
+  {
+    tester: materialBooleanToggleControlTester,
+    renderer: MaterialBooleanToggleControl,
+  },
   { tester: materialNativeControlTester, renderer: MaterialNativeControl },
   { tester: materialEnumControlTester, renderer: MaterialEnumControl },
   { tester: materialIntegerControlTester, renderer: MaterialIntegerControl },
@@ -138,7 +142,7 @@ export const materialRenderers: JsonFormsRendererRegistryEntry[] = [
   { tester: materialTextControlTester, renderer: MaterialTextControl },
   { tester: materialDateTimeControlTester, renderer: MaterialDateTimeControl },
   { tester: materialDateControlTester, renderer: MaterialDateControl },
-  { tester: materialTimeControlTester, renderer: MaterialTimeControl }, 
+  { tester: materialTimeControlTester, renderer: MaterialTimeControl },
   { tester: materialSliderControlTester, renderer: MaterialSliderControl },
   { tester: materialObjectControlTester, renderer: MaterialObjectRenderer },
   { tester: materialAllOfControlTester, renderer: MaterialAllOfRenderer },
@@ -146,43 +150,46 @@ export const materialRenderers: JsonFormsRendererRegistryEntry[] = [
   { tester: materialOneOfControlTester, renderer: MaterialOneOfRenderer },
   {
     tester: materialRadioGroupControlTester,
-    renderer: MaterialRadioGroupControl
+    renderer: MaterialRadioGroupControl,
   },
   {
     tester: materialOneOfRadioGroupControlTester,
-    renderer: MaterialOneOfRadioGroupControl
+    renderer: MaterialOneOfRadioGroupControl,
+  },
+  {
+    tester: materialOneOfEnumControlTester,
+    renderer: MaterialOneOfEnumControl,
   },
-  { tester: materialOneOfEnumControlTester, renderer: MaterialOneOfEnumControl },
   // layouts
   { tester: materialGroupTester, renderer: MaterialGroupLayout },
   {
     tester: materialHorizontalLayoutTester,
-    renderer: MaterialHorizontalLayout
+    renderer: MaterialHorizontalLayout,
   },
   { tester: materialVerticalLayoutTester, renderer: MaterialVerticalLayout },
   {
     tester: materialCategorizationTester,
-    renderer: MaterialCategorizationLayout
+    renderer: MaterialCategorizationLayout,
   },
   {
     tester: materialCategorizationStepperTester,
-    renderer: MaterialCategorizationStepperLayout
+    renderer: MaterialCategorizationStepperLayout,
   },
   { tester: materialArrayLayoutTester, renderer: MaterialArrayLayout },
   // additional
   { tester: materialLabelRendererTester, renderer: MaterialLabelRenderer },
   {
     tester: materialListWithDetailTester,
-    renderer: MaterialListWithDetailRenderer
+    renderer: MaterialListWithDetailRenderer,
   },
   {
     tester: materialAnyOfStringOrEnumControlTester,
-    renderer: MaterialAnyOfStringOrEnumControl
+    renderer: MaterialAnyOfStringOrEnumControl,
   },
   {
     tester: materialEnumArrayRendererTester,
-    renderer: MaterialEnumArrayRenderer
-  }
+    renderer: MaterialEnumArrayRenderer,
+  },
 ];
 
 export const materialCells: JsonFormsCellRendererRegistryEntry[] = [
@@ -195,5 +202,17 @@ export const materialCells: JsonFormsCellRendererRegistryEntry[] = [
   { tester: materialNumberFormatCellTester, cell: MaterialNumberFormatCell },
   { tester: materialOneOfEnumCellTester, cell: MaterialOneOfEnumCell },
   { tester: materialTextCellTester, cell: MaterialTextCell },
-  { tester: materialTimeCellTester, cell: MaterialTimeCell }
+  { tester: materialTimeCellTester, cell: MaterialTimeCell },
 ];
+
+import { UnwrappedAdditional } from './additional/unwrapped';
+import { UnwrappedComplex } from './complex/unwrapped';
+import { UnwrappedControls } from './controls/unwrapped';
+import { UnwrappedLayouts } from './layouts/unwrapped';
+
+export const Unwrapped = {
+  ...UnwrappedAdditional,
+  ...UnwrappedComplex,
+  ...UnwrappedControls,
+  ...UnwrappedLayouts,
+};

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>
   );
 };