@jsonforms/material-renderers 2.5.2 → 3.0.0-alpha.3

package/src/layouts/MaterialCategorizationStepperLayout.tsx

@@ -22,9 +22,9 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import React from 'react';
+import React, {useState} from 'react';
 import merge from 'lodash/merge';
-import { Button, Hidden, Step, StepButton, Stepper } from '@material-ui/core';
+import { Button, Hidden, Step, StepButton, Stepper } from '@mui/material';
 import {
   and,
   Categorization,
@@ -37,7 +37,7 @@ import {
   StatePropsOfLayout,
   uiTypeIs
 } from '@jsonforms/core';
-import { RendererComponent, withJsonFormsLayoutProps } from '@jsonforms/react';
+import { withJsonFormsLayoutProps } from '@jsonforms/react';
 import {
   AjvProps,
   MaterialLayoutRenderer,
@@ -63,94 +63,86 @@ export interface MaterialCategorizationStepperLayoutRendererProps
     data: any;
 }
 
-export class MaterialCategorizationStepperLayoutRenderer extends RendererComponent<
-  MaterialCategorizationStepperLayoutRendererProps,
-  CategorizationStepperState
-> {
-  state = {
-    activeCategory: 0
-  };
+export const MaterialCategorizationStepperLayoutRenderer = (props: MaterialCategorizationStepperLayoutRendererProps)=> {
+  const [activeCategory, setActiveCategory] = useState<number>(0);
 
-  handleStep = (step: number) => {
-    this.setState({ activeCategory: step });
+  const handleStep = (step: number) => {
+    setActiveCategory( step);
   };
 
-  render() {
-    const {
-      data,
-      path,
-      renderers,
-      schema,
-      uischema,
-      visible,
-      cells,
-      config,
-      ajv
-    } = this.props;
-    const categorization = uischema as Categorization;
-    const activeCategory = this.state.activeCategory;
-    const appliedUiSchemaOptions = merge({}, config, uischema.options);
-    const buttonWrapperStyle = {
-      textAlign: 'right' as 'right',
-      width: '100%',
-      margin: '1em auto'
-    };
-    const buttonNextStyle = {
-      float: 'right' as 'right'
-    };
-    const buttonStyle = {
-      marginRight: '1em'
-    };
-    const childProps: MaterialLayoutRendererProps = {
-      elements: categorization.elements[activeCategory].elements,
-      schema,
-      path,
-      direction: 'column',
-      visible,
-      renderers,
-      cells
-    };
-    const categories = categorization.elements.filter((category: Category) =>
-      isVisible(category, data, undefined, ajv)
-    );
-    return (
-      <Hidden xsUp={!visible}>
-        <Stepper activeStep={activeCategory} nonLinear>
-          {categories.map((e: Category, idx: number) => (
-            <Step key={e.label}>
-              <StepButton onClick={() => this.handleStep(idx)}>
-                {e.label}
-              </StepButton>
-            </Step>
-          ))}
-        </Stepper>
-        <div>
-          <MaterialLayoutRenderer {...childProps} />
-        </div>
-        { !!appliedUiSchemaOptions.showNavButtons ? (<div style={buttonWrapperStyle}>
-          <Button
-            style={buttonNextStyle}
-            variant="contained"
-            color="primary"
-            disabled={activeCategory >= categories.length - 1}
-            onClick={() => this.handleStep(activeCategory + 1)}
-          >
-            Next
-          </Button>
-          <Button
-            style={buttonStyle}
-            color="secondary"
-            variant="contained"
-            disabled={activeCategory <= 0}
-            onClick={() => this.handleStep(activeCategory - 1)}
-          >
-            Previous
-          </Button>
-        </div>) : (<></>)}
-      </Hidden>
-    );
-  }
-}
+  const {
+    data,
+    path,
+    renderers,
+    schema,
+    uischema,
+    visible,
+    cells,
+    config,
+    ajv
+  } = props;
+  const categorization = uischema as Categorization;
+  const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  const buttonWrapperStyle = {
+    textAlign: 'right' as 'right',
+    width: '100%',
+    margin: '1em auto'
+  };
+  const buttonNextStyle = {
+    float: 'right' as 'right'
+  };
+  const buttonStyle = {
+    marginRight: '1em'
+  };
+  const categories = categorization.elements.filter((category: Category) =>
+    isVisible(category, data, undefined, ajv)
+  );
+  const childProps: MaterialLayoutRendererProps = {
+    elements: categories[activeCategory].elements,
+    schema,
+    path,
+    direction: 'column',
+    visible,
+    renderers,
+    cells
+  };
+  return (
+    <Hidden xsUp={!visible}>
+      <Stepper activeStep={activeCategory} nonLinear>
+        {categories.map((e: Category, idx: number) => (
+          <Step key={e.label}>
+            <StepButton onClick={() => handleStep(idx)}>
+              {e.label}
+            </StepButton>
+          </Step>
+        ))}
+      </Stepper>
+      <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>) : (<></>)}
+    </Hidden>
+  );
+};
 
 export default withJsonFormsLayoutProps(withAjvProps(
   MaterialCategorizationStepperLayoutRenderer

package/src/layouts/MaterialGroupLayout.tsx

@@ -24,7 +24,7 @@
 */
 import isEmpty from 'lodash/isEmpty';
 import React from 'react';
-import { Card, CardContent, CardHeader, Hidden } from '@material-ui/core';
+import { Card, CardContent, CardHeader, Hidden } from '@mui/material';
 import {
   GroupLayout,
   LayoutProps,

package/src/mui-controls/MuiCheckbox.tsx

@@ -24,8 +24,7 @@
 */
 import React from 'react';
 import { CellProps, WithClassname } from '@jsonforms/core';
-import Checkbox from '@material-ui/core/Checkbox';
-import { areEqual } from '@jsonforms/react';
+import { Checkbox } from '@mui/material';
 import merge from 'lodash/merge';
 
 export const MuiCheckbox = React.memo((props: CellProps & WithClassname) => {
@@ -54,4 +53,4 @@ export const MuiCheckbox = React.memo((props: CellProps & WithClassname) => {
       inputProps={inputProps}
     />
   );
-}, areEqual);
+});

package/src/mui-controls/MuiInputInteger.tsx

@@ -24,11 +24,15 @@
 */
 import React from 'react';
 import { CellProps, WithClassname } from '@jsonforms/core';
-import Input from '@material-ui/core/Input';
-import { areEqual } from '@jsonforms/react';
+import { Input } from '@mui/material';
 import merge from 'lodash/merge';
+import { useDebouncedChange } from '../util';
 
-export const MuiInputInteger = React.memo(
+const toNumber = (value: string) =>
+      value === '' ? undefined : parseInt(value, 10);
+const eventToValue = (ev:any) => toNumber(ev.target.value);
+
+export const MuiInputInteger = React.memo( 
   (props: CellProps & WithClassname) => {
     const {
       data,
@@ -41,15 +45,16 @@ export const MuiInputInteger = React.memo(
       config
     } = props;
     const inputProps = { step: '1' };
-    const toNumber = (value: string) =>
-      value === '' ? undefined : parseInt(value, 10);
+    
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
 
+    const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path, eventToValue);
+
     return (
       <Input
         type='number'
-        value={data !== undefined && data !== null ? data : ''}
-        onChange={ev => handleChange(path, toNumber(ev.target.value))}
+        value={inputValue}
+        onChange={onChange}
         className={className}
         id={id}
         disabled={!enabled}
@@ -58,6 +63,4 @@ export const MuiInputInteger = React.memo(
         fullWidth={true}
       />
     );
-  },
-  areEqual
-);
+  });

package/src/mui-controls/MuiInputNumber.tsx

@@ -24,10 +24,13 @@
 */
 import React from 'react';
 import { CellProps, WithClassname } from '@jsonforms/core';
-import Input from '@material-ui/core/Input';
-import { areEqual } from '@jsonforms/react';
+import { Input } from '@mui/material';
 import merge from 'lodash/merge';
+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,
@@ -40,15 +43,15 @@ export const MuiInputNumber = React.memo((props: CellProps & WithClassname) => {
     config
   } = props;
   const inputProps = { step: '0.1' };
-  const toNumber = (value: string) =>
-    value === '' ? undefined : parseFloat(value);
+  
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path, eventToValue);
 
   return (
     <Input
       type='number'
-      value={data === undefined || data === null ? '' : data}
-      onChange={ev => handleChange(path, toNumber(ev.target.value))}
+      value={inputValue}
+      onChange={onChange}
       className={className}
       id={id}
       disabled={!enabled}
@@ -57,4 +60,4 @@ export const MuiInputNumber = React.memo((props: CellProps & WithClassname) => {
       fullWidth={true}
     />
   );
-}, areEqual);
+});

package/src/mui-controls/MuiInputNumberFormat.tsx

@@ -22,13 +22,13 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import React from 'react';
+import React, {useCallback} from 'react';
 import { CellProps, Formatted, WithClassname } from '@jsonforms/core';
-import Input from '@material-ui/core/Input';
-import { areEqual } from '@jsonforms/react';
+import { Input } from '@mui/material';
 import merge from 'lodash/merge';
+import { useDebouncedChange } from '../util';
 
-export const MuiInputNumberFormat = React.memo(
+export const MuiInputNumberFormat = React.memo( 
   (props: CellProps & WithClassname & Formatted<number>) => {
     const {
       className,
@@ -51,15 +51,14 @@ export const MuiInputNumberFormat = React.memo(
     }
     const formattedNumber = props.toFormatted(props.data);
 
-    const onChange = (ev: any) => {
-      const validStringNumber = props.fromFormatted(ev.currentTarget.value);
-      handleChange(path, validStringNumber);
-    };
+    const validStringNumber = useCallback((ev:any) => props.fromFormatted(ev.currentTarget.value),[props.fromFormatted]);
+    const [inputValue, onChange] = useDebouncedChange(handleChange, '', formattedNumber, path, validStringNumber);
+
 
     return (
       <Input
         type='text'
-        value={formattedNumber}
+        value={inputValue}
         onChange={onChange}
         className={className}
         id={id}
@@ -71,6 +70,4 @@ export const MuiInputNumberFormat = React.memo(
         error={!isValid}
       />
     );
-  },
-  areEqual
-);
+  });

package/src/mui-controls/MuiInputText.tsx

@@ -24,22 +24,23 @@
 */
 import React, { useState } from 'react';
 import { CellProps, WithClassname } from '@jsonforms/core';
-import { areEqual } from '@jsonforms/react';
-import Input, { InputProps } from '@material-ui/core/Input';
+import {
+  IconButton,
+  Input,
+  InputAdornment,
+  InputBaseComponentProps,
+  InputProps,
+  useTheme
+} from '@mui/material';
 import merge from 'lodash/merge';
-import IconButton from '@material-ui/core/IconButton';
-import InputAdornment from '@material-ui/core/InputAdornment';
-import Close from '@material-ui/icons/Close';
-import { useTheme } from '@material-ui/core/styles';
-import { JsonFormsTheme } from '../util';
-import { InputBaseComponentProps } from '@material-ui/core';
+import Close from '@mui/icons-material/Close';
+import { JsonFormsTheme, useDebouncedChange } from '../util';
 
 interface MuiTextInputProps {
   muiInputProps?: InputProps['inputProps'];
   inputComponent?: InputProps['inputComponent'];
 }
-
-export const MuiInputText = React.memo((props: CellProps & WithClassname & MuiTextInputProps) => {
+export const MuiInputText = React.memo((props: CellProps & WithClassname & MuiTextInputProps) => { 
   const [showAdornment, setShowAdornment] = useState(false);
   const {
     data,
@@ -63,23 +64,30 @@ export const MuiInputText = React.memo((props: CellProps & WithClassname & MuiTe
   } else {
     inputProps = {};
   }
-
+  
   inputProps = merge(inputProps, muiInputProps);
-
+  
   if (appliedUiSchemaOptions.trim && maxLength !== undefined) {
     inputProps.size = maxLength;
-  }
-  const onChange = (ev: any) => handleChange(path, ev.target.value);
+  };
+  
+  const [inputText, onChange, onClear] = useDebouncedChange(handleChange, '', data, path);
+  const onPointerEnter = () => setShowAdornment(true);
+  const onPointerLeave = () => setShowAdornment(false);
 
   const theme: JsonFormsTheme = useTheme();
-  const inputDeleteBackgroundColor = theme.jsonforms?.input?.delete?.background || theme.palette.background.default;
+  
+  const closeStyle = {
+    background: theme.jsonforms?.input?.delete?.background || theme.palette.background.default,
+    borderRadius: '50%'
+  };
 
   return (
     <Input
       type={
         appliedUiSchemaOptions.format === 'password' ? 'password' : 'text'
       }
-      value={data || ''}
+      value={inputText}
       onChange={onChange}
       className={className}
       id={id}
@@ -89,8 +97,8 @@ export const MuiInputText = React.memo((props: CellProps & WithClassname & MuiTe
       fullWidth={!appliedUiSchemaOptions.trim || maxLength === undefined}
       inputProps={inputProps}
       error={!isValid}
-      onPointerEnter={() => setShowAdornment(true) }
-      onPointerLeave={() => setShowAdornment(false) }
+      onPointerEnter={onPointerEnter}
+      onPointerLeave={onPointerLeave}
       endAdornment={
         <InputAdornment
           position='end'
@@ -103,13 +111,14 @@ export const MuiInputText = React.memo((props: CellProps & WithClassname & MuiTe
         >
           <IconButton
             aria-label='Clear input field'
-            onClick={() => handleChange(path, undefined)}   
+            onClick={onClear}   
+            size='large'
           >
-            <Close style={{background: inputDeleteBackgroundColor, borderRadius: '50%'}}/>
+            <Close style={closeStyle}/>
           </IconButton>
         </InputAdornment>
       }
       inputComponent={inputComponent}
     />
   );
-}, areEqual);
+});

package/src/mui-controls/MuiInputTime.tsx

@@ -24,9 +24,9 @@
 */
 import React from 'react';
 import { CellProps, WithClassname } from '@jsonforms/core';
-import Input from '@material-ui/core/Input';
-import { areEqual } from '@jsonforms/react';
+import { Input } from '@mui/material';
 import merge from 'lodash/merge';
+import { useDebouncedChange } from '../util';
 
 export const MuiInputTime = React.memo((props: CellProps & WithClassname) => {
   const {
@@ -40,11 +40,13 @@ export const MuiInputTime = React.memo((props: CellProps & WithClassname) => {
     config
   } = props;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path);
+
   return (
     <Input
       type='time'
-      value={data || ''}
-      onChange={ev => handleChange(path, ev.target.value)}
+      value={inputValue}
+      onChange={onChange}
       className={className}
       id={id}
       disabled={!enabled}
@@ -52,4 +54,4 @@ export const MuiInputTime = React.memo((props: CellProps & WithClassname) => {
       fullWidth={true}
     />
   );
-}, areEqual);
+});

package/src/mui-controls/MuiSelect.tsx

@@ -25,9 +25,7 @@
 import React from 'react';
 import { EnumCellProps, WithClassname } from '@jsonforms/core';
 
-import Select from '@material-ui/core/Select';
-import { MenuItem } from '@material-ui/core';
-import { areEqual } from '@jsonforms/react';
+import { MenuItem, Select } from '@mui/material';
 import merge from 'lodash/merge';
 
 export const MuiSelect = React.memo((props: EnumCellProps & WithClassname) => {
@@ -50,9 +48,10 @@ export const MuiSelect = React.memo((props: EnumCellProps & WithClassname) => {
       id={id}
       disabled={!enabled}
       autoFocus={appliedUiSchemaOptions.focus}
-      value={data || ''}
+      value={data !== undefined ? data : ''}
       onChange={ev => handleChange(path, ev.target.value)}
       fullWidth={true}
+      variant={'standard'}
     >
       {[<MenuItem value='' key={'empty'} />].concat(
         options.map(optionValue => (
@@ -63,4 +62,4 @@ export const MuiSelect = React.memo((props: EnumCellProps & WithClassname) => {
       )}
     </Select>
   );
-}, areEqual);
+});

package/src/mui-controls/MuiToggle.tsx

@@ -24,8 +24,7 @@
 */
 import React from 'react';
 import { CellProps, WithClassname } from '@jsonforms/core';
-import Switch from '@material-ui/core/Switch';
-import { areEqual } from '@jsonforms/react';
+import { Switch } from '@mui/material';
 import merge from 'lodash/merge';
 
 export const MuiToggle = React.memo((props: CellProps & WithClassname) => {
@@ -53,4 +52,4 @@ export const MuiToggle = React.memo((props: CellProps & WithClassname) => {
       inputProps={inputProps}
     />
   );
-}, areEqual);
+});

package/src/util/datejs.ts

@@ -0,0 +1,32 @@
+import dayjs from 'dayjs';
+import customParsing from 'dayjs/plugin/customParseFormat';
+
+// required for the custom save formats in the date, time and date-time pickers
+dayjs.extend(customParsing);
+
+export const createOnChangeHandler = (
+  path: string,
+  handleChange: (path: string, value: any) => void,
+  saveFormat: string | undefined
+) => (time: dayjs.Dayjs) => {
+  if (!time) {
+    handleChange(path, undefined);
+    return;
+  }
+  const result = dayjs(time).format(saveFormat);
+  handleChange(path, result === 'Invalid Date' ? undefined : result);
+};
+
+export const getData = (
+  data: any,
+  saveFormat: string | undefined
+): dayjs.Dayjs | null => {
+  if (!data) {
+    return null;
+  }
+  const dayjsData = dayjs(data, saveFormat);
+  if (dayjsData.toString() === 'Invalid Date') {
+    return null;
+  }
+  return dayjsData;
+};

package/src/util/debounce.ts

@@ -0,0 +1,43 @@
+/*
+  The MIT License
+  
+  Copyright (c) 2021 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 { debounce } from 'lodash';
+import { useState, useCallback, useEffect } from 'react'
+
+
+const eventToValue = (ev: any) => ev.target.value;
+export const useDebouncedChange = (handleChange: (path: string, value: any) => void, defaultValue: any, data: any, path: string, eventToValueFunction: (ev: any) => any = eventToValue, timeout = 300): [any, React.ChangeEventHandler, () => void] => {
+  const [input, setInput] = useState(data ?? defaultValue);
+  useEffect(() => {
+    setInput(data ?? defaultValue);
+  }, [data]);
+  const debouncedUpdate = useCallback(debounce((newValue: string) => handleChange(path, newValue), timeout), [handleChange, path, timeout]);
+  const onChange = useCallback((ev: any) => {
+    const newValue = eventToValueFunction(ev);
+    setInput(newValue ?? defaultValue);
+    debouncedUpdate(newValue);
+  }, [debouncedUpdate, eventToValueFunction]);
+  const onClear = useCallback(() => { setInput(defaultValue); handleChange(path, undefined) }, [defaultValue, handleChange, path]);
+  return [input, onChange, onClear];
+};

package/src/util/focus.ts

@@ -0,0 +1,32 @@
+/*
+  The MIT License
+  
+  Copyright (c) 2021 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 {useState, useCallback} from 'react';
+
+export const useFocus = ():[boolean, () => void, () => void] => {
+    const [focused, setFocused] = useState(false);
+    const onFocus = useCallback(() => setFocused(true), []);
+    const onBlur = useCallback(() => setFocused(false), []);
+    return [focused, onFocus, onBlur];
+};

package/src/util/index.ts

@@ -22,5 +22,8 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
+export * from './datejs';
 export * from './layout';
 export * from './theme';
+export * from './debounce';
+export * from './focus';