Serve the id separate from props

dnbexperience · Jan 6, 2025 · 94df92f · 94df92f
1 parent b0dd276
commit 94df92f
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 49 deletions.
diff --git a/.../dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/Examples.tsx b/.../dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/Examples.tsx
@@ -426,47 +426,6 @@ export const ConditionalInfo = () => {
   return (
     <ComponentBox scope={{ FormError }}>
       {() => {
-        const conditionalInfo = (
-          maximum: number,
-          { renderMode, getValueByPath, getFieldByPath },
-        ) => {
-          renderMode('interactive')
-
-          const amount = getValueByPath('/amount')
-          const { props } = getFieldByPath('/amount')
-
-          if (maximum < amount && props) {
-            const anchor = (
-              <Anchor
-                href="#"
-                onClick={(event) => {
-                  event.preventDefault()
-                  const el = document.getElementById(props.id + '-label')
-                  el?.scrollIntoView()
-                }}
-              >
-                {props.label}
-              </Anchor>
-            )
-
-            return (
-              <>
-                Remember to adjust the {anchor} to be {maximum} or lower.
-              </>
-            )
-          }
-        }
-        const onBlurValidator = (amount: number, { connectWithPath }) => {
-          const { getValue: getMaximum } = connectWithPath('/maximum')
-
-          if (amount > getMaximum()) {
-            return new FormError('NumberField.errorMaximum', {
-              messageValues: {
-                maximum: getMaximum(),
-              },
-            })
-          }
-        }
         return (
           <Form.Handler
             defaultData={{
@@ -487,7 +446,37 @@ export const ConditionalInfo = () => {
                   </>
                 }
                 path="/maximum"
-                info={conditionalInfo}
+                info={(
+                  maximum: number,
+                  { renderMode, getValueByPath, getFieldByPath },
+                ) => {
+                  renderMode('interactive')
+
+                  const amount = getValueByPath('/amount')
+                  const { props, id } = getFieldByPath('/amount')
+
+                  if (maximum < amount && props) {
+                    const anchor = (
+                      <Anchor
+                        href={'#' + id + '-label'}
+                        onClick={(event) => {
+                          event.preventDefault()
+                          const el = document.getElementById(id + '-label')
+                          el?.scrollIntoView()
+                        }}
+                      >
+                        {props.label}
+                      </Anchor>
+                    )
+
+                    return (
+                      <>
+                        Remember to adjust the {anchor} to be {maximum} or
+                        lower.
+                      </>
+                    )
+                  }
+                }}
               />
               <Field.Number
                 label="Amount"
@@ -498,7 +487,18 @@ export const ConditionalInfo = () => {
                   </>
                 }
                 path="/amount"
-                onBlurValidator={onBlurValidator}
+                onBlurValidator={(amount: number, { connectWithPath }) => {
+                  const { getValue: getMaximum } =
+                    connectWithPath('/maximum')
+
+                  if (amount > getMaximum()) {
+                    return new FormError('NumberField.errorMaximum', {
+                      messageValues: {
+                        maximum: String(getMaximum()),
+                      },
+                    })
+                  }
+                }}
               />
             </Form.Card>
 

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/stories/Number.stories.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Number/stories/Number.stories.tsx
@@ -90,18 +90,18 @@ export const ConditionalInfo = () => {
     maximum: number,
     { renderMode, getValueByPath, getFieldByPath }
   ) => {
-    renderMode('interactive') // Can also be 'initially' or 'continuously'
+    renderMode('initially') // Can also be 'initially' or 'continuously'
 
     const amount = getValueByPath('/amount')
-    const { props } = getFieldByPath('/amount')
+    const { props, id } = getFieldByPath('/amount')
 
     if (maximum < amount && props) {
       const anchor = (
         <Anchor
-          href={`#${props?.id}-label`}
+          href={`#${id}-label`}
           onClick={(event: React.MouseEvent<HTMLAnchorElement>) => {
             event.preventDefault()
-            const el = document.getElementById(`${props.id}-label`)
+            const el = document.getElementById(`${id}-label`)
             el?.scrollIntoView()
           }}
         >

diff --git a/packages/dnb-eufemia/src/extensions/forms/hooks/useFieldProps.ts b/packages/dnb-eufemia/src/extensions/forms/hooks/useFieldProps.ts
@@ -334,9 +334,9 @@ export default function useFieldProps<Value, EmptyValue, Props>(
     useCallback(
       (path) => {
         const props = fieldPropsRef.current?.[path]
-        return { props }
+        return { props, id }
       },
-      [fieldPropsRef]
+      [fieldPropsRef, id]
     )
 
   const messageCacheRef = useRef<{

diff --git a/packages/dnb-eufemia/src/extensions/forms/types.ts b/packages/dnb-eufemia/src/extensions/forms/types.ts
@@ -276,6 +276,7 @@ export type MessagePropParams<Value> = {
   getValueByPath: GetValueByPath<Value>
   getFieldByPath: (path: Path) => {
     props: FieldProps
+    id: Identifier
   }
 }
 export type MessageProp<Value, T> =