Skip to content

Commit

Permalink
Related #4602 - For Paginator
Browse files Browse the repository at this point in the history
  • Loading branch information
@ulasturann
ulasturann committed Aug 2, 2023
1 parent 102f1ea commit eba3ddc
Show file tree
Hide file tree
Showing 12 changed files with 108 additions and 70 deletions.
8 changes: 2 additions & 6 deletions components/lib/dropdown/Dropdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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')
);
Expand Down
7 changes: 4 additions & 3 deletions components/lib/paginator/FirstPageLink.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand All @@ -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')
);
Expand All @@ -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')
Expand Down
7 changes: 4 additions & 3 deletions components/lib/paginator/LastPageLink.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand All @@ -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')
);
Expand All @@ -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')
Expand Down
7 changes: 4 additions & 3 deletions components/lib/paginator/NextPageLink.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand All @@ -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')
);
Expand All @@ -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')
Expand Down
9 changes: 5 additions & 4 deletions components/lib/paginator/PageLinks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand Down Expand Up @@ -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 })
},
Expand Down Expand Up @@ -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>;
Expand Down
35 changes: 0 additions & 35 deletions components/lib/paginator/Paginator.css
View file

This file was deleted.

23 changes: 13 additions & 10 deletions components/lib/paginator/Paginator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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':
Expand All @@ -152,7 +154,9 @@ export const Paginator = React.memo(
appendTo={props.dropdownAppendTo}
template={template}
disabled={isEmpty}
unstyled={props.unstyled}
ptm={ptm}
cx={cx}
/>
);
break;
Expand Down Expand Up @@ -199,29 +203,28 @@ 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')
);
const rightElement = rightContent && <div {...endProps}>{rightContent}</div>;
const rootProps = mergeProps(
{
ref: elementRef,
className,
className: classNames(props.className, cx('root')),
style: props.style
},
PaginatorBase.getOtherProps(props),
Expand Down
64 changes: 64 additions & 0 deletions components/lib/paginator/PaginatorBase.js
View file
Original file line number Diff line number Diff line change
@@ -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: {
Expand All @@ -18,6 +78,10 @@ export const PaginatorBase = ComponentBase.extend({
dropdownAppendTo: null,
currentPageReportTemplate: '({currentPage} of {totalPages})',
children: undefined
},
css: {
classes,
styles
}
});

Expand Down
8 changes: 4 additions & 4 deletions components/lib/paginator/PrevPageLink.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,21 +9,21 @@ 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
}
});
};

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')
);
Expand All @@ -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')
Expand Down
4 changes: 3 additions & 1 deletion components/lib/paginator/RowsPerPageDropdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
Loading

0 comments on commit eba3ddc

Please sign in to comment.