@jsonforms/material-renderers 2.5.2-alpha.0 → 3.0.0-alpha.2

package/src/complex/MaterialTableControl.tsx

@@ -31,7 +31,7 @@ import {
 } from '@jsonforms/react';
 import startCase from 'lodash/startCase';
 import range from 'lodash/range';
-import React, { Fragment } from 'react';
+import React, { Fragment, useMemo } from 'react';
 import {
   FormHelperText,
   Grid,
@@ -195,20 +195,19 @@ const controlWithoutLabel = (scope: string): ControlElement => ({
   label: false
 });
 
-const NonEmptyCell = (ownProps: OwnPropsOfNonEmptyCell) => {
-  const ctx = useJsonForms();
-  const {
-    path,
-    propName,
-    schema,
-    rootSchema,
-    errors,
-    enabled,
-    renderers,
-    cells
-  } = ctxToNonEmptyCellProps(ctx, ownProps);
+interface NonEmptyCellComponentProps {
+  path: string,
+  propName?: string,
+  schema: JsonSchema,
+  rootSchema: JsonSchema,
+  errors: string,
+  enabled: boolean,
+  renderers?: JsonFormsRendererRegistryEntry[],
+  cells?: JsonFormsCellRendererRegistryEntry[],
+  isValid: boolean
+}
+const NonEmptyCellComponent = React.memo(({path, propName, schema,rootSchema, errors, enabled, renderers, cells, isValid}:NonEmptyCellComponentProps) => {
 
-  const isValid = isEmpty(errors);
   return (
     <NoBorderTableCell>
       {schema.properties ? (
@@ -237,35 +236,47 @@ const NonEmptyCell = (ownProps: OwnPropsOfNonEmptyCell) => {
       <FormHelperText error={!isValid}>{!isValid && errors}</FormHelperText>
     </NoBorderTableCell>
   );
+});
+
+const NonEmptyCell = (ownProps: OwnPropsOfNonEmptyCell) => {
+  const ctx = useJsonForms();
+  const emptyCellProps = ctxToNonEmptyCellProps(ctx, ownProps);
+
+  const isValid = isEmpty(emptyCellProps.errors);
+  return <NonEmptyCellComponent {...emptyCellProps} isValid={isValid}/>
 };
 
 interface NonEmptyRowProps {
   childPath: string;
   schema: JsonSchema;
   rowIndex: number;
-  moveUp: () => void;
-  moveDown: () => void;
+  moveUpCreator: (path:string, position: number)=> ()=> void;
+  moveDownCreator: (path:string, position: number)=> ()=> void;
   enableUp: boolean;
   enableDown: boolean;
   showSortButtons: boolean;
   enabled: boolean;
   cells?: JsonFormsCellRendererRegistryEntry[];
+  path: string;
 }
 
-const NonEmptyRow = React.memo(
+const NonEmptyRowComponent = 
   ({
     childPath,
     schema,
     rowIndex,
     openDeleteDialog,
-    moveUp,
-    moveDown,
+    moveUpCreator,
+    moveDownCreator,
     enableUp,
     enableDown,
     showSortButtons,
     enabled,
-    cells
+    cells,
+    path
   }: NonEmptyRowProps & WithDeleteDialogSupport) => {
+    const moveUp = useMemo(() => moveUpCreator(path, rowIndex),[moveUpCreator, path, rowIndex]);
+    const moveDown = useMemo(() => moveDownCreator(path, rowIndex),[moveDownCreator, path, rowIndex]);
     return (
       <TableRow key={childPath} hover>
         {generateCells(NonEmptyCell, schema, childPath, enabled, cells)}
@@ -314,8 +325,8 @@ const NonEmptyRow = React.memo(
         ) : null}
       </TableRow>
     );
-  }
-);
+  };
+export const NonEmptyRow = React.memo(NonEmptyRowComponent);
 interface TableRowsProp {
   data: number;
   path: string;
@@ -359,13 +370,14 @@ const TableRows = ({
             rowIndex={index}
             schema={schema}
             openDeleteDialog={openDeleteDialog}
-            moveUp={moveUp(path, index)}
-            moveDown={moveDown(path, index)}
+            moveUpCreator={moveUp}
+            moveDownCreator={moveDown}
             enableUp={index !== 0}
             enableDown={index !== data - 1}
             showSortButtons={appliedUiSchemaOptions.showSortButtons}
             enabled={enabled}
             cells={cells}
+            path={path}
           />
         );
       })}

package/src/complex/TableToolbar.tsx

@@ -27,7 +27,6 @@ import {
   ControlElement,
   createDefaultValue,
   JsonSchema,
-  Labels
 } from '@jsonforms/core';
 import IconButton from '@material-ui/core/IconButton';
 import { Grid, Hidden, Typography } from '@material-ui/core';
@@ -40,7 +39,7 @@ import NoBorderTableCell from './NoBorderTableCell';
 export interface MaterialTableToolbarProps {
   numColumns: number;
   errors: string;
-  label: string | Labels;
+  label: string;
   path: string;
   uischema: ControlElement;
   schema: JsonSchema;

package/src/controls/MaterialAnyOfStringOrEnumControl.tsx

@@ -38,7 +38,8 @@ import { Control, withJsonFormsControlProps } from '@jsonforms/react';
 import { Input } from '@material-ui/core';
 import { InputBaseComponentProps } from '@material-ui/core/InputBase';
 import merge from 'lodash/merge';
-import React from 'react';
+import React, { useMemo } from 'react';
+import { useDebouncedChange } from '../util';
 import { MaterialInputControl } from './MaterialInputControl';
 
 const findEnumSchema = (schemas: JsonSchema[]) =>
@@ -64,17 +65,20 @@ const MuiAutocompleteInputText = (props: EnumCellProps & WithClassname) => {
   const enumSchema = findEnumSchema(schema.anyOf);
   const stringSchema = findTextSchema(schema.anyOf);
   const maxLength = stringSchema.maxLength;
-  const appliedUiSchemaOptions = merge({}, config, uischema.options);
-  let inputProps: InputBaseComponentProps = {};
-  if (appliedUiSchemaOptions.restrict) {
-    inputProps = { maxLength: maxLength };
-  }
-  if (appliedUiSchemaOptions.trim && maxLength !== undefined) {
-    inputProps.size = maxLength;
-  }
-  const onChange = (ev: any) => handleChange(path, ev.target.value);
+  const appliedUiSchemaOptions = useMemo(() => merge({}, config, uischema.options),[config, uischema.options]);
+  const inputProps: InputBaseComponentProps = useMemo(() => {
+    let propMemo: InputBaseComponentProps = {};
+    if (appliedUiSchemaOptions.restrict) {
+      propMemo = { maxLength: maxLength };
+    }
+    if (appliedUiSchemaOptions.trim && maxLength !== undefined) {
+      propMemo.size = maxLength;
+    }
+    propMemo.list = props.id + 'datalist';
+    return propMemo;
+  },[appliedUiSchemaOptions,props.id]);
+  const [inputText, onChange] = useDebouncedChange(handleChange, '', data, path);
 
-  inputProps.list = props.id + 'datalist';
   const dataList = (
     <datalist id={props.id + 'datalist'}>
       {enumSchema.enum.map(optionValue => (
@@ -85,7 +89,7 @@ const MuiAutocompleteInputText = (props: EnumCellProps & WithClassname) => {
   return (
     <Input
       type='text'
-      value={data || ''}
+      value={inputText}
       onChange={onChange}
       className={className}
       id={id}

package/src/controls/MaterialDateControl.tsx

@@ -22,137 +22,106 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import startsWith from 'lodash/startsWith';
 import merge from 'lodash/merge';
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
-  computeLabel,
-  ControlState,
-  DispatchPropsOfControl,
+  ControlProps,
   isDateControl,
   isDescriptionHidden,
-  isPlainLabel,
   RankedTester,
   rankWith,
-  StatePropsOfControl
 } from '@jsonforms/core';
-import { Control, withJsonFormsControlProps } from '@jsonforms/react';
-import { Hidden } from '@material-ui/core';
+import { withJsonFormsControlProps } from '@jsonforms/react';
+import { FormHelperText, Hidden } from '@material-ui/core';
 import KeyboardArrowLeftIcon from '@material-ui/icons/KeyboardArrowLeft';
 import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
 import EventIcon from '@material-ui/icons/Event';
-import moment from 'moment';
-import { Moment } from 'moment';
 import {
   KeyboardDatePicker,
   MuiPickersUtilsProvider
 } from '@material-ui/pickers';
-import MomentUtils from '@date-io/moment';
+import DayJsUtils from '@date-io/dayjs';
+import { createOnChangeHandler, getData, useFocus } from '../util';
 
-export interface DateControl {
-  momentLocale?: Moment;
-}
+export const MaterialDateControl = (props: ControlProps)=> {
+  const [focused, onFocus, onBlur] = useFocus();
+  const {
+    description,
+    id,
+    errors,
+    label,
+    uischema,
+    visible,
+    enabled,
+    required,
+    path,
+    handleChange,
+    data,
+    config
+  } = props;
+  const isValid = errors.length === 0;
+  const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  const showDescription = !isDescriptionHidden(
+    visible,
+    description,
+    focused,
+    appliedUiSchemaOptions.showUnfocusedDescription
+  );
 
-// Workaround typing problems in @material-ui/pickers@3.2.3
-const AnyPropsKeyboardDatePicker: React.FunctionComponent<
-  any
-> = KeyboardDatePicker;
+  const format = appliedUiSchemaOptions.dateFormat ?? 'YYYY-MM-DD';
+  const saveFormat = appliedUiSchemaOptions.dateSaveFormat ?? 'YYYY-MM-DD';
 
-export class MaterialDateControl extends Control<
-  StatePropsOfDateControl & DispatchPropsOfControl & DateControl,
-  ControlState
-> {
-  render() {
-    const {
-      description,
-      id,
-      errors,
-      label,
-      uischema,
-      visible,
-      enabled,
-      required,
-      path,
-      handleChange,
-      data,
-      momentLocale,
-      config
-    } = this.props;
-    const defaultLabel = label as string;
-    const cancelLabel = '%cancel';
-    const clearLabel = '%clear';
-    const isValid = errors.length === 0;
-    const appliedUiSchemaOptions = merge({}, config, uischema.options);
-    const showDescription = !isDescriptionHidden(
-      visible,
-      description,
-      this.state.isFocused,
-      appliedUiSchemaOptions.showUnfocusedDescription
-    );
-    const inputProps = {};
-    const localeDateTimeFormat = momentLocale
-      ? `${momentLocale.localeData().longDateFormat('L')}`
-      : 'YYYY-MM-DD';
+  const firstFormHelperText = showDescription
+    ? description
+    : !isValid
+    ? errors
+    : null;
+  const secondFormHelperText = showDescription && !isValid ? errors : null;
+  const onChange = useMemo(() => createOnChangeHandler(
+    path,
+    handleChange,
+    saveFormat
+  ),[path, handleChange, saveFormat]);
 
-    let labelText;
-    let labelCancel;
-    let labelClear;
-
-    if (isPlainLabel(label)) {
-      labelText = label;
-      labelCancel = 'Cancel';
-      labelClear = 'Clear';
-    } else {
-      labelText = defaultLabel;
-      labelCancel = startsWith(cancelLabel, '%') ? 'Cancel' : cancelLabel;
-      labelClear = startsWith(clearLabel, '%') ? 'Clear' : clearLabel;
-    }
-
-    return (
-      <Hidden xsUp={!visible}>
-        <MuiPickersUtilsProvider utils={MomentUtils}>
-          <AnyPropsKeyboardDatePicker
-            id={id + '-input'}
-            label={computeLabel(
-              labelText,
-              required,
-              appliedUiSchemaOptions.hideRequiredAsterisk
-            )}
-            error={!isValid}
-            fullWidth={!appliedUiSchemaOptions.trim}
-            helperText={!isValid ? errors : showDescription ? description : ' '}
-            InputLabelProps={{ shrink: true }}
-            value={data || null}
-            onChange={(datetime: any) =>
-              handleChange(
-                path,
-                datetime ? moment(datetime).format('YYYY-MM-DD') : ''
-              )
-            }
-            format={localeDateTimeFormat}
-            clearable={true}
-            disabled={!enabled}
-            autoFocus={appliedUiSchemaOptions.focus}
-            onFocus={this.onFocus}
-            onBlur={this.onBlur}
-            cancelLabel={labelCancel}
-            clearLabel={labelClear}
-            leftArrowIcon={<KeyboardArrowLeftIcon />}
-            rightArrowIcon={<KeyboardArrowRightIcon />}
-            keyboardIcon={<EventIcon />}
-            InputProps={inputProps}
-          />
-        </MuiPickersUtilsProvider>
-      </Hidden>
-    );
-  }
-}
-
-export interface StatePropsOfDateControl extends StatePropsOfControl {
-  defaultLabel: string;
-  cancelLabel: string;
-  clearLabel: string;
-}
+  return (
+    <Hidden xsUp={!visible}>
+      <MuiPickersUtilsProvider utils={DayJsUtils}>
+        <KeyboardDatePicker
+          id={id + '-input'}
+          required={required && !appliedUiSchemaOptions.hideRequiredAsterisk}
+          label={label}
+          error={!isValid}
+          fullWidth={!appliedUiSchemaOptions.trim}
+          InputLabelProps={data ? { shrink: true } : undefined}
+          value={getData(data, saveFormat)}
+          clearable
+          onChange={onChange}
+          format={format}
+          views={appliedUiSchemaOptions.views}
+          disabled={!enabled}
+          autoFocus={appliedUiSchemaOptions.focus}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          cancelLabel={appliedUiSchemaOptions.cancelLabel}
+          clearLabel={appliedUiSchemaOptions.clearLabel}
+          okLabel={appliedUiSchemaOptions.okLabel}
+          leftArrowIcon={<KeyboardArrowLeftIcon />}
+          rightArrowIcon={<KeyboardArrowRightIcon />}
+          keyboardIcon={<EventIcon />}
+          invalidDateMessage={null}
+          maxDateMessage={null}
+          minDateMessage={null}
+        />
+        <FormHelperText error={!isValid && !showDescription}>
+          {firstFormHelperText}
+        </FormHelperText>
+        <FormHelperText error={!isValid}>
+          {secondFormHelperText}
+        </FormHelperText>
+      </MuiPickersUtilsProvider>
+    </Hidden>
+  );
+};
 
 export const materialDateControlTester: RankedTester = rankWith(
   4,

package/src/controls/MaterialDateTimeControl.tsx

@@ -22,20 +22,17 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import React from 'react';
+import React, { useMemo } from 'react';
 import merge from 'lodash/merge';
 import {
-  computeLabel,
   ControlProps,
-  ControlState,
   isDateTimeControl,
-  isPlainLabel,
+  isDescriptionHidden,
   RankedTester,
   rankWith
 } from '@jsonforms/core';
-import { Control, withJsonFormsControlProps } from '@jsonforms/react';
-import moment from 'moment';
-import { Hidden } from '@material-ui/core';
+import { withJsonFormsControlProps } from '@jsonforms/react';
+import { FormHelperText, Hidden } from '@material-ui/core';
 import KeyboardArrowLeftIcon from '@material-ui/icons/KeyboardArrowLeft';
 import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
 import DateRangeIcon from '@material-ui/icons/DateRange';
@@ -45,72 +42,93 @@ import {
   KeyboardDateTimePicker,
   MuiPickersUtilsProvider
 } from '@material-ui/pickers';
-import MomentUtils from '@date-io/moment';
+import DayjsUtils from '@date-io/dayjs';
+import { createOnChangeHandler, getData, useFocus } from '../util';
 
-// Workaround typing problems in @material-ui/pickers@3.2.3
-const AnyPropsKeyboardDateTimepicker: React.FunctionComponent<
-  any
-> = KeyboardDateTimePicker;
+export const MaterialDateTimeControl = (props: ControlProps) => {
+  const [focused, onFocus, onBlur] = useFocus();
+  const {
+    id,
+    description,
+    errors,
+    label,
+    uischema,
+    visible,
+    enabled,
+    required,
+    path,
+    handleChange,
+    data,
+    config
+  } = props;
+  const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  const isValid = errors.length === 0;
 
-export class MaterialDateTimeControl extends Control<
-  ControlProps,
-  ControlState
-> {
-  render() {
-    const {
-      id,
-      description,
-      errors,
-      label,
-      uischema,
-      visible,
-      enabled,
-      required,
-      path,
-      handleChange,
-      data,
-      config
-    } = this.props;
-    const appliedUiSchemaOptions = merge({}, config, uischema.options);
-    const isValid = errors.length === 0;
-    const inputProps = {};
+  const showDescription = !isDescriptionHidden(
+    visible,
+    description,
+    focused,
+    appliedUiSchemaOptions.showUnfocusedDescription
+  );
+
+  const format = appliedUiSchemaOptions.dateTimeFormat ?? 'YYYY-MM-DD HH:mm';
+  const saveFormat = appliedUiSchemaOptions.dateTimeSaveFormat ?? undefined;
+
+  const firstFormHelperText = showDescription
+    ? description
+    : !isValid
+    ? errors
+    : null;
+  const secondFormHelperText = showDescription && !isValid ? errors : null;
+
+  const onChange = useMemo(() => createOnChangeHandler(
+    path,
+    handleChange,
+    saveFormat
+  ),[path, handleChange, saveFormat]);
 
-    return (
-      <Hidden xsUp={!visible}>
-        <MuiPickersUtilsProvider utils={MomentUtils}>
-          <AnyPropsKeyboardDateTimepicker
-            id={id + '-input'}
-            label={computeLabel(
-              isPlainLabel(label) ? label : label.default,
-              required,
-              appliedUiSchemaOptions.hideRequiredAsterisk
-            )}
-            error={!isValid}
-            fullWidth={!appliedUiSchemaOptions.trim}
-            onFocus={this.onFocus}
-            onBlur={this.onBlur}
-            helperText={!isValid ? errors : description}
-            InputLabelProps={{ shrink: true }}
-            value={data || null}
-            onChange={(datetime: any) =>
-              handleChange(path, datetime ? moment(datetime).format() : '')
-            }
-            format='MM/DD/YYYY h:mm a'
-            clearable={true}
-            disabled={!enabled}
-            autoFocus={appliedUiSchemaOptions.focus}
-            leftArrowIcon={<KeyboardArrowLeftIcon />}
-            rightArrowIcon={<KeyboardArrowRightIcon />}
-            dateRangeIcon={<DateRangeIcon />}
-            keyboardIcon={<EventIcon />}
-            timeIcon={<AccessTimeIcon />}
-            InputProps={inputProps}
-          />
-        </MuiPickersUtilsProvider>
-      </Hidden>
-    );
-  }
-}
+  return (
+    <Hidden xsUp={!visible}>
+      <MuiPickersUtilsProvider utils={DayjsUtils}>
+        <KeyboardDateTimePicker
+          id={id + '-input'}
+          required={required && !appliedUiSchemaOptions.hideRequiredAsterisk}
+          label={label}
+          error={!isValid}
+          fullWidth={!appliedUiSchemaOptions.trim}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          InputLabelProps={data ? { shrink: true } : undefined}
+          value={getData(data, saveFormat)}
+          clearable
+          onChange={onChange}
+          format={format}
+          ampm={!!appliedUiSchemaOptions.ampm}
+          views={appliedUiSchemaOptions.views}
+          disabled={!enabled}
+          autoFocus={appliedUiSchemaOptions.focus}
+          cancelLabel={appliedUiSchemaOptions.cancelLabel}
+          clearLabel={appliedUiSchemaOptions.clearLabel}
+          okLabel={appliedUiSchemaOptions.okLabel}
+          leftArrowIcon={<KeyboardArrowLeftIcon />}
+          rightArrowIcon={<KeyboardArrowRightIcon />}
+          dateRangeIcon={<DateRangeIcon />}
+          keyboardIcon={<EventIcon />}
+          timeIcon={<AccessTimeIcon />}
+          invalidDateMessage={null}
+          maxDateMessage={null}
+          minDateMessage={null}
+        />
+        <FormHelperText error={!isValid && !showDescription}>
+          {firstFormHelperText}
+        </FormHelperText>
+        <FormHelperText error={!isValid}>
+          {secondFormHelperText}
+        </FormHelperText>
+      </MuiPickersUtilsProvider>
+    </Hidden>
+  );
+};
 
 export const materialDateTimeControlTester: RankedTester = rankWith(
   2,