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

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

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/{test/renderers/util.ts → src/layouts/unwrapped.ts}

@@ -1,19 +1,19 @@
 /*
   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
@@ -22,29 +22,20 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-
-import {
-  createAjv,
-  JsonSchema,
-  TesterContext,
-  UISchemaElement
-} from '@jsonforms/core';
-import { JsonFormsReactProps, useJsonForms } from '@jsonforms/react';
-import React from 'react';
-
-export const initCore = (schema: JsonSchema, uischema: UISchemaElement, data?: any) => {
-  return { schema, uischema, data, ajv: createAjv() };
-};
-
-export const TestEmitter : React.FC<JsonFormsReactProps> = ({onChange}) => {
-  const ctx = useJsonForms();
-  const { data, errors } = ctx.core;
-  React.useEffect(() => {
-    onChange({ data, errors });
-  }, [data, errors]);
-  return null;
+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 const createTesterContext = (rootSchema: JsonSchema, config?: any): TesterContext => {
-  return { rootSchema, config };
-};
+export * from './ArrayToolbar';