1- import { Event , StyleClassHelper , withStyles } from '@ui5/webcomponents-react-base' ;
2- import React , { Children , Component } from 'react' ;
3- import { ClassProps } from '../../interfaces/ClassProps' ;
1+ import { StyleClassHelper } from '@ui5/webcomponents-react-base' ;
2+ import React , { Children , FC , useMemo } from 'react' ;
3+ import { createUseStyles } from 'react-jss' ;
4+ import { JSSTheme } from '../../interfaces/JSSTheme' ;
45import { CarouselArrowsPlacement } from '../../lib/CarouselArrowsPlacement' ;
56import { Icon } from '../../lib/Icon' ;
67import { Label } from '../../lib/Label' ;
78import { PlacementType } from '../../lib/PlacementType' ;
89import styles from './CarouselPagination.jss' ;
910
11+ const useStyles = createUseStyles < JSSTheme , keyof ReturnType < typeof styles > > ( styles ) ;
12+
1013export interface CarouselPaginationPropTypes {
1114 /**
1215 * Defines where the carousel's arrows are placed.
@@ -26,78 +29,96 @@ export interface CarouselPaginationPropTypes {
2629 * The default value is PlacementType.Bottom.
2730 */
2831 pageIndicatorPlacement ?: PlacementType . Top | PlacementType . Bottom ;
29- }
3032
31- interface CarouselPaginationInternalProps extends CarouselPaginationPropTypes , ClassProps {
32- goToPreviousPage : ( e : Event ) => void ;
33- goToNextPage : ( e : Event ) => void ;
33+ /**
34+ * Index of the active page to be displayed
35+ */
3436 activePage ?: number ;
35- }
3637
37- @ withStyles ( styles )
38- export class CarouselPagination extends Component < CarouselPaginationInternalProps > {
39- private static TEXT_INDICATOR_THRESHOLD = 8 ;
38+ goToPreviousPage ?: ( e : any ) => void ;
39+ goToNextPage ?: ( e : any ) => void ;
40+ }
4041
41- private handleGoToNextPage = ( e ) => {
42- this . props . goToNextPage ( Event . of ( this , e ) ) ;
43- } ;
42+ const TEXT_INDICATOR_THRESHOLD = 8 ;
43+ const CarouselPagination : FC < CarouselPaginationPropTypes > = ( props ) => {
44+ const classes = useStyles ( ) ;
4445
45- private handleGoToPreviousPage = ( e ) => {
46- this . props . goToPreviousPage ( Event . of ( this , e ) ) ;
47- } ;
46+ const {
47+ arrowsPlacement,
48+ children,
49+ showPageIndicator,
50+ pageIndicatorPlacement,
51+ activePage,
52+ goToPreviousPage,
53+ goToNextPage
54+ } = props ;
4855
49- render ( ) {
50- const { arrowsPlacement , children , showPageIndicator , pageIndicatorPlacement , classes , activePage } = this . props ;
56+ const numberOfChildren = React . Children . count ( children ) ;
57+ const showTextIndicator = numberOfChildren >= TEXT_INDICATOR_THRESHOLD ;
5158
52- const numberOfChildren = React . Children . count ( children ) ;
53- const showTextIndicator = numberOfChildren >= CarouselPagination . TEXT_INDICATOR_THRESHOLD ;
59+ const paginationClasses = StyleClassHelper . of ( classes . pagination ) ;
60+ if ( arrowsPlacement === CarouselArrowsPlacement . Content ) {
61+ paginationClasses . put ( classes . paginationArrowContent ) ;
62+ }
63+ if ( pageIndicatorPlacement === PlacementType . Top ) {
64+ paginationClasses . put ( classes . paginationTop ) ;
65+ }
66+ if ( pageIndicatorPlacement === PlacementType . Bottom ) {
67+ paginationClasses . put ( classes . paginationBottom ) ;
68+ }
5469
55- const paginationClasses = StyleClassHelper . of ( classes . pagination ) ;
56- if ( arrowsPlacement === CarouselArrowsPlacement . Content ) {
57- paginationClasses . put ( classes . paginationArrowContent ) ;
58- }
59- if ( pageIndicatorPlacement === PlacementType . Top ) {
60- paginationClasses . put ( classes . paginationTop ) ;
61- }
62- if ( pageIndicatorPlacement === PlacementType . Bottom ) {
63- paginationClasses . put ( classes . paginationBottom ) ;
64- }
70+ const shouldRenderPaginationBar = useMemo ( ( ) => {
71+ return showPageIndicator || arrowsPlacement === CarouselArrowsPlacement . PageIndicator ;
72+ } , [ showPageIndicator , arrowsPlacement ] ) ;
6573
74+ if ( ! shouldRenderPaginationBar ) {
6675 return (
67- < div className = { paginationClasses . valueOf ( ) } >
68- < div
69- data-value = { arrowsPlacement === CarouselArrowsPlacement . Content ? 'paginationArrow' : null }
70- className = { classes . paginationArrow }
71- onClick = { this . handleGoToPreviousPage }
72- >
73- < Icon src = "slim-arrow-left" />
76+ < div className = { classes . paginationArrowContentNoBar } >
77+ < div data-value = "paginationArrow" className = { classes . paginationArrow } onClick = { goToPreviousPage } >
78+ < Icon src = "sap-icon://slim-arrow-left" />
7479 </ div >
75-
76- { showPageIndicator && (
77- < div className = { classes . paginationIndicator } >
78- { showTextIndicator && < Label > { `Showing ${ activePage + 1 } ${ numberOfChildren } } </ Label > }
79-
80- { ! showTextIndicator &&
81- Children . map ( children , ( item , index ) => (
82- < span
83- key = { index }
84- className = { `${ activePage === index ? classes . paginationIconActive : null } ${ classes . paginationIcon } }
85- aria-label = { `Item ${ index + 1 } ${ numberOfChildren } }
86- >
87- { index + 1 }
88- </ span >
89- ) ) }
90- </ div >
91- ) }
92-
93- < div
94- data-value = { arrowsPlacement === CarouselArrowsPlacement . Content ? 'paginationArrow' : null }
95- className = { classes . paginationArrow }
96- onClick = { this . handleGoToNextPage }
97- >
98- < Icon src = "slim-arrow-right" />
80+ < div data-value = "paginationArrow" className = { classes . paginationArrow } onClick = { goToNextPage } >
81+ < Icon src = "sap-icon://slim-arrow-right" />
9982 </ div >
10083 </ div >
10184 ) ;
10285 }
103- }
86+
87+ return (
88+ < div className = { paginationClasses . valueOf ( ) } >
89+ < div
90+ data-value = { arrowsPlacement === CarouselArrowsPlacement . Content ? 'paginationArrow' : null }
91+ className = { classes . paginationArrow }
92+ onClick = { goToPreviousPage }
93+ >
94+ < Icon src = "sap-icon://slim-arrow-left" />
95+ </ div >
96+
97+ < div className = { classes . paginationIndicator } >
98+ { showPageIndicator && showTextIndicator && < Label > { `Showing ${ activePage + 1 } ${ numberOfChildren } } </ Label > }
99+
100+ { showPageIndicator &&
101+ ! showTextIndicator &&
102+ Children . map ( children , ( item , index ) => (
103+ < span
104+ key = { index }
105+ className = { `${ activePage === index ? classes . paginationIconActive : null } ${ classes . paginationIcon } }
106+ aria-label = { `Item ${ index + 1 } ${ numberOfChildren } }
107+ >
108+ { index + 1 }
109+ </ span >
110+ ) ) }
111+ </ div >
112+
113+ < div
114+ data-value = { arrowsPlacement === CarouselArrowsPlacement . Content ? 'paginationArrow' : null }
115+ className = { classes . paginationArrow }
116+ onClick = { goToNextPage }
117+ >
118+ < Icon src = "sap-icon://slim-arrow-right" />
119+ </ div >
120+ </ div >
121+ ) ;
122+ } ;
123+
124+ export { CarouselPagination } ;
0 commit comments