remove access direct for DOM

criar-art · Jun 18, 2024 · 3b8f9f4 · 3b8f9f4
1 parent 992d6b4
commit 3b8f9f4
Showing 1 changed file with 69 additions and 53 deletions.
diff --git a/src/components/SlideContent/index.js b/src/components/SlideContent/index.js
@@ -1,97 +1,113 @@
 /* eslint-disable */
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useTranslation } from "react-i18next";
 import './style.scss';
 
 function SlideContent(props) {
   const { t } = useTranslation();
+  const slideContentRef = useRef(null);
+  const slideNavigationRef = useRef(null);
+
   useEffect(() => {
     let slideAnimationOptions;
-    let slideAnimationInitial = setInterval(() => {
-      nextHandler()
-    }, 6000);
+    const slideContent = slideContentRef.current;
+    const slides = slideContent.querySelectorAll(".slide-item");
+
+    const nextHandler = () => {
+      for (let item of slides) {
+        if (item.classList.contains("actived")) {
+          item.classList.remove("actived");
+          if (item.nextElementSibling) {
+            item.nextElementSibling.classList.add("actived");
+          } else {
+            slides[0].classList.add("actived");
+          }
+          break;
+        }
+      }
+    };
 
-    slideAnimationInitial
+    const prevHandler = () => {
+      for (let item of slides) {
+        if (item.classList.contains("actived")) {
+          item.classList.remove("actived");
+          if (item.previousElementSibling) {
+            item.previousElementSibling.classList.add("actived");
+          } else {
+            slides[slides.length - 1].classList.add("actived");
+          }
+          break;
+        }
+      }
+    };
+
+    let slideAnimationInitial = setInterval(nextHandler, 6000);
 
-    if(props.animation) {
-      clearInterval(slideAnimationInitial)
+    if (props.animation) {
+      clearInterval(slideAnimationInitial);
 
       slideAnimationOptions = setInterval(() => {
-        if(props.animation.direction == "prev") {
-          prevHandler()
+        if (props.animation.direction === "prev") {
+          prevHandler();
         } else {
-          nextHandler()
+          nextHandler();
         }
       }, props.animation.time);
 
-      if(props.animation.disabled) {
-        clearInterval(slideAnimationOptions)
-      } else {
-        slideAnimationOptions
+      if (props.animation.disabled) {
+        clearInterval(slideAnimationOptions);
       }
     }
+
     return () => {
       clearInterval(slideAnimationInitial);
       clearInterval(slideAnimationOptions);
-    }
-  });
-
-  const prevHandler = (e) => {
-    let slides = []
-    if(e) {
-      slides = e.target.parentElement.parentElement.querySelectorAll(".slide-item")
-    } else {
-      slides = document.getElementById(props.id).querySelectorAll(".slide-item")
-    }
+    };
+  }, [props.animation]);
 
-    for(let item of slides) {
-      if(item.classList.contains("actived")) {
-        if(item.previousElementSibling) {
-          item.classList.remove("actived")
-          item.previousElementSibling.classList.add("actived")
+  const handlePrevClick = () => {
+    const slides = slideContentRef.current.querySelectorAll(".slide-item");
+    for (let item of slides) {
+      if (item.classList.contains("actived")) {
+        item.classList.remove("actived");
+        if (item.previousElementSibling) {
+          item.previousElementSibling.classList.add("actived");
         } else {
-          item.classList.remove("actived")
-          slides[slides.length - 1].classList.add("actived")
+          slides[slides.length - 1].classList.add("actived");
         }
         break;
       }
     }
-
   };
-  const nextHandler = (e) => {
-    let slides = []
-    if(e) {
-      slides = e.target.parentElement.parentElement.querySelectorAll(".slide-item")
-    } else {
-      slides = document.getElementById(props.id).querySelectorAll(".slide-item")
-    }
 
-      for(let item of slides) {
-        if(item.classList.contains("actived")) {
-          if(item.nextElementSibling) {
-            item.classList.remove("actived")
-            item.nextElementSibling.classList.add("actived")
-            break;
-          } else {
-            item.classList.remove("actived")
-            slides[0].classList.add("actived")
-          }
+  const handleNextClick = () => {
+    const slides = slideContentRef.current.querySelectorAll(".slide-item");
+    for (let item of slides) {
+      if (item.classList.contains("actived")) {
+        item.classList.remove("actived");
+        if (item.nextElementSibling) {
+          item.nextElementSibling.classList.add("actived");
+        } else {
+          slides[0].classList.add("actived");
         }
+        break;
       }
+    }
   };
 
   return (
     <section
       id={props.id}
       className={`slide-content${props.border ? ' border' : ''}${props.squared ? ' squared' : ''}`}
+      ref={slideContentRef}
     >
       <div className="slide-contents">
         {props.children}
       </div>
-      { props.nav === "true" &&
-        <div className="slide-navigation">
-          <button className="btn prev" type="button" name="button" onClick={prevHandler}>{t('to_left')}</button>
-          <button className="btn next" type="button" name="button" onClick={nextHandler}>{t('to_right')}</button>
+      {props.nav === "true" &&
+        <div className="slide-navigation" ref={slideNavigationRef}>
+          <button className="btn prev" type="button" onClick={handlePrevClick}>{t('to_left')}</button>
+          <button className="btn next" type="button" onClick={handleNextClick}>{t('to_right')}</button>
         </div>
       }
     </section>