announcements

web/src/components/InputTextArea.astro

@@ -1,44 +1,36 @@
 ---
+import { omit } from 'lodash-es'
+
 import { cn } from '../lib/cn'
 import { baseInputClassNames } from '../lib/formInputs'
 
 import InputWrapper from './InputWrapper.astro'
 
-import type { ComponentProps } from 'astro/types'
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
 
-type Props = Omit<ComponentProps<typeof InputWrapper>, 'children' | 'inputId'> & {
+type Props = Omit<ComponentProps<typeof InputWrapper>, 'children' | 'inputId' | 'required'> & {
+  inputProps?: Omit<HTMLAttributes<'textarea'>, 'name'>
   value?: string
-  placeholder?: string
-  disabled?: boolean
-  autofocus?: boolean
-  rows?: number
-  maxlength?: number
 }
 
-const { value, placeholder, maxlength, disabled, autofocus, rows = 3, ...wrapperProps } = Astro.props
+const { inputProps, value, ...wrapperProps } = Astro.props
 
-const inputId = Astro.locals.makeId(`input-${wrapperProps.name}`)
+const inputId = inputProps?.id ?? Astro.locals.makeId(`input-${wrapperProps.name}`)
 const hasError = !!wrapperProps.error && wrapperProps.error.length > 0
 ---
 
-{/* eslint-disable astro/jsx-a11y/no-autofocus */}
-
-<InputWrapper inputId={inputId} {...wrapperProps}>
+<InputWrapper inputId={inputId} required={inputProps?.required} {...wrapperProps}>
   <textarea
     transition:persist
+    {...omit(inputProps, ['class', 'id', 'name'])}
     id={inputId}
     class={cn(
       baseInputClassNames.input,
       baseInputClassNames.textarea,
+      inputProps?.class,
       hasError && baseInputClassNames.error,
-      disabled && baseInputClassNames.disabled
+      !!inputProps?.disabled && baseInputClassNames.disabled
     )}
-    placeholder={placeholder}
-    required={wrapperProps.required}
-    disabled={disabled}
-    name={wrapperProps.name}
-    autofocus={autofocus}
-    maxlength={maxlength}
-    rows={rows}>{value}</textarea
+    name={wrapperProps.name}>{value}</textarea
   >
 </InputWrapper>