feat: add showIndicators and showNavigators properties to carousel co… (

#3231) * feat: add showIndicators and showNavigators properties to carousel component. * Add new carousel attributes to the api-generator. Co-authored-by: Ulaş Turan <ulasturan@Ulas-MacBook-Pro.local>
primefaces · Sep 6, 2022 · 8178dcc · 8178dcc
1 parent 7362e5c
commit 8178dcc
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 4 deletions.
diff --git a/api-generator/components/carousel.js b/api-generator/components/carousel.js
@@ -53,6 +53,18 @@ const CarouselProps = [
         default: 'false',
         description: 'Defines if scrolling would be infinite.'
     },
+    {
+        name: 'showIndicators',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to display indicator container.'
+    },
+    {
+        name: 'showNavigators',
+        type: 'boolean',
+        default: 'true',
+        description: 'Whether to display navigation buttons in container.'
+    },
     {
         name: 'autoplayInterval',
         type: 'number',

diff --git a/components/doc/carousel/index.js b/components/doc/carousel/index.js
@@ -549,6 +549,24 @@ const responsiveOptions = [
                                     <td>false</td>
                                     <td>Defines if scrolling would be infinite.</td>
                                 </tr>
+                                <tr>
+                                    <td>showIndicators</td>
+                                    <td>boolean</td>
+                                    <td>false</td>
+                                    <td>Whether to display indicator container.</td>
+                                </tr>
+                                <tr>
+                                    <td>showNavigators</td>
+                                    <td>boolean</td>
+                                    <td>true</td>
+                                    <td>Whether to display navigation buttons in container.</td>
+                                </tr>
+                                <tr>
+                                    <td>circular</td>
+                                    <td>boolean</td>
+                                    <td>false</td>
+                                    <td>Defines if scrolling would be infinite.</td>
+                                </tr>
                                 <tr>
                                     <td>autoplayInterval</td>
                                     <td>number</td>

diff --git a/components/lib/carousel/Carousel.js b/components/lib/carousel/Carousel.js
@@ -449,13 +449,13 @@ export const Carousel = React.memo(
 
             return (
                 <div className={className}>
-                    {backwardNavigator}
+                    {props.showNavigators ? backwardNavigator : null}
                     <div className="p-carousel-items-content" style={{ height: height }} onTouchStart={onTouchStart} onTouchMove={onTouchMove} onTouchEnd={onTouchEnd}>
                         <div ref={itemsContainerRef} className="p-carousel-items-container" onTransitionEnd={onTransitionEnd}>
                             {items}
                         </div>
                     </div>
-                    {forwardNavigator}
+                    {props.showNavigators ? forwardNavigator : null}
                 </div>
             );
         };
@@ -531,7 +531,7 @@ export const Carousel = React.memo(
                 {header}
                 <div className={contentClassName}>
                     {content}
-                    {indicators}
+                    {!props.showIndicators ? indicators : null}
                 </div>
                 {footer}
             </div>
@@ -562,5 +562,7 @@ Carousel.defaultProps = {
     contentClassName: null,
     containerClassName: null,
     indicatorsContentClassName: null,
-    onPageChange: null
+    onPageChange: null,
+    showIndicators: false,
+    showNavigators: true
 };
diff --git a/components/lib/carousel/carousel.d.ts b/components/lib/carousel/carousel.d.ts
@@ -30,6 +30,8 @@ export interface CarouselProps extends Omit<React.DetailedHTMLProps<React.HTMLAt
     indicatorsContentClassName?: string;
     onPageChange?(e: CarouselPageChangeParams): void;
     children?: React.ReactNode;
+    showNavigators: boolean;
+    showIndicators: boolean;
 }
 
 export declare class Carousel extends React.Component<CarouselProps, any> {