woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-07 19:54:15 +08:00
Code Issues Projects Packages Wiki Activity Actions

Remove the components prop in favor of the native children prop to prevent unnecessary re-renders which are breaking component animations

Browse source
This commit is contained in:
Daniel Dudzic 2024-12-17 11:50:32 +01:00
parent 51613c3020
commit f32f30ef0a
No known key found for this signature in database
GPG key ID: 31B40D33E3465483
13 changed files with 271 additions and 371 deletions
Download patch file Download diff file Expand all files Collapse all files

13
modules/ppcp-settings/resources/js/Components/ReusableComponents/AccordionSection.js
View file

@ -1,8 +1,6 @@
import { Icon } from '@wordpress/components';
import { chevronDown, chevronUp } from '@wordpress/icons';
import classNames from 'classnames';
import { useAccordionState } from '../../hooks/useAccordionState';
// Provide defaults for all layout components so the generic version just works.
@ -24,6 +22,13 @@ const DefaultDescription = ( { children } ) => (
<div className="ppcp-r-accordion__description">{ children }</div>
);
const AccordionContent = ( { isOpen, children } ) => {
if ( ! isOpen || ! children ) {
return null;
}
return <div className="ppcp-r-accordion__content">{ children }</div>;
};
const Accordion = ( {
title,
id = '',
@ -65,9 +70,7 @@ const Accordion = ( {
) }
</Header>
</button>
{ isOpen && children && (
<div className="ppcp-r-accordion__content">{ children }</div>
) }
<AccordionContent isOpen={ isOpen }>{ children }</AccordionContent>
</div>
);
};

10
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/AccordionSettingsBlock.js
View file

