chore: remove usage of deprecated .defaultProps (#4449)

* 4426: parse.js + eslint rules update

transform.js (WIP)

transform.js (WIP)

transform.js: get all files (WIP)

transform.js: const defaultProps (WIP)

transform.js: function + eslint rules (WIP)

* 4426: component changes

* Revert "4426: component changes"

This reverts commit bf72914.

* 4426: using _. style for lodash functions

* 4426: component changes

* apply suggested changes

* remove transform

* replace getElementType with getComponentType

* apply suggestions

* fix tests

* remove rule changes

* remove transform

* apply changes

* apply changes

* apply changes

* apply changes

* fix tests & use getComponentType()

---------

Co-authored-by: Oleksandr Fediashov <[email protected]>

Author: tourman

src/addons/Confirm/Confirm.js

@@ -11,7 +11,14 @@ import Modal from '../../modules/Modal'
  * @see Modal
  */
 const Confirm = React.forwardRef(function (props, ref) {
-  const { cancelButton, confirmButton, content, header, open, size } = props
+  const {
+    cancelButton = 'Cancel',
+    confirmButton = 'OK',
+    content = 'Are you sure?',
+    header,
+    open,
+    size = 'small',
+  } = props
   const rest = getUnhandledProps(Confirm, props)
 
   const handleCancel = (e) => {
@@ -96,11 +103,4 @@ Confirm.propTypes = {
   size: PropTypes.oneOf(['mini', 'tiny', 'small', 'large', 'fullscreen']),
 }
 
-Confirm.defaultProps = {
-  cancelButton: 'Cancel',
-  confirmButton: 'OK',
-  content: 'Are you sure?',
-  size: 'small',
-}
-
 export default Confirm

src/addons/Pagination/Pagination.js

@@ -16,11 +16,28 @@ import PaginationItem from './PaginationItem'
  */
 const Pagination = React.forwardRef(function (props, ref) {
   const {
-    'aria-label': ariaLabel,
-    boundaryRange,
+    'aria-label': ariaLabel = 'Pagination Navigation',
+    boundaryRange = 1,
     disabled,
-    ellipsisItem,
-    siblingRange,
+    ellipsisItem = '...',
+    firstItem = {
+      'aria-label': 'First item',
+      content: '«',
+    },
+    lastItem = {
+      'aria-label': 'Last item',
+      content: '»',
+    },
+    nextItem = {
+      'aria-label': 'Next item',
+      content: '⟩',
+    },
+    pageItem = {},
+    prevItem = {
+      'aria-label': 'Previous item',
+      content: '⟨',
+    },
+    siblingRange = 1,
     totalPages,
   } = props
   const [activePage, setActivePage] = useAutoControlledValue({
@@ -63,10 +80,19 @@ const Pagination = React.forwardRef(function (props, ref) {
   })
   const rest = getUnhandledProps(Pagination, props)
 
+  const paginationItemTypes = {
+    firstItem,
+    lastItem,
+    ellipsisItem,
+    nextItem,
+    pageItem,
+    prevItem,
+  }
+
   return (
     <Menu {...rest} aria-label={ariaLabel} pagination role='navigation' ref={ref}>
       {_.map(items, ({ active, type, value }) =>
-        PaginationItem.create(props[type], {
+        PaginationItem.create(paginationItemTypes[type], {
           defaultProps: {
             content: value,
             disabled,
@@ -129,30 +155,6 @@ Pagination.propTypes = {
   totalPages: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
 }
 
-Pagination.defaultProps = {
-  'aria-label': 'Pagination Navigation',
-  boundaryRange: 1,
-  ellipsisItem: '...',
-  firstItem: {
-    'aria-label': 'First item',
-    content: '«',
-  },
-  lastItem: {
-    'aria-label': 'Last item',
-    content: '»',
-  },
-  nextItem: {
-    'aria-label': 'Next item',
-    content: '⟩',
-  },
-  pageItem: {},
-  prevItem: {
-    'aria-label': 'Previous item',
-    content: '⟨',
-  },
-  siblingRange: 1,
-}
-
 Pagination.Item = PaginationItem
 
 export default Pagination

src/addons/Radio/Radio.js

@@ -10,10 +10,9 @@ import Checkbox from '../../modules/Checkbox'
  * @see Form
  */
 const Radio = React.forwardRef(function (props, ref) {
-  const { slider, toggle, type } = props
+  const { slider, toggle, type = 'radio' } = props
 
   const rest = getUnhandledProps(Radio, props)
-  // const ElementType = getElementType(Radio, props)
   // radio, slider, toggle are exclusive
   // use an undefined radio if slider or toggle are present
   const radio = !(slider || toggle) || undefined
@@ -33,8 +32,4 @@ Radio.propTypes = {
   type: Checkbox.propTypes.type,
 }
 
-Radio.defaultProps = {
-  type: 'radio',
-}
-
 export default Radio

src/addons/TextArea/TextArea.js

@@ -2,14 +2,14 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps, useMergedRefs } from '../../lib'
+import { getComponentType, getUnhandledProps, useMergedRefs } from '../../lib'
 
 /**
  * A TextArea can be used to allow for extended user input.
  * @see Form
  */
 const TextArea = React.forwardRef(function (props, ref) {
-  const { rows, value } = props
+  const { rows = 3, value } = props
   const elementRef = useMergedRefs(ref, React.useRef())
 
   const handleChange = (e) => {
@@ -25,7 +25,7 @@ const TextArea = React.forwardRef(function (props, ref) {
   }
 
   const rest = getUnhandledProps(TextArea, props)
-  const ElementType = getElementType(TextArea, props)
+  const ElementType = getComponentType(props, { defaultAs: 'textarea' })
 
   return (
     <ElementType
@@ -65,9 +65,4 @@ TextArea.propTypes = {
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 }
 
-TextArea.defaultProps = {
-  as: 'textarea',
-  rows: 3,
-}
-
 export default TextArea

src/addons/TransitionablePortal/TransitionablePortal.js

@@ -47,7 +47,13 @@ function usePortalState(props) {
  * @see Transition
  */
 function TransitionablePortal(props) {
-  const { children, transition } = props
+  const {
+    children,
+    transition = {
+      animation: 'scale',
+      duration: 400,
+    },
+  } = props
 
   const [portalOpen, setPortalOpen] = usePortalState(props)
   const [transitionVisible, setTransitionVisible] = React.useState(false)
@@ -165,11 +171,4 @@ TransitionablePortal.propTypes = {
   transition: PropTypes.object,
 }
 
-TransitionablePortal.defaultProps = {
-  transition: {
-    animation: 'scale',
-    duration: 400,
-  },
-}
-
 export default TransitionablePortal

src/collections/Breadcrumb/Breadcrumb.js

@@ -3,7 +3,7 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { childrenUtils, customPropTypes, getUnhandledProps, getElementType, SUI } from '../../lib'
+import { childrenUtils, customPropTypes, getUnhandledProps, getComponentType, SUI } from '../../lib'
 import BreadcrumbDivider from './BreadcrumbDivider'
 import BreadcrumbSection from './BreadcrumbSection'
 
@@ -15,7 +15,7 @@ const Breadcrumb = React.forwardRef(function (props, ref) {
 
   const classes = cx('ui', size, 'breadcrumb', className)
   const rest = getUnhandledProps(Breadcrumb, props)
-  const ElementType = getElementType(Breadcrumb, props)
+  const ElementType = getComponentType(props)
 
   if (!childrenUtils.isNil(children)) {
     return (

src/collections/Breadcrumb/BreadcrumbDivider.js

@@ -8,7 +8,7 @@ import {
   createShorthandFactory,
   customPropTypes,
   getUnhandledProps,
-  getElementType,
+  getComponentType,
 } from '../../lib'
 import Icon from '../../elements/Icon'
 
@@ -20,7 +20,7 @@ const BreadcrumbDivider = React.forwardRef(function (props, ref) {
 
   const classes = cx('divider', className)
   const rest = getUnhandledProps(BreadcrumbDivider, props)
-  const ElementType = getElementType(BreadcrumbDivider, props)
+  const ElementType = getComponentType(props)
 
   if (!_.isNil(icon)) {
     return Icon.create(icon, {

src/collections/Breadcrumb/BreadcrumbSection.js

@@ -8,7 +8,7 @@ import {
   createShorthandFactory,
   customPropTypes,
   getUnhandledProps,
-  getElementType,
+  getComponentType,
   useKeyOnly,
   useEventCallback,
 } from '../../lib'
@@ -21,8 +21,10 @@ const BreadcrumbSection = React.forwardRef(function (props, ref) {
 
   const classes = cx(useKeyOnly(active, 'active'), 'section', className)
   const rest = getUnhandledProps(BreadcrumbSection, props)
-  const ElementType = getElementType(BreadcrumbSection, props, () => {
-    if (link || onClick) return 'a'
+  const ElementType = getComponentType(props, {
+    getDefault: () => {
+      if (link || onClick) return 'a'
+    },
   })
 
   const handleClick = useEventCallback((e) => _.invoke(props, 'onClick', e, props))

src/collections/Form/Form.js

@@ -3,7 +3,7 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps, SUI, useKeyOnly, useWidthProp } from '../../lib'
+import { getComponentType, getUnhandledProps, SUI, useKeyOnly, useWidthProp } from '../../lib'
 import FormButton from './FormButton'
 import FormCheckbox from './FormCheckbox'
 import FormDropdown from './FormDropdown'
@@ -62,7 +62,7 @@ const Form = React.forwardRef(function (props, ref) {
     className,
   )
   const rest = getUnhandledProps(Form, props)
-  const ElementType = getElementType(Form, props)
+  const ElementType = getComponentType(props, { defaultAs: 'form' })
 
   return (
     <ElementType {...rest} action={action} className={classes} onSubmit={handleSubmit} ref={ref}>
@@ -117,10 +117,6 @@ Form.propTypes = {
   widths: PropTypes.oneOf(['equal']),
 }
 
-Form.defaultProps = {
-  as: 'form',
-}
-
 Form.Field = FormField
 Form.Button = FormButton
 Form.Checkbox = FormCheckbox

src/collections/Form/FormButton.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 import Button from '../../elements/Button'
 import FormField from './FormField'
 
@@ -11,15 +11,15 @@ import FormField from './FormField'
  * @see Form
  */
 const FormButton = React.forwardRef((props, ref) => {
-  const { control } = props
+  const { control = Button } = props
+
   const rest = getUnhandledProps(FormButton, props)
-  const ElementType = getElementType(FormButton, props)
+  const ElementType = getComponentType(props, { defaultAs: FormField })
 
   return <ElementType {...rest} control={control} ref={ref} />
 })
 
 FormButton.displayName = 'FormButton'
-
 FormButton.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -28,9 +28,4 @@ FormButton.propTypes = {
   control: FormField.propTypes.control,
 }
 
-FormButton.defaultProps = {
-  as: FormField,
-  control: Button,
-}
-
 export default FormButton

src/collections/Form/FormCheckbox.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 import Checkbox from '../../modules/Checkbox'
 import FormField from './FormField'
 
@@ -11,15 +11,15 @@ import FormField from './FormField'
  * @see Form
  */
 const FormCheckbox = React.forwardRef((props, ref) => {
-  const { control } = props
+  const { control = Checkbox } = props
+
   const rest = getUnhandledProps(FormCheckbox, props)
-  const ElementType = getElementType(FormCheckbox, props)
+  const ElementType = getComponentType(props, { defaultAs: FormField })
 
   return <ElementType {...rest} control={control} ref={ref} />
 })
 
 FormCheckbox.displayName = 'FormCheckbox'
-
 FormCheckbox.propTypes = {
   /** An element type to render as (string or function). */
   as: PropTypes.elementType,
@@ -28,9 +28,4 @@ FormCheckbox.propTypes = {
   control: FormField.propTypes.control,
 }
 
-FormCheckbox.defaultProps = {
-  as: FormField,
-  control: Checkbox,
-}
-
 export default FormCheckbox

src/collections/Form/FormDropdown.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { getElementType, getUnhandledProps } from '../../lib'
+import { getComponentType, getUnhandledProps } from '../../lib'
 import Dropdown from '../../modules/Dropdown'
 import FormField from './FormField'
 
@@ -11,9 +11,10 @@ import FormField from './FormField'
  * @see Form
  */
 const FormDropdown = React.forwardRef(function (props, ref) {
-  const { control } = props
+  const { control = Dropdown } = props
+
   const rest = getUnhandledProps(FormDropdown, props)
-  const ElementType = getElementType(FormDropdown, props)
+  const ElementType = getComponentType(props, { defaultAs: FormField })
 
   return <ElementType {...rest} control={control} ref={ref} />
 })
@@ -27,9 +28,4 @@ FormDropdown.propTypes = {
   control: FormField.propTypes.control,
 }
 
-FormDropdown.defaultProps = {
-  as: FormField,
-  control: Dropdown,
-}
-
 export default FormDropdown