Forward all non-data-value props to button in iterate button components

dnbexperience · Sep 12, 2023 · ad80ce3 · ad80ce3
1 parent 663ed45
commit ad80ce3
Show file tree

Hide file tree

Showing 30 changed files with 156 additions and 157 deletions.
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection.tsx
@@ -2,11 +2,10 @@ import React, { useMemo } from 'react'
 import { Checkbox, Button } from '../../../components'
 import ButtonRow from '../Layout/ButtonRow'
 import classnames from 'classnames'
-import { forwardSpaceProps } from '../utils'
 import Option from './Option'
 import FieldBlock from '../FieldBlock'
 import { useDataValue } from '../hooks'
-import type { FieldProps } from '../types'
+import { FieldProps, pickSpacingProps } from '../types'
 
 interface IOption {
   title: string
@@ -55,7 +54,7 @@ function ArraySelection(props: Props) {
     label,
     labelDescription,
     labelSecondary,
-    ...forwardSpaceProps(props),
+    ...pickSpacingProps(props),
   }
 
   const options: IOption[] = useMemo(

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/CountryCode.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/CountryCode.tsx
@@ -2,9 +2,13 @@ import React, { useContext, useCallback, useMemo } from 'react'
 import { Autocomplete, HelpButton } from '../../../components'
 import classnames from 'classnames'
 import countries from '../constants/countries'
-import { forwardSpaceProps } from '../utils'
 import { useDataValue } from '../hooks'
-import { FormError, FieldProps, FieldHelpProps } from '../types'
+import {
+  FormError,
+  FieldProps,
+  FieldHelpProps,
+  pickSpacingProps,
+} from '../types'
 import SharedContext from '../../../shared/Context'
 
 export type Props = FieldHelpProps &
@@ -91,7 +95,7 @@ function CountryCode(props: Props) {
       }
       independent_width
       search_numbers
-      {...forwardSpaceProps(props)}
+      {...pickSpacingProps(props)}
       stretch={width === 'stretch'}
     />
   )

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Date.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Date.tsx
@@ -1,8 +1,7 @@
 import React, { useContext } from 'react'
 import { DatePicker, HelpButton } from '../../../components'
-import { forwardSpaceProps } from '../utils'
 import { useDataValue } from '../hooks'
-import type { FieldProps, FieldHelpProps } from '../types'
+import { FieldProps, FieldHelpProps, pickSpacingProps } from '../types'
 import SharedContext from '../../../shared/Context'
 
 export type Props = FieldHelpProps & FieldProps<string>
@@ -47,7 +46,7 @@ function DateComponent(props: Props) {
       on_change={handleChange}
       on_show={handleFocus}
       on_hide={handleBlur}
-      {...forwardSpaceProps(props)}
+      {...pickSpacingProps(props)}
     />
   )
 }

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Number.tsx
@@ -2,10 +2,9 @@ import React, { useMemo } from 'react'
 import { InputMasked, HelpButton } from '../../../components'
 import { InputMaskedProps } from '../../../components/InputMasked'
 import classnames from 'classnames'
-import { forwardSpaceProps } from '../utils'
 import FieldBlock from '../FieldBlock'
 import { useDataValue } from '../hooks'
