refactor(react-18): fix wrong replacement for forwardRef and class co…

…mponents
dhis2 · Sep 14, 2024 · d6875ea · d6875ea
1 parent 5437911
commit d6875ea
Show file tree

Hide file tree

Showing 33 changed files with 162 additions and 87 deletions.
diff --git a/components/button/src/dropdown-button/dropdown-button.js b/components/button/src/dropdown-button/dropdown-button.js
@@ -124,7 +124,7 @@ class DropdownButton extends Component {
             tabIndex,
             type,
             initialFocus,
-            dataTest,
+            dataTest = 'dhis2-uicore-dropdownbutton',
         } = this.props
         const open =
             typeof this.props.open === 'boolean'

diff --git a/components/button/src/split-button/split-button.js b/components/button/src/split-button/split-button.js
@@ -72,7 +72,7 @@ class SplitButton extends Component {
             disabled,
             type,
             tabIndex,
-            dataTest,
+            dataTest = 'dhis2-uicore-splitbutton',
             initialFocus,
         } = this.props
 

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}

diff --git a/components/calendar/src/stories/calendar-story-wrapper.js b/components/calendar/src/stories/calendar-story-wrapper.js
@@ -1,17 +1,18 @@
 import { constants } from '@dhis2/multi-calendar-dates'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
+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()

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}

diff --git a/components/checkbox/src/checkbox-field/checkbox-field.js b/components/checkbox/src/checkbox-field/checkbox-field.js
@@ -5,11 +5,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { Checkbox } from '../checkbox/index.js'
 
