WEB APP: P8PGantt - автоматический расчет высоты диаграммы, возможность задать стиль контейнера

app/components/p8p_gantt.js

@@ -78,10 +78,22 @@ const P8P_GANTT_TASK_COLOR_SHAPE = PropTypes.shape({
     desc: PropTypes.string.isRequired
 });
 
+//Высота заголовка
+const TITLE_HEIGHT = "44px";
+
+//Высота панели масштабирования
+const ZOOM_HEIGHT = "56px";
+
 //Стили
 const STYLES = {
     TASK_EDITOR_CONTENT: { minWidth: 400, overflowX: "auto" },
-    TASK_EDITOR_LIST: { width: "100%", minWidth: 300, maxWidth: 700, bgcolor: "background.paper" }
+    TASK_EDITOR_LIST: { width: "100%", minWidth: 300, maxWidth: 700, bgcolor: "background.paper" },
+    GANTT_TITLE: { height: TITLE_HEIGHT },
+    GANTT_ZOOM: { height: ZOOM_HEIGHT },
+    GANTT: (noData, title, zoomBar) => ({
+        height: `calc(100% - ${zoomBar ? ZOOM_HEIGHT : "0px"} - ${title ? TITLE_HEIGHT : "0px"})`,
+        display: noData ? "none" : ""
+    })
 };
 
 //--------------------------------
@@ -318,7 +330,7 @@ P8PGanttTaskEditor.propTypes = {
 
 //Диаграмма Ганта
 const P8PGantt = ({
-    height,
+    containerStyle,
     title,
     titleStyle,
     onTitleClick,
@@ -408,10 +420,16 @@ const P8PGantt = ({
 
     //Генерация содержимого
     return (
-        <div>
+        <div style={{ ...(containerStyle ? containerStyle : {}) }}>
             {state.gantt && state.noData ? <P8PAppInlineError text={noDataFoundText} /> : null}
             {state.gantt && !state.noData && title ? (
-                <Typography p={1} sx={{ ...(titleStyle ? titleStyle : {}) }} align="center" color="textSecondary" variant="subtitle1">
+                <Typography
+                    p={1}
+                    sx={{ ...STYLES.GANTT_TITLE, ...(titleStyle ? titleStyle : {}) }}
+                    align="center"
+                    color="textSecondary"
+                    variant="subtitle1"
+                >
                     {onTitleClick ? (
                         <Link component="button" variant="body2" underline="hover" onClick={() => onTitleClick()}>
                             {title}
@@ -422,7 +440,7 @@ const P8PGantt = ({
                 </Typography>
             ) : null}
             {state.gantt && !state.noData && zoomBar ? (
-                <Box p={1}>
+                <Box p={1} sx={STYLES.GANTT_ZOOM}>
                     <IconButton onClick={() => handleZoomChange(-1)} disabled={state.zoom == 0}>
                         <Icon>zoom_in</Icon>
                     </IconButton>
@@ -450,7 +468,7 @@ const P8PGantt = ({
                     cancelBtnCaption={cancelTaskEditorBtnCaption}
                 />
             ) : null}
-            <div style={{ height, display: state.noData ? "none" : "" }}>
+            <div style={STYLES.GANTT(state.noData, title, zoomBar)}>
                 <svg id="__gantt__" width="100%"></svg>
             </div>
         </div>
@@ -459,7 +477,7 @@ const P8PGantt = ({
 
 //Контроль свойств - Диаграмма Ганта
 P8PGantt.propTypes = {
-    height: PropTypes.string.isRequired,
+    containerStyle: PropTypes.object,
     title: PropTypes.string,
     titleStyle: PropTypes.object,
     onTitleClick: PropTypes.func,