ea5c82fef0
feat(SW-3515): display placeholder for join scandic friends * feat(SW-3515): display placeholder for join scandic friends * add missing variant config Approved-by: Linus Flood
116 lines
3.3 KiB
TypeScript
116 lines
3.3 KiB
TypeScript
"use client"
|
|
|
|
// This is almost a copy of the Input in TempDesignSystem, but since it's tightly coupled
|
|
// to the error messages we need to duplicate it for now. In the future we should
|
|
// rewrite it to be more reusable.
|
|
|
|
import { forwardRef } from "react"
|
|
import { Text, TextField } from "react-aria-components"
|
|
import {
|
|
Controller,
|
|
type RegisterOptions,
|
|
useFormContext,
|
|
} from "react-hook-form"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import Caption from "@scandic-hotels/design-system/Caption"
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
import { Input as InputWithLabel } from "@scandic-hotels/design-system/Input"
|
|
|
|
import { useBookingFlowConfig } from "../../bookingFlowConfig/bookingFlowConfigContext"
|
|
import { getErrorMessage } from "./errors"
|
|
|
|
import styles from "./input.module.css"
|
|
|
|
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
helpText?: string
|
|
label: string
|
|
name: string
|
|
registerOptions?: RegisterOptions
|
|
hideError?: boolean
|
|
}
|
|
|
|
const BookingFlowInput = forwardRef<HTMLInputElement, InputProps>(
|
|
function Input(
|
|
{
|
|
"aria-label": ariaLabel,
|
|
autoComplete,
|
|
className = "",
|
|
disabled = false,
|
|
helpText = "",
|
|
label,
|
|
maxLength,
|
|
name,
|
|
placeholder,
|
|
readOnly = false,
|
|
registerOptions = {},
|
|
type = "text",
|
|
hideError,
|
|
inputMode,
|
|
},
|
|
ref
|
|
) {
|
|
const intl = useIntl()
|
|
const { control } = useFormContext()
|
|
const config = useBookingFlowConfig()
|
|
|
|
return (
|
|
<Controller
|
|
disabled={disabled}
|
|
control={control}
|
|
name={name}
|
|
rules={registerOptions}
|
|
render={({ field, fieldState }) => (
|
|
<TextField
|
|
aria-label={ariaLabel}
|
|
className={className}
|
|
isDisabled={field.disabled}
|
|
isInvalid={fieldState.invalid}
|
|
isRequired={!!registerOptions.required}
|
|
name={field.name}
|
|
onBlur={field.onBlur}
|
|
onChange={field.onChange}
|
|
validationBehavior="aria"
|
|
value={field.value}
|
|
>
|
|
<InputWithLabel
|
|
{...field}
|
|
ref={ref}
|
|
aria-labelledby={field.name}
|
|
autoComplete={autoComplete}
|
|
id={field.name}
|
|
label={label}
|
|
maxLength={maxLength}
|
|
placeholder={placeholder}
|
|
readOnly={readOnly}
|
|
required={!!registerOptions.required}
|
|
type={type}
|
|
inputMode={inputMode}
|
|
/>
|
|
{helpText && !fieldState.error ? (
|
|
<Caption asChild color="black">
|
|
<Text className={styles.helpText} slot="description">
|
|
<MaterialIcon icon="check" size={20} />
|
|
{helpText}
|
|
</Text>
|
|
</Caption>
|
|
) : null}
|
|
{fieldState.error && !hideError ? (
|
|
<Caption className={styles.error} fontOnly>
|
|
<MaterialIcon icon="info" color="Icon/Feedback/Error" />
|
|
{getErrorMessage(
|
|
intl,
|
|
config.variant,
|
|
fieldState.error.message
|
|
)}
|
|
</Caption>
|
|
) : null}
|
|
</TextField>
|
|
)}
|
|
/>
|
|
)
|
|
}
|
|
)
|
|
|
|
export default BookingFlowInput
|