aDriv4 website!

Linux server53.web-hosting.com 4.18.0-553.54.1.lve.el8.x86_64 #1 SMP Wed Jun 4 13:01:13 UTC 2025 x86_64
LiteSpeed
198.54.126.113

File Name : ToggleField.js

import React, { useState, useEffect } from 'react';
import { Tooltip } from '@WizardFields';
import parse from 'html-react-parser';
import classnames from 'classnames';

function ToggleField( { onChange, ...props } ) {
	const {
		name,
		id,
		label,
		value,
		backComp = false,
		onClick,
		isDisabled = false,
		tooltip,
		desc,
	} = props;

const [ inputvalue, setInputvalue ] = useState( value );

useEffect( () => {
		setInputvalue( value );
	}, [ value ] );

const checkedvalue = backComp ? 'enable' : 'yes';
	const uncheckedvalue = backComp ? 'disable' : 'no';

function handleCheckboxClick( e ) {
		let current_value = 'no';

if ( uncheckedvalue === inputvalue ) {
			setInputvalue( checkedvalue );
			current_value = checkedvalue;
		} else {
			setInputvalue( uncheckedvalue );
			current_value = uncheckedvalue;
		}

// Trigger change
		const changeEvent = new CustomEvent( 'wcf:toggle:change', {
			bubbles: true,
			detail: { e, name, value: current_value },
		} );

document.dispatchEvent( changeEvent );

// Notify parent component about the change
		if ( onChange ) {
			onChange( { name, value: current_value } );
		}
	}
	function onChangeHandle() {
		if ( onClick ) {
			onClick();
		}
	}

return (
		<div className={ 'wcf-field wcf-toggle-field' }>
			<div className={ 'wcf-field__data gap-2' }>
				<div className="wcf-field__data--content-left">
					{ label && (
						<label className="flex items-center gap-0.5">
							{ label }
							{ tooltip && <Tooltip text={ tooltip } /> }
						</label>
					) }
					{ desc && (
						<div className={ `wcf-field__desc text-gray-400` }>
							{ parse( desc ) }
						</div>
					) }
				</div>
				<div className="wcf-field__data--content-right">
					<div className="flex justify-center">
						<button
							type="button"
							// name={ name }
							// value={ inputvalue }
							id={ id ? id : name }
							className={ classnames(
								props.class,
								'bg-gray-200 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-600 focus:ring-offset-2',
								checkedvalue === inputvalue
									? 'bg-primary-600'
									: 'bg-gray-200',
								isDisabled ? '!bg-primary-300' : ''
							) }
							disabled={ isDisabled }
							role="switch"
							onClick={ handleCheckboxClick }
							onChange={ onChangeHandle }
						>
							<input
								type="hidden"
								className={ props.class }
								name={ name }
								value={ inputvalue }
							/>
							<span
								aria-hidden="true"
								className={ classnames(
									checkedvalue === inputvalue
										? 'translate-x-5'
										: 'translate-x-0',
									'translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out'
								) }
							></span>
						</button>
					</div>
				</div>
			</div>
		</div>
	);
}

export default ToggleField;

Name	Type	Size	Owner/Group	Permission	Last Modified	Actions
.	dir	-	bagbydny/bagbydny	0755	2026-04-27 10:47:45
..	dir	-	bagbydny/bagbydny	0755	2026-04-27 10:47:45
CheckboxField.js	text/x-java	2.75 KB	bagbydny/bagbydny	0644	2025-05-13 05:11:56
ColorPickerField.js	text/x-java	4.14 KB	bagbydny/bagbydny	0644	2024-12-10 07:22:18
ColorPickerField.scss	text/plain	1.13 KB	bagbydny/bagbydny	0644	2022-07-06 04:25:38
FooterNavigationBar.js	text/x-java	4.88 KB	bagbydny/bagbydny	0644	2025-03-05 05:40:40
NavigationBar.js	text/x-java	5.63 KB	bagbydny/bagbydny	0644	2025-05-13 05:11:56
TextField.js	text/x-java	1.12 KB	bagbydny/bagbydny	0644	2022-07-06 04:25:38
ToggleField.js	text/x-java	2.96 KB	bagbydny/bagbydny	0644	2025-05-13 05:11:56
Tooltip.js	text/x-java	840 B	bagbydny/bagbydny	0644	2025-03-05 05:40:40
Tooltip.scss	text/plain	919 B	bagbydny/bagbydny	0644	2024-12-10 07:22:18
index.js	text/x-java	431 B	bagbydny/bagbydny	0644	2025-05-13 05:11:56

For more Private tool come to me!

https://t.me/aDriv4vz