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

♻️ SImplify InputSettingsBlock logic

Browse source
This commit is contained in:
Philipp Stracker 2025-01-21 18:35:17 +01:00
parent e82f4c5f88
commit c7b80b6cd5
No known key found for this signature in database
3 changed files with 32 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,5 @@
import { TextControl } from '@wordpress/components';
import SettingsBlock from './SettingsBlock';
import {
Title,
@ -7,55 +8,40 @@ import {
SupplementaryLabel,
} from './SettingsBlockElements';
const DEFAULT_ELEMENT_ORDER = [ 'title', 'action', 'description' ];
const ELEMENT_RENDERERS = {
title: ( { title, supplementaryLabel } ) => (
<Title>
{ title }
{ supplementaryLabel && (
<SupplementaryLabel>{ supplementaryLabel }</SupplementaryLabel>
) }
</Title>
),
action: ( { actionProps } ) => (
<Action>
<TextControl
className="ppcp-r-vertical-text-control"
placeholder={ actionProps?.placeholder }
value={ actionProps?.value }
onChange={ ( newValue ) =>
actionProps?.callback( actionProps?.key, newValue )
}
/>
</Action>
),
description: ( { description } ) => (
<Description>{ description }</Description>
),
};
const InputSettingsBlock = ( {
title,
description,
supplementaryLabel,
order = DEFAULT_ELEMENT_ORDER,
showDescriptionFirst = false,
actionProps = {},
...props
} ) => (
<SettingsBlock { ...props } className="ppcp-r-settings-block__input">
{ order.map( ( elementKey ) => {
const RenderElement = ELEMENT_RENDERERS[ elementKey ];
return RenderElement ? (
<RenderElement
key={ elementKey }
title={ title }
description={ description }
supplementaryLabel={ supplementaryLabel }
actionProps={ props.actionProps }
} ) => {
const TheDescription = <Description>{ description }</Description>;
return (
<SettingsBlock { ...props } className="ppcp-r-settings-block__input">
<Title>
{ title }
{ supplementaryLabel && (
<SupplementaryLabel>
{ supplementaryLabel }
</SupplementaryLabel>
) }
</Title>
{ showDescriptionFirst && TheDescription }
<Action>
<TextControl
className="ppcp-r-vertical-text-control"
placeholder={ actionProps.placeholder }
value={ actionProps.value }
onChange={ ( newValue ) =>
actionProps.callback( actionProps.key, newValue )
}
/>
) : null;
} ) }
</SettingsBlock>
);
</Action>
{ ! showDescriptionFirst && TheDescription }
</SettingsBlock>
);
};
export default InputSettingsBlock;