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

♻️ Organize some reusable components

Browse source
This commit is contained in:
Philipp Stracker 2025-01-21 18:57:36 +01:00
parent c7b80b6cd5
commit 47294ca530
No known key found for this signature in database
30 changed files with 152 additions and 141 deletions
Download patch file Download diff file Expand all files Collapse all files

5
modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Action.js Normal file
View file

@ -0,0 +1,5 @@
const Action = ( { children } ) => (
<div className="ppcp-r-settings-block__action">{ children }</div>
);
export default Action;

16
modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Content.js Normal file
View file

@ -0,0 +1,16 @@
import classNames from 'classnames';
const Content = ( { children, className = '', id = '' } ) => {
const elementClasses = classNames(
'ppcp-r-settings-card__content',
className
);
return (
<div id={ id } className={ elementClasses }>
{ children }
</div>
);
};
export default Content;

5
modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/ContentWrapper.js Normal file
View file

@ -0,0 +1,5 @@
const ContentWrapper = ( { children } ) => (
<div className="ppcp-r-settings-card__content-wrapper">{ children }</div>
);
export default ContentWrapper;

26
modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Description.js Normal file
View file

@ -0,0 +1,26 @@
import classNames from 'classnames';
const Description = ( { children, asHtml = false, className = '' } ) => {
// Don't output anything if description is empty.
if ( ! children ) {
return null;
}
const elementClasses = classNames(
'ppcp-r-settings-block__description',
className
);
if ( ! asHtml ) {
return <span className={ elementClasses }>{ children }</span>;
}
return (
<span
className={ elementClasses }
dangerouslySetInnerHTML={ { __html: children } }
/>
);
};
export default Description;

12
modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Header.js Normal file
View file

@ -0,0 +1,12 @@
import classNames from 'classnames';
const Header = ( { children, className = '' } ) => {
const elementClasses = classNames(
'ppcp-r-settings-block__header',
className
);
return <div className={ elementClasses }>{ children }</div>;
};
export default Header;

7
modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/SupplementaryLabel.js Normal file
View file

@ -0,0 +1,7 @@
const SupplementaryLabel = ( { children } ) => (
<span className="ppcp-r-settings-block__supplementary-title-label">
{ children }
</span>
);
export default SupplementaryLabel;

21
modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Title.js Normal file
View file

@ -0,0 +1,21 @@
import classNames from 'classnames';
const Title = ( {
children,
altStyle = false,
big = false,
className = '',
} ) => {
const elementClasses = classNames(
'ppcp-r-settings-block__title',
className,
{
'style-alt': altStyle,
'style-big': big,
}
);
return <span className={ elementClasses }>{ children }</span>;
};
export default Title;

5
modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/TitleWrapper.js Normal file
View file

@ -0,0 +1,5 @@
const TitleWrapper = ( { children } ) => (
<span className="ppcp-r-settings-block__title-wrapper">{ children }</span>
);
export default TitleWrapper;

8
modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/index.js Normal file
View file

@ -0,0 +1,8 @@
export { default as Action } from './Action';
export { default as Content } from './Content';
export { default as ContentWrapper } from './ContentWrapper';
export { default as Description } from './Description';
export { default as Header } from './Header';
export { default as SupplementaryLabel } from './SupplementaryLabel';
export { default as Title } from './Title';
export { default as TitleWrapper } from './TitleWrapper';

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

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

