151 lines
6.0 KiB
JavaScript
151 lines
6.0 KiB
JavaScript
import React from 'react';
|
|
import DatePicker from 'react-datepicker';
|
|
import 'react-datepicker/dist/react-datepicker.css';
|
|
import { TIME_RANGES } from './constants';
|
|
|
|
export const TimeRangeSelector = ({
|
|
selectedRange,
|
|
handleRangeChange,
|
|
startDate,
|
|
setStartDate,
|
|
endDate,
|
|
setEndDate,
|
|
useCustomRange,
|
|
handleCustomRangeChange,
|
|
handleResetZoom
|
|
}) => {
|
|
return (
|
|
<div style={{
|
|
display: 'flex',
|
|
flexWrap: 'wrap',
|
|
gap: '15px',
|
|
alignItems: 'center',
|
|
marginBottom: '15px'
|
|
}}>
|
|
{/* Стандартные диапазоны */}
|
|
<div style={{ flex: '1 1 200px', display: 'flex', gap: '10px', alignItems: 'flex-end' }}>
|
|
<div style={{ flex: '1' }}>
|
|
<label htmlFor="time-range" style={{
|
|
display: 'block',
|
|
marginBottom: '5px',
|
|
fontWeight: '500',
|
|
color: '#555'
|
|
}}>Стандартные диапазоны:</label>
|
|
<select
|
|
id="time-range"
|
|
value={selectedRange.value}
|
|
onChange={handleRangeChange}
|
|
style={{
|
|
width: '100%',
|
|
padding: '8px 12px',
|
|
borderRadius: '4px',
|
|
border: '1px solid #ddd',
|
|
color: "#333",
|
|
backgroundColor: '#f9f9f9'
|
|
}}
|
|
>
|
|
{TIME_RANGES.map(range => (
|
|
<option key={range.value} value={range.value}>{range.label}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleResetZoom}
|
|
style={{
|
|
padding: '8px 16px',
|
|
backgroundColor: '#f0f0f0',
|
|
color: '#333',
|
|
border: '1px solid #ddd',
|
|
borderRadius: '4px',
|
|
cursor: 'pointer',
|
|
transition: 'all 0.2s',
|
|
height: '36px',
|
|
whiteSpace: 'nowrap'
|
|
}}
|
|
onMouseOver={(e) => e.target.style.backgroundColor = '#e0e0e0'}
|
|
onMouseOut={(e) => e.target.style.backgroundColor = '#f0f0f0'}
|
|
>
|
|
Сбросить
|
|
</button>
|
|
</div>
|
|
|
|
{/* Кастомный диапазон */}
|
|
<div style={{ flex: '1 1 300px' }}>
|
|
<div style={{
|
|
marginBottom: '10px',
|
|
fontWeight: '500',
|
|
color: '#555'
|
|
}}>
|
|
Или укажите свой диапазон:
|
|
</div>
|
|
<div style={{
|
|
display: 'flex',
|
|
gap: '10px',
|
|
flexWrap: 'wrap'
|
|
}}>
|
|
<div style={{ flex: '1 1 200px' }}>
|
|
<DatePicker
|
|
selected={startDate}
|
|
onChange={(date) => setStartDate(date)}
|
|
showTimeSelect
|
|
timeFormat="HH:mm"
|
|
timeIntervals={15}
|
|
dateFormat="yyyy-MM-dd HH:mm"
|
|
placeholderText="Начальная дата"
|
|
customInput={
|
|
<input style={{
|
|
backgroundColor: '#f9f9f9',
|
|
color: "#555",
|
|
width: '100%',
|
|
padding: '8px 12px',
|
|
borderRadius: '4px',
|
|
border: '1px solid #ddd'
|
|
}} />
|
|
}
|
|
/>
|
|
</div>
|
|
<div style={{ flex: '1 1 200px' }}>
|
|
<DatePicker
|
|
selected={endDate}
|
|
onChange={(date) => setEndDate(date)}
|
|
showTimeSelect
|
|
timeFormat="HH:mm"
|
|
timeIntervals={15}
|
|
dateFormat="yyyy-MM-dd HH:mm"
|
|
placeholderText="Конечная дата"
|
|
customInput={
|
|
<input style={{
|
|
backgroundColor: '#f9f9f9',
|
|
color: "#555",
|
|
width: '100%',
|
|
padding: '8px 12px',
|
|
borderRadius: '4px',
|
|
border: '1px solid #ddd'
|
|
}} />
|
|
}
|
|
/>
|
|
</div>
|
|
<button
|
|
onClick={handleCustomRangeChange}
|
|
style={{
|
|
padding: '8px 16px',
|
|
backgroundColor: '#4a6baf',
|
|
color: 'white',
|
|
border: 'none',
|
|
borderRadius: '4px',
|
|
cursor: 'pointer',
|
|
transition: 'background-color 0.2s',
|
|
flex: '0 0 auto',
|
|
alignSelf: 'flex-end'
|
|
}}
|
|
onMouseOver={(e) => e.target.style.backgroundColor = '#3a5a9f'}
|
|
onMouseOut={(e) => e.target.style.backgroundColor = '#4a6baf'}
|
|
>
|
|
Применить
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}; |