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

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/{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,6 +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("./datejs"), exports);
-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

@@ -25,3 +25,5 @@
 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?: {