147 lines
3.9 KiB
TypeScript
147 lines
3.9 KiB
TypeScript
import React, { FC, FocusEvent, KeyboardEvent, ClipboardEvent, ChangeEvent, useState } from 'react';
|
|
import { Input as InputControl } from 'antd';
|
|
import { InputProps as InputControlProps } from 'antd/lib/input';
|
|
import cn from 'classnames';
|
|
|
|
import { Icon } from 'Common/ui';
|
|
import theme from 'Lib/theme';
|
|
|
|
interface AdminInterfaceProps {
|
|
autoComplete?: InputControlProps['autoComplete'];
|
|
autoFocus?: InputControlProps['autoFocus'];
|
|
className?: string;
|
|
description?: string;
|
|
disabled?: boolean;
|
|
error?: boolean;
|
|
id?: string;
|
|
inputMode?: InputControlProps['inputMode'];
|
|
label?: string;
|
|
wrapperClassName?: string;
|
|
name: string;
|
|
onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
|
|
onChange?: (data: string, e?: ChangeEvent<HTMLInputElement>) => void;
|
|
onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
|
|
onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
|
|
onPaste?: (e: ClipboardEvent<HTMLInputElement>) => void;
|
|
pattern?: InputControlProps['pattern'];
|
|
placeholder: string;
|
|
prefix?: InputControlProps['prefix'];
|
|
size?: InputControlProps['size'];
|
|
suffix?: InputControlProps['suffix'];
|
|
type: InputControlProps['type'];
|
|
value: string | number;
|
|
}
|
|
|
|
const InputComponent: FC<AdminInterfaceProps> = ({
|
|
autoComplete,
|
|
autoFocus,
|
|
className,
|
|
description,
|
|
disabled,
|
|
error,
|
|
id,
|
|
inputMode,
|
|
label,
|
|
wrapperClassName,
|
|
name,
|
|
onBlur,
|
|
onChange,
|
|
onFocus,
|
|
onKeyDown,
|
|
onPaste,
|
|
pattern,
|
|
placeholder,
|
|
prefix,
|
|
size = 'middle',
|
|
suffix,
|
|
type,
|
|
value,
|
|
}) => {
|
|
const [inputType, setInputType] = useState(type);
|
|
|
|
const inputClass = cn(
|
|
'input',
|
|
{ input_big: size === 'large' },
|
|
{ input_medium: size === 'middle' },
|
|
{ input_small: size === 'small' },
|
|
className,
|
|
);
|
|
|
|
const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
|
|
if (onBlur) {
|
|
onBlur(e);
|
|
}
|
|
};
|
|
|
|
const showPassword = () => {
|
|
if (inputType === 'password') {
|
|
setInputType('text');
|
|
} else {
|
|
setInputType('password');
|
|
}
|
|
};
|
|
|
|
const showPasswordIcon = () => {
|
|
const icon = inputType === 'password' ? 'visibility_disable' : 'visibility_enable';
|
|
return (
|
|
<Icon
|
|
icon={icon}
|
|
className={theme.form.reveal}
|
|
onClick={showPassword}
|
|
/>
|
|
);
|
|
};
|
|
|
|
const validSuffix = (
|
|
<>
|
|
{!!suffix && suffix}
|
|
{(type === 'password') && showPasswordIcon()}
|
|
</>
|
|
);
|
|
|
|
let descriptionView = null;
|
|
if (description) {
|
|
descriptionView = (
|
|
<div className={theme.form.label}>
|
|
{description}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<label htmlFor={id || name} className={cn(theme.form.group, wrapperClassName)}>
|
|
{label && (
|
|
<div className={theme.form.label}>
|
|
{label}
|
|
</div>
|
|
)}
|
|
<InputControl
|
|
autoComplete={autoComplete}
|
|
autoFocus={autoFocus}
|
|
className={inputClass}
|
|
disabled={disabled}
|
|
formNoValidate
|
|
id={id || name}
|
|
inputMode={inputMode}
|
|
name={name}
|
|
onBlur={handleBlur}
|
|
onChange={(e) => onChange && onChange(e.target.value ? e.target.value : '', e)}
|
|
onFocus={onFocus}
|
|
onKeyDown={onKeyDown}
|
|
onPaste={onPaste}
|
|
pattern={pattern}
|
|
placeholder={placeholder}
|
|
prefix={prefix}
|
|
size="large"
|
|
suffix={validSuffix}
|
|
type={inputType}
|
|
value={value}
|
|
data-error={error}
|
|
/>
|
|
{descriptionView}
|
|
</label>
|
|
);
|
|
};
|
|
|
|
export default InputComponent;
|