83 lines
2.1 KiB
TypeScript
83 lines
2.1 KiB
TypeScript
'use client'
|
|
import { getTranslation } from '@payloadcms/translations'
|
|
import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
|
|
import { FieldError } from '@payloadcms/ui/forms/FieldError'
|
|
import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'
|
|
import React from 'react'
|
|
|
|
import type { TextAreaInputProps } from './types.js'
|
|
|
|
import { useTranslation } from '../../providers/Translation/index.js'
|
|
import { fieldBaseClass } from '../shared/index.js'
|
|
import './index.scss'
|
|
|
|
export const TextareaInput: React.FC<TextAreaInputProps> = (props) => {
|
|
const {
|
|
AfterInput,
|
|
BeforeInput,
|
|
CustomDescription,
|
|
CustomError,
|
|
CustomLabel,
|
|
className,
|
|
descriptionProps,
|
|
errorProps,
|
|
labelProps,
|
|
onChange,
|
|
path,
|
|
placeholder,
|
|
readOnly,
|
|
rows,
|
|
rtl,
|
|
showError,
|
|
style,
|
|
value,
|
|
width,
|
|
} = props
|
|
|
|
const { i18n } = useTranslation()
|
|
|
|
return (
|
|
<div
|
|
className={[
|
|
fieldBaseClass,
|
|
'textarea',
|
|
className,
|
|
showError && 'error',
|
|
readOnly && 'read-only',
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ')}
|
|
style={{
|
|
...style,
|
|
width,
|
|
}}
|
|
>
|
|
{CustomError !== undefined ? CustomError : <FieldError {...(errorProps || {})} />}
|
|
{CustomLabel !== undefined ? CustomLabel : <FieldLabel {...(labelProps || {})} />}
|
|
{BeforeInput}
|
|
<label className="textarea-outer" htmlFor={`field-${path.replace(/\./g, '__')}`}>
|
|
<div className="textarea-inner">
|
|
<div className="textarea-clone" data-value={value || placeholder || ''} />
|
|
<textarea
|
|
className="textarea-element"
|
|
data-rtl={rtl}
|
|
disabled={readOnly}
|
|
id={`field-${path.replace(/\./g, '__')}`}
|
|
name={path}
|
|
onChange={onChange}
|
|
placeholder={getTranslation(placeholder, i18n)}
|
|
rows={rows}
|
|
value={value || ''}
|
|
/>
|
|
</div>
|
|
</label>
|
|
{AfterInput}
|
|
{CustomDescription !== undefined ? (
|
|
CustomDescription
|
|
) : (
|
|
<FieldDescription {...(descriptionProps || {})} />
|
|
)}
|
|
</div>
|
|
)
|
|
}
|