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 <[email protected]> Co-authored-by: Kai Vandivier <[email protected]>
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,