mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-06 16:24:33 +08:00
Create sidebar for styling screen and initalize preview - no success
This commit is contained in:
parent
06e74e74f4
commit
5f83517509
44 changed files with 3070 additions and 90 deletions
|
@ -1,25 +1,38 @@
|
|||
import data from '../../utils/data';
|
||||
import { CheckboxControl } from '@wordpress/components';
|
||||
|
||||
export const PayPalCheckbox = ( props ) => {
|
||||
return (
|
||||
<div className="ppcp-r__checkbox">
|
||||
<input
|
||||
className="ppcp-r__checkbox-value"
|
||||
type="checkbox"
|
||||
checked={ props.currentValue.includes( props.value ) }
|
||||
name={ props.name }
|
||||
<CheckboxControl
|
||||
label={ props?.label ? props.label : '' }
|
||||
value={ props.value }
|
||||
onChange={ ( e ) =>
|
||||
props.handleCheckboxState( e.target.checked, props )
|
||||
checked={ props.currentValue.includes( props.value ) }
|
||||
onChange={ ( checked ) =>
|
||||
handleCheckboxState( checked, props )
|
||||
}
|
||||
/>
|
||||
<span className="ppcp-r__checkbox-presentation">
|
||||
{ data().getImage( 'icon-checkbox.svg' ) }
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const PayPalCheckboxGroup = ( props ) => {
|
||||
const renderCheckboxGroup = () => {
|
||||
return props.value.map( ( checkbox ) => {
|
||||
return (
|
||||
<PayPalCheckbox
|
||||
label={ checkbox.label }
|
||||
value={ checkbox.value }
|
||||
key={ checkbox.value }
|
||||
currentValue={ props.currentValue }
|
||||
changeCallback={ props.changeCallback }
|
||||
/>
|
||||
);
|
||||
} );
|
||||
};
|
||||
|
||||
return <>{ renderCheckboxGroup() }</>;
|
||||
};
|
||||
|
||||
export const PayPalRdb = ( props ) => {
|
||||
return (
|
||||
<div className="ppcp-r__radio">
|
||||
|
@ -75,7 +88,6 @@ export const handleCheckboxState = ( checked, props ) => {
|
|||
let newValue = null;
|
||||
if ( checked ) {
|
||||
newValue = [ ...props.currentValue, props.value ];
|
||||
props.changeCallback( newValue );
|
||||
} else {
|
||||
newValue = props.currentValue.filter(
|
||||
( value ) => value !== props.value
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import data from '../../utils/data';
|
||||
import { PayPalCheckbox, PayPalRdb, handleCheckboxState } from './Fields';
|
||||
import { PayPalCheckbox, PayPalRdb } from './Fields';
|
||||
|
||||
const SelectBox = ( props ) => {
|
||||
let boxClassName = 'ppcp-r-select-box';
|
||||
|
@ -24,10 +24,7 @@ const SelectBox = ( props ) => {
|
|||
) }
|
||||
{ props.type === 'checkbox' && (
|
||||
<PayPalCheckbox
|
||||
{ ...{
|
||||
...props,
|
||||
handleCheckboxState,
|
||||
} }
|
||||
{ ...props }
|
||||
/>
|
||||
) }
|
||||
<div className="ppcp-r-select-box__content">
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue