forked from CITKParus/P8-Panels
83 lines
3.1 KiB
JavaScript
83 lines
3.1 KiB
JavaScript
/*
|
|
Парус 8 - Панели мониторинга - Заголовок
|
|
Компонент: Поле ввода
|
|
*/
|
|
|
|
//---------------------
|
|
//Подключение библиотек
|
|
//---------------------
|
|
|
|
import React from "react"; //Классы React
|
|
import PropTypes from "prop-types"; //Контроль свойств компонента
|
|
import { TextField, InputAdornment, Icon, FormControl, IconButton } from "@mui/material"; //Интерфейсные элементы
|
|
import { P8P_FORM_CONTROL_HEADER_FIELD } from "../../theme/styles/form_control"; //Стили контекста полей ввода
|
|
import { P8P_TEXT_FIELD_VARIANT } from "../../theme/variants/p8p_text_field_variants"; //Варианты полей ввода
|
|
import { P8PHeaderItem } from "./components/p8p_header_item"; //Элемент заголовка
|
|
|
|
//---------
|
|
//Константы
|
|
//---------
|
|
|
|
//Структура элемента доп. иконки поля ввода
|
|
const P8P_HEADER_FIELD_ADORNMENT_SHAPE = PropTypes.shape({
|
|
icon: PropTypes.string.isRequired,
|
|
disabled: PropTypes.bool,
|
|
onClick: PropTypes.func
|
|
});
|
|
|
|
//-----------
|
|
//Тело модуля
|
|
//-----------
|
|
|
|
//Поле ввода
|
|
const P8PHeaderField = ({ value, placeholder, type = "text", endAdornments = [], width, onChange }) => {
|
|
//При смене значения
|
|
const handleChange = e => onChange && onChange(e.target.value);
|
|
|
|
//Генерация содержимого
|
|
return (
|
|
<P8PHeaderItem width={width}>
|
|
<FormControl variant="outlined" sx={P8P_FORM_CONTROL_HEADER_FIELD}>
|
|
<TextField
|
|
type={type}
|
|
name="header-field"
|
|
placeholder={placeholder}
|
|
value={value}
|
|
variant="standard"
|
|
data-variant={P8P_TEXT_FIELD_VARIANT.PRIMARY}
|
|
title={value || placeholder}
|
|
onChange={handleChange}
|
|
InputProps={{
|
|
endAdornment:
|
|
endAdornments.length > 0 ? (
|
|
<InputAdornment position="end">
|
|
{endAdornments.map((item, index) => (
|
|
<IconButton onClick={e => item.onClick(e)} key={index} disabled={item.disabled}>
|
|
<Icon>{item.icon}</Icon>
|
|
</IconButton>
|
|
))}
|
|
</InputAdornment>
|
|
) : null
|
|
}}
|
|
/>
|
|
</FormControl>
|
|
</P8PHeaderItem>
|
|
);
|
|
};
|
|
|
|
//Контроль свойств - Поле ввода
|
|
P8PHeaderField.propTypes = {
|
|
value: PropTypes.any,
|
|
placeholder: PropTypes.string.isRequired,
|
|
type: PropTypes.string,
|
|
endAdornments: PropTypes.arrayOf(P8P_HEADER_FIELD_ADORNMENT_SHAPE),
|
|
width: PropTypes.string,
|
|
onChange: PropTypes.func
|
|
};
|
|
|
|
//----------------
|
|
//Интерфейс модуля
|
|
//----------------
|
|
|
|
export { P8PHeaderField };
|