Use React Material UI's builtin required

Material UI supports handing over a 'required' prop to their components. We now use this prop instead of appending an asterisk manually to the control labels in the React Material renderer set . Using this approach the asterisk is rendered in a consistent and themeable way. Closes eclipsesource#1695 Signed-off-by: Lukas Boll <lukas-bool@web.de>

Author: LukasBoll

packages/core/src/util/renderer.ts

@@ -88,6 +88,7 @@ const isRequired = (
  *
  * @param {string} label the label string
  * @param {boolean} required whether the label belongs to a control which is required
+ * @param {boolean} hideRequiredAsterisk applied UI Schema option
  * @returns {string} the label string
  */
 export const computeLabel = (
@@ -98,6 +99,20 @@ export const computeLabel = (
  return required && !hideRequiredAsterisk ? label + '*' : label;
 };
 
+/**
+ * Indicates whether to mark a field as required.
+ *
+ * @param {boolean} required whether the label belongs to a control which is required
+ * @param {boolean} hideRequiredAsterisk applied UI Schema option
+ * @returns {boolean} should the field be marked as required
+ */
+ export const showAsRequired = (
+ required: boolean,
+ hideRequiredAsterisk: boolean
+): boolean => {
+ return required && !hideRequiredAsterisk;
+};
+
 /**
  * Create a default value based on the given scheam.
  * @param schema the schema for which to create a default value.

packages/material/src/controls/MaterialInputControl.tsx

@@ -24,7 +24,7 @@
 */
 import React from 'react';
 import {
- computeLabel,
+ showAsRequired,
  ControlProps,
  ControlState,
  isDescriptionHidden,
@@ -84,12 +84,10 @@ export abstract class MaterialInputControl extends Control<
  <InputLabel
  htmlFor={id + '-input'}
  error={!isValid}
+ required={showAsRequired(required,
+ appliedUiSchemaOptions.hideRequiredAsterisk)}
  >
- {computeLabel(
- label,
- required,
- appliedUiSchemaOptions.hideRequiredAsterisk
- )}
+ {label}
  </InputLabel>
  <InnerComponent
  {...this.props}

packages/material/src/controls/MaterialNativeControl.tsx

@@ -24,9 +24,9 @@
 */
 import React from 'react';
 import {
- computeLabel,
  ControlProps,
  ControlState,
+ showAsRequired,
  isDateControl,
  isDescriptionHidden,
  isTimeControl,
@@ -73,12 +73,10 @@ export class MaterialNativeControl extends Control<ControlProps, ControlState> {
  return (
  <Hidden xsUp={!visible}>
  <TextField
+ required={showAsRequired(required,
+ appliedUiSchemaOptions.hideRequiredAsterisk)}
  id={id + '-input'}
- label={computeLabel(
- label,
- required,
- appliedUiSchemaOptions.hideRequiredAsterisk
- )}
+ label={label}
  type={fieldType}
  error={!isValid}
  disabled={!enabled}

packages/material/src/controls/MaterialRadioGroup.tsx

@@ -25,9 +25,9 @@
 import merge from 'lodash/merge';
 import React from 'react';
 import {
- computeLabel,
  ControlProps,
  ControlState,
+ showAsRequired,
  isDescriptionHidden,
  OwnPropsOfEnum
 } from '@jsonforms/core';
@@ -81,12 +81,10 @@ export class MaterialRadioGroup extends Control<
  htmlFor={id}
  error={!isValid}
  component={'legend' as 'label'}
+ required={showAsRequired(required,
+ appliedUiSchemaOptions.hideRequiredAsterisk)}
  >
- {computeLabel(
- label,
- required,
- appliedUiSchemaOptions.hideRequiredAsterisk
- )}
+ {label}
  </FormLabel>
 
  <RadioGroup

packages/material/src/controls/MaterialSliderControl.tsx

@@ -24,9 +24,9 @@
 */
 import React from 'react';
 import {
- computeLabel,
  ControlProps,
  ControlState,
+ showAsRequired,
  isDescriptionHidden,
  isRangeControl,
  RankedTester,
@@ -37,6 +37,7 @@ import { Control, withJsonFormsControlProps } from '@jsonforms/react';
 import {
  FormControl,
  FormHelperText,
+ FormLabel,
  Hidden,
  Slider,
  Typography
@@ -95,13 +96,17 @@ export class MaterialSliderControl extends Control<ControlProps, ControlState> {
  onBlur={this.onBlur}
  id={id}
  >
- <Typography id={id + '-typo'} style={labelStyle} variant='caption'>
- {computeLabel(
- label,
- required,
- appliedUiSchemaOptions.hideRequiredAsterisk
- )}
- </Typography>
+ <FormLabel
+ htmlFor={id}
+ error={!isValid}
+ component={'legend' as 'label'}
+ required={showAsRequired(required,
+ appliedUiSchemaOptions.hideRequiredAsterisk)}
+ >
+ <Typography id={id + '-typo'} style={labelStyle} variant='caption'>
+ {label}
+ </Typography>
+ </FormLabel>
  <div style={rangeContainerStyle}>
  <Typography style={rangeItemStyle} variant='caption' align='left'>
  {schema.minimum}

packages/material/test/renderers/MaterialInputControl.test.tsx

@@ -283,7 +283,7 @@ describe('Material input control', () => {
  </JsonFormsStateProvider>
  );
  const label = wrapper.find('label').first();
- expect(label.text()).toBe('Date Cell*');
+ expect(label.text()).toBe('Date Cell *');
  });
 
  it('should not display a marker for a non-required prop', () => {