You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
83 lines
1.5 KiB
83 lines
1.5 KiB
import type { ChangeEvent, FocusEvent } from 'react'
|
|
import React from 'react'
|
|
|
|
import { T9n } from 'features/T9n'
|
|
|
|
import {
|
|
WrapperProps,
|
|
InputWrapper,
|
|
InputStyled,
|
|
Label,
|
|
Error,
|
|
Column,
|
|
} from './styled'
|
|
|
|
type Props = {
|
|
defaultValue?: string,
|
|
id: string,
|
|
inputWidth?: number,
|
|
label?: string,
|
|
labelLexic?: string,
|
|
labelWidth?: number,
|
|
maxLength?: number,
|
|
onBlur?: (event: FocusEvent<HTMLInputElement>) => void,
|
|
onChange?: (event: ChangeEvent<HTMLInputElement>) => void,
|
|
pattern?: string,
|
|
required?: boolean,
|
|
title?: string,
|
|
type?: string,
|
|
value?: string,
|
|
} & WrapperProps
|
|
|
|
export const Input = ({
|
|
defaultValue,
|
|
error,
|
|
id,
|
|
inputWidth,
|
|
label,
|
|
labelLexic,
|
|
labelWidth,
|
|
maxLength,
|
|
onBlur,
|
|
onChange,
|
|
paddingX,
|
|
pattern,
|
|
required,
|
|
title,
|
|
type,
|
|
value,
|
|
wrapperWidth,
|
|
}: Props) => (
|
|
<Column>
|
|
<InputWrapper
|
|
wrapperWidth={wrapperWidth}
|
|
paddingX={paddingX}
|
|
error={error}
|
|
>
|
|
<Label
|
|
htmlFor={id}
|
|
labelWidth={labelWidth}
|
|
>
|
|
{
|
|
labelLexic
|
|
? <T9n t={labelLexic} />
|
|
: label
|
|
}
|
|
</Label>
|
|
<InputStyled
|
|
id={id}
|
|
type={type}
|
|
required={required}
|
|
value={value}
|
|
defaultValue={defaultValue}
|
|
onChange={onChange}
|
|
onBlur={onBlur}
|
|
maxLength={maxLength}
|
|
inputWidth={inputWidth}
|
|
pattern={pattern}
|
|
title={title}
|
|
/>
|
|
</InputWrapper>
|
|
<Error>{error && <T9n t={error} />}</Error>
|
|
</Column>
|
|
)
|
|
|