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

♻️ Extract “Field” components in separate files

Browse source
This commit is contained in:
Philipp Stracker 2025-01-22 13:24:26 +01:00
parent bd2af4fd64
commit f52422ff74
No known key found for this signature in database
6 changed files with 150 additions and 138 deletions
Download patch file Download diff file Expand all files Collapse all files

138
modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields.js
View file

@ -1,138 +0,0 @@
import { CheckboxControl } from '@wordpress/components';
import classNames from 'classnames';
export const PayPalCheckbox = ( {
currentValue,
label,
value,
checked = null,
disabled = null,
changeCallback,
} ) => {
let isChecked = checked;
if ( null === isChecked ) {
if ( Array.isArray( currentValue ) ) {
isChecked = currentValue.includes( value );
} else {
isChecked = currentValue;
}
}
const className = classNames( { 'is-disabled': disabled } );
const onChange = ( newState ) => {
let newValue;
if ( ! Array.isArray( currentValue ) ) {
newValue = newState;
} else if ( newState ) {
newValue = [ ...currentValue, value ];
} else {
newValue = currentValue.filter(
( optionValue ) => optionValue !== value
);
}
changeCallback( newValue );
};
return (
<CheckboxControl
label={ label }
value={ value }
checked={ isChecked }
disabled={ disabled }
onChange={ onChange }
className={ className }
/>
);
};
export const CheckboxGroup = ( { options, value, onChange } ) => (
<>
{ options.map( ( checkbox ) => (
<PayPalCheckbox
key={ checkbox.value }
label={ checkbox.label }
value={ checkbox.value }
checked={ checkbox.checked }
disabled={ checkbox.disabled }
description={ checkbox.description }
tooltip={ checkbox.tooltip }
currentValue={ value }
changeCallback={ onChange }
/>
) ) }
</>
);
export const PayPalRdb = ( {
id,
name,
value,
currentValue,
handleRdbState,
} ) => {
return (
<div className="ppcp-r__radio">
{ /* todo: Can we remove the wrapper div? */ }
<input
className="ppcp-r__radio-value"
type="radio"
id={ id }
checked={ value === currentValue }
name={ name }
value={ value }
onChange={ () => handleRdbState( value ) }
/>
<span className="ppcp-r__radio-presentation"></span>
</div>
);
};
export const PayPalRdbWithContent = ( {
className,
id,
name,
label,
description,
value,
currentValue,
handleRdbState,
toggleAdditionalContent,
children,
} ) => {
const wrapperClasses = classNames( 'ppcp-r__radio-wrapper', className );
return (
<div className="ppcp-r__radio-outer-wrapper">
<div className={ wrapperClasses }>
<PayPalRdb
id={ id }
name={ name }
value={ value }
currentValue={ currentValue }
handleRdbState={ handleRdbState }
/>
<div className="ppcp-r__radio-content">
<label htmlFor={ id }>{ label }</label>
{ description && (
<p
className="ppcp-r__radio-description"
dangerouslySetInnerHTML={ {
__html: description,
} }
/>
) }
</div>
</div>
{ toggleAdditionalContent && children && value === currentValue && (
<div className="ppcp-r__radio-content-additional">
{ children }
</div>
) }
</div>
);
};

52
modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/Checkbox.js Normal file
View file

@ -0,0 +1,52 @@
import { CheckboxControl } from '@wordpress/components';
import classNames from 'classnames';
const Checkbox = ( {
currentValue,
label,
value,
checked = null,
disabled = null,
changeCallback,
} ) => {
let isChecked = checked;
if ( null === isChecked ) {
if ( Array.isArray( currentValue ) ) {
isChecked = currentValue.includes( value );
} else {
isChecked = currentValue;
}
}
const className = classNames( { 'is-disabled': disabled } );
const onChange = ( newState ) => {
let newValue;
if ( ! Array.isArray( currentValue ) ) {
newValue = newState;
} else if ( newState ) {
newValue = [ ...currentValue, value ];
} else {
newValue = currentValue.filter(
( optionValue ) => optionValue !== value
);
}
changeCallback( newValue );
};
return (
<CheckboxControl
label={ label }
value={ value }
checked={ isChecked }
disabled={ disabled }
onChange={ onChange }
className={ className }
/>
);
};
export default Checkbox;

21
modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/CheckboxGroup.js Normal file
View file

@ -0,0 +1,21 @@
import { PayPalCheckbox } from './index';
const CheckboxGroup = ( { options, value, onChange } ) => (
<>
{ options.map( ( checkbox ) => (
<PayPalCheckbox
key={ checkbox.value }
label={ checkbox.label }
value={ checkbox.value }
checked={ checkbox.checked }
disabled={ checkbox.disabled }
description={ checkbox.description }
tooltip={ checkbox.tooltip }
currentValue={ value }
changeCallback={ onChange }
/>
) ) }
</>
);
export default CheckboxGroup;

19
modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/RadioButton.js Normal file
View file

@ -0,0 +1,19 @@
const RadioButton = ( { id, name, value, currentValue, handleRdbState } ) => {
return (
<div className="ppcp-r__radio">
{ /* todo: Can we remove the wrapper div? */ }
<input
className="ppcp-r__radio-value"
type="radio"
id={ id }
checked={ value === currentValue }
name={ name }
value={ value }
onChange={ () => handleRdbState( value ) }
/>
<span className="ppcp-r__radio-presentation"></span>
</div>
);
};
export default RadioButton;

50
modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/RadioContent.js Normal file
View file

@ -0,0 +1,50 @@
import classNames from 'classnames';
import { PayPalRdb } from './index';
const RadioButtonWithContent = ( {
className,
id,
name,
label,
description,
value,
currentValue,
handleRdbState,
toggleAdditionalContent,
children,
} ) => {
const wrapperClasses = classNames( 'ppcp-r__radio-wrapper', className );
return (
<div className="ppcp-r__radio-outer-wrapper">
<div className={ wrapperClasses }>
<PayPalRdb
id={ id }
name={ name }
value={ value }
currentValue={ currentValue }
handleRdbState={ handleRdbState }
/>
<div className="ppcp-r__radio-content">
<label htmlFor={ id }>{ label }</label>
{ description && (
<p
className="ppcp-r__radio-description"
dangerouslySetInnerHTML={ {
__html: description,
} }
/>
) }
</div>
</div>
{ toggleAdditionalContent && children && value === currentValue && (
<div className="ppcp-r__radio-content-additional">
{ children }
</div>
) }
</div>
);
};
export default RadioButtonWithContent;

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

@ -0,0 +1,8 @@
/**
* Generic input fields.
*/
export { default as PayPalCheckbox } from './Checkbox';
export { default as CheckboxGroup } from './CheckboxGroup';
export { default as PayPalRdb } from './RadioButton';
export { default as PayPalRdbWithContent } from './RadioContent';