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

package/src/layouts/MaterialCategorizationStepperLayout.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 merge from 'lodash/merge';
 import { Button, Hidden, Step, StepButton, Stepper } from '@mui/material';
 import {
@@ -36,14 +36,18 @@ import {
   RankedTester,
   rankWith,
   StatePropsOfLayout,
-  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 materialCategorizationStepperTester: RankedTester = rankWith(
@@ -60,15 +64,19 @@ export interface CategorizationStepperState {
 }
 
 export interface MaterialCategorizationStepperLayoutRendererProps
-  extends StatePropsOfLayout, AjvProps, TranslateProps {
-    data: any;
+  extends StatePropsOfLayout,
+    AjvProps,
+    TranslateProps {
+  data: any;
 }
 
-export const MaterialCategorizationStepperLayoutRenderer = (props: MaterialCategorizationStepperLayoutRendererProps)=> {
+export const MaterialCategorizationStepperLayoutRenderer = (
+  props: MaterialCategorizationStepperLayoutRendererProps
+) => {
   const [activeCategory, setActiveCategory] = useState<number>(0);
 
   const handleStep = (step: number) => {
-    setActiveCategory( step);
+    setActiveCategory(step);
   };
 
   const {
@@ -81,24 +89,28 @@ export const MaterialCategorizationStepperLayoutRenderer = (props: MaterialCateg
     cells,
     config,
     ajv,
-    t
+    t,
   } = props;
   const categorization = uischema as Categorization;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
   const buttonWrapperStyle = {
-    textAlign: 'right' as 'right',
+    textAlign: 'right' as const,
     width: '100%',
-    margin: '1em auto'
+    margin: '1em auto',
   };
   const buttonNextStyle = {
-    float: 'right' as 'right'
+    float: 'right' as const,
   };
   const buttonStyle = {
-    marginRight: '1em'
+    marginRight: '1em',
   };
-  const categories = useMemo(() => categorization.elements.filter((category: Category) =>
-    isVisible(category, data, undefined, ajv)
-  ),[categorization, data, ajv]);
+  const categories = useMemo(
+    () =>
+      categorization.elements.filter((category: Category) =>
+        isVisible(category, data, undefined, ajv)
+      ),
+    [categorization, data, ajv]
+  );
   const childProps: MaterialLayoutRendererProps = {
     elements: categories[activeCategory].elements,
     schema,
@@ -106,13 +118,11 @@ export const MaterialCategorizationStepperLayoutRenderer = (props: MaterialCateg
     direction: 'column',
     visible,
     renderers,
-    cells
+    cells,
   };
   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}>
       <Stepper activeStep={activeCategory} nonLinear>
@@ -127,30 +137,36 @@ export const MaterialCategorizationStepperLayoutRenderer = (props: MaterialCateg
       <div>
         <MaterialLayoutRenderer {...childProps} />
       </div>
-      { !!appliedUiSchemaOptions.showNavButtons ? (<div style={buttonWrapperStyle}>
-        <Button
-          style={buttonNextStyle}
-          variant="contained"
-          color="primary"
-          disabled={activeCategory >= categories.length - 1}
-          onClick={() => handleStep(activeCategory + 1)}
-        >
-          Next
-        </Button>
-        <Button
-          style={buttonStyle}
-          color="secondary"
-          variant="contained"
-          disabled={activeCategory <= 0}
-          onClick={() => handleStep(activeCategory - 1)}
-        >
-          Previous
-        </Button>
-      </div>) : (<></>)}
+      {appliedUiSchemaOptions.showNavButtons ? (
+        <div style={buttonWrapperStyle}>
+          <Button
+            style={buttonNextStyle}
+            variant='contained'
+            color='primary'
+            disabled={activeCategory >= categories.length - 1}
+            onClick={() => handleStep(activeCategory + 1)}
+          >
+            Next
+          </Button>
+          <Button
+            style={buttonStyle}
+            color='secondary'
+            variant='contained'
+            disabled={activeCategory <= 0}
+            onClick={() => handleStep(activeCategory - 1)}
+          >
+            Previous
+          </Button>
+        </div>
+      ) : (
+        <></>
+      )}
     </Hidden>
   );
 };
 
-export default withAjvProps(withTranslateProps(
-  withJsonFormsLayoutProps(MaterialCategorizationStepperLayoutRenderer
-)));
+export default withAjvProps(
+  withTranslateProps(
+    withJsonFormsLayoutProps(MaterialCategorizationStepperLayoutRenderer)
+  )
+);

package/src/layouts/MaterialGroupLayout.tsx

@@ -42,23 +42,42 @@ import { withJsonFormsLayoutProps } from '@jsonforms/react';
 export const groupTester: RankedTester = rankWith(1, uiTypeIs('Group'));
 const style: { [x: string]: any } = { marginBottom: '10px' };
 
-const GroupComponent = React.memo(({ visible, enabled, uischema, label, ...props }: MaterialLabelableLayoutRendererProps) => {
+const GroupComponent = React.memo(function GroupComponent({
+  visible,
+  enabled,
+  uischema,
+  label,
+  ...props
+}: MaterialLabelableLayoutRendererProps) {
   const groupLayout = uischema as GroupLayout;
   return (
     <Hidden xsUp={!visible}>
       <Card style={style}>
-        {!isEmpty(label) && (
-          <CardHeader title={label} />
-        )}
+        {!isEmpty(label) && <CardHeader title={label} />}
         <CardContent>
-          <MaterialLayoutRenderer {...props} visible={visible} enabled={enabled} elements={groupLayout.elements} />
+          <MaterialLayoutRenderer
+            {...props}
+            visible={visible}
+            enabled={enabled}
+            elements={groupLayout.elements}
+          />
         </CardContent>
       </Card>
     </Hidden>
   );
 });
 
-export const MaterializedGroupLayoutRenderer = ({ uischema, schema, path, visible, enabled, renderers, cells, direction, label }: LayoutProps) => {
+export const MaterializedGroupLayoutRenderer = ({
+  uischema,
+  schema,
+  path,
+  visible,
+  enabled,
+  renderers,
+  cells,
+  direction,
+  label,
+}: LayoutProps) => {
   const groupLayout = uischema as GroupLayout;
 
   return (

package/src/layouts/MaterialHorizontalLayout.tsx

@@ -33,7 +33,7 @@ import {
 import { withJsonFormsLayoutProps } from '@jsonforms/react';
 import {
   MaterialLayoutRenderer,
-  MaterialLayoutRendererProps
+  MaterialLayoutRendererProps,
 } from '../util/layout';
 
 /**
@@ -45,7 +45,15 @@ export const materialHorizontalLayoutTester: RankedTester = rankWith(
   uiTypeIs('HorizontalLayout')
 );
 
-export const MaterialHorizontalLayoutRenderer = ({ uischema, renderers, cells, schema, path, enabled, visible }: LayoutProps) => {
+export const MaterialHorizontalLayoutRenderer = ({
+  uischema,
+  renderers,
+  cells,
+  schema,
+  path,
+  enabled,
+  visible,
+}: LayoutProps) => {
   const layout = uischema as HorizontalLayout;
   const childProps: MaterialLayoutRendererProps = {
     elements: layout.elements,
@@ -53,10 +61,16 @@ export const MaterialHorizontalLayoutRenderer = ({ uischema, renderers, cells, s
     path,
     enabled,
     direction: 'row',
-    visible
+    visible,
   };
 
-  return <MaterialLayoutRenderer {...childProps} renderers={renderers} cells={cells} />;
+  return (
+    <MaterialLayoutRenderer
+      {...childProps}
+      renderers={renderers}
+      cells={cells}
+    />
+  );
 };
 
 export default withJsonFormsLayoutProps(MaterialHorizontalLayoutRenderer);

package/src/layouts/MaterialVerticalLayout.tsx

@@ -32,7 +32,7 @@ import {
 } from '@jsonforms/core';
 import {
   MaterialLayoutRenderer,
-  MaterialLayoutRendererProps
+  MaterialLayoutRendererProps,
 } from '../util/layout';
 import { withJsonFormsLayoutProps } from '@jsonforms/react';
 
@@ -45,7 +45,15 @@ export const materialVerticalLayoutTester: RankedTester = rankWith(
   uiTypeIs('VerticalLayout')
 );
 
-export const MaterialVerticalLayoutRenderer = ({ uischema, schema, path, enabled, visible, renderers, cells }: LayoutProps) => {
+export const MaterialVerticalLayoutRenderer = ({
+  uischema,
+  schema,
+  path,
+  enabled,
+  visible,
+  renderers,
+  cells,
+}: LayoutProps) => {
   const verticalLayout = uischema as VerticalLayout;
   const childProps: MaterialLayoutRendererProps = {
     elements: verticalLayout.elements,
@@ -53,10 +61,16 @@ export const MaterialVerticalLayoutRenderer = ({ uischema, schema, path, enabled
     path,
     enabled,
     direction: 'column',
-    visible
+    visible,
   };
 
-  return <MaterialLayoutRenderer {...childProps} renderers={renderers} cells={cells} />;
+  return (
+    <MaterialLayoutRenderer
+      {...childProps}
+      renderers={renderers}
+      cells={cells}
+    />
+  );
 };
 
 export default withJsonFormsLayoutProps(MaterialVerticalLayoutRenderer);

package/src/layouts/index.ts

@@ -22,25 +22,34 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
+import ExpandPanelRenderer, {
+  ctxDispatchToExpandPanelProps,
+  withContextToExpandPanelProps,
+  withJsonFormsExpandPanelProps,
+} from './ExpandPanelRenderer';
 import MaterialGroupLayout, {
-  materialGroupTester
+  materialGroupTester,
 } from './MaterialGroupLayout';
 import MaterialHorizontalLayout, {
-  materialHorizontalLayoutTester
+  materialHorizontalLayoutTester,
 } from './MaterialHorizontalLayout';
 import MaterialVerticalLayout, {
-  materialVerticalLayoutTester
+  materialVerticalLayoutTester,
 } from './MaterialVerticalLayout';
 import MaterialCategorizationLayout, {
-  materialCategorizationTester
+  materialCategorizationTester,
 } from './MaterialCategorizationLayout';
 import MaterialArrayLayout, {
-  materialArrayLayoutTester
+  materialArrayLayoutTester,
 } from './MaterialArrayLayoutRenderer';
 
 export {
-  materialArrayLayoutTester,
+  ExpandPanelRenderer,
+  ctxDispatchToExpandPanelProps,
+  withContextToExpandPanelProps,
+  withJsonFormsExpandPanelProps,
   MaterialArrayLayout,
+  materialArrayLayoutTester,
   MaterialCategorizationLayout,
   materialCategorizationTester,
   MaterialGroupLayout,
@@ -48,5 +57,7 @@ export {
   MaterialHorizontalLayout,
   materialHorizontalLayoutTester,
   MaterialVerticalLayout,
-  materialVerticalLayoutTester
+  materialVerticalLayoutTester,
 };
+
+export * from './ArrayToolbar';

package/src/layouts/unwrapped.ts

@@ -0,0 +1,41 @@
+/*
+  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 { ExpandPanelRenderer as ExpandPanelRendererUnwrapped } from './ExpandPanelRenderer';
+import { MaterializedGroupLayoutRenderer } from './MaterialGroupLayout';
+import { MaterialHorizontalLayoutRenderer } from './MaterialHorizontalLayout';
+import { MaterialVerticalLayoutRenderer } from './MaterialVerticalLayout';
+import { MaterialCategorizationLayoutRenderer } from './MaterialCategorizationLayout';
+import { MaterialArrayLayoutRenderer } from './MaterialArrayLayoutRenderer';
+
+export const UnwrappedLayouts = {
+  ExpandPanelRenderer: ExpandPanelRendererUnwrapped,
+  MaterialArrayLayout: MaterialArrayLayoutRenderer,
+  MaterialCategorizationLayout: MaterialCategorizationLayoutRenderer,
+  MaterialGroupLayout: MaterializedGroupLayoutRenderer,
+  MaterialHorizontalLayout: MaterialHorizontalLayoutRenderer,
+  MaterialVerticalLayout: MaterialVerticalLayoutRenderer,
+};
+
+export * from './ArrayToolbar';

package/src/mui-controls/MuiAutocomplete.tsx

@@ -23,7 +23,13 @@
   THE SOFTWARE.
 */
 import React, { ReactNode } from 'react';
-import { ControlProps, EnumCellProps, EnumOption, isDescriptionHidden, WithClassname } from '@jsonforms/core';
+import {
+  ControlProps,
+  EnumCellProps,
+  EnumOption,
+  isDescriptionHidden,
+  WithClassname,
+} from '@jsonforms/core';
 
 import {
   Autocomplete,
@@ -31,18 +37,27 @@ import {
   FilterOptionsState,
   FormHelperText,
   Hidden,
-  TextField
+  TextField,
 } from '@mui/material';
 import merge from 'lodash/merge';
 import { useFocus } from '../util/focus';
 
 export interface WithOptionLabel {
-  getOptionLabel?(option: EnumOption) : string;
-  renderOption?(props: React.HTMLAttributes<HTMLLIElement>, option: EnumOption, state: AutocompleteRenderOptionState): ReactNode;
-  filterOptions?(options: EnumOption[], state: FilterOptionsState<EnumOption>) : EnumOption[];
+  getOptionLabel?(option: EnumOption): string;
+  renderOption?(
+    props: React.HTMLAttributes<HTMLLIElement>,
+    option: EnumOption,
+    state: AutocompleteRenderOptionState
+  ): ReactNode;
+  filterOptions?(
+    options: EnumOption[],
+    state: FilterOptionsState<EnumOption>
+  ): EnumOption[];
 }
 
-export const MuiAutocomplete = (props: ControlProps & EnumCellProps & WithClassname & WithOptionLabel) => {
+export const MuiAutocomplete = (
+  props: ControlProps & EnumCellProps & WithClassname & WithOptionLabel
+) => {
   const {
     description,
     errors,
@@ -61,21 +76,21 @@ export const MuiAutocomplete = (props: ControlProps & EnumCellProps & WithClassn
     getOptionLabel,
     renderOption,
     filterOptions,
-    isValid
+    isValid,
   } = props;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
   const [inputValue, setInputValue] = React.useState(data ?? '');
   const [focused, onFocus, onBlur] = useFocus();
 
-  const findOption = options.find(o => o.value === data) ?? null;
-  
+  const findOption = options.find((o) => o.value === data) ?? null;
+
   const showDescription = !isDescriptionHidden(
     visible,
     description,
     focused,
     appliedUiSchemaOptions.showUnfocusedDescription
   );
-  
+
   const firstFormHelperText = showDescription
     ? description
     : !isValid
@@ -102,38 +117,39 @@ export const MuiAutocomplete = (props: ControlProps & EnumCellProps & WithClassn
         autoComplete
         fullWidth
         options={options}
-        getOptionLabel={getOptionLabel || (option => option?.label)}
+        getOptionLabel={getOptionLabel || ((option) => option?.label)}
         freeSolo={false}
-        renderInput={params => { 
-          return(
-          <TextField
-            label={label} 
-            variant={'standard'}
-            type='text'
-            inputProps={params.inputProps}
-            inputRef={params.InputProps.ref}
-            autoFocus={appliedUiSchemaOptions.focus}
-            disabled={!enabled}
-            {...params}
-            id={id + '-input'}
-            required={required && !appliedUiSchemaOptions.hideRequiredAsterisk}
-            error={!isValid}
-            fullWidth={!appliedUiSchemaOptions.trim}
-            InputLabelProps={data ? { shrink: true } : undefined}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            focused={focused}
-          />
-        )}}
+        renderInput={(params) => {
+          return (
+            <TextField
+              label={label}
+              variant={'standard'}
+              type='text'
+              inputProps={params.inputProps}
+              inputRef={params.InputProps.ref}
+              autoFocus={appliedUiSchemaOptions.focus}
+              disabled={!enabled}
+              {...params}
+              id={id + '-input'}
+              required={
+                required && !appliedUiSchemaOptions.hideRequiredAsterisk
+              }
+              error={!isValid}
+              fullWidth={!appliedUiSchemaOptions.trim}
+              InputLabelProps={data ? { shrink: true } : undefined}
+              onFocus={onFocus}
+              onBlur={onBlur}
+              focused={focused}
+            />
+          );
+        }}
         renderOption={renderOption}
         filterOptions={filterOptions}
       />
       <FormHelperText error={!isValid && !showDescription}>
         {firstFormHelperText}
       </FormHelperText>
-      <FormHelperText error={!isValid}>
-        {secondFormHelperText}
-      </FormHelperText>
+      <FormHelperText error={!isValid}>{secondFormHelperText}</FormHelperText>
     </Hidden>
   );
 };

package/src/mui-controls/MuiCheckbox.tsx

@@ -31,7 +31,9 @@ interface MuiCheckboxInputProps {
   inputProps?: InputProps['inputProps'];
 }
 
-export const MuiCheckbox = React.memo((props: CellProps & WithClassname & MuiCheckboxInputProps) => {
+export const MuiCheckbox = React.memo(function MuiCheckbox(
+  props: CellProps & WithClassname & MuiCheckboxInputProps
+) {
   const {
     data,
     className,
@@ -41,11 +43,11 @@ export const MuiCheckbox = React.memo((props: CellProps & WithClassname & MuiChe
     path,
     handleChange,
     config,
-    inputProps
+    inputProps,
   } = props;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
   const inputPropsMerged = merge({}, inputProps, {
-    autoFocus: !!appliedUiSchemaOptions.focus
+    autoFocus: !!appliedUiSchemaOptions.focus,
   });
   // !! causes undefined value to be converted to false, otherwise has no effect
   const checked = !!data;

package/src/mui-controls/MuiInputInteger.tsx

@@ -29,38 +29,37 @@ import merge from 'lodash/merge';
 import { useDebouncedChange } from '../util';
 
 const toNumber = (value: string) =>
-      value === '' ? undefined : parseInt(value, 10);
-const eventToValue = (ev:any) => toNumber(ev.target.value);
+  value === '' ? undefined : parseInt(value, 10);
+const eventToValue = (ev: any) => toNumber(ev.target.value);
 
-export const MuiInputInteger = React.memo( 
-  (props: CellProps & WithClassname) => {
-    const {
-      data,
-      className,
-      id,
-      enabled,
-      uischema,
-      path,
-      handleChange,
-      config
-    } = props;
-    const inputProps = { step: '1' };
-    
-    const appliedUiSchemaOptions = merge({}, config, uischema.options);
+export const MuiInputInteger = React.memo(function MuiInputInteger(
+  props: CellProps & WithClassname
+) {
+  const { data, className, id, enabled, uischema, path, handleChange, config } =
+    props;
+  const inputProps = { step: '1' };
 
-    const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path, eventToValue);
+  const appliedUiSchemaOptions = merge({}, config, uischema.options);
 
-    return (
-      <Input
-        type='number'
-        value={inputValue}
-        onChange={onChange}
-        className={className}
-        id={id}
-        disabled={!enabled}
-        autoFocus={appliedUiSchemaOptions.focus}
-        inputProps={inputProps}
-        fullWidth={true}
-      />
-    );
-  });
+  const [inputValue, onChange] = useDebouncedChange(
+    handleChange,
+    '',
+    data,
+    path,
+    eventToValue
+  );
+
+  return (
+    <Input
+      type='number'
+      value={inputValue}
+      onChange={onChange}
+      className={className}
+      id={id}
+      disabled={!enabled}
+      autoFocus={appliedUiSchemaOptions.focus}
+      inputProps={inputProps}
+      fullWidth={true}
+    />
+  );
+});

package/src/mui-controls/MuiInputNumber.tsx

@@ -26,26 +26,26 @@ import React from 'react';
 import { CellProps, WithClassname } from '@jsonforms/core';
 import { Input } from '@mui/material';
 import merge from 'lodash/merge';
-import {useDebouncedChange} from '../util';
+import { useDebouncedChange } from '../util';
 
 const toNumber = (value: string) =>
-    value === '' ? undefined : parseFloat(value);
-const eventToValue = (ev:any) => toNumber(ev.target.value);
-export const MuiInputNumber = React.memo((props: CellProps & WithClassname) => {
-  const {
-    data,
-    className,
-    id,
-    enabled,
-    uischema,
-    path,
-    handleChange,
-    config
-  } = props;
+  value === '' ? undefined : parseFloat(value);
+const eventToValue = (ev: any) => toNumber(ev.target.value);
+export const MuiInputNumber = React.memo(function MuiInputNumber(
+  props: CellProps & WithClassname
+) {
+  const { data, className, id, enabled, uischema, path, handleChange, config } =
+    props;
   const inputProps = { step: '0.1' };
-  
+
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
-  const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path, eventToValue);
+  const [inputValue, onChange] = useDebouncedChange(
+    handleChange,
+    '',
+    data,
+    path,
+    eventToValue
+  );
 
   return (
     <Input