give
/
src
/
Campaigns
/
resources
/
admin
/
components
/
CampaignDetailsPage
/
Components
/
TextareaControl
/
index.tsx
give
/
src
/
Campaigns
/
resources
/
admin
/
components
/
CampaignDetailsPage
/
Components
/
TextareaControl
Last commit date
index.tsx
1 year ago
styles.scss
1 year ago
index.tsx
59 lines
| 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 |