give / src / Campaigns / resources / admin / components / CampaignDetailsPage / Components / TextareaControl / index.tsx

index.tsx in GiveWP – Donation Plugin and Fundraising Platform 4.17.0, at src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/TextareaControl/index.tsx

59 lines 1.8 KB

Raw Download Zip

1	/**
2	* External dependencies
3	*/
4	import classnames from 'classnames';
5	import {TextareaHTMLAttributes} from 'react';
6	import {Controller, useFormContext} from 'react-hook-form';
7
8	/**
9	* Internal dependencies
10	*/
11	import './styles.scss';
12
13	type TextareaControlProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
14	name: string;
15	help?: string;
16	className?: string;
17	};
18
19	/**
20	* @since 4.0.0
21	*/
22	function TextareaControl({name, help, maxLength, className, ...rest}: TextareaControlProps) {
23	const {control} = useFormContext();
24
25	return (
26	<Controller
27	name={name}
28	control={control}
29	render={({field}) => (
30	<div className={classnames('givewp-textarea-control', className)}>
31	<textarea
32	{...field}
33	className="givewp-textarea-control__textarea"
34	maxLength={maxLength}
35	onChange={(e) => {
36	let newValue = e.target.value;
37
38	if (typeof maxLength === 'number' && maxLength > 0) {
39	newValue = newValue.slice(0, maxLength);
40	}
41
42	field.onChange(newValue);
43	}}
44	{...rest}
45	/>
46	{help && <p className="givewp-textarea-control__help">{help}</p>}
47	{typeof maxLength === 'number' && maxLength > 0 && (
48	<span className="givewp-textarea-control__counter">
49	{field.value?.length ?? 0}/{maxLength}
50	</span>
51	)}
52	</div>
53	)}
54	/>
55	);
56	}
57
58	export default TextareaControl;
59