woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-06 14:57:26 +08:00
Code Issues Projects Packages Wiki Activity Actions

💄 Resolve the nested “button > a” structure

Browse source
This commit is contained in:
Philipp Stracker 2025-01-24 16:10:28 +01:00
parent d5613ca030
commit 105202f833
No known key found for this signature in database
1 changed files with 42 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -20,30 +20,30 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => {
); );
}; };
const renderButton = ( button ) => { const FeatureButton = ( {
const buttonElement = ( className,
<Button variant,
className={ button.class ? button.class : '' } text,
key={ button.text } isBusy,
isBusy={ props.actionProps?.isBusy } url,
variant={ button.type } urls,
onClick={ button.onClick } onClick,
> } ) => {
{ button.text } const buttonProps = {
</Button> className,
); isBusy,
variant,
};
// If there's a URL (either direct or in urls object), wrap in anchor tag if ( url || urls ) {
if ( button.url || button.urls ) { buttonProps.href = urls ? urls.live : url;
const href = button.urls ? button.urls.live : button.url; buttonProps.target = '_blank';
return ( }
<a href={ href } key={ button.text }> if ( ! buttonProps.href ) {
{ buttonElement } buttonProps.onClick = onClick;
</a>
);
} }
return buttonElement; return <Button { ...buttonProps }>{ text }</Button>;
}; };
return ( return (
@ -62,7 +62,27 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => {
</Header> </Header>
<Action> <Action>
<div className="ppcp-r-feature-item__buttons"> <div className="ppcp-r-feature-item__buttons">
{ props.actionProps?.buttons.map( renderButton ) } { props.actionProps?.buttons.map(
( {
class: className,
type,
text,
url,
urls,
onClick,
} ) => (
<FeatureButton
key={ text }
className={ className }
variant={ type }
text={ text }
isBusy={ props.actionProps.isBusy }
url={ url }
urls={ urls }
onClick={ onClick }
/>
)
) }
</div> </div>
</Action> </Action>
</SettingsBlock> </SettingsBlock>