From 97472bec14268fbe35dc33729667ca885e538c2d Mon Sep 17 00:00:00 2001
From: Mikhail Chechnev <mim_@mail.ru>
Date: Thu, 26 Sep 2024 19:26:00 +0300
Subject: [PATCH] =?UTF-8?q?WEB=20APP:=20P8PGantt=20-=20=D1=81=D1=82=D0=B8?=
 =?UTF-8?q?=D0=BB=D1=8C=20=D0=BF=D0=BE=D0=BB=D0=BE=D1=81=20=D0=BF=D1=80?=
 =?UTF-8?q?=D0=BE=D0=BA=D1=80=D1=83=D1=82=D0=BA=D0=B8=20=D0=BF=D0=BE=20?=
 =?UTF-8?q?=D1=83=D0=BC=D0=BE=D0=BB=D1=87=D0=B0=D0=BD=D0=B8=D1=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/p8p_gantt.js | 12 ++++++++++--
 css/p8-panels.css           | 18 ++++++++++++++++++
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/app/components/p8p_gantt.js b/app/components/p8p_gantt.js
index 9a4c48e..0cb42f8 100644
--- a/app/components/p8p_gantt.js
+++ b/app/components/p8p_gantt.js
@@ -7,7 +7,7 @@
 //Подключение библиотек
 //---------------------
 
-import React, { useEffect, useState, useCallback } from "react"; //Классы React
+import React, { useEffect, useState, useCallback, useRef } from "react"; //Классы React
 import PropTypes from "prop-types"; //Контроль свойств компонента
 import {
     Box,
@@ -364,6 +364,9 @@ const P8PGantt = ({
         editTask: null
     });
 
+    //Ссылки на DOM
+    const svgContainerRef = useRef(null);
+
     //Отображение диаграммы
     const showGantt = useCallback(() => {
         if (!state.gantt) {
@@ -418,6 +421,11 @@ const P8PGantt = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [tasks]);
 
+    //При подключении компонента к старице
+    useEffect(() => {
+        svgContainerRef.current.children[0].classList.add("scroll");
+    }, []);
+
     //Генерация содержимого
     return (
         <div style={{ ...(containerStyle ? containerStyle : {}) }}>
@@ -468,7 +476,7 @@ const P8PGantt = ({
                     cancelBtnCaption={cancelTaskEditorBtnCaption}
                 />
             ) : null}
-            <div style={STYLES.GANTT(state.noData, title, zoomBar)}>
+            <div style={STYLES.GANTT(state.noData, title, zoomBar)} ref={svgContainerRef}>
                 <svg id="__gantt__" width="100%"></svg>
             </div>
         </div>
diff --git a/css/p8-panels.css b/css/p8-panels.css
index e69de29..e8d2cd8 100644
--- a/css/p8-panels.css
+++ b/css/p8-panels.css
@@ -0,0 +1,18 @@
+.scroll::-webkit-scrollbar {
+    height: 8px;
+    width: 8px;
+}
+
+.scroll::-webkit-scrollbar-track {
+    border-radius: 8px;
+    background-color: #ebebeb;
+}
+
+.scroll::-webkit-scrollbar-thumb {
+    border-radius: 8px;
+    background-color: #b4b4b4;
+}
+
+.scroll::-webkit-scrollbar-thumb:hover {
+    background-color: #808080;
+}