@ -1,12 +1,6 @@
import Accordion from '../AccordionSection';
import SettingsBlock from './SettingsBlock';
import {
Header,
Title,
Action,
Description,
TitleWrapper,
} from './SettingsBlockElements';
import SettingsBlock from '../SettingsBlock';
import { Header, Title, Action, Description, TitleWrapper } from '../Elements';
const SettingsAccordion = ( { title, description, children, ...props } ) => (
<SettingsBlock { ...props } className="ppcp-r-settings-block__accordion">

5
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js
View file

@ -1,6 +1,7 @@
import { Button } from '@wordpress/components';
import SettingsBlock from './SettingsBlock';
import { Action, Description, Header, Title } from './SettingsBlockElements';
import SettingsBlock from '../SettingsBlock';
import { Action, Description, Header, Title } from '../Elements';
const ButtonSettingsBlock = ( { title, description, ...props } ) => (
<SettingsBlock { ...props } className="ppcp-r-settings-block__button">

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

@ -1,6 +1,7 @@
import { Button } from '@wordpress/components';
import SettingsBlock from './SettingsBlock';
import { Header, Title, Action, Description } from './SettingsBlockElements';
import { Header, Title, Action, Description } from '../Elements';
import SettingsBlock from '../SettingsBlock';
import TitleBadge from '../TitleBadge';
const FeatureSettingsBlock = ( { title, description, ...props } ) => {
@ -24,7 +25,7 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => {
<Button
className={ button.class ? button.class : '' }
key={ button.text }
isBusy={ props.actionProps?.isBusy }
isBusy={ props.actionProps?.isBusy }
variant={ button.type }
onClick={ button.onClick }
>

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

@ -1,12 +1,7 @@
import { TextControl } from '@wordpress/components';
import SettingsBlock from './SettingsBlock';
import {
Title,
Action,
Description,
SupplementaryLabel,
} from './SettingsBlockElements';
import SettingsBlock from '../SettingsBlock';
import { Title, Action, Description, SupplementaryLabel } from '../Elements';
const InputSettingsBlock = ( {
title,

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

@ -1,7 +1,10 @@
import { ToggleControl } from '@wordpress/components';
import SettingsBlock from './SettingsBlock';
import SettingsBlock from '../SettingsBlock';
import PaymentMethodIcon from '../PaymentMethodIcon';
import data from '../../../utils/data';
// TODO: A reusable component should not depend external data. Change this to a prop.
import { hasSettings } from '../../Screens/Overview/TabSettingsElements/Blocks/PaymentMethods';
const PaymentMethodItemBlock = ( {

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

@ -1,4 +1,4 @@
import SettingsBlock from './SettingsBlock';
import SettingsBlock from '../SettingsBlock';
import PaymentMethodItemBlock from './PaymentMethodItemBlock';
import { usePaymentMethods } from '../../../data/payment/hooks';

4
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/RadioSettingsBlock.js
View file

@ -1,5 +1,5 @@
import SettingsBlock from './SettingsBlock';
import { Header, Title, Description } from './SettingsBlockElements';
import SettingsBlock from '../SettingsBlock';
import { Header, Title, Description } from '../Elements';
import { PayPalRdbWithContent } from '../Fields';
const RadioSettingsBlock = ( {

5
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SelectSettingsBlock.js
View file

@ -1,7 +1,8 @@
import Select, { components } from 'react-select';
import data from '../../../utils/data';
import SettingsBlock from './SettingsBlock';
import { Title, Action, Description } from './SettingsBlockElements';
import SettingsBlock from '../SettingsBlock';
import { Title, Action, Description } from '../Elements';
const DEFAULT_ELEMENT_ORDER = [ 'title', 'action', 'description' ];

81
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlockElements.js
View file

@ -1,81 +0,0 @@
import classNames from 'classnames';
// Block Elements
export const Title = ( {
children,
altStyle = false,
big = false,
className = '',
} ) => {
const elementClasses = classNames(
'ppcp-r-settings-block__title',
className,
{
'style-alt': altStyle,
'style-big': big,
}
);
return <span className={ elementClasses }>{ children }</span>;
};
export const TitleWrapper = ( { children } ) => (
<span className="ppcp-r-settings-block__title-wrapper">{ children }</span>
);
export const SupplementaryLabel = ( { children } ) => (
<span className="ppcp-r-settings-block__supplementary-title-label">
{ children }
</span>
);
export const Description = ( { children, asHtml = false, className = '' } ) => {
// Don't output anything if description is empty.
if ( ! children ) {
return null;
}
const elementClasses = classNames(
'ppcp-r-settings-block__description',
className
);
if ( ! asHtml ) {
return <span className={ elementClasses }>{ children }</span>;
}
return (
<span
className={ elementClasses }
dangerouslySetInnerHTML={ { __html: children } }
/>
);
};
export const Action = ( { children } ) => (
<div className="ppcp-r-settings-block__action">{ children }</div>
);
export const Header = ( { children, className = '' } ) => (
<div className={ `ppcp-r-settings-block__header ${ className }`.trim() }>
{ children }
</div>
);
// Card Elements
export const Content = ( { children, className = '', id = '' } ) => {
const elementClasses = classNames(
'ppcp-r-settings-card__content',
className
);
return (
<div id={ id } className={ elementClasses }>
{ children }
</div>
);
};
export const ContentWrapper = ( { children } ) => (
<div className="ppcp-r-settings-card__content-wrapper">{ children }</div>
);

4
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ToggleSettingsBlock.js
View file

@ -1,6 +1,6 @@
import { ToggleControl } from '@wordpress/components';
import SettingsBlock from './SettingsBlock';
import { Header, Title, Action, Description } from './SettingsBlockElements';
import SettingsBlock from '../SettingsBlock';
import { Header, Title, Action, Description } from '../Elements';
const ToggleSettingsBlock = ( { title, description, ...props } ) => (
<SettingsBlock { ...props } className="ppcp-r-settings-block__toggle">

12
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/index.js
View file

@ -1,4 +1,3 @@
export { default as SettingsBlock } from './SettingsBlock';
export { default as ButtonSettingsBlock } from './ButtonSettingsBlock';
export { default as InputSettingsBlock } from './InputSettingsBlock';
export { default as SelectSettingsBlock } from './SelectSettingsBlock';
@ -7,14 +6,3 @@ export { default as ToggleSettingsBlock } from './ToggleSettingsBlock';
export { default as RadioSettingsBlock } from './RadioSettingsBlock';
export { default as PaymentMethodsBlock } from './PaymentMethodsBlock';
export { default as PaymentMethodItemBlock } from './PaymentMethodItemBlock';
export {
Title,
TitleWrapper,
SupplementaryLabel,
Description,
Action,
Content,
ContentWrapper,
Header,
} from './SettingsBlockElements';

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

@ -1,6 +1,6 @@
import classNames from 'classnames';
import { Content, ContentWrapper } from './SettingsBlocks';
import { Content, ContentWrapper } from './Elements';
const SettingsCard = ( {
id,

7
modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/HooksTableBlock.js
View file

@ -1,9 +1,8 @@
import { __ } from '@wordpress/i18n';
import { CommonHooks } from '../../../../../../data';
import {
SettingsBlock,
Title,
} from '../../../../../ReusableComponents/SettingsBlocks';
import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock';
import { Title } from '../../../../../ReusableComponents/Elements';
const HooksTableBlock = () => {
const { webhooks } = CommonHooks.useWebhooks();

7
modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/ResubscribeBlock.js
View file

@ -1,9 +1,10 @@
import { useState } from '@wordpress/element';
import { STORE_NAME } from '../../../../../../data/common';
import { ButtonSettingsBlock } from '../../../../../ReusableComponents/SettingsBlocks';
import { __ } from '@wordpress/i18n';
import { useDispatch } from '@wordpress/data';
import { useState } from '@wordpress/element';
import { store as noticesStore } from '@wordpress/notices';
import { STORE_NAME } from '../../../../../../data/common';
import { ButtonSettingsBlock } from '../../../../../ReusableComponents/SettingsBlocks';
import {
NOTIFICATION_ERROR,
NOTIFICATION_SUCCESS,

3
modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/SimulationBlock.js
View file

@ -1,8 +1,9 @@
import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { ButtonSettingsBlock } from '../../../../../ReusableComponents/SettingsBlocks';
import { useDispatch } from '@wordpress/data';
import { store as noticesStore } from '@wordpress/notices';
import { ButtonSettingsBlock } from '../../../../../ReusableComponents/SettingsBlocks';
import { CommonHooks } from '../../../../../../data';
import {
NOTIFICATION_ERROR,

7
modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/Troubleshooting.js
View file

@ -1,12 +1,15 @@
import { __ } from '@wordpress/i18n';
import {
AccordionSettingsBlock,
Description,
Header,
Title,
} from '../../../../../ReusableComponents/Elements';
import {
AccordionSettingsBlock,
ToggleSettingsBlock,
} from '../../../../../ReusableComponents/SettingsBlocks';
import SettingsBlock from '../../../../../ReusableComponents/SettingsBlocks/SettingsBlock';
import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock';
import SimulationBlock from './SimulationBlock';
import ResubscribeBlock from './ResubscribeBlock';

6
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/OrderIntent.js
View file

@ -1,11 +1,11 @@
import { __ } from '@wordpress/i18n';
import {
Header,
SettingsBlock,
Title,
Description,
ToggleSettingsBlock,
} from '../../../../../ReusableComponents/SettingsBlocks';
} from '../../../../../ReusableComponents/Elements';
import { ToggleSettingsBlock } from '../../../../../ReusableComponents/SettingsBlocks';
import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock';
import { SettingsHooks } from '../../../../../../data';
const OrderIntent = () => {

6
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/SavePaymentMethods.js
View file

@ -1,11 +1,11 @@
import { __, sprintf } from '@wordpress/i18n';
import {
Header,
SettingsBlock,
ToggleSettingsBlock,
Title,
Description,
} from '../../../../../ReusableComponents/SettingsBlocks';
} from '../../../../../ReusableComponents/Elements';
import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock';
import { ToggleSettingsBlock } from '../../../../../ReusableComponents/SettingsBlocks';
import { SettingsHooks } from '../../../../../../data';
const SavePaymentMethods = () => {

2
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/ExpertSettings.js
View file

@ -3,7 +3,7 @@ import SettingsCard from '../../../../ReusableComponents/SettingsCard';
import {
Content,
ContentWrapper,
} from '../../../../ReusableComponents/SettingsBlocks';
} from '../../../../ReusableComponents/Elements';
import ConnectionDetails from '../../../Overview/TabSettingsElements/Blocks/ConnectionDetails';
import Troubleshooting from '../../../Overview/TabSettingsElements/Blocks/Troubleshooting/Troubleshooting';
import PaypalSettings from '../../../Overview/TabSettingsElements/Blocks/PaypalSettings';

4
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSection.js
View file

@ -1,10 +1,10 @@
import SettingsBlock from '../../../../../ReusableComponents/SettingsBlocks/SettingsBlock';
import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock';
import {
Description,
Header,
Title,
Content,
} from '../../../../../ReusableComponents/SettingsBlocks';
} from '../../../../../ReusableComponents/Elements';
const StylingSection = ( {
title,