WEB APP: обёртки подключения свойств к настройкам приложения для P8PPanelsMenuGrid, P8PAppWorkspace, P8PTable

This commit is contained in:
Mikhail Chechnev 2023-09-27 20:32:09 +03:00
parent 6e3506f704
commit 0d9f4de589
3 changed files with 67 additions and 18 deletions

View File

@ -15,7 +15,8 @@ import { NavigationContext, NavigationCtx, getRootLocation } from "./context/nav
import { P8PAppErrorPage } from "./components/p8p_app_error_page"; //Страница с ошибкой import { P8PAppErrorPage } from "./components/p8p_app_error_page"; //Страница с ошибкой
import { P8PAppWorkspace } from "./components/p8p_app_workspace"; //Рабочее пространство панели import { P8PAppWorkspace } from "./components/p8p_app_workspace"; //Рабочее пространство панели
import { P8PPanelsMenuGrid, P8P_PANELS_MENU_PANEL_SHAPE } from "./components/p8p_panels_menu"; //Меню панелей import { P8PPanelsMenuGrid, P8P_PANELS_MENU_PANEL_SHAPE } from "./components/p8p_panels_menu"; //Меню панелей
import { TITLES, BUTTONS, ERRORS, ERRORS_HTTP } from "../app.text"; //Текстовые ресурсы и константы import { BUTTONS, ERRORS, ERRORS_HTTP } from "../app.text"; //Текстовые ресурсы и константы
import { P8P_PANELS_MENU_GRID_CONFIG_PROPS, P8P_APP_WORKSPACE_CONFIG_PROPS } from "./config_wrapper"; //Подключение компонентов к настройкам приложения
//-------------------------- //--------------------------
//Вспомогательные компоненты //Вспомогательные компоненты
@ -56,14 +57,7 @@ const MainMenu = ({ panels = [] } = {}) => {
const handleItemNavigate = panel => navigatePanel(panel); const handleItemNavigate = panel => navigatePanel(panel);
//Генерация содержимого //Генерация содержимого
return ( return <P8PPanelsMenuGrid {...P8P_PANELS_MENU_GRID_CONFIG_PROPS} panels={panels} onItemNavigate={handleItemNavigate} />;
<P8PPanelsMenuGrid
panels={panels}
onItemNavigate={handleItemNavigate}
navigateCaption={BUTTONS.NAVIGATE}
defaultGroupTytle={TITLES.DEFAULT_PANELS_GROUP}
/>
);
}; };
//Контроль свойств - главное меню приложения //Контроль свойств - главное меню приложения
@ -85,10 +79,9 @@ const Workspace = ({ panels = [], selectedPanel, children } = {}) => {
//Генерация содержимого //Генерация содержимого
return ( return (
<P8PAppWorkspace <P8PAppWorkspace
{...P8P_APP_WORKSPACE_CONFIG_PROPS}
panels={panels} panels={panels}
selectedPanel={selectedPanel} selectedPanel={selectedPanel}
closeCaption={BUTTONS.CLOSE}
homeCaption={BUTTONS.NAVIGATE_HOME}
onHomeNavigate={handleHomeNavigate} onHomeNavigate={handleHomeNavigate}
onItemNavigate={handleItemNavigate} onItemNavigate={handleItemNavigate}
> >

View File

@ -160,4 +160,4 @@ P8PDataGrid.propTypes = {
//Интерфейс модуля //Интерфейс модуля
//---------------- //----------------
export { P8P_DATA_GRID_SIZE, P8P_DATA_GRID_DATA_TYPE, P8P_DATA_GRID_FILTER_SHAPE, P8PDataGrid }; export { P8P_DATA_GRID_DATA_TYPE, P8P_DATA_GRID_SIZE, P8P_DATA_GRID_FILTER_SHAPE, P8PDataGrid };

View File

@ -9,13 +9,43 @@
import React from "react"; //Классы React import React from "react"; //Классы React
import { deepCopyObject } from "./core/utils"; //Вспомогательные процедуры и функции import { deepCopyObject } from "./core/utils"; //Вспомогательные процедуры и функции
import { BUTTONS, TEXTS, INPUTS } from "../app.text"; //Текстовые ресурсы и константы import { TITLES, BUTTONS, TEXTS, INPUTS } from "../app.text"; //Текстовые ресурсы и константы
import { P8PDataGrid, P8P_DATA_GRID_SIZE } from "./components/p8p_data_grid"; //Таблица данных import { P8PPanelsMenuGrid, P8P_PANELS_MENU_PANEL_SHAPE } from "./components/p8p_data_grid"; //Меню панелей
import { P8PAppWorkspace } from "./components/p8p_app_workspace"; //Рабочее пространство
import { P8PTable, P8P_TABLE_DATA_TYPE, P8P_TABLE_SIZE, P8P_TABLE_FILTER_SHAPE } from "./components/p8p_data_grid"; //Таблица данных
import { P8PDataGrid, P8P_DATA_GRID_DATA_TYPE, P8P_DATA_GRID_SIZE, P8P_DATA_GRID_FILTER_SHAPE } from "./components/p8p_data_grid"; //Таблица данных
//--------- //---------
//Константы //Константы
//--------- //---------
//Конфигурируемые свойства "Меню панелей (табличное)" (P8PPanelsMenuGrid)
const P8P_PANELS_MENU_GRID_CONFIG_PROPS = {
navigateCaption: BUTTONS.NAVIGATE,
defaultGroupTytle: TITLES.DEFAULT_PANELS_GROUP
};
//Конфигурируемые свойства "Рабочего пространства" (P8PAppWorkspace)
const P8P_APP_WORKSPACE_CONFIG_PROPS = {
closeCaption: BUTTONS.CLOSE,
homeCaption: BUTTONS.NAVIGATE_HOME
};
//Конфигурируемые свойства "Таблицы" (P8PTable)
const P8P_TABLE_CONFIG_PROPS = {
orderAscMenuItemCaption: BUTTONS.ORDER_ASC,
orderDescMenuItemCaption: BUTTONS.ORDER_DESC,
filterMenuItemCaption: BUTTONS.FILTER,
valueFilterCaption: INPUTS.VALUE,
valueFromFilterCaption: INPUTS.VALUE_FROM,
valueToFilterCaption: INPUTS.VALUE_TO,
okFilterBtnCaption: BUTTONS.OK,
clearFilterBtnCaption: BUTTONS.CLEAR,
cancelFilterBtnCaption: BUTTONS.CANCEL,
morePagesBtnCaption: BUTTONS.MORE,
noDataFoundText: TEXTS.NO_DATA_FOUND
};
//Конфигурируемые свойства "Таблицы данных" (P8PDataGrid) //Конфигурируемые свойства "Таблицы данных" (P8PDataGrid)
const P8P_DATA_GRID_CONFIG_PROPS = { const P8P_DATA_GRID_CONFIG_PROPS = {
orderAscMenuItemCaption: BUTTONS.ORDER_ASC, orderAscMenuItemCaption: BUTTONS.ORDER_ASC,
@ -42,6 +72,8 @@ const addConfigChildProps = children =>
if (!React.isValidElement(child)) return child; if (!React.isValidElement(child)) return child;
const { children, ...restProps } = child.props; const { children, ...restProps } = child.props;
let configProps = {}; let configProps = {};
if (child.type.name === "P8PPanelsMenuGrid") configProps = P8P_PANELS_MENU_GRID_CONFIG_PROPS;
if (child.type.name === "P8PTable") configProps = P8P_TABLE_CONFIG_PROPS;
if (child.type.name === "P8PDataGrid") configProps = P8P_DATA_GRID_CONFIG_PROPS; if (child.type.name === "P8PDataGrid") configProps = P8P_DATA_GRID_CONFIG_PROPS;
return React.createElement(child.type, { ...configProps, ...restProps }, addConfigChildProps(children)); return React.createElement(child.type, { ...configProps, ...restProps }, addConfigChildProps(children));
}); });
@ -50,10 +82,17 @@ const addConfigChildProps = children =>
//Тело модуля //Тело модуля
//----------- //-----------
//Обёртка для компонента "Меню панелей (табличное)" (P8PPanelsMenuGrid)
const P8PPanelsMenuGridConfigWrapped = (props = {}) => <P8PPanelsMenuGrid {...P8P_PANELS_MENU_GRID_CONFIG_PROPS} {...props} />;
//Обёртка для компонента "Рабочее пространство" (P8PAppWorkspace)
const P8PAppWorkspaceConfigWrapped = (props = {}) => <P8PAppWorkspace {...P8P_APP_WORKSPACE_CONFIG_PROPS} {...props} />;
//Обёртка для компонента "Таблица" (P8PTable)
const P8PTableConfigWrapped = (props = {}) => <P8PTable {...P8P_DATA_GRID_CONFIG_PROPS} {...props} />;
//Обёртка для компонента "Таблица данных" (P8PDataGrid) //Обёртка для компонента "Таблица данных" (P8PDataGrid)
const P8PDataGridConfigWrapped = (props = {}) => { const P8PDataGridConfigWrapped = (props = {}) => <P8PDataGrid {...P8P_DATA_GRID_CONFIG_PROPS} {...props} />;
return <P8PDataGrid {...P8P_DATA_GRID_CONFIG_PROPS} {...props} />;
};
//Универсальный элемент-обёртка в параметры конфигурации //Универсальный элемент-обёртка в параметры конфигурации
const ConfigWrapper = ({ children }) => addConfigChildProps(children); const ConfigWrapper = ({ children }) => addConfigChildProps(children);
@ -62,4 +101,21 @@ const ConfigWrapper = ({ children }) => addConfigChildProps(children);
//Интерфейс модуля //Интерфейс модуля
//---------------- //----------------
export { P8P_DATA_GRID_CONFIG_PROPS, P8P_DATA_GRID_SIZE, P8PDataGridConfigWrapped, ConfigWrapper }; export {
P8P_PANELS_MENU_GRID_CONFIG_PROPS,
P8P_PANELS_MENU_PANEL_SHAPE,
P8P_APP_WORKSPACE_CONFIG_PROPS,
P8P_TABLE_CONFIG_PROPS,
P8P_TABLE_DATA_TYPE,
P8P_TABLE_SIZE,
P8P_TABLE_FILTER_SHAPE,
P8P_DATA_GRID_CONFIG_PROPS,
P8P_DATA_GRID_DATA_TYPE,
P8P_DATA_GRID_SIZE,
P8P_DATA_GRID_FILTER_SHAPE,
P8PPanelsMenuGridConfigWrapped,
P8PAppWorkspaceConfigWrapped,
P8PTableConfigWrapped,
P8PDataGridConfigWrapped,
ConfigWrapper
};