chore: simplify usage of extendPropsWithContext (#1576)

dnbexperience · Sep 23, 2022 · 8077fdd · 8077fdd
1 parent a6b3f50
commit 8077fdd
Show file tree

Hide file tree

Showing 67 changed files with 428 additions and 322 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/contribute/getting-started.md b/packages/dnb-design-system-portal/src/docs/contribute/getting-started.md
@@ -138,7 +138,7 @@ And use it as so:
 
 ```tsx
 import { Context } from '../../shared'
-import { usePropsWithContext } from '../../shared/hooks'
+import { extendPropsWithContext } from '../../shared/component-helper'
 
 const defaultProps = {
   myParam: 'value',
@@ -147,7 +147,7 @@ const defaultProps = {
 function MyComponent(props: Types) {
   const context = React.useContext(Context)
 
-  const { myString } = usePropsWithContext(
+  const { myString } = extendPropsWithContext(
     props,
     defaultProps,
     context.getTranslation(props).MyComponent // details below 👇
@@ -164,7 +164,7 @@ The function `getTranslation` will along with the properties support both `local
 
 ```tsx
 import { Context } from '../../shared'
-import { usePropsWithContext } from '../../shared/hooks'
+import { extendPropsWithContext } from '../../shared/component-helper'
 
 const defaultProps = {
   myParam: 'value',
@@ -173,7 +173,7 @@ const defaultProps = {
 function MyComponent(props: Types) {
   const context = React.useContext(Context)
 
-  const { myParam, ...rest } = usePropsWithContext(
+  const { myParam, ...rest } = extendPropsWithContext(
     props,
     defaultProps,
     context.MyComponent
@@ -190,7 +190,7 @@ Form elements, like input, checkbox, slider etc. do support some [FormRow](/uili
 
 ```tsx
 import { Context } from '../../shared'
-import { usePropsWithContext } from '../../shared/hooks'
+import { extendPropsWithContext } from '../../shared/component-helper'
 import { includeValidProps } from '../../components/form-row/FormRowHelpers'
 
 const defaultProps = {
@@ -200,7 +200,7 @@ const defaultProps = {
 function MyComponent(props: Types) {
   const context = React.useContext(Context)
 
-  const { myParam, skeleton, ...rest } = usePropsWithContext(
+  const { myParam, skeleton, ...rest } = extendPropsWithContext(
     props,
     defaultProps,
     includeValidProps(context?.FormRow)
@@ -220,7 +220,7 @@ import { Context } from '../../shared'
 import classnames from 'classnames'
 import {
   validateDOMAttributes,
-  usePropsWithContext,
+  extendPropsWithContext,
 } from '../../shared/component-helper'
 import {
   spacingPropTypes, // In case you need them as PropTypes
@@ -242,7 +242,7 @@ const defaultProps = {
 function MyComponent(props: MyComponentProps) {
   const context = React.useContext(Context)
 
-  const { myParam, className, ...rest } = usePropsWithContext(
+  const { myParam, className, ...rest } = extendPropsWithContext(
     props,
     defaultProps
     // ...
@@ -268,7 +268,7 @@ It depends from case to case on how you would make skeleton support available. T
 
 ```tsx
 import { Context } from '../../shared'
-import { usePropsWithContext } from '../../shared/hooks'
+import { extendPropsWithContext } from '../../shared/component-helper'
 import {
   skeletonDOMAttributes,
   createSkeletonClass,
@@ -281,7 +281,7 @@ const defaultProps = {
 function MyComponent(props: Types) {
   const context = React.useContext(Context)
 
-  const { skeleton, className, ...rest } = usePropsWithContext(
+  const { skeleton, className, ...rest } = extendPropsWithContext(
     props,
     defaultProps,
     { skeleton: context?.skeleton }

diff --git a/packages/dnb-eufemia/src/components/accordion/Accordion.js b/packages/dnb-eufemia/src/components/accordion/Accordion.js
@@ -12,7 +12,7 @@ import {
   makeUniqueId,
   registerElement,
   findElementInChildren,
-  extendPropsWithContext,
+  extendPropsWithContextInClassComponent,
   validateDOMAttributes,
   dispatchCustomElementEvent,
 } from '../../shared/component-helper'
@@ -244,7 +244,7 @@ export default class Accordion extends React.PureComponent {
               let { expanded } = this.state
 
               // use only the props from context, who are available here anyway
-              const props = extendPropsWithContext(
+              const props = extendPropsWithContextInClassComponent(
                 this.props,
                 Accordion.defaultProps,
                 this.context, // group context
@@ -316,7 +316,7 @@ export default class Accordion extends React.PureComponent {
               // to remove spacing props
               validateDOMAttributes(this.props, rest)
 
-              const extendProps = extendPropsWithContext(
+              const extendProps = extendPropsWithContextInClassComponent(
                 this.props,
                 Accordion.defaultProps,
                 this.state,

diff --git a/packages/dnb-eufemia/src/components/accordion/AccordionHeader.js b/packages/dnb-eufemia/src/components/accordion/AccordionHeader.js
@@ -8,7 +8,7 @@ import PropTypes from 'prop-types'
 import {
   isTrue,
   validateDOMAttributes,
-  extendPropsWithContext,
+  extendPropsWithContextInClassComponent,
 } from '../../shared/component-helper'
 import IconPrimary from '../../components/icon-primary/IconPrimary'
 import classnames from 'classnames'
@@ -174,7 +174,7 @@ export default class AccordionHeader extends React.PureComponent {
   }
 
   static defaultProps = {
-    id: null, // make sure we have id here, so it gets picked up by extendPropsWithContext
+    id: null, // make sure we have id here, so it gets picked up by extendPropsWithContextInClassComponent
     title: null,
     description: null,
     left_component: null,
@@ -243,7 +243,7 @@ export default class AccordionHeader extends React.PureComponent {
   }
 
   render() {
-    const props = extendPropsWithContext(
+    const props = extendPropsWithContextInClassComponent(
       this.props,
       AccordionHeader.defaultProps,
       this.context

diff --git a/packages/dnb-eufemia/src/components/accordion/AccordionProvider.js b/packages/dnb-eufemia/src/components/accordion/AccordionProvider.js
@@ -9,7 +9,7 @@ import classnames from 'classnames'
 import {
   isTrue,
   makeUniqueId,
-  extendPropsWithContext,
+  extendPropsWithContextInClassComponent,
   registerElement,
   validateDOMAttributes,
   dispatchCustomElementEvent,
@@ -19,6 +19,7 @@ import {
   accordionPropTypes,
   accordionDefaultProps,
 } from './AccordionPropTypes'
+import { includeValidProps } from '../form-row/FormRowHelpers'
 
 import Context from '../../shared/Context'
 import AccordionGroupContext from './AccordionProviderContext'
@@ -67,10 +68,10 @@ export default class AccordionGroup extends React.PureComponent {
 
   render() {
     // use only the props from context, who are available here anyway
-    const props = extendPropsWithContext(
+    const props = extendPropsWithContextInClassComponent(
       this.props,
       AccordionGroup.defaultProps,
-      this.context.FormRow,
+      includeValidProps(this.context.FormRow),
       this.context.Accordion,
       this.context.getTranslation(this.props).Accordion
     )

diff --git a/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js b/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js
@@ -12,7 +12,7 @@ import {
   isTrue,
   isTouchDevice,
   makeUniqueId,
-  extendPropsWithContext,
+  extendPropsWithContextInClassComponent,
   registerElement,
   validateDOMAttributes,
   dispatchCustomElementEvent,
@@ -35,6 +35,7 @@ import {
   spacingPropTypes,
   createSpacingClasses,
 } from '../space/SpacingHelper'
+import { includeValidProps } from '../form-row/FormRowHelpers'
 
 import Suffix from '../../shared/helpers/Suffix'
 import FormLabel from '../form-label/FormLabel'
@@ -1670,11 +1671,11 @@ class AutocompleteInstance extends React.PureComponent {
 
   render() {
     // use only the props from context, who are available here anyway
-    const props = (this._props = extendPropsWithContext(
+    const props = (this._props = extendPropsWithContextInClassComponent(
       this.props,
       Autocomplete.defaultProps,
       this.context.getTranslation(this.props).Autocomplete,
-      this.context.FormRow,
+      includeValidProps(this.context.FormRow),
       this.context.Autocomplete
     ))
 

diff --git a/packages/dnb-eufemia/src/components/avatar/Avatar.tsx b/packages/dnb-eufemia/src/components/avatar/Avatar.tsx
@@ -12,8 +12,11 @@ import Img, { ImgProps } from '../../elements/Img'
 import Context from '../../shared/Context'
 import { ISpacingProps } from '../../shared/interfaces'
 import { SkeletonShow } from '../skeleton/Skeleton'
-import { validateDOMAttributes, warn } from '../../shared/component-helper'
-import { usePropsWithContext } from '../../shared/hooks'
+import {
+  validateDOMAttributes,
+  extendPropsWithContext,
+  warn,
+} from '../../shared/component-helper'
 
 // Internal
 import AvatarGroup, { AvatarGroupContext } from './AvatarGroup'
@@ -90,7 +93,7 @@ const Avatar = (localProps: AvatarProps & ISpacingProps) => {
   const avatarGroupContext = React.useContext(AvatarGroupContext)
 
   // Extract additional props from global context
-  const allProps = usePropsWithContext(
+  const allProps = extendPropsWithContext(
     localProps,
     defaultProps,
     context?.Avatar,

diff --git a/packages/dnb-eufemia/src/components/avatar/AvatarGroup.tsx b/packages/dnb-eufemia/src/components/avatar/AvatarGroup.tsx
@@ -6,10 +6,12 @@ import { createSpacingClasses } from '../space/SpacingHelper'
 import { AvatarSizes, AvatarVariants } from './Avatar'
 
 // Shared
-import { validateDOMAttributes } from '../../shared/component-helper'
+import {
+  validateDOMAttributes,
+  extendPropsWithContext,
+} from '../../shared/component-helper'
 import Context from '../../shared/Context'
 import { ISpacingProps } from '../../shared/interfaces'
-import { usePropsWithContext } from '../../shared/hooks'
 import { SkeletonShow } from '../skeleton/Skeleton'
 
 export interface AvatarGroupProps {
@@ -80,9 +82,14 @@ const AvatarGroup = (localProps: AvatarGroupProps & ISpacingProps) => {
     maxElements: maxElementsProp,
     variant,
     ...props
-  } = usePropsWithContext(localProps, defaultProps, context?.AvatarGroup, {
-    skeleton: context?.skeleton,
-  })
+  } = extendPropsWithContext(
+    localProps,
+    defaultProps,
+    context?.AvatarGroup,
+    {
+      skeleton: context?.skeleton,
+    }
+  )
 
   const maxElements =
     maxElementsProp && maxElementsProp > 0 ? maxElementsProp : 4

diff --git a/packages/dnb-eufemia/src/components/badge/Badge.tsx b/packages/dnb-eufemia/src/components/badge/Badge.tsx
@@ -9,8 +9,10 @@ import { createSkeletonClass } from '../skeleton/SkeletonHelper'
 import Context from '../../shared/Context'
 import { ISpacingProps } from '../../shared/interfaces'
 import { SkeletonShow } from '../skeleton/Skeleton'
-import { usePropsWithContext } from '../../shared/component-helper'
-import { warn } from '../../shared/component-helper'
+import {
+  warn,
+  extendPropsWithContext,
+} from '../../shared/component-helper'
 
 export interface BadgeProps {
   /**
@@ -80,7 +82,7 @@ function Badge(localProps: BadgeAndISpacingProps) {
   const context = React.useContext(Context)
 
   // Extract additional props from global context
-  const { children, ...props } = usePropsWithContext(
+  const { children, ...props } = extendPropsWithContext(
     localProps,
     defaultProps,
     context?.Badge

diff --git a/packages/dnb-eufemia/src/components/breadcrumb/Breadcrumb.tsx b/packages/dnb-eufemia/src/components/breadcrumb/Breadcrumb.tsx
@@ -12,13 +12,13 @@ import { useMediaQuery } from '../../shared'
 import Context from '../../shared/Context'
 import { ISpacingProps } from '../../shared/interfaces'
 import { SkeletonShow } from '../skeleton/Skeleton'
-import { usePropsWithContext } from '../../shared/hooks'
 
 // Internal
 import BreadcrumbItem, { BreadcrumbItemProps } from './BreadcrumbItem'
 import {
   convertJsxToString,
   validateDOMAttributes,
+  extendPropsWithContext,
 } from '../../shared/component-helper'
 import { BreadcrumbMultiple } from './BreadcrumbMultiple'
 
@@ -137,7 +137,7 @@ const Breadcrumb = (localProps: BreadcrumbProps & ISpacingProps) => {
   const context = React.useContext(Context)
 
   // Extract additional props from global context
-  const allProps = usePropsWithContext(
+  const allProps = extendPropsWithContext(
     localProps,
     defaultProps,
     context?.translation?.Breadcrumb,

diff --git a/packages/dnb-eufemia/src/components/breadcrumb/BreadcrumbItem.tsx b/packages/dnb-eufemia/src/components/breadcrumb/BreadcrumbItem.tsx
@@ -13,7 +13,7 @@ import homeIcon from '../../icons/home'
 // Shared
 import Context from '../../shared/Context'
 import { SkeletonShow } from '../skeleton/Skeleton'
-import { usePropsWithContext } from '../../shared/hooks'
+import { extendPropsWithContext } from '../../shared/component-helper'
 
 export interface BreadcrumbItemProps {
   /**
@@ -75,7 +75,11 @@ const BreadcrumbItem = (localProps: BreadcrumbItemProps) => {
 
   // Extract additional props from global context
   const { text, href, icon, onClick, variant, skeleton, style, ...props } =
-    usePropsWithContext(localProps, defaultProps, context?.BreadcrumbItem)
+    extendPropsWithContext(
+      localProps,
+      defaultProps,
+      context?.BreadcrumbItem
+    )
 
   const currentIcon: IconPrimaryIcon =
     icon || (variant === 'home' && homeIcon) || 'chevron_left'

diff --git a/packages/dnb-eufemia/src/components/button/Button.js b/packages/dnb-eufemia/src/components/button/Button.js
@@ -11,7 +11,7 @@ import {
   warn,
   makeUniqueId,
   isTrue,
-  extendPropsWithContext,
+  extendPropsWithContextInClassComponent,
   registerElement,
   validateDOMAttributes,
   processChildren,
@@ -26,6 +26,7 @@ import {
   skeletonDOMAttributes,
   createSkeletonClass,
 } from '../skeleton/SkeletonHelper'
+import { includeValidProps } from '../form-row/FormRowHelpers'
 import IconPrimary from '../icon-primary/IconPrimary'
 import { launch, launch_medium } from '../../icons'
 import FormStatus from '../form-status/FormStatus'
@@ -93,11 +94,11 @@ export default class Button extends React.PureComponent {
 
   render() {
     // use only the props from context, who are available here anyway
-    const props = extendPropsWithContext(
+    const props = extendPropsWithContextInClassComponent(
       this.props,
       Button.defaultProps,
       { skeleton: this.context?.skeleton },
-      this.context.FormRow,
+      includeValidProps(this.context.FormRow),
       this.context.Button
     )
 

diff --git a/packages/dnb-eufemia/src/components/checkbox/Checkbox.js b/packages/dnb-eufemia/src/components/checkbox/Checkbox.js
@@ -10,7 +10,7 @@ import keycode from 'keycode'
 import {
   isTrue,
   makeUniqueId,
-  extendPropsWithContext,
+  extendPropsWithContextInClassComponent,
   registerElement,
   validateDOMAttributes,
   getStatusState,
@@ -26,6 +26,7 @@ import {
   skeletonDOMAttributes,
   createSkeletonClass,
 } from '../skeleton/SkeletonHelper'
+import { includeValidProps } from '../form-row/FormRowHelpers'
 
 import Context from '../../shared/Context'
 import Suffix from '../../shared/helpers/Suffix'
@@ -186,12 +187,12 @@ export default class Checkbox extends React.PureComponent {
 
   render() {
     // use only the props from context, who are available here anyway
-    const props = extendPropsWithContext(
+    const props = extendPropsWithContextInClassComponent(
       this.props,
       Checkbox.defaultProps,
       { skeleton: this.context && this.context.skeleton },
       this.context.getTranslation(this.props).Checkbox,
-      this.context.FormRow,
+      includeValidProps(this.context.FormRow),
       this.context.Checkbox
     )