Refactor #3231

primefaces · Sep 6, 2022 · 20b654a · 20b654a
1 parent 8178dcc
commit 20b654a
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 38 deletions.
diff --git a/api-generator/components/carousel.js b/api-generator/components/carousel.js
@@ -56,7 +56,7 @@ const CarouselProps = [
     {
         name: 'showIndicators',
         type: 'boolean',
-        default: 'false',
+        default: 'true',
         description: 'Whether to display indicator container.'
     },
     {

diff --git a/components/doc/carousel/index.js b/components/doc/carousel/index.js
@@ -1,9 +1,9 @@
-import React, { memo } from 'react';
 import Link from 'next/link';
-import { TabView, TabPanel } from '../../lib/tabview/TabView';
-import { useLiveEditorTabs } from '../common/liveeditor';
+import React, { memo } from 'react';
+import { TabPanel, TabView } from '../../lib/tabview/TabView';
 import { CodeHighlight } from '../common/codehighlight';
 import { DevelopmentSection } from '../common/developmentsection';
+import { useLiveEditorTabs } from '../common/liveeditor';
 
 const CarouselDoc = memo(() => {
     const sources = {
@@ -552,7 +552,7 @@ const responsiveOptions = [
                                 <tr>
                                     <td>showIndicators</td>
                                     <td>boolean</td>
-                                    <td>false</td>
+                                    <td>true</td>
                                     <td>Whether to display indicator container.</td>
                                 </tr>
                                 <tr>

diff --git a/components/lib/carousel/Carousel.js b/components/lib/carousel/Carousel.js
@@ -1,6 +1,5 @@
 import * as React from 'react';
-import PrimeReact from '../api/Api';
-import { ariaLabel } from '../api/Api';
+import PrimeReact, { ariaLabel } from '../api/Api';
 import { Button } from '../button/Button';
 import { useMountEffect, usePrevious, useResizeListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { classNames, DomHandler, ObjectUtils, UniqueComponentId } from '../utils/Utils';
@@ -449,41 +448,49 @@ export const Carousel = React.memo(
 
             return (
                 <div className={className}>
-                    {props.showNavigators ? backwardNavigator : null}
+                    {backwardNavigator}
                     <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>
-                    {props.showNavigators ? forwardNavigator : null}
+                    {forwardNavigator}
                 </div>
             );
         };
 
         const createBackwardNavigator = () => {
-            const isDisabled = (!circular || (props.value && props.value.length < numVisibleState)) && currentPage === 0;
-            const className = classNames('p-carousel-prev p-link', {
-                'p-disabled': isDisabled
-            });
-            const iconClassName = classNames('p-carousel-prev-icon pi', {
-                'pi-chevron-left': !isVertical,
-                'pi-chevron-up': isVertical
-            });
+            if (props.showNavigators) {
+                const isDisabled = (!circular || (props.value && props.value.length < numVisibleState)) && currentPage === 0;
+                const className = classNames('p-carousel-prev p-link', {
+                    'p-disabled': isDisabled
+                });
+                const iconClassName = classNames('p-carousel-prev-icon pi', {
+                    'pi-chevron-left': !isVertical,
+                    'pi-chevron-up': isVertical
+                });
 
-            return <Button type="button" className={className} icon={iconClassName} onClick={navBackward} disabled={isDisabled} aria-label={ariaLabel('previousPageLabel')} />;
+                return <Button type="button" className={className} icon={iconClassName} onClick={navBackward} disabled={isDisabled} aria-label={ariaLabel('previousPageLabel')} />;
+            }
+
+            return null;
         };
 
         const createForwardNavigator = () => {
-            const isDisabled = (!circular || (props.value && props.value.length < numVisibleState)) && (currentPage === totalIndicators - 1 || totalIndicators === 0);
-            const className = classNames('p-carousel-next p-link', {
-                'p-disabled': isDisabled
-            });
-            const iconClassName = classNames('p-carousel-next-icon pi', {
-                'pi-chevron-right': !isVertical,
-                'pi-chevron-down': isVertical
-            });
+            if (props.showNavigators) {
+                const isDisabled = (!circular || (props.value && props.value.length < numVisibleState)) && (currentPage === totalIndicators - 1 || totalIndicators === 0);
+                const className = classNames('p-carousel-next p-link', {
+                    'p-disabled': isDisabled
+                });
+                const iconClassName = classNames('p-carousel-next-icon pi', {
+                    'pi-chevron-right': !isVertical,
+                    'pi-chevron-down': isVertical
+                });
+
+                return <Button type="button" className={className} icon={iconClassName} onClick={navForward} disabled={isDisabled} aria-label={ariaLabel('nextPageLabel')} />;
+            }
 
-            return <Button type="button" className={className} icon={iconClassName} onClick={navForward} disabled={isDisabled} aria-label={ariaLabel('nextPageLabel')} />;
+            return null;
         };
 
         const createIndicator = (index) => {
@@ -501,14 +508,18 @@ export const Carousel = React.memo(
         };
 
         const createIndicators = () => {
-            const className = classNames('p-carousel-indicators p-reset', props.indicatorsContentClassName);
-            let indicators = [];
+            if (props.showIndicators) {
+                const className = classNames('p-carousel-indicators p-reset', props.indicatorsContentClassName);
+                let indicators = [];
+
+                for (let i = 0; i < totalIndicators; i++) {
+                    indicators.push(createIndicator(i));
+                }
 
-            for (let i = 0; i < totalIndicators; i++) {
-                indicators.push(createIndicator(i));
+                return <ul className={className}>{indicators}</ul>;
             }
 
-            return <ul className={className}>{indicators}</ul>;
+            return null;
         };
 
         const otherProps = ObjectUtils.findDiffKeys(props, Carousel.defaultProps);
@@ -531,7 +542,7 @@ export const Carousel = React.memo(
                 {header}
                 <div className={contentClassName}>
                     {content}
-                    {!props.showIndicators ? indicators : null}
+                    {indicators}
                 </div>
                 {footer}
             </div>
@@ -553,6 +564,8 @@ Carousel.defaultProps = {
     className: null,
     itemTemplate: null,
     circular: false,
+    showIndicators: true,
+    showNavigators: true,
     autoplayInterval: 0,
     numVisible: 1,
     numScroll: 1,
@@ -562,7 +575,5 @@ Carousel.defaultProps = {
     contentClassName: null,
     containerClassName: null,
     indicatorsContentClassName: null,
-    onPageChange: null,
-    showIndicators: false,
-    showNavigators: true
+    onPageChange: null
 };
diff --git a/components/lib/carousel/carousel.d.ts b/components/lib/carousel/carousel.d.ts
@@ -19,6 +19,8 @@ export interface CarouselProps extends Omit<React.DetailedHTMLProps<React.HTMLAt
     footer?: React.ReactNode;
     itemTemplate?(item: any): React.ReactNode;
     circular?: boolean;
+    showNavigators?: boolean;
+    showIndicators?: boolean;
     autoplayInterval?: number;
     numVisible?: number;
     numScroll?: number;
@@ -30,8 +32,6 @@ 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> {