@jsonforms/material-renderers 3.0.0-beta.4 → 3.0.0-rc.1

package/src/layouts/MaterialCategorizationLayout.tsx

@@ -22,12 +22,13 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import React, {useState} from 'react';
+import React, {useState, useMemo} from 'react';
 import { AppBar, Hidden, Tab, Tabs } from '@mui/material';
 import {
   and,
   Categorization,
   Category,
+  deriveLabelForUISchemaElement,
   isVisible,
   RankedTester,
   rankWith,
@@ -36,7 +37,7 @@ import {
   UISchemaElement,
   uiTypeIs
 } from '@jsonforms/core';
-import { withJsonFormsLayoutProps } from '@jsonforms/react';
+import { TranslateProps, withJsonFormsLayoutProps, withTranslateProps } from '@jsonforms/react';
 import {
   AjvProps,
   MaterialLayoutRenderer,
@@ -68,7 +69,7 @@ export interface CategorizationState {
 }
 
 export interface MaterialCategorizationLayoutRendererProps
-  extends StatePropsOfLayout, AjvProps {
+  extends StatePropsOfLayout, AjvProps, TranslateProps {
   selected?: number;
   ownState?: boolean;
   data?: any;
@@ -87,13 +88,14 @@ export const MaterialCategorizationLayoutRenderer = (props: MaterialCategorizati
     enabled,
     selected,
     onChange,
-    ajv
+    ajv,
+    t
   } = props;
   const categorization = uischema as Categorization;
   const [activeCategory, setActiveCategory]= useState<number|undefined>(selected??0);
-  const categories = categorization.elements.filter((category: Category) =>
+  const categories = useMemo(() => categorization.elements.filter((category: Category) =>
     isVisible(category, data, undefined, ajv)
-  );
+  ),[categorization, data, ajv]);
   const childProps: MaterialLayoutRendererProps = {
     elements: categories[activeCategory].elements,
     schema,
@@ -110,12 +112,19 @@ export const MaterialCategorizationLayoutRenderer = (props: MaterialCategorizati
     }
     setActiveCategory(value);
   };
+
+  const tabLabels = useMemo(() => {
+    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'>
-          {categories.map((e: Category, idx: number) => (
-            <Tab key={idx} label={e.label} />
+          {categories.map((_, idx: number) => (
+            <Tab key={idx} label={tabLabels[idx]} />
           ))}
         </Tabs>
       </AppBar>
@@ -126,4 +135,4 @@ export const MaterialCategorizationLayoutRenderer = (props: MaterialCategorizati
   );
 };
 
-export default withJsonFormsLayoutProps(withAjvProps(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} from 'react';
+import React, {useState, useMemo} from 'react';
 import merge from 'lodash/merge';
 import { Button, Hidden, Step, StepButton, Stepper } from '@mui/material';
 import {
@@ -30,6 +30,7 @@ import {
   Categorization,
   categorizationHasCategory,
   Category,
+  deriveLabelForUISchemaElement,
   isVisible,
   optionIs,
   RankedTester,
@@ -37,7 +38,7 @@ import {
   StatePropsOfLayout,
   uiTypeIs
 } from '@jsonforms/core';
-import { withJsonFormsLayoutProps } from '@jsonforms/react';
+import { TranslateProps, withJsonFormsLayoutProps, withTranslateProps } from '@jsonforms/react';
 import {
   AjvProps,
   MaterialLayoutRenderer,
@@ -59,7 +60,7 @@ export interface CategorizationStepperState {
 }
 
 export interface MaterialCategorizationStepperLayoutRendererProps
-  extends StatePropsOfLayout, AjvProps {
+  extends StatePropsOfLayout, AjvProps, TranslateProps {
     data: any;
 }
 
@@ -79,7 +80,8 @@ export const MaterialCategorizationStepperLayoutRenderer = (props: MaterialCateg
     visible,
     cells,
     config,
-    ajv
+    ajv,
+    t
   } = props;
   const categorization = uischema as Categorization;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
@@ -94,9 +96,9 @@ export const MaterialCategorizationStepperLayoutRenderer = (props: MaterialCateg
   const buttonStyle = {
     marginRight: '1em'
   };
-  const categories = categorization.elements.filter((category: Category) =>
+  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 +108,18 @@ export const MaterialCategorizationStepperLayoutRenderer = (props: MaterialCateg
     renderers,
     cells
   };
+  const tabLabels = useMemo(() => {
+    return categories.map((e: Category) => 
+      deriveLabelForUISchemaElement(e, t)
+    )
+  }, [categories, t])
   return (
     <Hidden xsUp={!visible}>
       <Stepper activeStep={activeCategory} nonLinear>
-        {categories.map((e: Category, idx: number) => (
-          <Step key={e.label}>
+        {categories.map((_: Category, idx: number) => (
+          <Step key={tabLabels[idx]}>
             <StepButton onClick={() => handleStep(idx)}>
-              {e.label}
+              {tabLabels[idx]}
             </StepButton>
           </Step>
         ))}
@@ -144,6 +151,6 @@ export const MaterialCategorizationStepperLayoutRenderer = (props: MaterialCateg
   );
 };
 
-export default withJsonFormsLayoutProps(withAjvProps(
-  MaterialCategorizationStepperLayoutRenderer
-));
+export default withAjvProps(withTranslateProps(
+  withJsonFormsLayoutProps(MaterialCategorizationStepperLayoutRenderer
+)));

package/src/layouts/MaterialGroupLayout.tsx

@@ -34,21 +34,21 @@ import {
   withIncreasedRank,
 } from '@jsonforms/core';
 import {
+  MaterialLabelableLayoutRendererProps,
   MaterialLayoutRenderer,
-  MaterialLayoutRendererProps
 } from '../util/layout';
 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, ...props }: MaterialLayoutRendererProps) => {
+const GroupComponent = React.memo(({ visible, enabled, uischema, label, ...props }: MaterialLabelableLayoutRendererProps) => {
   const groupLayout = uischema as GroupLayout;
   return (
     <Hidden xsUp={!visible}>
       <Card style={style}>
-        {!isEmpty(groupLayout.label) && (
-          <CardHeader title={groupLayout.label} />
+        {!isEmpty(label) && (
+          <CardHeader title={label} />
         )}
         <CardContent>
           <MaterialLayoutRenderer {...props} visible={visible} enabled={enabled} elements={groupLayout.elements} />
@@ -58,7 +58,7 @@ const GroupComponent = React.memo(({ visible, enabled, uischema, ...props }: Mat
   );
 });
 
-export const MaterializedGroupLayoutRenderer = ({ uischema, schema, path, visible, enabled, renderers, cells, direction }: LayoutProps) => {
+export const MaterializedGroupLayoutRenderer = ({ uischema, schema, path, visible, enabled, renderers, cells, direction, label }: LayoutProps) => {
   const groupLayout = uischema as GroupLayout;
 
   return (
@@ -72,6 +72,7 @@ export const MaterializedGroupLayoutRenderer = ({ uischema, schema, path, visibl
       uischema={uischema}
       renderers={renderers}
       cells={cells}
+      label={label}
     />
   );
 };

package/src/mui-controls/MuiAutocomplete.tsx

@@ -23,15 +23,18 @@
   THE SOFTWARE.
 */
 import React, { ReactNode } from 'react';
-import { EnumCellProps, EnumOption, WithClassname } from '@jsonforms/core';
+import { ControlProps, EnumCellProps, EnumOption, isDescriptionHidden, WithClassname } from '@jsonforms/core';
 
 import {
   Autocomplete,
   AutocompleteRenderOptionState,
-  Input,
-  FilterOptionsState
+  FilterOptionsState,
+  FormHelperText,
+  Hidden,
+  TextField
 } from '@mui/material';
 import merge from 'lodash/merge';
+import { useFocus } from '../util/focus';
 
 export interface WithOptionLabel {
   getOptionLabel?(option: EnumOption) : string;
@@ -39,8 +42,13 @@ export interface WithOptionLabel {
   filterOptions?(options: EnumOption[], state: FilterOptionsState<EnumOption>) : EnumOption[];
 }
 
-export const MuiAutocomplete = (props: EnumCellProps & WithClassname & WithOptionLabel) => {
+export const MuiAutocomplete = (props: ControlProps & EnumCellProps & WithClassname & WithOptionLabel) => {
   const {
+    description,
+    errors,
+    visible,
+    required,
+    label,
     data,
     className,
     id,
@@ -52,44 +60,80 @@ export const MuiAutocomplete = (props: EnumCellProps & WithClassname & WithOptio
     config,
     getOptionLabel,
     renderOption,
-    filterOptions
+    filterOptions,
+    isValid
   } = props;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
   const [inputValue, setInputValue] = React.useState(data ?? '');
+  const [focused, onFocus, onBlur] = useFocus();
 
   const findOption = options.find(o => o.value === data) ?? null;
+  
+  const showDescription = !isDescriptionHidden(
+    visible,
+    description,
+    focused,
+    appliedUiSchemaOptions.showUnfocusedDescription
+  );
+  
+  const firstFormHelperText = showDescription
+    ? description
+    : !isValid
+    ? errors
+    : null;
+  const secondFormHelperText = showDescription && !isValid ? errors : null;
+
   return (
-    <Autocomplete
-      className={className}
-      id={id}
-      disabled={!enabled}
-      value={findOption}
-      onChange={(_event: any, newValue: EnumOption | null) => {
-        handleChange(path, newValue?.value);
-      }}
-      inputValue={inputValue}
-      onInputChange={(_event, newInputValue) => {
-        setInputValue(newInputValue);
-      }}
-      autoHighlight
-      autoSelect
-      autoComplete
-      fullWidth
-      options={options}
-      getOptionLabel={getOptionLabel || (option => option?.label)}
-      style={{ marginTop: 16 }}
-      renderInput={params => (
-        <Input
-          style={{ width: '100%' }}
-          type='text'
-          inputProps={params.inputProps}
-          inputRef={params.InputProps.ref}
-          autoFocus={appliedUiSchemaOptions.focus}
-          disabled={!enabled}
-        />
-      )}
-      renderOption={renderOption}
-      filterOptions={filterOptions}
-    />
+    <Hidden xsUp={!visible}>
+      <Autocomplete
+        className={className}
+        id={id}
+        disabled={!enabled}
+        value={findOption}
+        onChange={(_event: any, newValue: EnumOption | null) => {
+          handleChange(path, newValue?.value);
+        }}
+        inputValue={inputValue}
+        onInputChange={(_event, newInputValue) => {
+          setInputValue(newInputValue);
+        }}
+        autoHighlight
+        autoSelect
+        autoComplete
+        fullWidth
+        options={options}
+        getOptionLabel={getOptionLabel || (option => option?.label)}
+        freeSolo={false}
+        renderInput={params => { 
+          return(
+          <TextField
+            label={label} 
+            variant={'standard'}
+            type='text'
+            inputProps={params.inputProps}
+            inputRef={params.InputProps.ref}
+            autoFocus={appliedUiSchemaOptions.focus}
+            disabled={!enabled}
+            {...params}
+            id={id + '-input'}
+            required={required && !appliedUiSchemaOptions.hideRequiredAsterisk}
+            error={!isValid}
+            fullWidth={!appliedUiSchemaOptions.trim}
+            InputLabelProps={data ? { shrink: true } : undefined}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            focused={focused}
+          />
+        )}}
+        renderOption={renderOption}
+        filterOptions={filterOptions}
+      />
+      <FormHelperText error={!isValid && !showDescription}>
+        {firstFormHelperText}
+      </FormHelperText>
+      <FormHelperText error={!isValid}>
+        {secondFormHelperText}
+      </FormHelperText>
+    </Hidden>
   );
 };

package/src/mui-controls/MuiInputText.tsx

@@ -40,6 +40,9 @@ interface MuiTextInputProps {
   muiInputProps?: InputProps['inputProps'];
   inputComponent?: InputProps['inputComponent'];
 }
+
+const eventToValue = (ev:any) => ev.target.value === '' ? undefined : ev.target.value;
+
 export const MuiInputText = React.memo((props: CellProps & WithClassname & MuiTextInputProps) => { 
   const [showAdornment, setShowAdornment] = useState(false);
   const {
@@ -71,7 +74,7 @@ export const MuiInputText = React.memo((props: CellProps & WithClassname & MuiTe
     inputProps.size = maxLength;
   };
   
-  const [inputText, onChange, onClear] = useDebouncedChange(handleChange, '', data, path);
+  const [inputText, onChange, onClear] = useDebouncedChange(handleChange, '', data, path, eventToValue);
   const onPointerEnter = () => setShowAdornment(true);
   const onPointerLeave = () => setShowAdornment(false);
 

package/src/mui-controls/MuiSelect.tsx

@@ -22,25 +22,30 @@
   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 { EnumCellProps, WithClassname } from '@jsonforms/core';
 
 import { MenuItem, Select } from '@mui/material';
 import merge from 'lodash/merge';
+import { TranslateProps } from '@jsonforms/react';
+import { i18nDefaults } from '../util';
 
-export const MuiSelect = React.memo((props: EnumCellProps & WithClassname) => {
+export const MuiSelect = React.memo((props: EnumCellProps & WithClassname & TranslateProps) => {
   const {
     data,
     className,
     id,
     enabled,
+    schema,
     uischema,
     path,
     handleChange,
     options,
-    config
+    config,
+    t
   } = props;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  const noneOptionLabel = useMemo(() => t('enum.none', i18nDefaults['enum.none'], { schema, uischema, path}), [t, schema, uischema, path]);
 
   return (
     <Select
@@ -49,11 +54,11 @@ export const MuiSelect = React.memo((props: EnumCellProps & WithClassname) => {
       disabled={!enabled}
       autoFocus={appliedUiSchemaOptions.focus}
       value={data !== undefined ? data : ''}
-      onChange={ev => handleChange(path, ev.target.value)}
+      onChange={ev =>handleChange(path, ev.target.value || undefined)}
       fullWidth={true}
       variant={'standard'}
     >
-      {[<MenuItem value='' key={'empty'} />].concat(
+      {[<MenuItem value={''} key='jsonforms.enum.none'><em>{noneOptionLabel}</em></MenuItem>].concat(
         options.map(optionValue => (
           <MenuItem value={optionValue.value} key={optionValue.value}>
             {optionValue.label}

package/src/util/datejs.tsx

@@ -0,0 +1,73 @@
+import { TextField, TextFieldProps } from '@mui/material';
+import dayjs from 'dayjs';
+import customParsing from 'dayjs/plugin/customParseFormat';
+import React, { useRef} from 'react';
+
+// 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, textInputValue: string) => {
+  if (!time) {
+    handleChange(path, undefined);
+    return;
+  }
+  const result = dayjs(time).format(saveFormat);
+  handleChange(path, result === 'Invalid Date' ? textInputValue : 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;
+};
+
+
+interface InputRef {
+  lastInput: string;
+  toShow: string;
+}
+
+type ResettableTextFieldProps = TextFieldProps & {
+  rawValue: any;
+  dayjsValueIsValid: boolean;
+  valueInInputFormat: string;
+  focused: boolean;
+}
+
+/**
+ * The dayjs formatter/parser is very lenient and for example ignores additional digits and/or characters.
+ * In these cases the input text can look vastly different than the actual value stored in the data.
+ * The 'ResettableTextField' component adjusts the text field to reflect the actual value stored in the data
+ * once it's no longer 'focused', i.e. when the user stops editing.
+ */
+export const ResettableTextField: React.FC<ResettableTextFieldProps> = ({ rawValue, dayjsValueIsValid, valueInInputFormat, focused, inputProps, ...props }) => {
+  const value = useRef<InputRef>({ lastInput: inputProps?.value, toShow: inputProps?.value });
+  if (!focused) {
+    // The input text is not focused, therefore let's show the value actually stored in the data
+    if (!dayjsValueIsValid) {
+      // pass through the "raw" value in case it can't be formatted by dayjs
+      value.current.toShow = typeof rawValue === 'string' || rawValue === null || rawValue === undefined ? rawValue : JSON.stringify(rawValue)
+    } else {
+      // otherwise use the specified format
+      value.current.toShow = valueInInputFormat;
+    }
+  }
+  if (focused && inputProps?.value !== value.current.lastInput) {
+    // Show the current text the user is typing into the text input
+    value.current.lastInput = inputProps?.value;
+    value.current.toShow = inputProps?.value;
+  }
+  return <TextField {...props} inputProps={{ ...inputProps, value: value.current.toShow || '' }} />
+}

package/src/util/i18nDefaults.ts

@@ -0,0 +1,3 @@
+export const i18nDefaults = {
+    'enum.none': 'None'
+}

package/src/util/index.ts

@@ -27,3 +27,4 @@ export * from './layout';
 export * from './theme';
 export * from './debounce';
 export * from './focus';
+export * from './i18nDefaults';

package/src/util/layout.tsx

@@ -110,3 +110,7 @@ export const withAjvProps = <P extends {}>(Component: ComponentType<AjvProps & P
 
     return (<Component {...props} ajv={ajv} />);
   };
+
+export interface MaterialLabelableLayoutRendererProps extends MaterialLayoutRendererProps {
+  label?: string;
+}