87 lines
2.0 KiB
TypeScript
87 lines
2.0 KiB
TypeScript
import { ChangeEvent, FormEvent, RefObject } from 'react';
|
|
import React, { FC, memo } from '../../lib/teact/teact';
|
|
|
|
import buildClassName from '../../util/buildClassName';
|
|
|
|
type OwnProps = {
|
|
ref?: RefObject<HTMLInputElement>;
|
|
id?: string;
|
|
className?: string;
|
|
value?: string;
|
|
label?: string;
|
|
error?: string;
|
|
success?: string;
|
|
disabled?: boolean;
|
|
readOnly?: boolean;
|
|
placeholder?: string;
|
|
autoComplete?: string;
|
|
maxLength?: number;
|
|
inputMode?: 'text' | 'none' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
|
|
onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
onInput?: (e: FormEvent<HTMLInputElement>) => void;
|
|
onKeyPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
|
|
};
|
|
|
|
const InputText: FC<OwnProps> = ({
|
|
ref,
|
|
id,
|
|
className,
|
|
value,
|
|
label,
|
|
error,
|
|
success,
|
|
disabled,
|
|
readOnly,
|
|
placeholder,
|
|
autoComplete,
|
|
inputMode,
|
|
maxLength,
|
|
onChange,
|
|
onInput,
|
|
onKeyPress,
|
|
onKeyDown,
|
|
onBlur,
|
|
}) => {
|
|
const labelText = error || success || label;
|
|
const fullClassName = buildClassName(
|
|
'input-group',
|
|
value && 'touched',
|
|
error ? 'error' : success && 'success',
|
|
disabled && 'disabled',
|
|
readOnly && 'disabled',
|
|
labelText && 'with-label',
|
|
className,
|
|
);
|
|
|
|
return (
|
|
<div className={fullClassName}>
|
|
<input
|
|
ref={ref}
|
|
className="form-control"
|
|
type="text"
|
|
id={id}
|
|
dir="auto"
|
|
value={value || ''}
|
|
placeholder={placeholder}
|
|
maxLength={maxLength}
|
|
autoComplete={autoComplete}
|
|
inputMode={inputMode}
|
|
disabled={disabled}
|
|
readOnly={readOnly}
|
|
onChange={onChange}
|
|
onInput={onInput}
|
|
onKeyPress={onKeyPress}
|
|
onKeyDown={onKeyDown}
|
|
onBlur={onBlur}
|
|
/>
|
|
{labelText && (
|
|
<label htmlFor={id}>{labelText}</label>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default memo(InputText);
|