118 lines
2.9 KiB
JavaScript
118 lines
2.9 KiB
JavaScript
import { useState } from 'react';
|
|
import styled from '@emotion/styled';
|
|
|
|
import Tooltip from './Tooltip';
|
|
|
|
const TextInput = ({
|
|
label,
|
|
name,
|
|
type = 'text',
|
|
onChange,
|
|
onChangeWithName,
|
|
tooltipText = '',
|
|
value = '',
|
|
placeholder = '',
|
|
autocomplete = 'new-password',
|
|
}) => {
|
|
const [cur_value, setCurValue] = useState(value);
|
|
const [isFocused, setIsFocused] = useState(false);
|
|
|
|
const handleChange = (inputValue) => {
|
|
if (onChangeWithName) {
|
|
onChangeWithName(name, inputValue);
|
|
}
|
|
|
|
if (onChange) {
|
|
onChange(inputValue);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<TextInputDiv>
|
|
<label>
|
|
{label}
|
|
<input
|
|
type={type}
|
|
name={name}
|
|
onChange={(e) => {
|
|
setCurValue(e.target.value);
|
|
if (!isFocused) {
|
|
handleChange(e.target.value);
|
|
}
|
|
}}
|
|
onBlur={() => {
|
|
handleChange(cur_value);
|
|
setIsFocused(false);
|
|
}}
|
|
onFocus={() => setIsFocused(true)}
|
|
value={cur_value}
|
|
autoComplete={autocomplete}
|
|
placeholder={placeholder}
|
|
/>
|
|
</label>
|
|
{tooltipText !== '' && <Tooltip tooltipText={tooltipText} />}
|
|
</TextInputDiv>
|
|
);
|
|
};
|
|
|
|
const TextInputDiv = styled.div`
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
label {
|
|
color: inherit;
|
|
font-size: inherit;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.2rem; /* Уменьшено еще на 10% (0.225rem * 0.9) */
|
|
}
|
|
|
|
input {
|
|
max-width: 100%;
|
|
width: 100%;
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
height: 1.6rem; /* Уменьшено еще на 10% (1.8rem * 0.9) */
|
|
min-height: 36px; /* Уменьшено еще на 10% (40px * 0.9) */
|
|
background-color: rgb(240, 242, 246);
|
|
padding: 0 0.4rem; /* Уменьшено еще на 10% (0.45rem * 0.9) */
|
|
font-size: inherit;
|
|
transition: border-color 0.2s ease;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-color: #258141;
|
|
box-shadow: 0 0 0 2px rgba(37, 129, 65, 0.1);
|
|
}
|
|
|
|
&:hover {
|
|
border-color: #999;
|
|
}
|
|
}
|
|
|
|
/* Медиа-запросы для адаптивности */
|
|
@media (max-width: 768px) {
|
|
input {
|
|
height: 2rem; /* Уменьшено еще на 10% (2.25rem * 0.9) */
|
|
min-height: 39px; /* Уменьшено еще на 10% (43px * 0.9) */
|
|
font-size: 13px; /* Уменьшено еще на 10% (14.4px * 0.9) */
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
label {
|
|
font-size: 0.73rem; /* Уменьшено еще на 10% (0.81rem * 0.9) */
|
|
}
|
|
|
|
input {
|
|
height: 2.3rem; /* Уменьшено еще на 10% (2.52rem * 0.9) */
|
|
min-height: 42px; /* Уменьшено еще на 10% (47px * 0.9) */
|
|
padding: 0 0.6rem; /* Уменьшено еще на 10% (0.675rem * 0.9) */
|
|
}
|
|
}
|
|
`;
|
|
|
|
export default TextInput;
|