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

✨ Add new “isLoading” state for the ToggleBlock

Browse source
This commit is contained in:
Philipp Stracker 2024-11-04 18:50:39 +01:00
parent 72fea4ee9c
commit e8c9a53441
No known key found for this signature in database
2 changed files with 17 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

19
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsToggleBlock.js
View file

@ -1,8 +1,19 @@
import { ToggleControl } from '@wordpress/components';
import { ToggleControl, Spinner } from '@wordpress/components';
const SettingsToggleBlock = ( {
isToggled,
setToggled,
isLoading = false,
...props
} ) => {
const blockClasses = [ 'ppcp-r-toggle-block' ];
if ( isLoading ) {
blockClasses.push( 'ppcp--is-loading' );
}
const SettingsToggleBlock = ( { isToggled, setToggled, ...props } ) => {
return (
<div className="ppcp-r-toggle-block">
<div className={ blockClasses.join( ' ' ) }>
<div className="ppcp-r-toggle-block__wrapper">
<div className="ppcp-r-toggle-block__content">
{ props?.label && (
@ -25,11 +36,13 @@ const SettingsToggleBlock = ( { isToggled, setToggled, ...props } ) => {
onChange={ ( newValue ) => {
setToggled( newValue );
} }
disabled={ isLoading }
/>
</div>
</div>
{ props.children && isToggled && (
<div className="ppcp-r-toggle-block__toggled-content">
{ isLoading && <Spinner /> }
{ props.children }
</div>
) }

1
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js
View file

@ -140,6 +140,7 @@ const WelcomeForm = ( { setCompleted } ) => {
description={ advancedUsersDescription }
isToggled={ !! isManualConnectionMode }
setToggled={ setManualConnectionMode }
isLoading={ isManualConnectionBusy }
>
<DataStoreControl
control={ TextControl }