Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 37x 37x 37x 40x 40x 40x 2x 2x 2x 2x 2x 2x 2x 40x 40x 80x 80x 80x 80x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 40x 27x 27x 27x 27x 27x 27x 27x 40x 40x 40x 40x 1x 1x 1x | import { forwardRef, useEffect, useRef } from 'react';
import { c } from '../../../helpers';
import { IconClose } from '../../Icons';
import { type InputTextProps } from './InputTextProps';
import styles from './InputText.module.css';
const InputText = forwardRef<HTMLInputElement, InputTextProps>(
(
{
className,
cleanable,
cleanerClassName,
disabled,
id,
onBlur,
onChange,
onClean,
onClick,
onFocus,
onKeyDownCapture,
placeholder,
readOnly,
title,
type = 'text',
value,
}: InputTextProps,
ref
) => {
const innerRef = useRef<HTMLInputElement>();
useEffect(() => {
if (innerRef.current != null) {
innerRef.current.value = value ?? '';
}
}, [value]);
const handleOnClean = (): void => {
if (innerRef.current != null) {
innerRef.current.value = '';
innerRef.current.focus();
}
onChange?.();
onClean?.(innerRef.current);
};
const setInnerRef = (current: HTMLInputElement): void => {
if (typeof ref === 'function') ref(current);
else if (ref) ref.current = current;
innerRef.current = current;
};
return (
<div className={c(styles.input_text, className)}>
<input
id={id}
name={id}
className={c(styles.input, cleanable ? styles.cleanable : '')}
disabled={disabled}
onBlur={onBlur}
onChange={onChange}
onClick={onClick}
onFocus={onFocus}
onKeyDownCapture={onKeyDownCapture}
placeholder={placeholder}
readOnly={readOnly}
ref={setInnerRef}
title={title}
type={type}
/>
{cleanable && (
<button
className={c(styles.cleaner, cleanerClassName)}
onClick={handleOnClean}
>
<IconClose className={c(styles.cleaner_icon)} />
<i>Clean</i>
</button>
)}
</div>
);
}
);
export default InputText;
|