forked from CITKParus/P8-Panels
113 lines
4.2 KiB
JavaScript
113 lines
4.2 KiB
JavaScript
/*
|
||
Парус 8 - Панели мониторинга - Заголовок
|
||
Компонент: Выбор даты
|
||
*/
|
||
|
||
//---------------------
|
||
//Подключение библиотек
|
||
//---------------------
|
||
|
||
import React, { useRef } from "react"; //Классы React
|
||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||
import dayjs from "dayjs"; //Работа с датами
|
||
import { TextField, Typography, Stack } from "@mui/material"; //Интерфейсные элементы
|
||
import { P8P_TYPOGRAPHY_VARIANT } from "../../theme/p8p_typography"; //Варианты шрифтов
|
||
import { P8P_TEXT_FIELD_VARIANT } from "../../theme/variants/p8p_text_field_variants"; //Варианты полей ввода
|
||
import { P8P_TYPOGRAPHY_MAX_LINES } from "../../theme/styles/typography"; //Стили шрифтов
|
||
import { formatDateRF, formatDateTimeRF } from "../../core/utils"; //Общие вспомогательные функции приложения
|
||
import { P8P_COMPONENT_SIZE } from "../../theme/constants"; //Общие константы стилей
|
||
import { P8PHeaderButtonBase } from "./components/p8p_header_button_base"; //Базовая кнопка заголовка
|
||
|
||
//---------
|
||
//Константы
|
||
//---------
|
||
|
||
//Типы даты
|
||
const P8P_HEADER_DATE_PICKER_TYPE = {
|
||
DATE: "date",
|
||
DATETIME: "datetime-local",
|
||
MONTH: "month",
|
||
WEEK: "week",
|
||
TIME: "time"
|
||
};
|
||
|
||
//Форматирование значения даты
|
||
const P8P_HEADER_DATE_PICKER_CONVERTER = {
|
||
[P8P_HEADER_DATE_PICKER_TYPE.DATE]: date => formatDateRF(date),
|
||
[P8P_HEADER_DATE_PICKER_TYPE.DATETIME]: date => formatDateTimeRF(date),
|
||
[P8P_HEADER_DATE_PICKER_TYPE.MONTH]: date => dayjs(date).locale("ru").format("MMMM YYYY"),
|
||
[P8P_HEADER_DATE_PICKER_TYPE.WEEK]: date => {
|
||
//Определяем неделю и год
|
||
const [year, week] = date.split("-W");
|
||
//Строковый формат
|
||
return `${week} неделя ${year}`;
|
||
},
|
||
[P8P_HEADER_DATE_PICKER_TYPE.TIME]: date => date
|
||
};
|
||
|
||
//-----------
|
||
//Тело модуля
|
||
//-----------
|
||
|
||
//Выбор даты
|
||
const P8PHeaderDatePicker = ({ value, placeholder, type = "date", width, onSelect, onClear }) => {
|
||
//Ссылка на поле ввода
|
||
const inputRef = useRef(null);
|
||
|
||
//При нажатии на кнопку выбора
|
||
const handleButtonClick = () => inputRef.current.showPicker();
|
||
|
||
//При смене значения
|
||
const onChange = e => onSelect && onSelect(e.target.value);
|
||
|
||
//Собственное представление кнопки
|
||
const buttonContent = (
|
||
<Stack direction="row" alignItems="center" justifyContent="center" alignContent="center">
|
||
<TextField
|
||
inputRef={inputRef}
|
||
type={type}
|
||
variant="standard"
|
||
value={value}
|
||
onChange={onChange}
|
||
data-variant={P8P_TEXT_FIELD_VARIANT.HIDDEN}
|
||
/>
|
||
<Typography
|
||
sx={P8P_TYPOGRAPHY_MAX_LINES({ maxLines: 2 })}
|
||
alignContent="center"
|
||
variant={P8P_TYPOGRAPHY_VARIANT.HEADER}
|
||
title={value ? P8P_HEADER_DATE_PICKER_CONVERTER[type](value) : placeholder}
|
||
>
|
||
{value ? P8P_HEADER_DATE_PICKER_CONVERTER[type](value) : placeholder}
|
||
</Typography>
|
||
</Stack>
|
||
);
|
||
|
||
//Генерация содержимого
|
||
return (
|
||
<P8PHeaderButtonBase
|
||
value={value}
|
||
width={width}
|
||
size={P8P_COMPONENT_SIZE.SMALL}
|
||
onClick={handleButtonClick}
|
||
onClear={onClear}
|
||
customButtonContent={buttonContent}
|
||
/>
|
||
);
|
||
};
|
||
|
||
//Контроль свойств - Выбор даты
|
||
P8PHeaderDatePicker.propTypes = {
|
||
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||
placeholder: PropTypes.string.isRequired,
|
||
type: PropTypes.oneOf(Object.values(P8P_HEADER_DATE_PICKER_TYPE)),
|
||
width: PropTypes.string,
|
||
onSelect: PropTypes.func,
|
||
onClear: PropTypes.func
|
||
};
|
||
|
||
//----------------
|
||
//Интерфейс модуля
|
||
//----------------
|
||
|
||
export { P8PHeaderDatePicker, P8P_HEADER_DATE_PICKER_TYPE };
|