From eba3ddc01d17603a97d71f0c58fcebf23d6b4ee4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ula=C5=9F=20Turan?= <ulasturan06@hotmail.com>
Date: Thu, 3 Aug 2023 00:28:07 +0300
Subject: [PATCH] Related #4602 - For Paginator

---
 components/lib/dropdown/Dropdown.js           |  8 +--
 components/lib/paginator/FirstPageLink.js     |  7 +-
 components/lib/paginator/LastPageLink.js      |  7 +-
 components/lib/paginator/NextPageLink.js      |  7 +-
 components/lib/paginator/PageLinks.js         |  9 +--
 components/lib/paginator/Paginator.css        | 35 ----------
 components/lib/paginator/Paginator.js         | 23 ++++---
 components/lib/paginator/PaginatorBase.js     | 64 +++++++++++++++++++
 components/lib/paginator/PrevPageLink.js      |  8 +--
 .../lib/paginator/RowsPerPageDropdown.js      |  4 +-
 components/lib/paginator/paginator.d.ts       |  5 ++
 styles/primereact.css                         |  1 -
 12 files changed, 108 insertions(+), 70 deletions(-)
 delete mode 100644 components/lib/paginator/Paginator.css

diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js
index 8aa1141684..cf7b50caf6 100644
--- a/components/lib/dropdown/Dropdown.js
+++ b/components/lib/dropdown/Dropdown.js
@@ -759,7 +759,7 @@ export const Dropdown = React.memo(
                         ref: inputRef,
                         type: 'text',
                         defaultValue: value,
-                        className: cx('input'),
+                        className: cx('input', { label }),
                         disabled: props.disabled,
                         placeholder: props.placeholder,
                         maxLength: props.maxLength,
@@ -774,15 +774,11 @@ export const Dropdown = React.memo(
 
                 return <input {...inputProps} />;
             } else {
-                const className = classNames('p-dropdown-label p-inputtext', {
-                    'p-placeholder': label === null && props.placeholder,
-                    'p-dropdown-label-empty': label === null && !props.placeholder
-                });
                 const content = props.valueTemplate ? ObjectUtils.getJSXElement(props.valueTemplate, selectedOption, props) : label || props.placeholder || 'empty';
                 const inputProps = mergeProps(
                     {
                         ref: inputRef,
-                        className
+                        className: cx('input', { label })
                     },
                     ptm('input')
                 );
diff --git a/components/lib/paginator/FirstPageLink.js b/components/lib/paginator/FirstPageLink.js
index 9ead3ffe00..5261d9da4f 100644
--- a/components/lib/paginator/FirstPageLink.js
+++ b/components/lib/paginator/FirstPageLink.js
@@ -9,9 +9,10 @@ import { PrimeReactContext } from '../api/Api';
 export const FirstPageLink = React.memo((inProps) => {
     const context = React.useContext(PrimeReactContext);
     const props = FirstPageLinkBase.getProps(inProps, context);
+    const { ptm, cx } = props;
 
     const getPTOptions = (key) => {
-        return props.ptm(key, {
+        return ptm(key, {
             context: {
                 disabled: props.disabled
             }
@@ -22,7 +23,7 @@ export const FirstPageLink = React.memo((inProps) => {
     const iconClassName = 'p-paginator-icon';
     const firstPageIconProps = mergeProps(
         {
-            className: iconClassName
+            className: cx('firstPageIcon')
         },
         getPTOptions('firstPageIcon')
     );
@@ -31,7 +32,7 @@ export const FirstPageLink = React.memo((inProps) => {
     const firstPageButtonProps = mergeProps(
         {
             type: 'button',
-            className,
+            className: cx('firstPageButton', { disabled: props.disabled }),
             onClick: props.onClick,
             disabled: props.disabled,
             'aria-label': ariaLabel('firstPageLabel')
diff --git a/components/lib/paginator/LastPageLink.js b/components/lib/paginator/LastPageLink.js
index de9b512bff..b9c5454329 100644
--- a/components/lib/paginator/LastPageLink.js
+++ b/components/lib/paginator/LastPageLink.js
@@ -9,9 +9,10 @@ import { PrimeReactContext } from '../api/Api';
 export const LastPageLink = React.memo((inProps) => {
     const context = React.useContext(PrimeReactContext);
     const props = LastPageLinkBase.getProps(inProps, context);
+    const { ptm, cx } = props;
 
     const getPTOptions = (key) => {
-        return props.ptm(key, {
+        return ptm(key, {
             context: {
                 disabled: props.disabled
             }
@@ -22,7 +23,7 @@ export const LastPageLink = React.memo((inProps) => {
     const iconClassName = 'p-paginator-icon';
     const lastPageIconProps = mergeProps(
         {
-            className: iconClassName
+            className: cx('lastPageIcon')
         },
         getPTOptions('lastPageIcon')
     );
@@ -31,7 +32,7 @@ export const LastPageLink = React.memo((inProps) => {
     const lastPageButtonProps = mergeProps(
         {
             type: 'button',
-            className,
+            className: cx('lastPageButton', { disabled: props.disabled }),
             onClick: props.onClick,
             disabled: props.disabled,
             'aria-label': ariaLabel('lastPageLabel')
diff --git a/components/lib/paginator/NextPageLink.js b/components/lib/paginator/NextPageLink.js
index 47ada9c994..f19ef6592d 100644
--- a/components/lib/paginator/NextPageLink.js
+++ b/components/lib/paginator/NextPageLink.js
@@ -9,9 +9,10 @@ import { PrimeReactContext } from '../api/Api';
 export const NextPageLink = React.memo((inProps) => {
     const context = React.useContext(PrimeReactContext);
     const props = NextPageLinkBase.getProps(inProps, context);
+    const { ptm, cx } = props;
 
     const getPTOptions = (key) => {
-        return props.ptm(key, {
+        return ptm(key, {
             context: {
                 disabled: props.disabled
             }
@@ -23,7 +24,7 @@ export const NextPageLink = React.memo((inProps) => {
     const iconClassName = 'p-paginator-icon';
     const nextPageIconProps = mergeProps(
         {
-            className: iconClassName
+            className: cx('nextPageIcon')
         },
         getPTOptions('nextPageIcon')
     );
@@ -33,7 +34,7 @@ export const NextPageLink = React.memo((inProps) => {
     const nextPageButtonProps = mergeProps(
         {
             type: 'button',
-            className,
+            className: cx('nextPageButton', { disabled: props.disabled }),
             onClick: props.onClick,
             disabled: props.disabled,
             'aria-label': ariaLabel('nextPageLabel')
diff --git a/components/lib/paginator/PageLinks.js b/components/lib/paginator/PageLinks.js
index 50d16d37b7..dcf5ef3bba 100644
--- a/components/lib/paginator/PageLinks.js
+++ b/components/lib/paginator/PageLinks.js
@@ -7,9 +7,10 @@ import { PageLinksBase } from './PaginatorBase';
 export const PageLinks = React.memo((inProps) => {
     const context = React.useContext(PrimeReactContext);
     const props = PageLinksBase.getProps(inProps, context);
+    const { ptm, cx } = props;
 
     const getPTOptions = (pageLink, key) => {
-        return props.ptm(key, {
+        return ptm(key, {
             context: {
                 active: pageLink - 1 === props.page
             }
@@ -44,7 +45,7 @@ export const PageLinks = React.memo((inProps) => {
                 {
                     type: 'button',
                     onClick: (e) => onPageLinkClick(e, pageLink),
-                    className,
+                    className: cx('pageButton', { pageLink, startPageInView, endPageInView, page: props.page }),
                     disabled: props.disabled,
                     'aria-label': ariaLabel('pageLabel', { page: pageLink })
                 },
@@ -82,9 +83,9 @@ export const PageLinks = React.memo((inProps) => {
 
     const pagesProps = mergeProps(
         {
-            className: 'p-paginator-pages'
+            className: cx('pages')
         },
-        props.ptm('pages')
+        ptm('pages')
     );
 
     return <span {...pagesProps}>{elements}</span>;
diff --git a/components/lib/paginator/Paginator.css b/components/lib/paginator/Paginator.css
deleted file mode 100644
index f0b7df37e1..0000000000
--- a/components/lib/paginator/Paginator.css
+++ /dev/null
@@ -1,35 +0,0 @@
-.p-paginator {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: wrap;
-}
-
-.p-paginator-left-content {
-	margin-right: auto;
-}
-
-.p-paginator-right-content {
-	margin-left: auto;
-}
-
-.p-paginator-page,
-.p-paginator-next,
-.p-paginator-last,
-.p-paginator-first,
-.p-paginator-prev,
-.p-paginator-current {
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    line-height: 1;
-    user-select: none;
-    overflow: hidden;
-    position: relative;
-}
-
-.p-paginator-element:focus {
-    z-index: 1;
-    position: relative;
-}
diff --git a/components/lib/paginator/Paginator.js b/components/lib/paginator/Paginator.js
index c8f5cac59b..4e78a2bafe 100644
--- a/components/lib/paginator/Paginator.js
+++ b/components/lib/paginator/Paginator.js
@@ -11,15 +11,17 @@ import { PaginatorBase } from './PaginatorBase';
 import { PrevPageLink } from './PrevPageLink';
 import { RowsPerPageDropdown } from './RowsPerPageDropdown';
 import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 
 export const Paginator = React.memo(
     React.forwardRef((inProps, ref) => {
         const context = React.useContext(PrimeReactContext);
         const props = PaginatorBase.getProps(inProps, context);
-        const { ptm } = PaginatorBase.setMetaData({
+        const { ptm, cx, isUnstyled } = PaginatorBase.setMetaData({
             props
         });
 
+        useHandleStyle(PaginatorBase.css.styles, isUnstyled, { name: 'paginator' });
         const elementRef = React.useRef(null);
         const page = Math.floor(props.first / props.rows);
         const pageCount = Math.ceil(props.totalRecords / props.rows);
@@ -120,23 +122,23 @@ export const Paginator = React.memo(
 
             switch (key) {
                 case 'FirstPageLink':
-                    element = <FirstPageLink key={key} onClick={changePageToFirst} disabled={isFirstPage || isEmpty} template={template} firstPageLinkIcon={props.firstPageLinkIcon} ptm={ptm} />;
+                    element = <FirstPageLink key={key} onClick={changePageToFirst} disabled={isFirstPage || isEmpty} template={template} firstPageLinkIcon={props.firstPageLinkIcon} ptm={ptm} cx={cx} />;
                     break;
 
                 case 'PrevPageLink':
-                    element = <PrevPageLink key={key} onClick={changePageToPrev} disabled={isFirstPage || isEmpty} template={template} prevPageLinkIcon={props.prevPageLinkIcon} ptm={ptm} />;
+                    element = <PrevPageLink key={key} onClick={changePageToPrev} disabled={isFirstPage || isEmpty} template={template} prevPageLinkIcon={props.prevPageLinkIcon} ptm={ptm} cx={cx} />;
                     break;
 
                 case 'NextPageLink':
-                    element = <NextPageLink key={key} onClick={changePageToNext} disabled={isLastPage || isEmpty} template={template} nextPageLinkIcon={props.nextPageLinkIcon} ptm={ptm} />;
+                    element = <NextPageLink key={key} onClick={changePageToNext} disabled={isLastPage || isEmpty} template={template} nextPageLinkIcon={props.nextPageLinkIcon} ptm={ptm} cx={cx} />;
                     break;
 
                 case 'LastPageLink':
-                    element = <LastPageLink key={key} onClick={changePageToLast} disabled={isLastPage || isEmpty} template={template} lastPageLinkIcon={props.lastPageLinkIcon} ptm={ptm} />;
+                    element = <LastPageLink key={key} onClick={changePageToLast} disabled={isLastPage || isEmpty} template={template} lastPageLinkIcon={props.lastPageLinkIcon} ptm={ptm} cx={cx} />;
                     break;
 
                 case 'PageLinks':
-                    element = <PageLinks key={key} value={updatePageLinks()} page={page} rows={props.rows} pageCount={pageCount} onClick={onPageLinkClick} template={template} ptm={ptm} />;
+                    element = <PageLinks key={key} value={updatePageLinks()} page={page} rows={props.rows} pageCount={pageCount} onClick={onPageLinkClick} template={template} ptm={ptm} cx={cx} />;
                     break;
 
                 case 'RowsPerPageDropdown':
@@ -152,7 +154,9 @@ export const Paginator = React.memo(
                             appendTo={props.dropdownAppendTo}
                             template={template}
                             disabled={isEmpty}
+                            unstyled={props.unstyled}
                             ptm={ptm}
+                            cx={cx}
                         />
                     );
                     break;
@@ -199,21 +203,20 @@ export const Paginator = React.memo(
         if (!props.alwaysShow && pageCount <= 1) {
             return null;
         } else {
-            const className = classNames('p-paginator p-component', props.className);
             const leftContent = ObjectUtils.getJSXElement(props.leftContent, props);
             const rightContent = ObjectUtils.getJSXElement(props.rightContent, props);
 
             const elements = createElements();
             const leftProps = mergeProps(
                 {
-                    className: 'p-paginator-left-content'
+                    className: cx('left')
                 },
                 ptm('left')
             );
             const leftElement = leftContent && <div {...leftProps}>{leftContent}</div>;
             const endProps = mergeProps(
                 {
-                    className: 'p-paginator-right-content'
+                    className: cx('end')
                 },
                 ptm('end')
             );
@@ -221,7 +224,7 @@ export const Paginator = React.memo(
             const rootProps = mergeProps(
                 {
                     ref: elementRef,
-                    className,
+                    className: classNames(props.className, cx('root')),
                     style: props.style
                 },
                 PaginatorBase.getOtherProps(props),
diff --git a/components/lib/paginator/PaginatorBase.js b/components/lib/paginator/PaginatorBase.js
index f0d4e24583..940df037f8 100644
--- a/components/lib/paginator/PaginatorBase.js
+++ b/components/lib/paginator/PaginatorBase.js
@@ -1,4 +1,64 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: 'p-paginator p-component',
+    left: 'p-paginator-left-content',
+    end: 'p-paginator-right-content',
+    firstPageIcon: 'p-paginator-icon',
+    firstPageButton: ({ disabled }) => classNames('p-paginator-first p-paginator-element p-link', { 'p-disabled': disabled }),
+    prevPageIcon: 'p-paginator-icon',
+    prevPageButton: ({ disabled }) => classNames('p-paginator-prev p-paginator-element p-link', { 'p-disabled': disabled }),
+    nextPageIcon: 'p-paginator-icon',
+    nextPageButton: ({ disabled }) => classNames('p-paginator-next p-paginator-element p-link', { 'p-disabled': disabled }),
+    lastPageIcon: 'p-paginator-icon',
+    lastPageButton: ({ disabled }) => classNames('p-paginator-last p-paginator-element p-link', { 'p-disabled': disabled }),
+    pageButton: ({ pageLink, startPageInView, endPageInView, page }) =>
+        classNames('p-paginator-page p-paginator-element p-link', {
+            'p-paginator-page-start': pageLink === startPageInView,
+            'p-paginator-page-end': pageLink === endPageInView,
+            'p-highlight': pageLink - 1 === page
+        }),
+    pages: 'p-paginator-pages'
+};
+
+const styles = `
+.p-paginator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.p-paginator-left-content {
+	margin-right: auto;
+}
+
+.p-paginator-right-content {
+	margin-left: auto;
+}
+
+.p-paginator-page,
+.p-paginator-next,
+.p-paginator-last,
+.p-paginator-first,
+.p-paginator-prev,
+.p-paginator-current {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    user-select: none;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-paginator-element:focus {
+    z-index: 1;
+    position: relative;
+}
+`;
 
 export const PaginatorBase = ComponentBase.extend({
     defaultProps: {
@@ -18,6 +78,10 @@ export const PaginatorBase = ComponentBase.extend({
         dropdownAppendTo: null,
         currentPageReportTemplate: '({currentPage} of {totalPages})',
         children: undefined
+    },
+    css: {
+        classes,
+        styles
     }
 });
 
diff --git a/components/lib/paginator/PrevPageLink.js b/components/lib/paginator/PrevPageLink.js
index 999e4854d3..62d9d7cb96 100644
--- a/components/lib/paginator/PrevPageLink.js
+++ b/components/lib/paginator/PrevPageLink.js
@@ -9,9 +9,10 @@ import { PrimeReactContext } from '../api/Api';
 export const PrevPageLink = React.memo((inProps) => {
     const context = React.useContext(PrimeReactContext);
     const props = PrevPageLinkBase.getProps(inProps, context);
+    const { ptm, cx } = props;
 
     const getPTOptions = (key) => {
-        return props.ptm(key, {
+        return ptm(key, {
             context: {
                 disabled: props.disabled
             }
@@ -19,11 +20,10 @@ export const PrevPageLink = React.memo((inProps) => {
     };
 
     const className = classNames('p-paginator-prev p-paginator-element p-link', { 'p-disabled': props.disabled });
-
     const iconClassName = 'p-paginator-icon';
     const prevPageIconProps = mergeProps(
         {
-            className: iconClassName
+            className: cx('prevPageIcon')
         },
         getPTOptions('prevPageIcon')
     );
@@ -33,7 +33,7 @@ export const PrevPageLink = React.memo((inProps) => {
     const prevPageButtonProps = mergeProps(
         {
             type: 'button',
-            className,
+            className: cx('prevPageButton', { disabled: props.disabled }),
             onClick: props.onClick,
             disabled: props.disabled,
             'aria-label': ariaLabel('previousPageLabel')
diff --git a/components/lib/paginator/RowsPerPageDropdown.js b/components/lib/paginator/RowsPerPageDropdown.js
index 60828225c7..5a52bc3e06 100644
--- a/components/lib/paginator/RowsPerPageDropdown.js
+++ b/components/lib/paginator/RowsPerPageDropdown.js
@@ -12,7 +12,9 @@ export const RowsPerPageDropdown = React.memo((inProps) => {
     const hasOptions = props.options && props.options.length > 0;
     const options = hasOptions ? props.options.map((opt) => ({ label: String(opt), value: opt })) : [];
     const ariaLabel = localeOption('choose');
-    const element = hasOptions ? <Dropdown value={props.value} options={options} onChange={props.onChange} appendTo={props.appendTo} disabled={props.disabled} placeholder={ariaLabel} aria-label={ariaLabel} pt={props.ptm('RPPDropdown')} /> : null;
+    const element = hasOptions ? (
+        <Dropdown value={props.value} options={options} onChange={props.onChange} appendTo={props.appendTo} disabled={props.disabled} placeholder={ariaLabel} aria-label={ariaLabel} pt={props.ptm('RPPDropdown')} unstyled={props.unstyled} />
+    ) : null;
 
     if (props.template) {
         const defaultOptions = {
diff --git a/components/lib/paginator/paginator.d.ts b/components/lib/paginator/paginator.d.ts
index b069cfc7cf..437deaafaf 100644
--- a/components/lib/paginator/paginator.d.ts
+++ b/components/lib/paginator/paginator.d.ts
@@ -613,6 +613,11 @@ export interface PaginatorProps extends Omit<React.DetailedHTMLProps<React.HTMLA
      * @type {PaginatorPassThroughOptions}
      */
     pt?: PaginatorPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**
diff --git a/styles/primereact.css b/styles/primereact.css
index e4c34ceb71..9ab99db723 100644
--- a/styles/primereact.css
+++ b/styles/primereact.css
@@ -6,7 +6,6 @@
 @import "../components/lib/messages/Messages.css";
 @import "../components/lib/orderlist/OrderList.css";
 @import "../components/lib/organizationchart/OrganizationChart.css";
-@import "../components/lib/paginator/Paginator.css";
 @import "../components/lib/picklist/PickList.css";
 @import "../components/lib/tooltip/Tooltip.css";
 @import "../components/lib/treetable/TreeTable.css";