♻️ Extract “Field” components in separate files

modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields.js

@@ -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>
-	);
-};

modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/Checkbox.js

@@ -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;

modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/CheckboxGroup.js

@@ -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;

modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/RadioButton.js

@@ -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;

modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/RadioContent.js

@@ -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;

modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/index.js

@@ -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';