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

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/{lib/cells/MaterialNumberCell.js → src/util/debounce.ts}

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
 /*
   The MIT License
   
-  Copyright (c) 2017-2019 EclipseSource Munich
+  Copyright (c) 2021 EclipseSource Munich
   https://github.com/eclipsesource/jsonforms
   
   Permission is hereby granted, free of charge, to any person obtaining a copy
@@ -25,15 +22,22 @@ var tslib_1 = require("tslib");
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-var react_1 = tslib_1.__importDefault(require("react"));
-var core_1 = require("@jsonforms/core");
-var react_2 = require("@jsonforms/react");
-var MuiInputNumber_1 = require("../mui-controls/MuiInputNumber");
-exports.MaterialNumberCell = function (props) { return (react_1.default.createElement(MuiInputNumber_1.MuiInputNumber, tslib_1.__assign({}, props))); };
-/**
- * Default tester for number controls.
- * @type {RankedTester}
- */
-exports.materialNumberCellTester = core_1.rankWith(2, core_1.isNumberControl);
-exports.default = react_2.withJsonFormsCellProps(exports.MaterialNumberCell);
-//# sourceMappingURL=MaterialNumberCell.js.map
+import debounce from 'lodash/debounce';
+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/{lib/util/index.js → src/util/focus.ts}

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
 /*
   The MIT License
   
-  Copyright (c) 2017-2019 EclipseSource Munich
+  Copyright (c) 2021 EclipseSource Munich
   https://github.com/eclipsesource/jsonforms
   
   Permission is hereby granted, free of charge, to any person obtaining a copy
@@ -25,5 +22,11 @@ var tslib_1 = require("tslib");
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-tslib_1.__exportStar(require("./layout"), exports);
-//# sourceMappingURL=index.js.map
+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';

package/src/util/layout.tsx

@@ -25,17 +25,17 @@
 import isEmpty from 'lodash/isEmpty';
 import React from 'react';
 import { ComponentType } from 'react';
-import { Ajv } from 'ajv';
+import Ajv from 'ajv';
+import type { UISchemaElement } from '@jsonforms/core';
 import {
   getAjv,
   JsonFormsCellRendererRegistryEntry,
   JsonFormsRendererRegistryEntry,
   JsonSchema,
   OwnPropsOfRenderer,
-  UISchemaElement
 } from '@jsonforms/core';
-import { areEqual, JsonFormsDispatch, useJsonForms } from '@jsonforms/react';
-import { Grid, Hidden } from '@material-ui/core';
+import { JsonFormsDispatch, useJsonForms } from '@jsonforms/react';
+import { Grid, Hidden } from '@mui/material';
 
 export const renderLayoutElements = (
   elements: UISchemaElement[],
@@ -63,7 +63,7 @@ export interface MaterialLayoutRendererProps extends OwnPropsOfRenderer {
   elements: UISchemaElement[];
   direction: 'row' | 'column';
 }
-export const MaterialLayoutRenderer = React.memo(
+const MaterialLayoutRendererComponent =
   ({
     visible,
     elements,
@@ -96,9 +96,8 @@ export const MaterialLayoutRenderer = React.memo(
         </Hidden>
       );
     }
-  },
-  areEqual
-);
+  };
+export const MaterialLayoutRenderer = React.memo(MaterialLayoutRendererComponent);
 
 export interface AjvProps {
   ajv: Ajv;

package/src/util/theme.ts

@@ -22,7 +22,7 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import { Theme } from '@material-ui/core/styles';
+import { Theme } from '@mui/material';
 
 export interface JsonFormsTheme extends Theme {
   jsonforms?: {