Create sidebar for styling screen and initalize preview - no success

This commit is contained in:
inpsyde-maticluznar 2024-11-26 13:28:03 +01:00
parent 06e74e74f4
commit 5f83517509
No known key found for this signature in database
GPG key ID: D005973F231309F6
44 changed files with 3070 additions and 90 deletions

View file

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

View file

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