♻️ Move “SelectBox” into the Fields folder

This commit is contained in:
Philipp Stracker 2025-01-22 13:42:18 +01:00
parent 337379f2c8
commit 193e046a9a
No known key found for this signature in database
6 changed files with 74 additions and 52 deletions

View file

@ -0,0 +1,70 @@
import classNames from 'classnames';
import { PayPalCheckbox, PayPalRdb } from './index';
const SelectableContent = ( {
title,
description,
type = 'checkbox',
children,
name,
value,
changeCallback,
currentValue,
checked = null,
} ) => {
let isSelected;
if ( Array.isArray( currentValue ) ) {
isSelected = currentValue.includes( value );
} else {
isSelected = value === currentValue;
}
const boxClassName = classNames( 'ppcp-r-select-box', {
selected: isSelected,
} );
const InputField = ( { isRadio } ) => {
if ( isRadio ) {
return (
<PayPalRdb
name={ name }
value={ value }
handleRdbState={ changeCallback }
currentValue={ currentValue }
/>
);
}
return (
<PayPalCheckbox
value={ value }
changeCallback={ changeCallback }
currentValue={ currentValue }
checked={ checked }
/>
);
};
return (
<div className={ boxClassName }>
<InputField isRadio={ type === 'radio' } />
<div className="ppcp-r-select-box__content">
<div className="ppcp-r-select-box__content-inner">
<span className="ppcp-r-select-box__title">{ title }</span>
<p className="ppcp-r-select-box__description">
{ description }
</p>
{ children && (
<div className="ppcp-r-select-box__additional-content">
{ children }
</div>
) }
</div>
</div>
</div>
);
};
export default SelectableContent;

View file

@ -6,3 +6,4 @@ export { default as PayPalCheckbox } from './Checkbox';
export { default as CheckboxGroup } from './CheckboxGroup';
export { default as PayPalRdb } from './RadioButton';
export { default as PayPalRdbWithContent } from './RadioContent';
export { default as SelectBox } from './SelectableContent';

View file

@ -1,49 +0,0 @@
import data from '../../utils/data';
import { PayPalCheckbox, PayPalRdb } from './Fields';
const SelectBox = ( props ) => {
let boxClassName = 'ppcp-r-select-box';
if (
props.value === props.currentValue ||
( Array.isArray( props.currentValue ) &&
props.currentValue.includes( props.value ) )
) {
boxClassName += ' selected';
}
return (
<div className={ boxClassName }>
{ props.type === 'radio' && (
<PayPalRdb
{ ...{
...props,
handleRdbState: props.changeCallback,
} }
/>
) }
{ props.type === 'checkbox' && (
<PayPalCheckbox
{ ...props }
/>
) }
<div className="ppcp-r-select-box__content">
<div className="ppcp-r-select-box__content-inner">
<span className="ppcp-r-select-box__title">
{ props.title }
</span>
<p className="ppcp-r-select-box__description">
{ props.description }
</p>
{ props.children && (
<div className="ppcp-r-select-box__additional-content">
{ props.children }
</div>
) }
</div>
</div>
</div>
);
};
export default SelectBox;

View file

@ -1,7 +1,7 @@
import { __ } from '@wordpress/i18n';
import SelectBoxWrapper from '../../../ReusableComponents/SelectBoxWrapper';
import SelectBox from '../../../ReusableComponents/SelectBox';
import { SelectBox } from '../../../ReusableComponents/Fields';
import { OnboardingHooks, BUSINESS_TYPES } from '../../../../data';
import OnboardingHeader from '../Components/OnboardingHeader';

View file

@ -2,7 +2,7 @@ import { __ } from '@wordpress/i18n';
import { CommonHooks, OnboardingHooks } from '../../../../data';
import SelectBoxWrapper from '../../../ReusableComponents/SelectBoxWrapper';
import SelectBox from '../../../ReusableComponents/SelectBox';
import { SelectBox } from '../../../ReusableComponents/Fields';
import PricingDescription from '../../../ReusableComponents/PricingDescription';
import OnboardingHeader from '../Components/OnboardingHeader';
import OptionalPaymentMethods from '../Components/OptionalPaymentMethods';

View file

@ -1,6 +1,6 @@
import { __ } from '@wordpress/i18n';
import SelectBox from '../../../ReusableComponents/SelectBox';
import { SelectBox } from '../../../ReusableComponents/Fields';
import SelectBoxWrapper from '../../../ReusableComponents/SelectBoxWrapper';
import { OnboardingHooks, PRODUCT_TYPES } from '../../../../data';
import OnboardingHeader from '../Components/OnboardingHeader';