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 ; } 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 {elements}; 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 = ; + element = ; break; case 'PrevPageLink': - element = ; + element = ; break; case 'NextPageLink': - element = ; + element = ; break; case 'LastPageLink': - element = ; + element = ; break; case 'PageLinks': - element = ; + element = ; 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 &&
{leftContent}
; 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 ? : null; + const element = hasOptions ? ( + + ) : 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