add conditionals to hide arrow and dot buttons if only one slide (#40)

* add single-slide classname to View * changelog entry * add conditionals * lint
kitconcept · Dec 22, 2023 · d9aa3d3 · d9aa3d3
1 parent e51a2fd
commit d9aa3d3
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 14 deletions.
diff --git a/news/40.feature b/news/40.feature
@@ -0,0 +1 @@
+Add conditionals around arrow and dot buttons, and hide them, if there is only one slide @danalvrz
diff --git a/src/components/View.jsx b/src/components/View.jsx
@@ -110,7 +110,7 @@ const SliderView = (props) => {
         {data.slides?.length > 0 && (
           <>
             <div className="slider-wrapper">
-              {!data.hideArrows && (
+              {!data.hideArrows && data.slides?.length > 1 && (
                 <>
                   <PrevButton onClick={scrollPrev} disabled={prevBtnDisabled} />
                   <NextButton onClick={scrollNext} disabled={nextBtnDisabled} />
@@ -141,19 +141,20 @@ const SliderView = (props) => {
                 </div>
               </div>
             </div>
-
-            <div className="slider-dots">
-              {scrollSnaps.map((_, index) => (
-                <DotButton
-                  key={index}
-                  index={index}
-                  onClick={() => scrollTo(index)}
-                  className={'slider-dot'.concat(
-                    index === selectedIndex ? ' slider-dot--selected' : '',
-                  )}
-                />
-              ))}
-            </div>
+            {data.slides?.length > 1 && (
+              <div className="slider-dots">
+                {scrollSnaps.map((_, index) => (
+                  <DotButton
+                    key={index}
+                    index={index}
+                    onClick={() => scrollTo(index)}
+                    className={'slider-dot'.concat(
+                      index === selectedIndex ? ' slider-dot--selected' : '',
+                    )}
+                  />
+                ))}
+              </div>
+            )}
           </>
         )}
       </div>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Add conditionals around arrow and dot buttons, and hide them, if there is only one slide @danalvrz