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

♻️ Reuse the generic Accordion for settings

Browse source
This commit is contained in:
Philipp Stracker 2024-12-09 14:43:27 +01:00
parent 1b557f1619
commit 2a9766fc76
No known key found for this signature in database
3 changed files with 63 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,4 @@
import { useState } from '@wordpress/element';
import data from '../../../utils/data';
import Accordion from '../AccordionSection';
import SettingsBlock from './SettingsBlock';
import {
Header,
@ -9,48 +8,26 @@ import {
TitleWrapper,
} from './SettingsBlockElements';
const AccordionSettingsBlock = ( { title, description, ...props } ) => {
const [ isVisible, setIsVisible ] = useState( false );
const SettingsAccordion = ( { title, description, children, ...props } ) => (
<SettingsBlock
{ ...props }
className="ppcp-r-settings-block__accordion"
components={ [
() => (
<Accordion
title={ title }
description={ description }
Header={ Header }
TitleWrapper={ TitleWrapper }
Title={ Title }
Action={ Action }
Description={ Description }
>
{ children }
</Accordion>
),
] }
/>
);
return (
<SettingsBlock
{ ...props }
className={ `ppcp-r-settings-block__accordion ${
isVisible ? 'ppcp-r-settings-block--content-visible' : ''
}` }
components={ [
() => (
<>
<Header className="ppcp-r-settings-block--accordion__header">
<TitleWrapper>
<Title className="ppcp-r-settings-block--accordion__title">
{ title }
</Title>
<Action>
<div
className="ppcp-r-settings-block__toggle-content"
onClick={ () =>
setIsVisible( ! isVisible )
}
>
{ data().getImage(
'icon-arrow-down.svg'
) }
</div>
</Action>
</TitleWrapper>
<Description className="ppcp-r-settings-block--accordion__description">
{ description }
</Description>
</Header>
{ isVisible && props.children && (
<>{ props.children }</>
) }
</>
),
] }
/>
);
};
export default AccordionSettingsBlock;
export default SettingsAccordion;