data-widget-required

ecmwf-projects · Dec 26, 2023 · 445df84 · 445df84
1 parent 95839d8
commit 445df84
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 13 deletions.
diff --git a/src/widgets/RequiredErrorMessage.tsx b/src/widgets/RequiredErrorMessage.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
 import { Error } from './Widget'
 
-export const RequiredErrorMessage = () => {
+export const RequiredErrorMessage = ({ show = false }: { show?: boolean }) => {
+  if (!show) {
+    return null
+  }
+
   return (
     <Error data-error='required'>At least one selection must be made</Error>
   )

diff --git a/src/widgets/StringChoiceWidget.tsx b/src/widgets/StringChoiceWidget.tsx
@@ -140,8 +140,10 @@ const StringChoiceWidget = ({
 
   const [defaultValue] = selection || []
 
+  const requiredError = !bypassed && required && !selection?.length
+
   return (
-    <Widget data-stylizable='widget'>
+    <Widget data-stylizable='widget' data-widget-required={requiredError}>
       <WidgetHeader>
         <WidgetActionsWrapper data-stylizable='widget-action-wrapper'>
           <WidgetTitle
@@ -174,9 +176,7 @@ const StringChoiceWidget = ({
         />
       </WidgetHeader>
       <ReservedSpace data-stylizable='widget string-choice reserved-error-space'>
-        {!bypassed && required && !selection?.length ? (
-          <RequiredErrorMessage />
-        ) : null}
+        <RequiredErrorMessage show={requiredError} />
       </ReservedSpace>
       <Fieldset name={name} ref={fieldSetRef} disabled={fieldsetDisabled}>
         <Legend>{label}</Legend>

diff --git a/src/widgets/StringListArrayWidget.tsx b/src/widgets/StringListArrayWidget.tsx
@@ -354,8 +354,10 @@ const StringListArrayWidget = ({
 
   const allValues = getAllValues(allGroups)
 
+  const requiredError = !bypassed && required && !selection[name]?.length
+
   return (
-    <Widget data-stylizable='widget'>
+    <Widget data-stylizable='widget' data-widget-required={requiredError}>
       <WidgetHeader>
         <WidgetActionsWrapper data-stylizable='widget-action-wrapper'>
           <WidgetTitle
@@ -430,9 +432,7 @@ const StringListArrayWidget = ({
         />
       </WidgetHeader>
       <ReservedSpace data-stylizable='widget string-listarray reserved-error-space'>
-        {!bypassed && required && !selection[name]?.length ? (
-          <RequiredErrorMessage />
-        ) : null}
+        <RequiredErrorMessage show={requiredError} />
       </ReservedSpace>
       <Fieldset name={name} ref={fieldSetRef} disabled={fieldsetDisabled}>
         <Legend>{label}</Legend>

diff --git a/src/widgets/StringListWidget.tsx b/src/widgets/StringListWidget.tsx
@@ -122,8 +122,10 @@ const StringListWidget = ({
     return Boolean(selection.find(sel => sel === value))
   }
 
+  const requiredError = !bypassed && required && !selection[name]?.length
+
   return (
-    <Widget data-stylizable='widget'>
+    <Widget data-stylizable='widget' data-widget-required={requiredError}>
       <WidgetHeader>
         <WidgetActionsWrapper data-stylizable='widget-action-wrapper'>
           <WidgetTitle
@@ -188,9 +190,7 @@ const StringListWidget = ({
         />
       </WidgetHeader>
       <ReservedSpace>
-        {!bypassed && required && !selection[name]?.length ? (
-          <RequiredErrorMessage />
-        ) : null}
+        <RequiredErrorMessage show={requiredError} />
       </ReservedSpace>
       <Fieldset name={name} ref={fieldSetRef} disabled={fieldsetDisabled}>
         <Legend>{label}</Legend>