OwlCyberSecurity - MANAGER

Edit File: CustomTextarea.jsx

import { Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { Icon, close } from '@wordpress/icons';
import { Description, Field, Label, Textarea } from '@headlessui/react';

export const CustomTextarea = ({
	placeholder,
	className,
	title,
	onChange,
	value,
	description = null,
	required = false,
	hideEditor = false,
	setHideEditor = function () {},
}) => {
	const handleEditClick = (e) => {
		e.preventDefault();
		setHideEditor(false);
	};

return (
		<Field>
			<Label
				as="h4"
				className="mb-2 mt-0 text-base font-medium data-[disabled]:opacity-50">
				{__(title, 'extendify-local')}{' '}
				{required && (
					<span className="text-sm font-light text-wp-alert-red">*</span>
				)}
			</Label>

{description && (
				<Description className="data-[disabled]:opacity-50">
					{__(description, 'extendify-local')}
				</Description>
			)}
			{hideEditor ? (
				<div>
					<span className="line-clamp-4 opacity-80">{value}</span>
					<span className="link mt-1 flex w-full justify-end">
						<Button variant="link" onClick={handleEditClick}>
							{__('Edit', 'extendify-local')}
						</Button>
					</span>
				</div>
			) : (
				<div className="relative">
					<Textarea
						name="description"
						placeholder={placeholder}
						value={value}
						onChange={onChange}
						className={className}
					/>
					{value ? (
						<span className="absolute right-0 top-0 z-10 flex items-center pr-2 pt-2">
							<button
								type="button"
								className="m-0 border-0 bg-transparent p-0 text-gray-500"
								aria-label={__('Clear', 'extendify-local')}
								onClick={() => {
									onChange({ currentTarget: { value: '' } });
								}}>
								<Icon icon={close} size={16} />
							</button>
						</span>
					) : null}
				</div>
			)}
		</Field>
	);
};