fix: update default props to JS default params (#1598)

* refactor(react-18): replace defaultProps with JS default params * refactor(react-18): replace remaining defaultProps manually * refactor(react-18): fix wrong replacement for forwardRef and class components * refactor(react-18): use static defaultProps for class components * fix: avoid unnecessary rerenders using stable default prop references (partial) * fix: stable default prop references * fix: add missing defaultProps for file-input-field --------- Co-authored-by: Austin McGee <947888+amcgee@users.noreply.github.com> Co-authored-by: Kai Vandivier <kpvandivier@gmail.com>
dhis2 · Sep 26, 2024 · 20e343f · 20e343f
1 parent 37d0b5a
commit 20e343f
Show file tree

Hide file tree

Showing 130 changed files with 597 additions and 859 deletions.
diff --git a/components/alert/src/alert-bar/alert-bar.js b/components/alert/src/alert-bar/alert-bar.js
@@ -13,10 +13,10 @@ const AlertBar = ({
  children,
  className,
  critical,
- dataTest,
- duration,
+ dataTest = 'dhis2-uicore-alertbar',
+ duration = 8000,
  hidden,
- icon,
+ icon = true,
  permanent,
  success,
  warning,
@@ -142,12 +142,6 @@ const alertTypePropType = mutuallyExclusive(
  PropTypes.bool
 )
 
-AlertBar.defaultProps = {
- duration: 8000,
- dataTest: 'dhis2-uicore-alertbar',
- icon: true,
-}
-
 AlertBar.propTypes = {
  /** An array of 0-2 action objects 
 `[{label: "Save", onClick: clickHandler}]`*/

diff --git a/components/alert/src/alert-bar/icon.js b/components/alert/src/alert-bar/icon.js
@@ -9,7 +9,7 @@ import {
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const StatusIcon = ({ error, warning, valid, info, defaultTo }) => {
+const StatusIcon = ({ error, warning, valid, info, defaultTo = null }) => {
  if (error) {
  return <IconErrorFilled24 color={colors.white} />
  }
@@ -26,10 +26,6 @@ const StatusIcon = ({ error, warning, valid, info, defaultTo }) => {
  return defaultTo
 }
 
-StatusIcon.defaultProps = {
- defaultTo: null,
-}
-
 StatusIcon.propTypes = {
  defaultTo: PropTypes.element,
  error: PropTypes.bool,

diff --git a/components/alert/src/alert-stack/alert-stack.js b/components/alert/src/alert-stack/alert-stack.js
@@ -4,7 +4,11 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-export const AlertStack = ({ className, children, dataTest }) => (
+export const AlertStack = ({
+ className,
+ children,
+ dataTest = 'dhis2-uicore-alertstack',
+}) => (
  <Portal>
  <div className={cx(className)} data-test={dataTest}>
  {children}
@@ -33,10 +37,6 @@ export const AlertStack = ({ className, children, dataTest }) => (
  </Portal>
 )
 
-AlertStack.defaultProps = {
- dataTest: 'dhis2-uicore-alertstack',
-}
-
 AlertStack.propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,

diff --git a/components/box/src/box.js b/components/box/src/box.js
@@ -11,7 +11,7 @@ export const Box = ({
  maxWidth,
  marginTop,
  children,
- dataTest,
+ dataTest = 'dhis2-uicore-box',
  className,
 }) => (
  <div data-test={dataTest} className={className}>
@@ -31,10 +31,6 @@ export const Box = ({
  </div>
 )
 
-Box.defaultProps = {
- dataTest: 'dhis2-uicore-box',
-}
-
 Box.propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,

diff --git a/components/button/src/button-strip/button-strip.js b/components/button/src/button-strip/button-strip.js
@@ -4,7 +4,13 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { Children } from 'react'
 
-const ButtonStrip = ({ className, children, middle, end, dataTest }) => (
+const ButtonStrip = ({
+ className,
+ children,
+ middle,
+ end,
+ dataTest = 'dhis2-uicore-buttonstrip',
+}) => (
  <div
  className={cx(className, { start: !middle && !end, middle, end })}
  data-test={dataTest}
@@ -39,10 +45,6 @@ const ButtonStrip = ({ className, children, middle, end, dataTest }) => (
 
 const alignmentPropType = mutuallyExclusive(['middle', 'end'], PropTypes.bool)
 
-ButtonStrip.defaultProps = {
- dataTest: 'dhis2-uicore-buttonstrip',
-}
-
 ButtonStrip.propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,

diff --git a/components/button/src/button/button.js b/components/button/src/button/button.js
@@ -8,7 +8,7 @@ import styles from './button.styles.js'
 export const Button = ({
  children,
  className,
- dataTest,
+ dataTest = 'dhis2-uicore-button',
  destructive,
  disabled,
  icon,
@@ -20,7 +20,7 @@ export const Button = ({
  small,
  tabIndex,
  toggled,
- type,
+ type = 'button',
  value,
  onBlur,
  onClick,
@@ -94,11 +94,6 @@ export const Button = ({
  )
 }
 
-Button.defaultProps = {
- type: 'button',
- dataTest: 'dhis2-uicore-button',
-}
-
 Button.propTypes = {
  /** Component to render inside the button */
  children: PropTypes.node,

diff --git a/components/button/src/dropdown-button/dropdown-button.js b/components/button/src/dropdown-button/dropdown-button.js
@@ -67,6 +67,10 @@ class DropdownButton extends Component {
  open: false,
  }
 
+ static defaultProps = {
+ dataTest: 'dhis2-uicore-dropdownbutton',
+ }
+
  anchorRef = React.createRef()
 
  componentDidMount() {
@@ -124,7 +128,7 @@ class DropdownButton extends Component {
  tabIndex,
  type,
  initialFocus,
- dataTest,
+ dataTest = 'dhis2-uicore-dropdownbutton',
  } = this.props
  const open =
  typeof this.props.open === 'boolean'
@@ -181,10 +185,6 @@ class DropdownButton extends Component {
  }
 }
 
-DropdownButton.defaultProps = {
- dataTest: 'dhis2-uicore-dropdownbutton',
-}
-
 DropdownButton.propTypes = {
  /** Children to render inside the buton */
  children: PropTypes.node,

diff --git a/components/button/src/split-button/split-button.js b/components/button/src/split-button/split-button.js
@@ -20,6 +20,10 @@ class SplitButton extends Component {
  open: false,
  }
 
+ static defaultProps = {
+ dataTest: 'dhis2-uicore-splitbutton',
+ }
+
  anchorRef = React.createRef()
 
  componentDidMount() {
@@ -72,7 +76,7 @@ class SplitButton extends Component {
  disabled,
  type,
  tabIndex,
- dataTest,
+ dataTest = 'dhis2-uicore-splitbutton',
  initialFocus,
  } = this.props
 
@@ -159,10 +163,6 @@ class SplitButton extends Component {
  }
 }
 
-SplitButton.defaultProps = {
- dataTest: 'dhis2-uicore-splitbutton',
-}
-
 SplitButton.propTypes = {
  children: PropTypes.string,
  className: PropTypes.string,

diff --git a/components/calendar/src/calendar-input/calendar-input.js b/components/calendar/src/calendar-input/calendar-input.js
@@ -27,6 +27,7 @@ export const CalendarInput = ({
  width,
  cellSize,
  clearable,
+ dataTest = 'dhis2-uiwidgets-calendar-inputfield',
  ...rest
 } = {}) => {
  const ref = useRef()
@@ -72,6 +73,7 @@ export const CalendarInput = ({
  <InputField
  label={i18n.t('Pick a date')}
  {...rest}
+ dataTest={dataTest}
  type="text"
  onFocus={onFocus}
  value={date}
@@ -143,9 +145,6 @@ export const CalendarInput = ({
  )
 }
 
-CalendarInput.defaultProps = {
- dataTest: 'dhis2-uiwidgets-calendar-inputfield',
-}
 CalendarInput.propTypes = {
  ...CalendarProps,
  ...InputFieldProps,

diff --git a/components/calendar/src/calendar/calendar.js b/components/calendar/src/calendar/calendar.js
@@ -15,10 +15,10 @@ export const Calendar = ({
  dir,
  locale,
  numberingSystem,
- weekDayFormat,
+ weekDayFormat = 'narrow',
  timeZone,
- width,
- cellSize,
+ width = '240px',
+ cellSize = '32px',
 }) => {
  const wrapperBorderColor = colors.grey300
  const backgroundColor = 'none'
@@ -85,12 +85,6 @@ export const Calendar = ({
  )
 }
 
-Calendar.defaultProps = {
- cellSize: '32px',
- width: '240px',
- weekDayFormat: 'narrow',
-}
-
 export const CalendarProps = {
  /** the calendar to use such gregory, ethiopic, nepali - full supported list here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/calendars.ts */
  calendar: PropTypes.any.isRequired,

diff --git a/components/calendar/src/stories/calendar-story-wrapper.js b/components/calendar/src/stories/calendar-story-wrapper.js
@@ -6,13 +6,13 @@ import { Calendar } from '../calendar/calendar.js'
 const { calendars, numberingSystems } = constants
 export const CalendarStoryWrapper = (props) => {
  const {
- calendar,
+ calendar = 'gregory',
  locale,
  timeZone,
  dir,
- component: Component,
+ component: Component = Calendar,
  date,
- weekDayFormat,
+ weekDayFormat = 'narrow',
  } = props
  const [selectedCalendar, setSelectedCalendar] = useState(calendar)
  const [selectedNumberingSystem, setSelectedNumberingSystem] = useState()
@@ -159,12 +159,6 @@ export const CalendarStoryWrapper = (props) => {
  )
 }
 
-CalendarStoryWrapper.defaultProps = {
- calendar: 'gregorian',
- component: Calendar,
- weekDayFormat: 'narrow',
-}
-
 CalendarStoryWrapper.propTypes = {
  calendar: PropTypes.string.isRequired,
  component: PropTypes.elementType.isRequired,

diff --git a/components/card/src/card.js b/components/card/src/card.js
@@ -3,7 +3,7 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const Card = ({ className, children, dataTest }) => (
+const Card = ({ className, children, dataTest = 'dhis2-uicore-card' }) => (
  <div className={cx(className)} data-test={dataTest}>
  {children}
 
@@ -23,10 +23,6 @@ const Card = ({ className, children, dataTest }) => (
  </div>
 )
 
-Card.defaultProps = {
- dataTest: 'dhis2-uicore-card',
-}
-
 Card.propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,

diff --git a/components/center/src/center.js b/components/center/src/center.js
@@ -3,7 +3,15 @@ import PropTypes from 'prop-types'
 import React, { forwardRef } from 'react'
 
 export const Center = forwardRef(
- ({ className, dataTest, children, position }, ref) => (
+ (
+ {
+ className,
+ dataTest = 'dhis2-uicore-centeredcontent',
+ children,
+ position = 'middle',
+ },
+ ref
+ ) => (
  <div
  className={cx('center', className, position)}
  data-test={dataTest}
@@ -37,11 +45,6 @@ export const Center = forwardRef(
 
 Center.displayName = 'Center'
 
-Center.defaultProps = {
- dataTest: 'dhis2-uicore-centeredcontent',
- position: 'middle',
-}
-
 Center.propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,

diff --git a/components/checkbox/src/checkbox-field/checkbox-field.js b/components/checkbox/src/checkbox-field/checkbox-field.js
@@ -37,7 +37,7 @@ const CheckboxField = ({
  required,
  helpText,
  validationText,
- dataTest,
+ dataTest = 'dhis2-uiwidgets-checkboxfield',
 }) => (
  <Field
  className={className}
@@ -75,10 +75,6 @@ const CheckboxField = ({
  </Field>
 )
 
-CheckboxField.defaultProps = {
- dataTest: 'dhis2-uiwidgets-checkboxfield',
-}
-
 CheckboxField.propTypes = {
  checked: PropTypes.bool,
  className: PropTypes.string,