@jsonforms/material-renderers 3.0.0-alpha.0 → 3.0.0-beta.0

package/rollup.config.js

@@ -0,0 +1,51 @@
+import typescript from 'rollup-plugin-typescript2';
+import cleanup from 'rollup-plugin-cleanup';
+import { visualizer } from 'rollup-plugin-visualizer';
+
+const packageJson = require('./package.json');
+
+const baseConfig = {
+  input: 'src/index.ts',
+  external: [
+    ...Object.keys(packageJson.dependencies),
+    ...Object.keys(packageJson.peerDependencies),
+    'react',
+    /^lodash\/.*/,
+    /^@material-ui\/.*/,
+    /^dayjs\/.*/
+  ]
+};
+
+export default [
+  {
+    ...baseConfig,
+    output: {
+      file: packageJson.module,
+      format: 'esm',
+      sourcemap: true
+    },
+    plugins: [
+      typescript(),
+      cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx'] }),
+      visualizer({ open: false })
+    ]
+  },
+  {
+    ...baseConfig,
+    output: {
+      file: packageJson.main,
+      format: 'cjs',
+      sourcemap: true
+    },
+    plugins: [
+      typescript({
+        tsconfigOverride: {
+          compilerOptions: {
+            target: 'ES5'
+          }
+        }
+      }),
+      cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx'] })
+    ]
+  }
+];

package/src/additional/ListWithDetailMasterItem.tsx