@ -9,11 +9,7 @@ import {
} from './SettingsBlockElements';
const SettingsAccordion = ( { title, description, children, ...props } ) => (
<SettingsBlock
{ ...props }
className="ppcp-r-settings-block__accordion"
components={ [
() => (
<SettingsBlock { ...props } className="ppcp-r-settings-block__accordion">
<Accordion
title={ title }
description={ description }
@ -25,9 +21,7 @@ const SettingsAccordion = ( { title, description, children, ...props } ) => (
>
{ children }
</Accordion>
),
] }
/>
</SettingsBlock>
);
export default SettingsAccordion;

12
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js
View file

@ -3,12 +3,7 @@ import SettingsBlock from './SettingsBlock';
import { Header, Title, Action, Description } from './SettingsBlockElements';
const ButtonSettingsBlock = ( { title, description, ...props } ) => (
<SettingsBlock
{ ...props }
className="ppcp-r-settings-block__button"
components={ [
() => (
<>
<SettingsBlock { ...props } className="ppcp-r-settings-block__button">
<Header>
<Title>{ title }</Title>
<Description>{ description }</Description>
@ -25,10 +20,7 @@ const ButtonSettingsBlock = ( { title, description, ...props } ) => (
{ props.actionProps.value }
</Button>
</Action>
</>
),
] }
/>
</SettingsBlock>
);
export default ButtonSettingsBlock;

24
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js
View file

@ -11,30 +11,21 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => {
}
return (
<>
<span className="ppcp-r-feature-item__notes">
{ notes.map( ( note, index ) => (
<span key={ index }>{ note }</span>
) ) }
</span>
</>
);
};
return (
<SettingsBlock
{ ...props }
className="ppcp-r-settings-block__feature"
components={ [
() => (
<>
<SettingsBlock { ...props } className="ppcp-r-settings-block__feature">
<Header>
<Title>
{ title }
{ props.actionProps?.featureStatus && (
<TitleBadge
{ ...props.actionProps?.badge }
/>
<TitleBadge { ...props.actionProps?.badge } />
) }
</Title>
<Description className="ppcp-r-settings-block__feature__description">
@ -44,8 +35,7 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => {
</Header>
<Action>
<div className="ppcp-r-feature-item__buttons">
{ props.actionProps?.buttons.map(
( button ) => (
{ props.actionProps?.buttons.map( ( button ) => (
<Button
href={ button.url }
key={ button.text }
@ -53,14 +43,10 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => {
>
{ button.text }
</Button>
)
) }
) ) }
</div>
</Action>
</>
),
] }
/>
</SettingsBlock>
);
};

12
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/InputSettingsBlock.js
View file

@ -42,12 +42,7 @@ const InputSettingsBlock = ( {
order = DEFAULT_ELEMENT_ORDER,
...props
} ) => (
<SettingsBlock
{ ...props }
className="ppcp-r-settings-block__input"
components={ [
() => (
<>
<SettingsBlock { ...props } className="ppcp-r-settings-block__input">
{ order.map( ( elementKey ) => {
const RenderElement = ELEMENT_RENDERERS[ elementKey ];
return RenderElement ? (
@ -60,10 +55,7 @@ const InputSettingsBlock = ( {
/>
) : null;
} ) }
</>
),
] }
/>
</SettingsBlock>
);
export default InputSettingsBlock;

13
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js
View file

@ -16,25 +16,18 @@ const PaymentMethodsBlock = ( { paymentMethods, className = '' } ) => {
return (
<SettingsBlock
className={ `ppcp-r-settings-block__payment-methods ${ className }` }
components={ [
() => (
<>
>
{ paymentMethods.map( ( paymentMethod ) => (
<PaymentMethodItemBlock
key={ paymentMethod.id }
{ ...paymentMethod }
isSelected={
selectedMethod === paymentMethod.id
}
isSelected={ selectedMethod === paymentMethod.id }
onSelect={ ( checked ) =>
handleSelect( paymentMethod.id, checked )
}
/>
) ) }
</>
),
] }
/>
</SettingsBlock>
);
};

9
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/RadioSettingsBlock.js
View file

@ -11,9 +11,7 @@ const RadioSettingsBlock = ( {
<SettingsBlock
{ ...props }
className="ppcp-r-settings-block__radio ppcp-r-settings-block--expert-rdb"
components={ [
() => (
<>
>
<Header>
<Title>{ title }</Title>
<Description>{ description }</Description>
@ -38,10 +36,7 @@ const RadioSettingsBlock = ( {
{ option.additionalContent }
</PayPalRdbWithContent>
) ) }
</>
),
] }
/>
</SettingsBlock>
);
export default RadioSettingsBlock;

12
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SelectSettingsBlock.js
View file

@ -35,12 +35,7 @@ const SelectSettingsBlock = ( {
order = DEFAULT_ELEMENT_ORDER,
...props
} ) => (
<SettingsBlock
{ ...props }
className="ppcp-r-settings-block__select"
components={ [
() => (
<>
<SettingsBlock { ...props } className="ppcp-r-settings-block__select">
{ order.map( ( elementKey ) => {
const RenderElement = ELEMENT_RENDERERS[ elementKey ];
return RenderElement ? (
@ -52,10 +47,7 @@ const SelectSettingsBlock = ( {
/>
) : null;
} ) }
</>
),
] }
/>
</SettingsBlock>
);
export default SelectSettingsBlock;

11
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlock.js
View file

@ -1,16 +1,9 @@
const SettingsBlock = ( { className, components = [], children } ) => {
const SettingsBlock = ( { className, children } ) => {
const blockClassName = [ 'ppcp-r-settings-block', className ].filter(
Boolean
);
return (
<div className={ blockClassName.join( ' ' ) }>
{ children ||
components.map( ( Component, index ) => (
<Component key={ index } />
) ) }
</div>
);
return <div className={ blockClassName.join( ' ' ) }>{ children }</div>;
};
export default SettingsBlock;

16
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ToggleSettingsBlock.js
View file

@ -3,11 +3,7 @@ import SettingsBlock from './SettingsBlock';
import { Header, Title, Action, Description } from './SettingsBlockElements';
const ToggleSettingsBlock = ( { title, description, ...props } ) => (
<SettingsBlock
{ ...props }
className="ppcp-r-settings-block__toggle"
components={ [
() => (
<SettingsBlock { ...props } className="ppcp-r-settings-block__toggle">
<Action>
<ToggleControl
className="ppcp-r-settings-block__toggle-control"
@ -21,17 +17,11 @@ const ToggleSettingsBlock = ( { title, description, ...props } ) => (
}
/>
</Action>
),
() => (
<Header>
{ title && <Title>{ title }</Title> }
{ description && (
<Description>{ description }</Description>
) }
{ description && <Description>{ description }</Description> }
</Header>
),
] }
/>
</SettingsBlock>
);
export default ToggleSettingsBlock;

25
modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/OrderIntent.js
View file

@ -9,16 +9,10 @@ import {
const OrderIntent = ( { updateFormValue, settings } ) => {
return (
<SettingsBlock
components={ [
() => (
<>
<SettingsBlock>
<Header>
<Title>
{ __(
'Order Intent',
'woocommerce-paypal-payments'
) }
{ __( 'Order Intent', 'woocommerce-paypal-payments' ) }
</Title>
<Description>
{ __(
@ -27,15 +21,9 @@ const OrderIntent = ( { updateFormValue, settings } ) => {
) }
</Description>
</Header>
</>
),
() => (
<>
<ToggleSettingsBlock
title={ __(
'Authorize Only',
'woocommerce-paypal-payments'
) }
title={ __( 'Authorize Only', 'woocommerce-paypal-payments' ) }
actionProps={ {
callback: updateFormValue,
key: 'authorizeOnly',
@ -54,10 +42,7 @@ const OrderIntent = ( { updateFormValue, settings } ) => {
value: settings.captureVirtualOnlyOrders,
} }
/>
</>
),
] }
/>
</SettingsBlock>
);
};

21
modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/SavePaymentMethods.js
View file

@ -1,19 +1,15 @@
import { __, sprintf } from '@wordpress/i18n';
import {
Header,
SettingsBlock,
ToggleSettingsBlock,
Title,
Description,
} from '../../../../ReusableComponents/SettingsBlocks';
import { Header } from '../../../../ReusableComponents/SettingsBlocks/SettingsBlockElements';
const SavePaymentMethods = ( { updateFormValue, settings } ) => {
return (
<SettingsBlock
className="ppcp-r-settings-block--save-payment-methods"
components={ [
() => (
<>
<SettingsBlock className="ppcp-r-settings-block--save-payment-methods">
<Header>
<Title>
{ __(
@ -23,14 +19,12 @@ const SavePaymentMethods = ( { updateFormValue, settings } ) => {
</Title>
<Description>
{ __(
'Securely store customers’ payment methods for future payments and subscriptions, simplifying checkout and enabling recurring transactions.',
"Securely store customers' payment methods for future payments and subscriptions, simplifying checkout and enabling recurring transactions.",
'woocommerce-paypal-payments'
) }
</Description>
</Header>
</>
),
() => (
<ToggleSettingsBlock
title={ __(
'Save PayPal and Venmo',
@ -57,8 +51,7 @@ const SavePaymentMethods = ( { updateFormValue, settings } ) => {
key: 'savePaypalAndVenmo',
} }
/>
),
() => (
<ToggleSettingsBlock
title={ __(
'Save Credit and Debit Cards',
@ -74,9 +67,7 @@ const SavePaymentMethods = ( { updateFormValue, settings } ) => {
value: settings.saveCreditCardAndDebitCard,
} }
/>
),
] }
/>
</SettingsBlock>
);
};

10
modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting.js
View file

@ -36,10 +36,7 @@ const Troubleshooting = ( { updateFormValue, settings } ) => {
value: settings.logging,
} }
/>
<SettingsBlock
components={ [
() => (
<>
<SettingsBlock>
<Header>
<Title>
{ __(
@ -62,10 +59,7 @@ const Troubleshooting = ( { updateFormValue, settings } ) => {
</Description>
</Header>
<HooksTable data={ hooksExampleData() } />
</>
),
] }
/>
</SettingsBlock>
<ButtonSettingsBlock
title={ __(