-const AddRequired = ({
-    label,
-    required,
-    dataTest = 'dhis2-uiwidgets-checkboxfield',
-}) => (
+const AddRequired = ({ label, required, dataTest }) => (
     <React.Fragment>
         {label}
         {required && <Required dataTest={`${dataTest}-required`} />}

diff --git a/components/checkbox/src/checkbox/checkbox.js b/components/checkbox/src/checkbox/checkbox.js
@@ -60,8 +60,8 @@ class Checkbox extends Component {
 
     render() {
         const {
-            checked,
-            indeterminate,
+            checked = false,
+            indeterminate = false,
             className,
             disabled,
             error,
@@ -72,7 +72,7 @@ class Checkbox extends Component {
             value,
             warning,
             dense,
-            dataTest,
+            dataTest = 'dhis2-uicore-checkbox',
         } = this.props
 
         const classes = cx({

diff --git a/components/file-input/src/file-input-field-with-list/file-input-field-with-list.js b/components/file-input/src/file-input-field-with-list/file-input-field-with-list.js
@@ -2,6 +2,7 @@ import { sharedPropTypes } from '@dhis2/ui-constants'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { FileInputField } from '../file-input-field/index.js'
+import i18n from '../locales/index.js'
 import { FileListItemWithRemove } from './file-list-item-with-remove.js'
 
 // TODO: i18n
@@ -61,12 +62,12 @@ class FileInputFieldWithList extends Component {
     render() {
         const {
             accept,
-            buttonLabel,
+            buttonLabel = () => i18n.t('Upload a file'),
             className,
-            dataTest,
+            dataTest = 'dhis2-uiwidgets-fileinputfieldwithlist',
             disabled,
             error,
-            files,
+            files = [],
             helpText,
             initialFocus,
             label,
@@ -76,8 +77,8 @@ class FileInputFieldWithList extends Component {
             onBlur,
             onFocus,
             onKeyDown,
-            placeholder,
-            removeText,
+            placeholder = () => i18n.t('No file uploaded yet'),
+            removeText = () => i18n.t('Remove'),
             required,
             small,
             tabIndex,

diff --git a/components/file-input/src/file-input/file-input.js b/components/file-input/src/file-input/file-input.js
@@ -50,10 +50,10 @@ class FileInput extends Component {
 
     render() {
         const {
-            accept,
+            accept = '*',
             buttonLabel,
             className,
-            dataTest,
+            dataTest = 'dhis2-uicore-fileinput',
             disabled,
             error,
             initialFocus,

diff --git a/components/input/src/input-field/input-field.js b/components/input/src/input-field/input-field.js
@@ -35,7 +35,7 @@ class InputField extends React.Component {
             validationText,
             inputWidth,
             autoComplete,
-            dataTest,
+            dataTest = 'dhis2-uiwidgets-inputfield',
         } = this.props
 
         return (

diff --git a/components/input/src/input/input.js b/components/input/src/input/input.js
@@ -132,7 +132,7 @@ export class Input extends Component {
         const {
             role,
             className,
-            type,
+            type = 'text',
             dense,
             disabled,
             readOnly,
@@ -148,7 +148,7 @@ export class Input extends Component {
             min,
             step,
             autoComplete,
-            dataTest,
+            dataTest = 'dhis2-uicore-input',
         } = this.props
 
         return (

diff --git a/components/logo/src/logo.js b/components/logo/src/logo.js
@@ -16,10 +16,9 @@ const blue = '#0080d4'
 const white = '#ffffff'
 const dark = '#212225'
 
-export const LogoIcon = ({
-    className,
-    dataTest = 'dhis2-uicore-logowhite',
-}) => <LogoIconSvg iconColor={blue} className={className} dataTest={dataTest} />
+export const LogoIcon = ({ className, dataTest = 'dhis2-uicore-logoicon' }) => (
+    <LogoIconSvg iconColor={blue} className={className} dataTest={dataTest} />
+)
 
 LogoIcon.propTypes = {
     className: PropTypes.string,
@@ -28,7 +27,7 @@ LogoIcon.propTypes = {
 
 export const LogoIconWhite = ({
     className,
-    dataTest = 'dhis2-uicore-logowhite',
+    dataTest = 'dhis2-uicore-logoiconwhite',
 }) => (
     <LogoIconSvg iconColor={white} className={className} dataTest={dataTest} />
 )
@@ -38,7 +37,7 @@ LogoIconWhite.propTypes = {
     dataTest: PropTypes.string,
 }
 
-export const Logo = ({ className, dataTest = 'dhis2-uicore-logowhite' }) => (
+export const Logo = ({ className, dataTest = 'dhis2-uicore-logo' }) => (
     <LogoSvg
         iconColor={blue}
         textColor={dark}

diff --git a/components/popover/src/popover.e2e.stories.js b/components/popover/src/popover.e2e.stories.js
@@ -21,8 +21,12 @@ class PopperInBoxWithCenteredReferenceElement extends Component {
     ref = createRef()
 
     render() {
-        const { paddingTop, popoverHeight, popoverWidth, ...popoverProps } =
-            this.props
+        const {
+            paddingTop = 220,
+            popoverHeight = 200,
+            popoverWidth = 336,
+            ...popoverProps
+        } = this.props
         return (
             <div style={{ ...boxStyle, paddingTop, height: paddingTop + 100 }}>
                 <div

diff --git a/components/radio/src/radio.js b/components/radio/src/radio.js
@@ -58,7 +58,7 @@ class Radio extends Component {
             value,
             warning,
             dense,
-            dataTest,
+            dataTest = 'dhis2-uicore-radio',
         } = this.props
 
         const classes = cx({

diff --git a/components/select/src/multi-select-field/multi-select-field.js b/components/select/src/multi-select-field/multi-select-field.js
@@ -3,6 +3,7 @@ import { Box } from '@dhis2-ui/box'
 import { Field } from '@dhis2-ui/field'
 import PropTypes from 'prop-types'
 import React from 'react'
+import i18n from '../locales/index.js'
 import { MultiSelect } from '../multi-select/index.js'
 
 // TODO: translate
@@ -29,7 +30,7 @@ class MultiSelectField extends React.Component {
             disabled,
             warning,
             loading,
-            selected,
+            selected = [],
             tabIndex,
             helpText,
             validationText,
@@ -38,17 +39,17 @@ class MultiSelectField extends React.Component {
             inputWidth,
             children,
             clearable,
-            clearText,
+            clearText = () => i18n.t('Clear'),
             filterable,
-            filterPlaceholder,
+            filterPlaceholder = () => i18n.t('Type to filter options'),
             placeholder,
             prefix,
-            empty,
-            loadingText,
-            noMatchText,
+            empty = () => i18n.t('No data found'),
+            loadingText = () => i18n.t('Loading options'),
+            noMatchText = () => i18n.t('No options found'),
             initialFocus,
             dense,
-            dataTest,
+            dataTest = 'dhis2-uiwidgets-multiselectfield',
         } = this.props
 
         return (

diff --git a/components/select/src/single-select-field/single-select-field.js b/components/select/src/single-select-field/single-select-field.js
@@ -3,6 +3,7 @@ import { Box } from '@dhis2-ui/box'
 import { Field } from '@dhis2-ui/field'
 import PropTypes from 'prop-types'
 import React from 'react'
+import i18n from '../locales/index.js'
 import { SingleSelect } from '../single-select/index.js'
 
 // TODO: translate
@@ -28,7 +29,7 @@ class SingleSelectField extends React.Component {
             warning,
             disabled,
             loading,
-            selected,
+            selected = '',
             tabIndex,
             helpText,
             validationText,
@@ -37,17 +38,17 @@ class SingleSelectField extends React.Component {
             inputWidth,
             children,
             clearable,
-            clearText,
+            clearText = () => i18n.t('Clear'),
             filterable,
-            filterPlaceholder,
+            filterPlaceholder = () => i18n.t('Type to filter options'),
             placeholder,
             prefix,
-            empty,
-            loadingText,
-            noMatchText,
+            empty = () => i18n.t('No data found'),
+            loadingText = () => i18n.t('Loading options'),
+            noMatchText = () => i18n.t('No options found'),
             initialFocus,
             dense,
-            dataTest,
+            dataTest = 'dhis2-uiwidgets-singleselectfield',
         } = this.props
 
         return (

diff --git a/components/switch/src/switch-field/switch-field.js b/components/switch/src/switch-field/switch-field.js
@@ -5,11 +5,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { Switch } from '../switch/index.js'
 
-const AddRequired = ({
-    label,
-    required,
-    dataTest = 'dhis2-uiwidgets-switchfield',
-}) => (
+const AddRequired = ({ label, required, dataTest }) => (
     <React.Fragment>
         {label}
         {required && <Required dataTest={`${dataTest}-required`} />}

diff --git a/components/switch/src/switch/switch.js b/components/switch/src/switch/switch.js
@@ -48,7 +48,7 @@ class Switch extends Component {
     render() {
         const {
             'aria-label': ariaLabel,
-            checked,
+            checked = false,
             className,
             disabled,
             error,
@@ -59,8 +59,8 @@ class Switch extends Component {
             value,
             warning,
             dense,
-            dataTest,
-            role,
+            dataTest = 'dhis2-uicore-switch',
+            role = 'switch',
         } = this.props
 
         const classes = cx({

diff --git a/components/tab/src/tab/tab.js b/components/tab/src/tab/tab.js
@@ -6,7 +6,15 @@ import React, { useState, useEffect, useRef } from 'react'
 
 export const Tab = React.forwardRef(
     (
-        { icon, onClick, selected, disabled, children, className, dataTest },
+        {
+            icon,
+            onClick,
+            selected,
+            disabled,
+            children,
+            className,
+            dataTest = 'dhis2-uicore-tab',
+        },
         ref
     ) => {
         let tabRef = useRef(null)

diff --git a/components/table/src/data-table/data-table-cell.js b/components/table/src/data-table/data-table-cell.js
@@ -7,25 +7,26 @@ export const DataTableCell = forwardRef(
     (
         {
             active,
-            align,
+            align = 'left',
             backgroundColor,
             bordered,
             children,
             className,
             colSpan,
-            dataTest,
+            dataTest = 'dhis2-uicore-datatablecell',
             error,
             fixed,
             large,
-            left,
+
+            left = 'auto',
             muted,
             rowSpan,
             role,
             scope,
             staticStyle,
             tag,
             valid,
-            width,
+            width = 'auto',
             onClick,
             ...props
         },