@@ -31,8 +31,8 @@ import {
     ListItemAvatar,
     ListItemSecondaryAction,
     ListItemText,
-} from '@material-ui/core';
-import DeleteIcon from '@material-ui/icons/Delete';
+} from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
 import React from 'react';
 
 const ListWithDetailMasterItem = ({ index, childLabel, selected, handleSelect, removeItem, path }: StatePropsOfMasterItem) => {
@@ -47,10 +47,7 @@ const ListWithDetailMasterItem = ({ index, childLabel, selected, handleSelect, r
             </ListItemAvatar>
             <ListItemText primary={childLabel} />
             <ListItemSecondaryAction>
-                <IconButton
-                    aria-label='Delete'
-                    onClick={removeItem(path, index)}
-                >
+                <IconButton aria-label='Delete' onClick={removeItem(path, index)} size='large'>
                     <DeleteIcon />
                 </IconButton>
             </ListItemSecondaryAction>

package/src/additional/MaterialLabelRenderer.tsx

@@ -34,7 +34,7 @@ import { withJsonFormsLayoutProps } from '@jsonforms/react';
 import {
   Hidden,
   Typography
-} from '@material-ui/core';
+} from '@mui/material';
 
 /**
  * Default tester for a label.

package/src/additional/MaterialListWithDetailRenderer.tsx

@@ -30,7 +30,6 @@ import {
   createDefaultValue,
   findUISchema,
   isObjectArray,
-  isPlainLabel,
   RankedTester,
   rankWith,
   uiTypeIs
@@ -39,7 +38,7 @@ import {
   JsonFormsDispatch,
   withJsonFormsArrayLayoutProps
 } from '@jsonforms/react';
-import { Grid, Hidden, List, Typography } from '@material-ui/core';
+import { Grid, Hidden, List, Typography } from '@mui/material';
 import map from 'lodash/map';
 import range from 'lodash/range';
 import React, { useCallback, useMemo, useState } from 'react';
@@ -101,7 +100,7 @@ export const MaterialListWithDetailRenderer = ({
     <Hidden xsUp={!visible}>
       <ArrayLayoutToolbar
         label={computeLabel(
-          isPlainLabel(label) ? label : label.default,
+          label,
           required,
           appliedUiSchemaOptions.hideRequiredAsterisk
         )}

package/src/cells/MaterialDateCell.tsx

@@ -31,7 +31,7 @@ import {
   WithClassname
 } from '@jsonforms/core';
 import { withJsonFormsCellProps } from '@jsonforms/react';
-import Input from '@material-ui/core/Input';
+import Input from '@mui/material/Input';
 import merge from 'lodash/merge';
 
 export const MaterialDateCell = (props: CellProps & WithClassname) => {

package/src/cells/MaterialTimeCell.tsx

@@ -37,4 +37,5 @@ export const MaterialTimeCell = (props: CellProps & WithClassname) => (
   <MuiInputTime {...props} />
 );
 export const materialTimeCellTester: RankedTester = rankWith(2, isTimeControl);
+
 export default withJsonFormsCellProps(MaterialTimeCell);

package/src/complex/CombinatorProperties.tsx

@@ -23,9 +23,9 @@
   THE SOFTWARE.
 */
 import React from 'react';
-import _ from 'lodash';
 import { Generate, JsonSchema, Layout, UISchemaElement } from '@jsonforms/core';
 import { JsonFormsDispatch } from '@jsonforms/react';
+import omit from 'lodash/omit';
 
 interface CombinatorPropertiesProps {
   schema: JsonSchema;
@@ -42,7 +42,7 @@ export class CombinatorProperties extends React.Component<CombinatorPropertiesPr
 
     const { schema, combinatorKeyword, path } = this.props;
 
-    const otherProps: JsonSchema = _.omit(schema, combinatorKeyword) as JsonSchema;
+    const otherProps: JsonSchema = omit(schema, combinatorKeyword) as JsonSchema;
     const foundUISchema: UISchemaElement = Generate.uiSchema(otherProps, 'VerticalLayout');
     let isLayoutWithElements = false;
     if (foundUISchema !== null && isLayout(foundUISchema)) {

package/src/complex/DeleteDialog.tsx

@@ -23,14 +23,14 @@
   THE SOFTWARE.
 */
 import React from 'react';
-import Button from '@material-ui/core/Button';
 import {
+    Button,
     Dialog,
     DialogActions,
     DialogContent,
     DialogContentText,
     DialogTitle,
-} from '@material-ui/core';
+} from '@mui/material';
 
 export interface DeleteDialogProps {
     open: boolean;

package/src/complex/MaterialAllOfRenderer.tsx

@@ -23,7 +23,7 @@
   THE SOFTWARE.
 */
 import React from 'react';
-import { Hidden } from '@material-ui/core';
+import { Hidden } from '@mui/material';
 
 import {
   createCombinatorRenderInfos,
@@ -37,7 +37,7 @@ import {
 } from '@jsonforms/core';
 import { JsonFormsDispatch, withJsonFormsAllOfProps } from '@jsonforms/react';
 
-const MaterialAllOfRenderer = ({
+export const MaterialAllOfRenderer = ({
   schema,
   rootSchema,
   visible,
@@ -95,4 +95,5 @@ export const materialAllOfControlTester: RankedTester = rankWith(
   3,
   isAllOfControl
 );
+
 export default withJsonFormsAllOfProps(MaterialAllOfRenderer);

package/src/complex/MaterialAnyOfRenderer.tsx

@@ -34,10 +34,10 @@ import {
   StatePropsOfCombinator
 } from '@jsonforms/core';
 import { JsonFormsDispatch, withJsonFormsAnyOfProps } from '@jsonforms/react';
-import { Hidden, Tab, Tabs } from '@material-ui/core';
+import { Hidden, Tab, Tabs } from '@mui/material';
 import CombinatorProperties from './CombinatorProperties';
 
-const MaterialAnyOfRenderer = ({
+export const MaterialAnyOfRenderer = ({
   schema,
   rootSchema,
   indexOfFittingSchema,
@@ -97,4 +97,5 @@ export const materialAnyOfControlTester: RankedTester = rankWith(
   3,
   isAnyOfControl
 );
+
 export default withJsonFormsAnyOfProps(MaterialAnyOfRenderer);

package/src/complex/MaterialArrayControlRenderer.tsx

@@ -26,7 +26,7 @@ import React, { useCallback, useState } from 'react';
 import { ArrayLayoutProps } from '@jsonforms/core';
 import { withJsonFormsArrayLayoutProps } from '@jsonforms/react';
 import { MaterialTableControl } from './MaterialTableControl';
-import { Hidden } from '@material-ui/core';
+import { Hidden } from '@mui/material';
 import { DeleteDialog } from './DeleteDialog';
 
 export const MaterialArrayControlRenderer = (props: ArrayLayoutProps) => {

package/src/complex/MaterialEnumArrayRenderer.tsx

@@ -21,9 +21,9 @@ import {
   FormGroup,
   FormHelperText,
   Hidden
-} from '@material-ui/core';
-import { startCase } from 'lodash';
-import { isEmpty } from 'lodash';
+} from '@mui/material';
+import startCase from 'lodash/startCase';
+import isEmpty from 'lodash/isEmpty';
 import React from 'react';
 
 export const MaterialEnumArrayRenderer = ({
@@ -35,6 +35,7 @@ export const MaterialEnumArrayRenderer = ({
   data,
   addItem,
   removeItem,
+  handleChange,
   ...otherProps
 }: ControlProps & OwnPropsOfEnum & DispatchPropsOfMultiEnumControl) => {
   return (

package/src/complex/MaterialObjectRenderer.tsx

@@ -27,16 +27,15 @@ import {
   findUISchema,
   GroupLayout,
   isObjectControl,
-  isPlainLabel,
   RankedTester,
   rankWith,
   StatePropsOfControlWithDetail
 } from '@jsonforms/core';
 import { JsonFormsDispatch, withJsonFormsDetailProps } from '@jsonforms/react';
-import { Hidden } from '@material-ui/core';
+import { Hidden } from '@mui/material';
 import React, { useMemo } from 'react';
 
-const MaterialObjectRenderer = ({
+export const MaterialObjectRenderer = ({
   renderers,
   cells,
   uischemas,
@@ -64,7 +63,7 @@ const MaterialObjectRenderer = ({
   if (isEmpty(path)) {
     detailUiSchema.type = 'VerticalLayout';
   } else {
-    (detailUiSchema as GroupLayout).label = isPlainLabel(label) ? label : label.default;
+    (detailUiSchema as GroupLayout).label = label;
   }
   return (
     <Hidden xsUp={!visible}>
@@ -85,4 +84,5 @@ export const materialObjectControlTester: RankedTester = rankWith(
   2,
   isObjectControl
 );
+
 export default withJsonFormsDetailProps(MaterialObjectRenderer);

package/src/complex/MaterialOneOfRenderer.tsx

@@ -26,7 +26,7 @@ import React, { useCallback, useState } from 'react';
 import isEmpty from 'lodash/isEmpty';
 
 import {
-  CombinatorProps,
+  CombinatorRendererProps,
   createCombinatorRenderInfos,
   createDefaultValue,
   isOneOfControl,
@@ -46,7 +46,7 @@ import {
   Hidden,
   Tab,
   Tabs
-} from '@material-ui/core';
+} from '@mui/material';
 import {
   JsonFormsDispatch,
   withJsonFormsOneOfProps
@@ -57,9 +57,8 @@ export interface OwnOneOfProps extends OwnPropsOfControl {
   indexOfFittingSchema?: number;
 }
 
-const oneOf = 'oneOf';
-const MaterialOneOfRenderer =
-  ({ handleChange, schema, path, renderers, cells, rootSchema, id, visible, indexOfFittingSchema, uischema, uischemas, data }: CombinatorProps) => {
+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);
@@ -67,11 +66,11 @@ const MaterialOneOfRenderer =
     const cancel = useCallback(() => {
       setOpen(false);
     }, [setOpen]);
-    const _schema = resolveSubSchemas(schema, rootSchema, oneOf);
+    const _schema = resolveSubSchemas(schema, rootSchema, 'oneOf');
     const oneOfRenderInfos = createCombinatorRenderInfos(
       (_schema as JsonSchema).oneOf,
       rootSchema,
-      oneOf,
+      'oneOf',
       uischema,
       path,
       uischemas
@@ -150,4 +149,5 @@ const MaterialOneOfRenderer =
   };
 
 export const materialOneOfControlTester: RankedTester = rankWith(3, isOneOfControl);
+
 export default withJsonFormsOneOfProps(MaterialOneOfRenderer);

package/src/complex/MaterialTableControl.tsx

@@ -31,18 +31,19 @@ import {
 } from '@jsonforms/react';
 import startCase from 'lodash/startCase';
 import range from 'lodash/range';
-import React, { Fragment } from 'react';
+import React, { Fragment, useMemo } from 'react';
 import {
   FormHelperText,
   Grid,
   Hidden,
+  IconButton,
   Table,
   TableBody,
   TableCell,
   TableHead,
   TableRow,
   Typography
-} from '@material-ui/core';
+} from '@mui/material';
 import {
   ArrayLayoutProps,
   ControlElement,
@@ -54,10 +55,9 @@ import {
   JsonFormsRendererRegistryEntry,
   JsonFormsCellRendererRegistryEntry
 } from '@jsonforms/core';
-import IconButton from '@material-ui/core/IconButton';
-import DeleteIcon from '@material-ui/icons/Delete';
-import ArrowDownward from '@material-ui/icons/ArrowDownward';
-import ArrowUpward from '@material-ui/icons/ArrowUpward';
+import DeleteIcon from '@mui/icons-material/Delete';
+import ArrowDownward from '@mui/icons-material/ArrowDownward';
+import ArrowUpward from '@mui/icons-material/ArrowUpward';
 
 import { WithDeleteDialogSupport } from './DeleteDialog';
 import NoBorderTableCell from './NoBorderTableCell';
@@ -195,20 +195,19 @@ const controlWithoutLabel = (scope: string): ControlElement => ({
   label: false
 });
 
-const NonEmptyCell = (ownProps: OwnPropsOfNonEmptyCell) => {
-  const ctx = useJsonForms();
-  const {
-    path,
-    propName,
-    schema,
-    rootSchema,
-    errors,
-    enabled,
-    renderers,
-    cells
-  } = ctxToNonEmptyCellProps(ctx, ownProps);
+interface NonEmptyCellComponentProps {
+  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 isValid = isEmpty(errors);
   return (
     <NoBorderTableCell>
       {schema.properties ? (
@@ -237,35 +236,47 @@ const NonEmptyCell = (ownProps: OwnPropsOfNonEmptyCell) => {
       <FormHelperText error={!isValid}>{!isValid && errors}</FormHelperText>
     </NoBorderTableCell>
   );
+});
+
+const NonEmptyCell = (ownProps: OwnPropsOfNonEmptyCell) => {
+  const ctx = useJsonForms();
+  const emptyCellProps = ctxToNonEmptyCellProps(ctx, ownProps);
+
+  const isValid = isEmpty(emptyCellProps.errors);
+  return <NonEmptyCellComponent {...emptyCellProps} isValid={isValid}/>
 };
 
 interface NonEmptyRowProps {
   childPath: string;
   schema: JsonSchema;
   rowIndex: number;
-  moveUp: () => void;
-  moveDown: () => 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;
 }
 
-const NonEmptyRow = React.memo(
+const NonEmptyRowComponent = 
   ({
     childPath,
     schema,
     rowIndex,
     openDeleteDialog,
-    moveUp,
-    moveDown,
+    moveUpCreator,
+    moveDownCreator,
     enableUp,
     enableDown,
     showSortButtons,
     enabled,
-    cells
+    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)}
@@ -276,17 +287,13 @@ const NonEmptyRow = React.memo(
             <Grid
               container
               direction='row'
-              justify='flex-end'
+              justifyContent='flex-end'
               alignItems='center'
             >
               {showSortButtons ? (
                 <Fragment>
                   <Grid item>
-                    <IconButton
-                      aria-label={`Move up`}
-                      onClick={moveUp}
-                      disabled={!enableUp}
-                    >
+                    <IconButton aria-label={`Move up`} onClick={moveUp} disabled={!enableUp} size='large'>
                       <ArrowUpward />
                     </IconButton>
                   </Grid>
@@ -295,7 +302,7 @@ const NonEmptyRow = React.memo(
                       aria-label={`Move down`}
                       onClick={moveDown}
                       disabled={!enableDown}
-                    >
+                      size='large'>
                       <ArrowDownward />
                     </IconButton>
                   </Grid>
@@ -305,7 +312,7 @@ const NonEmptyRow = React.memo(
                 <IconButton
                   aria-label={`Delete`}
                   onClick={() => openDeleteDialog(childPath, rowIndex)}
-                >
+                  size='large'>
                   <DeleteIcon />
                 </IconButton>
               </Grid>
@@ -314,8 +321,8 @@ const NonEmptyRow = React.memo(
         ) : null}
       </TableRow>
     );
-  }
-);
+  };
+export const NonEmptyRow = React.memo(NonEmptyRowComponent);
 interface TableRowsProp {
   data: number;
   path: string;
@@ -359,13 +366,14 @@ const TableRows = ({
             rowIndex={index}
             schema={schema}
             openDeleteDialog={openDeleteDialog}
-            moveUp={moveUp(path, index)}
-            moveDown={moveDown(path, index)}
+            moveUpCreator={moveUp}
+            moveDownCreator={moveDown}
             enableUp={index !== 0}
             enableDown={index !== data - 1}
             showSortButtons={appliedUiSchemaOptions.showSortButtons}
             enabled={enabled}
             cells={cells}
+            path={path}
           />
         );
       })}

package/src/complex/NoBorderTableCell.tsx

@@ -22,20 +22,18 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import { withStyles } from '@material-ui/core/styles';
-import { TableCell } from '@material-ui/core';
+import { styled } from '@mui/material/styles';
+import { TableCell } from '@mui/material';
 import React from 'react';
 
-const styles = {
-    noBottomBorder: {
-        borderBottom: 'none'
-    }
-};
+const StyledTableCell = styled(TableCell)({
+  borderBottom: 'none'
+});
 
-const NoBorderTableCell = ({ classes, children, ...otherProps }: any) => (
-    <TableCell className={classes.noBottomBorder} {...otherProps}>
-        {children}
-    </TableCell>
+const NoBorderTableCell = ({ children, ...otherProps }: any) => (
+  <StyledTableCell {...otherProps}>
+    {children}
+  </StyledTableCell>
 );
 
-export default withStyles(styles)(NoBorderTableCell);
+export default (NoBorderTableCell);

package/src/complex/TableToolbar.tsx

@@ -27,20 +27,21 @@ import {
   ControlElement,
   createDefaultValue,
   JsonSchema,
-  Labels
 } from '@jsonforms/core';
-import IconButton from '@material-ui/core/IconButton';
-import { Grid, Hidden, Typography } from '@material-ui/core';
-import TableRow from '@material-ui/core/TableRow';
-import Tooltip from '@material-ui/core/Tooltip';
-import AddIcon from '@material-ui/icons/Add';
+import {
+  IconButton,
+  TableRow,
+  Tooltip
+} from '@mui/material';
+import { Grid, Hidden, Typography } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
 import ValidationIcon from './ValidationIcon';
 import NoBorderTableCell from './NoBorderTableCell';
 
 export interface MaterialTableToolbarProps {
   numColumns: number;
   errors: string;
-  label: string | Labels;
+  label: string;
   path: string;
   uischema: ControlElement;
   schema: JsonSchema;
@@ -68,7 +69,7 @@ const TableToolbar = React.memo(
       <NoBorderTableCell colSpan={numColumns}>
         <Grid
           container
-          justify={'flex-start'}
+          justifyContent={'flex-start'}
           alignItems={'center'}
           spacing={2}
         >
@@ -97,7 +98,7 @@ const TableToolbar = React.memo(
             <IconButton
               aria-label={`Add to ${label}`}
               onClick={addItem(path, createDefaultValue(schema))}
-            >
+              size='large'>
               <AddIcon />
             </IconButton>
           </Tooltip>

package/src/complex/ValidationIcon.tsx

@@ -24,22 +24,15 @@
 */
 import React from 'react';
 
-import Badge from '@material-ui/core/Badge';
-import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
-import Tooltip from '@material-ui/core/Tooltip';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import {
-  StyledComponentProps,
-  withStyles,
-  WithStyles,
-  createStyles,
-  Theme
-} from '@material-ui/core/styles';
+  Badge,
+  Tooltip,
+  styled
+} from '@mui/material';
 
-export { StyledComponentProps };
-const styles = createStyles(({ palette }: Theme) => ({
-  badge: {
-    color: palette.error.main
-  }
+const StyledBadge = styled(Badge)(({ theme }: any) => ({
+  color: theme.palette.error.main
 }));
 
 export interface ValidationProps {
@@ -47,18 +40,18 @@ export interface ValidationProps {
   id: string;
 }
 
-const ValidationIcon: React.FC<ValidationProps & WithStyles<'badge'>> =
-  ({ classes, errorMessages, id }) => {
+const ValidationIcon: React.FC<ValidationProps> =
+  ({ errorMessages, id }) => {
     return (
       <Tooltip
         id={id}
         title={errorMessages}
       >
-        <Badge className={classes.badge} badgeContent={errorMessages.split('\n').length}>
+        <StyledBadge badgeContent={errorMessages.split('\n').length}>
           <ErrorOutlineIcon color='inherit'/>
-        </Badge>
+        </StyledBadge>
       </Tooltip>
     );
 };
 
-export default withStyles(styles, { name: 'ValidationIcon' })(ValidationIcon);
+export default ValidationIcon;