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

♻️ Split feature list into smaller components

Browse source
This commit is contained in:
Philipp Stracker 2025-01-24 15:31:11 +01:00
parent 839ee7b380
commit a1f8f24d4c
No known key found for this signature in database
2 changed files with 160 additions and 133 deletions
Download patch file Download diff file Expand all files Collapse all files

40
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js
View file

@ -1,42 +1,31 @@
import classNames from 'classnames';
import { Content, ContentWrapper } from './Elements';
import { Content } from './Elements';
const SettingsCard = ( {
id,
className: extraClassName,
className,
title,
description,
children,
contentItems,
contentContainer = true,
} ) => {
const className = classNames( 'ppcp-r-settings-card', extraClassName );
const cardClassNames = classNames( 'ppcp-r-settings-card', className );
const cardProps = {
className: cardClassNames,
id,
};
const renderContent = () => {
// If contentItems array is provided, wrap each item in Content component
if ( contentItems ) {
return (
<ContentWrapper>
{ contentItems.map( ( item ) => (
<Content key={ item.key } id={ item.key }>
{ item }
</Content>
) ) }
</ContentWrapper>
);
const InnerContent = ( { showCards, children: containerItems } ) => {
if ( showCards ) {
return <Content>{ containerItems }</Content>;
}
// Otherwise handle regular children with contentContainer prop
if ( contentContainer ) {
return <Content>{ children }</Content>;
}
return children;
return containerItems;
};
return (
<div id={ id } className={ className }>
<div { ...cardProps }>
<div className="ppcp-r-settings-card__header">
<div className="ppcp-r-settings-card__content-inner">
<span className="ppcp-r-settings-card__title">
@ -47,7 +36,10 @@ const SettingsCard = ( {
</p>
</div>
</div>
{ renderContent() }
<InnerContent showCards={ contentContainer }>
{ children }
</InnerContent>
</div>
);
};