%PDF-
%PDF-
Mini Shell
Mini Shell
/*
* The tooltip can't be included in the native toggleControl, so we have to build our own.
*/
const CheckboxControl = (props) => {
const onChangeHandler = (e) => {
let fieldValue = !props.field.value;
props.onChangeHandler(fieldValue)
}
const handleKeyDown = (e) => {
if (e.key === 'Enter') {
e.preventDefault();
onChangeHandler(true);
}
}
let field = props.field;
let is_checked = field.value ? 'is-checked' : '';
let is_disabled = props.disabled ? 'is-disabled' : '';
return (
<div className="components-base-control components-toggle-control">
<div className="components-base-control__field">
<div data-wp-component="HStack" className="components-flex components-h-stack">
<span className={ "components-form-toggle "+is_checked + ' ' +is_disabled}>
<input
onKeyDown={(e) => handleKeyDown(e)}
checked={field.value}
className="components-form-toggle__input"
onChange={ ( e ) => onChangeHandler(e) }
id={field.id}
type="checkbox"
disabled={props.disabled}
/>
<span className="components-form-toggle__track"></span>
<span className="components-form-toggle__thumb"></span>
</span>
{props.label}
</div>
</div>
</div>
);
}
export default CheckboxControl
Zerion Mini Shell 1.0