add required prop to Inputs

closes #1695 Signed-off-by: Lukas Boll <lukas-bool@web.de>
eclipsesource · Aug 16, 2021 · 5a82ded · 5a82ded
1 parent ba6bdc5
commit 5a82ded
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 20 deletions.
diff --git a/packages/core/src/util/renderer.ts b/packages/core/src/util/renderer.ts
@@ -98,6 +98,19 @@ export const computeLabel = (
   return required && !hideRequiredAsterisk ? label + '*' : label;
 };
 
+/**
+ * Decides whether to mark a field as required.
+ *
+ * @param {boolean} required whether the label belongs to a control which is required
+ * @returns {boolean} should the field be marked as required
+ */
+ export const displayRequired = (
+  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.

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

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

diff --git a/packages/material/src/controls/MaterialSliderControl.tsx b/packages/material/src/controls/MaterialSliderControl.tsx
@@ -24,9 +24,9 @@
 */
 import React from 'react';
 import {
-  computeLabel,
   ControlProps,
   ControlState,
+  displayRequired,
   isDescriptionHidden,
   isRangeControl,
   RankedTester,
@@ -37,6 +37,7 @@ import { Control, withJsonFormsControlProps } from '@jsonforms/react';
 import {
   FormControl,
   FormHelperText,
+  FormLabel,
   Hidden,
   Slider,
   Typography
@@ -94,14 +95,20 @@ export class MaterialSliderControl extends Control<ControlProps, ControlState> {
           onFocus={this.onFocus}
           onBlur={this.onBlur}
           id={id}
+          required={displayRequired(required,
+            appliedUiSchemaOptions.hideRequiredAsterisk)}
         >
-          <Typography id={id + '-typo'} style={labelStyle} variant='caption'>
-            {computeLabel(
-              label,
-              required,
-              appliedUiSchemaOptions.hideRequiredAsterisk
-            )}
-          </Typography>
+          <FormLabel
+            htmlFor={id}
+            error={!isValid}
+            component={'legend' as 'label'}
+            required={displayRequired(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}