mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-08-30 05:00:51 +08:00
♻️ Move “SelectBox” into the Fields folder
This commit is contained in:
parent
337379f2c8
commit
193e046a9a
6 changed files with 74 additions and 52 deletions
|
@ -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;
|
|
@ -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';
|
||||
|
|
|
@ -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;
|
|
@ -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';
|
||||
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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';
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue