2025-01-22 13:24:26 +01:00
|
|
|
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;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2025-01-22 15:08:14 +01:00
|
|
|
const className = classNames( { 'ppcp--is-disabled': disabled } );
|
2025-01-22 13:24:26 +01:00
|
|
|
|
|
|
|
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;
|