-import type { FieldProps, FieldHelpProps } from '../types'
+import { FieldProps, FieldHelpProps, pickSpacingProps } from '../types'
 
 interface ErrorMessages {
   required?: string
@@ -154,7 +153,7 @@ function NumberComponent(props: Props) {
       warning={warning}
       error={error}
       contentsWidth={width !== false ? width : undefined}
-      {...forwardSpaceProps(props)}
+      {...pickSpacingProps(props)}
     >
       <InputMasked
         id={id}

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber.tsx
@@ -4,9 +4,8 @@ import { InputMaskedProps } from '../../../components/InputMasked'
 import classnames from 'classnames'
 import CountryCode from './CountryCode'
 import StringComponent from './String'
-import { forwardSpaceProps } from '../utils'
 import { useDataValue } from '../hooks'
-import type { FieldProps } from '../types'
+import { FieldProps, pickSpacingProps } from '../types'
 import SharedContext from '../../../shared/Context'
 
 export type Props = FieldProps<string, undefined> & {
@@ -95,7 +94,7 @@ function PhoneNumber(props: Props) {
           `dnb-forms-field-phone-number--width-${width}`,
         className
       )}
-      {...forwardSpaceProps(preparedProps)}
+      {...pickSpacingProps(preparedProps)}
     >
       <CountryCode
         className={classnames(

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Selection.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Selection.tsx
@@ -3,12 +3,16 @@ import { Button, Dropdown, Radio, HelpButton } from '../../../components'
 import ButtonRow from '../Layout/ButtonRow'
 import FieldBlock from '../FieldBlock'
 import classnames from 'classnames'
-import { forwardSpaceProps } from '../utils'
 import { makeUniqueId } from '../../../shared/component-helper'
 import SharedContext from '../../../shared/Context'
 import Option from './Option'
 import { useDataValue } from '../hooks'
-import { FormError, FieldProps, FieldHelpProps } from '../types'
+import {
+  FormError,
+  FieldProps,
+  FieldHelpProps,
+  pickSpacingProps,
+} from '../types'
 
 interface IOption {
   title: string | React.ReactNode
@@ -93,7 +97,7 @@ function Selection(props: Props) {
   const fieldBlockProps = {
     forId: id,
     className: cn,
-    ...forwardSpaceProps(props),
+    ...pickSpacingProps(props),
     info,
     warning,
     error,
@@ -133,7 +137,7 @@ function Selection(props: Props) {
           vertical={layout === 'vertical'}
           on_change={handleRadioChange}
           value={String(value ?? '')}
-          {...forwardSpaceProps(props)}
+          {...pickSpacingProps(props)}
         >
           {options.map((option, i) => (
             <Radio
@@ -234,7 +238,7 @@ function Selection(props: Props) {
           on_change={handleDropdownChange}
           on_show={handleShow}
           on_hide={handleHide}
-          {...forwardSpaceProps(props)}
+          {...pickSpacingProps(props)}
           stretch={width === 'stretch'}
         />
       )

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/String.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/String.tsx
@@ -5,11 +5,10 @@ import { InputProps } from '../../../components/input/Input'
 import InputMasked, {
   InputMaskedProps,
 } from '../../../components/InputMasked'
-import { forwardSpaceProps } from '../utils'
 import SharedContext from '../../../shared/Context'
 import FieldBlock from '../FieldBlock'
 import { useDataValue } from '../hooks'
-import type { FieldProps, FieldHelpProps } from '../types'
+import { FieldProps, FieldHelpProps, pickSpacingProps } from '../types'
 
 interface ErrorMessages {
   required?: string
@@ -128,7 +127,7 @@ function StringComponent(props: Props) {
       warning={warning}
       error={error}
       contentsWidth={width !== false ? width : undefined}
-      {...forwardSpaceProps(props)}
+      {...pickSpacingProps(props)}
     >
       {multiline ? (
         <Textarea

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Toggle.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Toggle.tsx
@@ -4,8 +4,7 @@ import classnames from 'classnames'
 import ButtonRow from '../Layout/ButtonRow'
 import FieldBlock from '../FieldBlock'
 import { useDataValue } from '../hooks'
-import type { FieldProps } from '../types'
-import { forwardSpaceProps } from '../utils'
+import { FieldProps, pickSpacingProps } from '../types'
 import SharedContext from '../../../shared/Context'
 
 export type Props = FieldProps<unknown> & {
@@ -62,7 +61,7 @@ function Toggle(props: Props) {
   const fieldBlockPropsWithoutLabel = {
     forId: id,
     className: cn,
-    ...forwardSpaceProps(props),
+    ...pickSpacingProps(props),
     info,
     warning,
     error,
@@ -90,7 +89,7 @@ function Toggle(props: Props) {
             checked={isOn}
             disabled={disabled}
             on_change={handleCheckboxChange}
-            {...forwardSpaceProps(props)}
+            {...pickSpacingProps(props)}
           />
         </FieldBlock>
       )

diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx
@@ -2,8 +2,12 @@ import React from 'react'
 import classnames from 'classnames'
 import { Div, Span } from '../../../elements'
 import { FormLabel, FormStatus } from '../../../components'
-import { forwardSpaceProps } from '../utils'
-import { FormError, ComponentProps, FieldProps } from '../types'
+import {
+  FormError,
+  ComponentProps,
+  FieldProps,
+  pickSpacingProps,
+} from '../types'
 
 export type Props = Pick<
   FieldProps,
@@ -50,7 +54,7 @@ function FieldBlock(props: Props) {
   )
 
   return (
-    <Div className={cn} {...forwardSpaceProps(props)}>
+    <Div className={cn} {...pickSpacingProps(props)}>
       {labelDescription || labelSecondary ? (
         <div className={classnames('dnb-forms-field-block__label')}>
           {label || labelDescription ? (

diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldGroup/FieldGroup.tsx b/packages/dnb-eufemia/src/extensions/forms/FieldGroup/FieldGroup.tsx
@@ -1,7 +1,11 @@
 import React, { useState, useCallback, useMemo } from 'react'
 import classnames from 'classnames'
-import { FormError, ComponentProps, FieldProps } from '../types'
-import { forwardSpaceProps } from '../utils'
+import {
+  FormError,
+  ComponentProps,
+  FieldProps,
+  pickSpacingProps,
+} from '../types'
 import FieldBlock from '../FieldBlock'
 
 export interface FieldGroupContextState {
@@ -98,7 +102,7 @@ function FieldGroup(props: Props) {
         info={info}
         warning={warning}
         error={error ?? blockError}
-        {...forwardSpaceProps(props)}
+        {...pickSpacingProps(props)}
       >
         {children}
       </FieldBlock>

diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array.tsx
@@ -4,11 +4,10 @@ import FlexContainer, {
 } from '../Layout/FlexContainer'
 import classnames from 'classnames'
 import pointer from 'json-pointer'
-import { forwardSpaceProps } from '../utils'
 import IterateElementContext from './IterateElementContext'
 import FieldBlock from '../FieldBlock'
 import { useDataValue } from '../hooks'
-import type { FieldProps, FieldHelpProps } from '../types'
+import { FieldProps, FieldHelpProps, pickSpacingProps } from '../types'
 
 interface ErrorMessages {
   required?: string
@@ -88,7 +87,7 @@ function ArrayComponent(props: Props) {
       warning={warning}
       error={error}
       contentsWidth={width !== false ? width : undefined}
-      {...forwardSpaceProps(props)}
+      {...pickSpacingProps(props)}
     >
       <FlexContainer
         direction={layout === 'horizontal' ? 'row' : 'column'}

diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/ArrayPushButton.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/ArrayPushButton.tsx
@@ -2,29 +2,25 @@ import React, { useCallback, useContext } from 'react'
 import classnames from 'classnames'
 import { Button } from '../../../components'
 import { ButtonProps } from '../../../components/Button'
-import { forwardSpaceProps } from '../utils'
 import IterateElementContext from './IterateElementContext'
 import { useDataValue } from '../hooks'
 import {
-  ComponentProps,
-  DataValueReadProps,
-  DataValueWriteProps,
+  DataValueReadWriteComponentProps,
+  omitDataValueReadWriteProps,
 } from '../types'
 
-export type Props = ComponentProps &
-  DataValueReadProps<unknown[]> &
-  DataValueWriteProps<unknown[]> & {
-    text?: ButtonProps['text']
+export type Props = ButtonProps &
+  DataValueReadWriteComponentProps<unknown[]> & {
     pushValue: unknown
-    children?: ButtonProps['children']
   }
 
 function ArrayPushButton(props: Props) {
   const iterateElementContext = useContext(IterateElementContext)
   const { handlePush } = iterateElementContext ?? {}
 
-  const { text, value, pushValue, handleChange, children } =
-    useDataValue(props)
+  const { pushValue, ...restProps } = props
+  const buttonProps = omitDataValueReadWriteProps(restProps)
+  const { value, handleChange, children } = useDataValue(restProps)
 
   if (value !== undefined && !Array.isArray(value)) {
     throw new Error('ArrayPushButton received a non-array value.')
@@ -38,7 +34,6 @@ function ArrayPushButton(props: Props) {
     }
 
     // If not inside an iterate, it could still manipulate a source data set through useDataValue
-    console.log('TO ADD', value)
     handleChange([...(value ?? []), pushValue])
   }, [value, pushValue, handlePush, handleChange])
 
@@ -48,9 +43,8 @@ function ArrayPushButton(props: Props) {
         'dnb-forms-array-push-button',
         props.className
       )}
-      text={text}
       on_click={handleClick}
-      {...forwardSpaceProps(props)}
+      {...buttonProps}
     >
       {children}
     </Button>

diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/ArrayRemoveElementButton.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/ArrayRemoveElementButton.tsx
@@ -2,28 +2,15 @@ import React, { useCallback, useContext } from 'react'
 import classnames from 'classnames'
 import { Button } from '../../../components'
 import { ButtonProps } from '../../../components/Button'
-import { forwardSpaceProps } from '../utils'
 import IterateElementContext from './IterateElementContext'
 import { useDataValue } from '../hooks'
 import {
-  ComponentProps,
-  DataValueReadProps,
-  DataValueWriteProps,
+  DataValueReadWriteComponentProps,
+  omitDataValueReadWriteProps,
 } from '../types'
 
-export type Props = ComponentProps &
-  DataValueReadProps<unknown[]> &
-  DataValueWriteProps<unknown[]> & {
-    // Button props
-    variant?: ButtonProps['variant']
-    size?: ButtonProps['size']
-    text?: ButtonProps['text']
-    icon?: ButtonProps['icon']
-    iconPosition?: ButtonProps['icon_position']
-    iconSize?: ButtonProps['icon_size']
-    title?: ButtonProps['title']
-    children?: ButtonProps['children']
-  }
+export type Props = ButtonProps &
+  DataValueReadWriteComponentProps<unknown[]>
 
 function ArrayRemoveElementButton(props: Props) {
   const iterateElementContext = useContext(IterateElementContext)
@@ -35,16 +22,9 @@ function ArrayRemoveElementButton(props: Props) {
     )
   }
 
-  const {
-    variant,
-    size,
-    text,
-    icon,
-    iconPosition,
-    iconSize,
-    title,
-    children,
-  } = useDataValue(props)
+  const buttonProps = omitDataValueReadWriteProps(props)
+
+  const { children } = useDataValue(props)
 
   const handleClick = useCallback(() => {
     handleRemove()
@@ -56,15 +36,8 @@ function ArrayRemoveElementButton(props: Props) {
         'dnb-forms-array-remove-element-button',
         props.className
       )}
-      variant={variant}
-      size={size}
-      text={text}
-      icon={icon}
-      icon_position={iconPosition}
-      icon_size={iconSize}
-      title={title}
       on_click={handleClick}
-      {...forwardSpaceProps(props)}
+      {...buttonProps}
     >
       {children}
     </Button>