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.
67 lines
1.2 KiB
67 lines
1.2 KiB
import type { InputHTMLAttributes, ReactNode } from 'react'
|
|
|
|
import { useLexicsStore } from 'features/LexicsStore'
|
|
|
|
import {
|
|
Wrapper,
|
|
InputStyled,
|
|
Label,
|
|
} from './styled'
|
|
|
|
type Props = Pick<InputHTMLAttributes<HTMLInputElement>, (
|
|
'autoComplete' |
|
|
'autoFocus' |
|
|
'className' |
|
|
'disabled' |
|
|
'name' |
|
|
'onBlur' |
|
|
'onChange' |
|
|
'onFocus' |
|
|
'type' |
|
|
'placeholder' |
|
|
'value'
|
|
)> & {
|
|
leftContent?: ReactNode,
|
|
placeholderLexic?: string,
|
|
rightContent?: ReactNode,
|
|
}
|
|
|
|
export const Input = ({
|
|
autoComplete,
|
|
autoFocus,
|
|
className,
|
|
disabled,
|
|
leftContent,
|
|
name,
|
|
onBlur,
|
|
onChange,
|
|
onFocus,
|
|
placeholder,
|
|
placeholderLexic = '',
|
|
rightContent,
|
|
type,
|
|
value,
|
|
}: Props) => {
|
|
const { translate } = useLexicsStore()
|
|
|
|
return (
|
|
<Wrapper className={className}>
|
|
<Label>
|
|
{leftContent}
|
|
<InputStyled
|
|
autoComplete={autoComplete}
|
|
autoFocus={autoFocus}
|
|
disabled={disabled}
|
|
onBlur={onBlur}
|
|
onChange={onChange}
|
|
onFocus={onFocus}
|
|
placeholder={placeholder ?? translate(placeholderLexic)}
|
|
type={type}
|
|
value={value}
|
|
name={name}
|
|
/>
|
|
{rightContent}
|
|
</Label>
|
|
</Wrapper>
|
|
)
|
|
}
|
|
|