Refactor: Replace defaultProps with ES6 defaults (#7490)

impress-org · Sep 3, 2024 · 5bbb79b · 5bbb79b
1 parent 3fb43fb
commit 5bbb79b
Show file tree

Hide file tree

Showing 18 changed files with 39 additions and 148 deletions.
diff --git a/src/DonorDashboards/resources/js/app/components/select-control/index.js b/src/DonorDashboards/resources/js/app/components/select-control/index.js
@@ -11,7 +11,7 @@ import './style.scss';
 
 import {__} from '@wordpress/i18n';
 
-const SelectControl = ({label, value, isLoading, onChange, options, placeholder, width, isClearable}) => {
+const SelectControl = ({value, options, isLoading, label = null, onChange = null, placeholder = __('Select...', 'give'), width = null, isClearable = false}) => {
     if (options && options.length < 2) {
         return null;
     }
@@ -107,14 +107,4 @@ SelectControl.propTypes = {
     isClearable: PropTypes.bool,
 };
 
-SelectControl.defaultProps = {
-    label: null,
-    value: null,
-    onChange: null,
-    options: null,
-    placeholder: __('Select...', 'give'),
-    width: null,
-    isClearable: false,
-};
-
 export default SelectControl;
diff --git a/.../js/app/components/subscription-manager/payment-method-control/authorize-control/index.js b/.../js/app/components/subscription-manager/payment-method-control/authorize-control/index.js
@@ -7,7 +7,7 @@ import {useAcceptJs} from 'react-acceptjs';
 
 import './style.scss';
 
-const AuthorizeControl = ({label, value, forwardedRef, gateway}) => {
+const AuthorizeControl = ({label = null, value = null, forwardedRef, gateway}) => {
     const [cardNumber, setCardNumber] = useState(value ? value.card_number : '');
     const [cardExpiryDate, setCardExpiryDate] = useState(
         value ? `${value.card_exp_month} \ ${value.card_exp_year}` : '',
@@ -156,10 +156,4 @@ AuthorizeControl.propTypes = {
     onChange: PropTypes.func,
 };
 
-AuthorizeControl.defaultProps = {
-    label: null,
-    value: null,
-    onChange: null,
-};
-
 export default AuthorizeControl;
diff --git a/...urces/js/app/components/subscription-manager/payment-method-control/card-control/index.js b/...urces/js/app/components/subscription-manager/payment-method-control/card-control/index.js
@@ -6,7 +6,7 @@ import {useAccentColor} from '../../../../hooks';
 
 import './style.scss';
 
-const CardControl = ({label, value, forwardedRef}) => {
+const CardControl = ({label = null, value = null, forwardedRef}) => {
     const [cardNumber, setCardNumber] = useState(value ? value.card_number : '');
     const [cardExpiryDate, setCardExpiryDate] = useState(
         value ? `${value.card_exp_month} \ ${value.card_exp_year}` : ''
@@ -124,10 +124,4 @@ CardControl.propTypes = {
     onChange: PropTypes.func,
 };
 
-CardControl.defaultProps = {
-    label: null,
-    value: null,
-    onChange: null,
-};
-
 export default CardControl;
diff --git a/...ces/js/app/components/subscription-manager/payment-method-control/square-control/index.js b/...ces/js/app/components/subscription-manager/payment-method-control/square-control/index.js
@@ -7,7 +7,7 @@ import './style.scss';
 const cardTokenizeResponse = {};
 let cardBrand = 'unknown';
 
-const SquareControl = ({label, value, forwardedRef, gateway}) => {
+const SquareControl = ({label = null, value, forwardedRef, gateway}) => {
 
     const {applicationID, locationID} = gateway;
 
@@ -78,10 +78,4 @@ SquareControl.propTypes = {
     onChange: PropTypes.func,
 };
 
-SquareControl.defaultProps = {
-    label: null,
-    value: null,
-    onChange: null,
-};
-
 export default SquareControl;
diff --git a/src/DonorDashboards/resources/js/app/components/text-control/index.js b/src/DonorDashboards/resources/js/app/components/text-control/index.js
@@ -3,7 +3,7 @@ import {toUniqueId} from '../../utils';
 
 import './style.scss';
 
-const TextControl = ({label, value, onChange, icon, type}) => {
+const TextControl = ({label = null, value = '', onChange = null, icon = null, type = 'text'}) => {
     const id = toUniqueId(label);
 
     return (
@@ -21,12 +21,4 @@ const TextControl = ({label, value, onChange, icon, type}) => {
     );
 };
 
-TextControl.defaultProps = {
-    label: null,
-    value: '',
-    onChange: null,
-    icon: null,
-    type: 'text',
-};
-
 export default TextControl;
diff --git a/src/DonorDashboards/resources/js/block/color-control/index.js b/src/DonorDashboards/resources/js/block/color-control/index.js
@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 const {useInstanceId} = wp.compose;
 const {BaseControl, ColorPalette} = wp.components;
 
-const ColorControl = ({name, label, help, className, value, hideLabelFromVision, onChange, colors}) => {
+const ColorControl = ({name, label, help, className, value, hideLabelFromVision, onChange = null, colors}) => {
     const instanceId = useInstanceId(ColorControl);
     const id = `give-color-control-${name}-${instanceId}`;
     return (
@@ -29,9 +29,4 @@ ColorControl.propTypes = {
     hideLabelFromVision: PropTypes.bool,
 };
 
-ColorControl.defaultProps = {
-    onChange: null,
-    options: null,
-};
-
 export default ColorControl;
diff --git a/src/MultiFormGoals/resources/js/components/color-control/index.js b/src/MultiFormGoals/resources/js/components/color-control/index.js
@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 const {useInstanceId} = wp.compose;
 const {BaseControl, ColorPalette} = wp.components;
 
-const ColorControl = ({name, label, help, className, value, hideLabelFromVision, onChange, colors}) => {
+const ColorControl = ({name, label, help, className, value, hideLabelFromVision, onChange = null, colors}) => {
     const instanceId = useInstanceId(ColorControl);
     const id = `give-color-control-${name}-${instanceId}`;
     return (
@@ -29,9 +29,4 @@ ColorControl.propTypes = {
     hideLabelFromVision: PropTypes.bool,
 };
 
-ColorControl.defaultProps = {
-    onChange: null,
-    options: null,
-};
-
 export default ColorControl;
diff --git a/src/MultiFormGoals/resources/js/components/date-time-control/index.js b/src/MultiFormGoals/resources/js/components/date-time-control/index.js
@@ -11,7 +11,7 @@ const {DateTimePicker, BaseControl, Button, Dropdown} = wp.components;
 const {__experimentalGetSettings, date} = wp.date;
 import { __ } from '@wordpress/i18n'
 
-const DateTimeControl = ({name, label, help, className, value, onChange}) => {
+const DateTimeControl = ({name, label, help, className, value, onChange = null}) => {
     const instanceId = useInstanceId(DateTimeControl);
     const id = `give-date-time-control-${name}-${instanceId}`;
     const settings = __experimentalGetSettings(); // eslint-disable-line no-restricted-syntax
@@ -59,8 +59,4 @@ DateTimeControl.propTypes = {
     className: PropTypes.string,
 };
 
-DateTimeControl.defaultProps = {
-    onChange: null,
-};
-
 export default DateTimeControl;
diff --git a/src/MultiFormGoals/resources/js/components/image-control/index.js b/src/MultiFormGoals/resources/js/components/image-control/index.js
@@ -11,7 +11,7 @@ const {BaseControl, Button} = wp.components;
 const {MediaUpload} = wp.blockEditor;
 import { __ } from '@wordpress/i18n'
 
-const ImageControl = ({name, label, help, className, value, hideLabelFromVision, onChange}) => {
+const ImageControl = ({name, label, help, className, value, hideLabelFromVision, onChange = null}) => {
     const instanceId = useInstanceId(ImageControl);
     const id = `give-image-control-${name}-${instanceId}`;
     return (
@@ -53,9 +53,4 @@ ImageControl.propTypes = {
     hideLabelFromVision: PropTypes.bool,
 };
 
-ImageControl.defaultProps = {
-    onChange: null,
-    options: null,
-};
-
 export default ImageControl;
diff --git a/src/MultiFormGoals/resources/js/components/multi-select-control/index.js b/src/MultiFormGoals/resources/js/components/multi-select-control/index.js
@@ -18,16 +18,16 @@ import './style.scss';
 
 const MultiSelectControl = ({
     name,
-    label,
+    label = null,
     help,
     className,
-    value,
-    placeholder,
+    value = null,
+    placeholder = `${__('Select', 'give')}...`,
     hideLabelFromVision,
     isLoading,
     isDisabled,
-    onChange,
-    options,
+    onChange = null,
+    options = null,
 }) => {
     const instanceId = useInstanceId(MultiSelectControl);
     const id = `give-multi-select-control-${name}-${instanceId}`;
@@ -76,12 +76,4 @@ MultiSelectControl.propTypes = {
     placeholder: PropTypes.string,
 };
 
-MultiSelectControl.defaultProps = {
-    label: null,
-    value: null,
-    onChange: null,
-    placeholder: `${__('Select', 'give')}...`,
-    options: null,
-};
-
 export default MultiSelectControl;
diff --git a/src/MultiFormGoals/resources/js/components/server-side-render-x/index.js b/src/MultiFormGoals/resources/js/components/server-side-render-x/index.js
@@ -98,7 +98,20 @@ export class ServerSideRenderX extends Component {
             prevResponseHTML = `<div style="position:relative;"><div style="position:absolute;right:${right}${unit};top:${top}${unit};z-index:1"><span class="components-spinner"></span></div>${prevResponse}</div>`;
         }
 
-        const {className, EmptyResponsePlaceholder, ErrorResponsePlaceholder} = this.props;
+        const {
+            className,
+            EmptyResponsePlaceholder = ({className}) => (
+                <Placeholder className={className}>{__('Block rendered as empty.')}</Placeholder>
+            ),
+            ErrorResponsePlaceholder = ({response, className}) => {
+                const errorMessage = sprintf(
+                    // translators: %s: error message describing the problem
+                    __('Error loading block: %s'),
+                    response.errorMsg
+                );
+                return <Placeholder className={className}>{errorMessage}</Placeholder>;
+            },
+        } = this.props;
 
         if (response === '') {
             return <EmptyResponsePlaceholder response={response} {...this.props} />;
@@ -122,18 +135,4 @@ export class ServerSideRenderX extends Component {
     }
 }
 
-ServerSideRenderX.defaultProps = {
-    EmptyResponsePlaceholder: ({className}) => (
-        <Placeholder className={className}>{__('Block rendered as empty.')}</Placeholder>
-    ),
-    ErrorResponsePlaceholder: ({response, className}) => {
-        const errorMessage = sprintf(
-            // translators: %s: error message describing the problem
-            __('Error loading block: %s'),
-            response.errorMsg
-        );
-        return <Placeholder className={className}>{errorMessage}</Placeholder>;
-    },
-};
-
 export default ServerSideRenderX;
diff --git a/src/Views/Components/Card/index.js b/src/Views/Components/Card/index.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 // Import styles
 import styles from './style.module.scss';
 
-const Card = ({width, title, children}) => {
+const Card = ({width = 4, title = null, children = null}) => {
     return (
         <div className={styles.card} style={{gridColumn: 'span ' + width}}>
             {title && <div className={styles.title}>{title}</div>}
@@ -21,10 +21,4 @@ Card.propTypes = {
     children: PropTypes.node.isRequired,
 };
 
-Card.defaultProps = {
-    width: 4,
-    title: null,
-    children: null,
-};
-
 export default Card;
diff --git a/src/Views/Components/ListTable/Pagination/index.tsx b/src/Views/Components/ListTable/Pagination/index.tsx
@@ -4,14 +4,16 @@ import styles from './Pagination.module.scss';
 import cx from 'classnames';
 import {__, sprintf} from '@wordpress/i18n';
 
-const Pagination = ({currentPage, totalPages, totalItems = -1, disabled, setPage, singleName, pluralName}) => {
+const Pagination = ({currentPage = 1, totalPages = 0, totalItems = -1, disabled = false, setPage = (n) => {}, singleName, pluralName}) => {
     const [pageInput, setPageInput] = useState(1);
 
     useEffect(() => {
         setPageInput(currentPage);
     }, [currentPage]);
 
+    // @ts-ignore
     const nextPage = parseInt(currentPage) + 1;
+    // @ts-ignore
     const previousPage = parseInt(currentPage) - 1;
 
     return (
@@ -42,6 +44,7 @@ const Pagination = ({currentPage, totalPages, totalItems = -1, disabled, setPage
                         aria-label={__('previous page')}
                         onClick={(e) => {
                             if (e.currentTarget.getAttribute('aria-disabled') === 'false') {
+                                // @ts-ignore
                                 setPage(parseInt(currentPage) - 1);
                             }
                         }}
@@ -80,6 +83,7 @@ const Pagination = ({currentPage, totalPages, totalItems = -1, disabled, setPage
                         aria-label={__('next page')}
                         onClick={(e) => {
                             if (e.currentTarget.getAttribute('aria-disabled') === 'false') {
+                                // @ts-ignore
                                 setPage(parseInt(currentPage) + 1);
                             }
                         }}
@@ -117,11 +121,4 @@ Pagination.propTypes = {
     disabled: PropTypes.bool.isRequired,
 };
 
-Pagination.defaultProps = {
-    currentPage: 1,
-    totalPages: 0,
-    setPage: () => {},
-    disabled: false,
-};
-
 export default Pagination;
diff --git a/src/Views/Components/Modal/index.js b/src/Views/Components/Modal/index.js
@@ -7,7 +7,7 @@ import styles from './styles.module.scss';
 
 import {__} from '@wordpress/i18n';
 
-const Modal = ({visible, type, children, isLoading, handleClose, ...rest}) => {
+const Modal = ({visible = true, type = 'notice', children = {}, isLoading = false, handleClose = () => {}, ...rest}) => {
     const closeModal = useCallback((event) => {
         if (event.keyCode === 27 && typeof handleClose === 'function') {
             handleClose();
@@ -156,12 +156,4 @@ Modal.AdditionalContext.propTypes = {
     context: PropTypes.any.isRequired,
 };
 
-Modal.defaultProps = {
-    visible: true,
-    isLoading: false,
-    type: 'notice',
-    children: {},
-    handleClose: () => {},
-};
-
 export default Modal;
diff --git a/src/Views/Components/Pagination/index.js b/src/Views/Components/Pagination/index.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 
 import { __ } from '@wordpress/i18n'
 
-const Pagination = ({currentPage, totalPages, disabled, setPage}) => {
+const Pagination = ({currentPage = 1, totalPages = 0, disabled = false, setPage = () => {}}) => {
     if (1 >= totalPages) {
         return false;
     }
@@ -100,11 +100,4 @@ Pagination.propTypes = {
     disabled: PropTypes.bool.isRequired,
 };
 
-Pagination.defaultProps = {
-    currentPage: 1,
-    totalPages: 0,
-    setPage: () => {},
-    disabled: false,
-};
-
 export default Pagination;
diff --git a/src/Views/Components/PeriodSelector/index.js b/src/Views/Components/PeriodSelector/index.js
@@ -9,7 +9,7 @@ import 'react-dates/lib/css/_datepicker.css';
 
 import styles from './style.module.scss';
 
-const PeriodSelector = ({period, setDates}) => {
+const PeriodSelector = ({period = {startDate: null, endDate: null}, setDates = () => {}}) => {
     const [focusedInput, setFocusedInput] = useState(null);
 
     const icon = (
@@ -59,12 +59,4 @@ PeriodSelector.propTypes = {
     setDates: PropTypes.func.isRequired,
 };
 
-PeriodSelector.defaultProps = {
-    period: {
-        startDate: null,
-        endDate: null,
-    },
-    setDates: () => {},
-};
-
 export default PeriodSelector;