File "CustomTextarea.jsx"
Full Path: /home/leadltht/fastlinkinternet.com/admin/wp-content/wp-content/wp-content/plugins/extendify/src/PageCreator/components/content/CustomTextarea.jsx
File size: 1.82 KB
MIME-type: text/x-java
Charset: utf-8
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 () {},
id,
}) => {
const handleEditClick = (e) => {
e.preventDefault();
setHideEditor(false);
};
return (
<Field id={id} className="p-3">
<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>
);
};