forked from CITKParus/P8-Panels
WEB APP: В контекст сообщений (MessagingContext) добавлена возможность вызова встраиваемых (Inline) уведомлений
This commit is contained in:
Mikhail Chechnev
parent
0d9f4de589
commit
1c02fc9684
@ -156,14 +156,14 @@ const P8PAppInlineMessage = ({ variant, text, okBtn, onOk, okBtnCaption }) => {
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<Container style={STYLES.INLINE_MESSAGE}>
|
||||
<Box p={5}>
|
||||
<Box p={1}>
|
||||
<Typography
|
||||
color={variant === P8P_APP_MESSAGE_VARIANT.ERR ? "error" : variant === P8P_APP_MESSAGE_VARIANT.WARN ? "primary" : "textSecondary"}
|
||||
>
|
||||
{text}
|
||||
</Typography>
|
||||
{okBtn && okBtnCaption ? (
|
||||
<Box pt={2}>
|
||||
<Box pt={1}>
|
||||
<Button onClick={() => (onOk ? onOk() : null)} color="primary" autoFocus>
|
||||
{okBtnCaption}
|
||||
</Button>
|
||||
|
||||
@ -10,8 +10,8 @@
|
||||
import React, { useReducer, createContext, useCallback } from "react"; //ReactJS
|
||||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||||
import { P8PAppProgress } from "../components/p8p_app_progress"; //Индикатор процесса
|
||||
import { P8PAppMessage } from "../components/p8p_app_message"; //Диалог сообщения
|
||||
import { MSG_AT, MSG_DLGT, INITIAL_STATE, messagingReducer } from "./messaging_reducer"; //Редьюсер состояния
|
||||
import { P8PAppMessage, P8PAppInlineMessage, P8PAppInlineError, P8PAppInlineWarn, P8PAppInlineInfo } from "../components/p8p_app_message"; //Диалог сообщения
|
||||
import { MSG_AT, MSG_TYPE, INITIAL_STATE, messagingReducer } from "./messaging_reducer"; //Редьюсер состояния
|
||||
|
||||
//---------
|
||||
//Константы
|
||||
@ -61,13 +61,13 @@ export const MessagingContext = ({ titles, texts, buttons, children }) => {
|
||||
);
|
||||
|
||||
//Отображение сообщения - ошибка
|
||||
const showMsgErr = useCallback((text, msgOnOk = null) => showMsg(MSG_DLGT.ERR, text, msgOnOk), [showMsg]);
|
||||
const showMsgErr = useCallback((text, msgOnOk = null) => showMsg(MSG_TYPE.ERR, text, msgOnOk), [showMsg]);
|
||||
|
||||
//Отображение сообщения - информация
|
||||
const showMsgInfo = useCallback((text, msgOnOk = null) => showMsg(MSG_DLGT.INFO, text, msgOnOk), [showMsg]);
|
||||
const showMsgInfo = useCallback((text, msgOnOk = null) => showMsg(MSG_TYPE.INFO, text, msgOnOk), [showMsg]);
|
||||
|
||||
//Отображение сообщения - предупреждение
|
||||
const showMsgWarn = useCallback((text, msgOnOk = null, msgOnCancel = null) => showMsg(MSG_DLGT.WARN, text, msgOnOk, msgOnCancel), [showMsg]);
|
||||
const showMsgWarn = useCallback((text, msgOnOk = null, msgOnCancel = null) => showMsg(MSG_TYPE.WARN, text, msgOnOk, msgOnCancel), [showMsg]);
|
||||
|
||||
//Сокрытие сообщения
|
||||
const hideMsg = useCallback(
|
||||
@ -89,11 +89,23 @@ export const MessagingContext = ({ titles, texts, buttons, children }) => {
|
||||
hideMsg(true);
|
||||
};
|
||||
|
||||
//Встраиваемое сообщение
|
||||
const InlineMsg = useCallback(props => P8PAppInlineMessage({ okBtn: true, okBtnCaption: buttons.OK, ...props }), [buttons.OK]);
|
||||
|
||||
//Встраиваемое сообщение об ошибке
|
||||
const InlineMsgErr = useCallback(props => P8PAppInlineError({ okBtn: true, okBtnCaption: buttons.OK, ...props }), [buttons.OK]);
|
||||
|
||||
//Встраиваемое сообщение с информацией
|
||||
const InlineMsgInfo = useCallback(props => P8PAppInlineInfo({ okBtn: true, okBtnCaption: buttons.OK, ...props }), [buttons.OK]);
|
||||
|
||||
//Встраиваемое сообщение с предупреждением
|
||||
const InlineMsgWarn = useCallback(props => P8PAppInlineWarn({ okBtn: true, okBtnCaption: buttons.OK, ...props }), [buttons.OK]);
|
||||
|
||||
//Вернём компонент провайдера
|
||||
return (
|
||||
<MessagingСtx.Provider
|
||||
value={{
|
||||
MSG_DLGT,
|
||||
MSG_TYPE,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
showMsg,
|
||||
@ -101,6 +113,10 @@ export const MessagingContext = ({ titles, texts, buttons, children }) => {
|
||||
showMsgInfo,
|
||||
showMsgWarn,
|
||||
hideMsg,
|
||||
InlineMsg,
|
||||
InlineMsgErr,
|
||||
InlineMsgInfo,
|
||||
InlineMsgWarn,
|
||||
msgState: state
|
||||
}}
|
||||
>
|
||||
@ -111,11 +127,11 @@ export const MessagingContext = ({ titles, texts, buttons, children }) => {
|
||||
variant={state.msgType}
|
||||
text={state.msgText}
|
||||
title
|
||||
titleText={state.msgType == MSG_DLGT.ERR ? titles.ERR : state.msgType == MSG_DLGT.WARN ? titles.WARN : titles.INFO}
|
||||
titleText={state.msgType == MSG_TYPE.ERR ? titles.ERR : state.msgType == MSG_TYPE.WARN ? titles.WARN : titles.INFO}
|
||||
okBtn={true}
|
||||
onOk={handleMessageOkClick}
|
||||
okBtnCaption={[MSG_DLGT.ERR, MSG_DLGT.INFO].includes(state.msgType) ? buttons.CLOSE : buttons.OK}
|
||||
cancelBtn={state.msgType == MSG_DLGT.WARN}
|
||||
okBtnCaption={[MSG_TYPE.ERR, MSG_TYPE.INFO].includes(state.msgType) ? buttons.CLOSE : buttons.OK}
|
||||
cancelBtn={state.msgType == MSG_TYPE.WARN}
|
||||
onCancel={handleMessageCancelClick}
|
||||
cancelBtnCaption={buttons.CANCEL}
|
||||
/>
|
||||
|
||||
@ -21,8 +21,8 @@ const MSG_AT = {
|
||||
HIDE_MSG: "HIDE_MSG" //Сокрытие сообщения
|
||||
};
|
||||
|
||||
//Типы диалогов сообщений
|
||||
const MSG_DLGT = {
|
||||
//Типы сообщений
|
||||
const MSG_TYPE = {
|
||||
INFO: P8P_APP_MESSAGE_VARIANT.INFO, //Тип диалога - информация
|
||||
WARN: P8P_APP_MESSAGE_VARIANT.WARN, //Тип диалога - предупреждение
|
||||
ERR: P8P_APP_MESSAGE_VARIANT.ERR //Тип диалога - ошибка
|
||||
@ -33,7 +33,7 @@ const INITIAL_STATE = {
|
||||
loading: false,
|
||||
loadingMessage: "",
|
||||
msg: false,
|
||||
msgType: MSG_DLGT.ERR,
|
||||
msgType: MSG_TYPE.ERR,
|
||||
msgText: null,
|
||||
msgOnOk: null,
|
||||
msgOnCancel: null
|
||||
@ -57,7 +57,7 @@ const handlers = {
|
||||
[MSG_AT.SHOW_MSG]: (state, { payload }) => ({
|
||||
...state,
|
||||
msg: true,
|
||||
msgType: payload.type || MSG_DLGT.APP_ERR,
|
||||
msgType: payload.type || MSG_TYPE.APP_ERR,
|
||||
msgText: payload.text,
|
||||
msgOnOk: payload.msgOnOk,
|
||||
msgOnCancel: payload.msgOnCancel
|
||||
@ -73,7 +73,7 @@ const handlers = {
|
||||
//----------------
|
||||
|
||||
//Константы
|
||||
export { MSG_AT, MSG_DLGT, INITIAL_STATE };
|
||||
export { MSG_AT, MSG_TYPE, INITIAL_STATE };
|
||||
|
||||
//Редьюсер состояния
|
||||
export const messagingReducer = (state, action) => {
|
||||
|
||||
@ -31,7 +31,7 @@ const PrjJobs = () => {
|
||||
const { executeStored } = useContext(BackEndСtx);
|
||||
|
||||
//Подключение к контексту сообщений
|
||||
const { showMsgErr, showMsgWarn, showMsgInfo } = useContext(MessagingСtx);
|
||||
const { MSG_TYPE, showMsgErr, showMsgWarn, showMsgInfo, InlineMsg, InlineMsgErr, InlineMsgInfo, InlineMsgWarn } = useContext(MessagingСtx);
|
||||
|
||||
//Подключение к контексту приложения
|
||||
const { pOnlineShowTab, pOnlineShowDocument, pOnlineShowDictionary, pOnlineUserProcedure, pOnlineUserReport } = useContext(ApplicationСtx);
|
||||
@ -67,6 +67,14 @@ const PrjJobs = () => {
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<div>
|
||||
<InlineMsg
|
||||
variant={MSG_TYPE.WARN}
|
||||
text="Просто сообщение, очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень очень длинное"
|
||||
onOk={() => console.log("INLINE MESSAGE ON OK")}
|
||||
/>
|
||||
<InlineMsgInfo text="Информация" onOk={() => console.log("INLINE INFO ON OK")} />
|
||||
<InlineMsgWarn text="Предупреждение" onOk={() => console.log("INLINE WARN ON OK")} />
|
||||
<InlineMsgErr text="Ошибка" onOk={() => console.log("INLINE ERR ON OK")} />
|
||||
<h1>Это панель работ!</h1>
|
||||
<br />
|
||||
<h2>Параметры: {isNavigationState() ? JSON.stringify(getNavigationState()) : "НЕ ПЕРЕДАНЫ"}</h2>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user