139 lines
2.9 KiB
JavaScript
139 lines
2.9 KiB
JavaScript
import styled from '@emotion/styled';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
const Selectbox = ({ label, name, options, onChange, onChangeWithName, selectedValue = '', tooltipText = '' }) => {
|
|
const [curValue, setCurValue] = useState('');
|
|
const [curKey, setKey] = useState(null);
|
|
|
|
useEffect(() => {
|
|
if (options && options.length > 0) {
|
|
setCurValue(selectedValue !== '' ? selectedValue : Array.isArray(options) ? options[0] : Object.values(options)[0]);
|
|
}
|
|
}, [options, selectedValue]);
|
|
|
|
useEffect(() => {
|
|
if (onChangeWithName && curValue !== '') {
|
|
onChange(name, curValue);
|
|
}
|
|
|
|
if (onChange && curValue !== '') {
|
|
onChange(curKey);
|
|
}
|
|
}, [curValue, name, onChange]);
|
|
|
|
const handleChange = (e) => {
|
|
const selectedIndex = e.target.value;
|
|
if (Array.isArray(options)) {
|
|
setCurValue(options[selectedIndex]);
|
|
} else {
|
|
const key = Object.keys(options)[selectedIndex];
|
|
setCurValue(options[key]);
|
|
setKey(key);
|
|
}
|
|
};
|
|
|
|
const getSelectedIndex = () => {
|
|
if (Array.isArray(options)) {
|
|
return options.indexOf(curValue);
|
|
} else {
|
|
return Object.values(options).indexOf(curValue);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<SelectDiv>
|
|
<label>
|
|
{label}
|
|
<select name={name} onChange={handleChange} value={getSelectedIndex()}>
|
|
{options && (Array.isArray(options) ? options : Object.values(options)).length > 0 ? (
|
|
Array.isArray(options) ? (
|
|
options.map((option, index) => (
|
|
<option key={index} value={index}>
|
|
{option}
|
|
</option>
|
|
))
|
|
) : (
|
|
Object.entries(options).map(([key, value], index) => (
|
|
<option key={key} value={index}>
|
|
{value}
|
|
</option>
|
|
))
|
|
)
|
|
) : (
|
|
<option value=''>Нет доступных опций</option>
|
|
)}
|
|
</select>
|
|
</label>
|
|
|
|
{tooltipText !== '' && <Tooltip tooltipText={tooltipText} />}
|
|
</SelectDiv>
|
|
);
|
|
};
|
|
|
|
const SelectDiv = styled.div`
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
label {
|
|
color: inherit;
|
|
font-size: inherit;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.2rem;
|
|
}
|
|
|
|
select {
|
|
max-width: 100%;
|
|
width: 100%;
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
height: 1.6rem;
|
|
min-height: 36px;
|
|
background-color: rgb(240, 242, 246);
|
|
padding: 0 0.4rem;
|
|
font-size: inherit;
|
|
cursor: pointer;
|
|
transition: border-color 0.2s ease;
|
|
color: inherit;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-color: #258141;
|
|
box-shadow: 0 0 0 2px rgba(37, 129, 65, 0.1);
|
|
}
|
|
|
|
&:hover {
|
|
border-color: #999;
|
|
}
|
|
|
|
option {
|
|
color: #333;
|
|
background-color: white;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
select {
|
|
height: 2rem;
|
|
min-height: 39px;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
label {
|
|
font-size: 0.73rem;
|
|
}
|
|
|
|
select {
|
|
height: 2.3rem;
|
|
min-height: 42px;
|
|
padding: 0 0.6rem;
|
|
}
|
|
}
|
|
`;
|
|
|
|
export default Selectbox;
|