woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-08-30 05:00:51 +08:00
Code Issues Projects Packages Wiki Activity Actions 18

Fix toggle animation issue

Browse source
This commit is contained in:
Daniel Dudzic 2024-12-16 16:00:27 +01:00
parent 16ad84c244
commit 51613c3020
No known key found for this signature in database
GPG key ID: 31B40D33E3465483
3 changed files with 49 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

75
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js
View file

@ -5,56 +5,43 @@ import PaymentMethodIcon from '../PaymentMethodIcon';
import data from '../../../utils/data'; import data from '../../../utils/data';
const PaymentMethodItemBlock = ( props ) => { const PaymentMethodItemBlock = ( props ) => {
const [ paymentMethodState, setPaymentMethodState ] = useState(); const [ isChecked, setIsChecked ] = useState( false );
const [ modalIsVisible, setModalIsVisible ] = useState( false ); const [ modalIsVisible, setModalIsVisible ] = useState( false );
const Modal = props?.modal; const Modal = props?.modal;
const handleCheckboxState = ( checked ) => {
setPaymentMethodState( checked ? props.id : null );
};
return ( return (
<> <>
<SettingsBlock <SettingsBlock className="ppcp-r-settings-block__payment-methods__item">
className="ppcp-r-settings-block__payment-methods__item" <div className="ppcp-r-settings-block__payment-methods__item__inner">
components={ [ <div className="ppcp-r-settings-block__payment-methods__item__title-wrapper">
() => ( <PaymentMethodIcon
<div className="ppcp-r-settings-block__payment-methods__item__inner"> icons={ [ props.icon ] }
<div className="ppcp-r-settings-block__payment-methods__item__title-wrapper"> type={ props.icon }
<PaymentMethodIcon />
icons={ [ props.icon ] } <span className="ppcp-r-settings-block__payment-methods__item__title">
type={ props.icon } { props.title }
/> </span>
<span className="ppcp-r-settings-block__payment-methods__item__title"> </div>
{ props.title } <p className="ppcp-r-settings-block__payment-methods__item__description">
</span> { props.description }
</p>
<div className="ppcp-r-settings-block__payment-methods__item__footer">
<ToggleControl
__nextHasNoMarginBottom={ true }
checked={ isChecked }
onChange={ setIsChecked }
/>
{ Modal && (
<div
className="ppcp-r-settings-block__payment-methods__item__settings"
onClick={ () => setModalIsVisible( true ) }
>
{ data().getImage( 'icon-settings.svg' ) }
</div> </div>
<p className="ppcp-r-settings-block__payment-methods__item__description"> ) }
{ props.description } </div>
</p> </div>
<div className="ppcp-r-settings-block__payment-methods__item__footer"> </SettingsBlock>
<ToggleControl
__nextHasNoMarginBottom={ true }
checked={ props.id === paymentMethodState }
onChange={ handleCheckboxState }
/>
{ Modal && (
<div
className="ppcp-r-settings-block__payment-methods__item__settings"
onClick={ () =>
setModalIsVisible( true )
}
>
{ data().getImage(
'icon-settings.svg'
) }
</div>
) }
</div>
</div>
),
] }
/>
{ Modal && modalIsVisible && ( { Modal && modalIsVisible && (
<Modal setModalIsVisible={ setModalIsVisible } /> <Modal setModalIsVisible={ setModalIsVisible } />
) } ) }

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

@ -1,7 +1,14 @@
import { useState, useCallback } from '@wordpress/element';
import SettingsBlock from './SettingsBlock'; import SettingsBlock from './SettingsBlock';
import PaymentMethodItemBlock from './PaymentMethodItemBlock'; import PaymentMethodItemBlock from './PaymentMethodItemBlock';
const PaymentMethodsBlock = ( { paymentMethods, className = '' } ) => { const PaymentMethodsBlock = ( { paymentMethods, className = '' } ) => {
const [ selectedMethod, setSelectedMethod ] = useState( null );
const handleSelect = useCallback( ( methodId, isSelected ) => {
setSelectedMethod( isSelected ? methodId : null );
}, [] );
if ( paymentMethods.length === 0 ) { if ( paymentMethods.length === 0 ) {
return null; return null;
} }
@ -16,6 +23,12 @@ const PaymentMethodsBlock = ( { paymentMethods, className = '' } ) => {
<PaymentMethodItemBlock <PaymentMethodItemBlock
key={ paymentMethod.id } key={ paymentMethod.id }
{ ...paymentMethod } { ...paymentMethod }
isSelected={
selectedMethod === paymentMethod.id
}
onSelect={ ( checked ) =>
handleSelect( paymentMethod.id, checked )
}
/> />
) ) } ) ) }
</> </>

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

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