Skip to content

Commit

Permalink
feat(ods.component.pagination): dynamic size and arrowSize
Browse files Browse the repository at this point in the history 
ref:MANAGER-10956

Signed-off-by: Nicolas BAPTISTA <[email protected]>
  • Loading branch information
@Kranysys
Kranysys committed Mar 16, 2023
1 parent 3dfb40d commit 2c9eab8
Show file tree
Hide file tree
Showing 7 changed files with 90 additions and 10 deletions.
12 changes: 12 additions & 0 deletions packages/libraries/core/src/components/pagination/pagination/ods-pagination-arrow-size.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
export enum OdsPaginationArrowSize {
xxs = 'xxs',
xs = 'xs',
sm = 'sm',
md = 'md',
lg = 'lg',
xl = 'xl',
}

export type OdsPaginationArrowSizeUnion = `${OdsPaginationArrowSize}`;

export const OdsPaginationArrowSizeList = Object.keys(OdsPaginationArrowSize).map(key => OdsPaginationArrowSize[key as OdsPaginationArrowSizeUnion]);
4 changes: 4 additions & 0 deletions packages/libraries/core/src/components/pagination/pagination/ods-pagination-attributes.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { OdsThemeColorIntent } from '@ovhcloud/ods-theming';
import { OdsComponentAttributes } from '../../ods-component-attributes';
import { OdsPaginationSize } from './ods-pagination-size';
import { OdsPaginationArrowSize } from './ods-pagination-arrow-size';

export interface OdsPaginationAttributes extends OdsComponentAttributes {
/**
Expand All @@ -24,6 +25,9 @@ export interface OdsPaginationAttributes extends OdsComponentAttributes {
flex: boolean;
/** size: see component principles */
size: OdsPaginationSize;
/** arrowSize: see component principles */
arrowSize: OdsPaginationArrowSize;

/*
* color of the select input and his icon arrow.
* color is not yet customizable trough his attribute.
Expand Down
7 changes: 4 additions & 3 deletions .../libraries/core/src/components/pagination/pagination/ods-pagination-default-attributes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import { OdsPaginationAttributes } from './ods-pagination-attributes';
import { OdsThemeColorIntent } from '@ovhcloud/ods-theming';
import { OdsPaginationSize } from './ods-pagination-size';
// import { OdsPaginationSize } from './ods-select-size';
import { OdsPaginationArrowSize } from './ods-pagination-arrow-size';

/**
* default attribute values of select
Expand All @@ -12,9 +12,10 @@ export const odsPaginationDefaultAttributesDoc: OdsPaginationAttributes = {

defaultCurrent: 1,
current: 1,
totalPages: 6,
totalPages: 1,
color: OdsThemeColorIntent.primary,
size: OdsPaginationSize.md,
size: OdsPaginationSize.sm,
arrowSize: OdsPaginationArrowSize.sm,
flex: false,
} as const;

Expand Down
5 changes: 5 additions & 0 deletions packages/libraries/core/src/components/pagination/pagination/ods-pagination-size.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
export enum OdsPaginationSize {
xxs = 'xxs',
xs = 'xs',
sm = 'sm',
md = 'md',
lg = 'lg',
xl = 'xl',
}

export type OdsPaginationSizeUnion = `${OdsPaginationSize}`;
Expand Down
1 change: 1 addition & 0 deletions packages/libraries/core/src/components/pagination/pagination/public-api.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export * from './ods-pagination-default-attributes';
export * from './ods-pagination-events';
export * from './ods-pagination-methods';
export * from './ods-pagination-size';
export * from './ods-pagination-arrow-size';
export * from './ods-pagination-validity-state';
export * from './ods-pagination-current-change-event';
export * from './ods-pagination-current-change-event-detail';
59 changes: 52 additions & 7 deletions packages/stencil/components/pagination/src/components/osds-pagination/osds-pagination.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
OdsPaginationEvents,
OdsPaginationMethods,
OdsPaginationSize,
OdsPaginationArrowSize,
OdsPaginationValidityState,
OdsPaginationCurrentChangeEventDetail,
OdsIconSize,
Expand Down Expand Up @@ -59,6 +60,9 @@ export class OsdsPagination implements OdsPagination<OdsStencilMethods<OdsPagina
/** @see OdsPaginationAttributes.size */
@Prop({ reflect: true }) size: OdsPaginationSize = odsPaginationDefaultAttributes.size;

/** @see OdsPaginationAttributes.arrowSize */
@Prop({ reflect: true }) arrowSize: OdsPaginationArrowSize = odsPaginationDefaultAttributes.arrowSize;

/** @see OdsPaginationEvents.odsCurrentChange */
@Event() odsCurrentChange!: EventEmitter<OdsPaginationCurrentChangeEventDetail>;

Expand Down Expand Up @@ -205,7 +209,47 @@ export class OsdsPagination implements OdsPagination<OdsStencilMethods<OdsPagina
}

render() {
const { totalPages, disabled, flex, color } = this;
const { totalPages, disabled, flex, color, size, arrowSize } = this;

let iconArrowSize: OdsIconSize, iconEllipsisSize: OdsIconSize, buttonSize: OdsButtonSize, arrowButtonSize: OdsButtonSize;
switch (arrowSize) {
case OdsPaginationArrowSize.sm:
iconArrowSize = OdsIconSize.sm;
arrowButtonSize = OdsButtonSize.sm;
break;
case OdsPaginationArrowSize.md:
iconArrowSize = OdsIconSize.md;
arrowButtonSize = OdsButtonSize.md;
break;
case OdsPaginationArrowSize.lg:
iconArrowSize = OdsIconSize.lg;
arrowButtonSize = OdsButtonSize.md;
break;
case OdsPaginationArrowSize.xl:
iconArrowSize = OdsIconSize.xl;
arrowButtonSize = OdsButtonSize.md;
break;
default:
iconArrowSize = OdsIconSize.sm;
arrowButtonSize = OdsButtonSize.sm;
break;
}
switch (size) {
case OdsPaginationSize.sm:
buttonSize = OdsButtonSize.sm;
iconEllipsisSize = OdsIconSize.xs;
break;
case OdsPaginationSize.md:
buttonSize = OdsButtonSize.md;
iconEllipsisSize = OdsIconSize.sm;
break;
default:
buttonSize = OdsButtonSize.sm;
iconEllipsisSize = OdsIconSize.xs;
break;
}

console.log('iconArrowSize: ', iconArrowSize, ' iconEllipsisSize: ', iconEllipsisSize, ' buttonSize: ', buttonSize);

let pageList = [];
for (let i = 1; i <= totalPages; i++) {
Expand Down Expand Up @@ -235,7 +279,6 @@ export class OsdsPagination implements OdsPagination<OdsStencilMethods<OdsPagina
}

for (let i = startIndex; i <= endIndex; i++) {
// add "continue" to skip if pageSelected - 2 and pageSelected + 2
if (i == pageSelected - 2 && pageSelected < totalPages - 1 && pageSelected > 4 && pageSelected < totalPages - 2) {
continue;
}
Expand Down Expand Up @@ -276,8 +319,9 @@ export class OsdsPagination implements OdsPagination<OdsStencilMethods<OdsPagina
onClick={() => {
this.setPageIndex(Number(this.pageindex) - 1);
}}
size={arrowButtonSize}
>
<osds-icon size={OdsIconSize.md} name={OdsIconName.CHEVRON_LEFT} color={OdsThemeColorIntent.primary}></osds-icon>
<osds-icon size={iconArrowSize} name={OdsIconName.CHEVRON_LEFT} color={OdsThemeColorIntent.primary}></osds-icon>
</osds-button>
</li>
{pageList.map(page => {
Expand All @@ -286,7 +330,7 @@ export class OsdsPagination implements OdsPagination<OdsStencilMethods<OdsPagina
<span>
{pageList.length > 6 && pageList.length - this.pageindex > 3 && page.id == pageList.length && (
<osds-icon
size={OdsIconSize.xs}
size={iconEllipsisSize}
color={OdsThemeColorIntent.primary}
name={OdsIconName.ELLIPSIS}
style={{ paddingBottom: '10px', cursor: 'not-allowed' }}
Expand All @@ -297,7 +341,7 @@ export class OsdsPagination implements OdsPagination<OdsStencilMethods<OdsPagina
class={this.pageindex == page.id ? 'selectedpage' : ''}
contrasted={this.pageindex == page.id ? false : true}
color={OdsThemeColorIntent.primary}
size={OdsButtonSize.sm}
size={size == OdsPaginationSize.sm ? OdsButtonSize.sm : OdsButtonSize.md}
onClick={() => {
this.setPageIndex(Number(page.id));
}}
Expand All @@ -308,7 +352,7 @@ export class OsdsPagination implements OdsPagination<OdsStencilMethods<OdsPagina
{pageList.length > 6 && this.pageindex > 4 && page.id == 1 && (
<li>
<osds-icon
size={OdsIconSize.xs}
size={iconEllipsisSize}
color={OdsThemeColorIntent.text}
name={OdsIconName.ELLIPSIS}
style={{ paddingBottom: '10px', cursor: 'not-allowed' }}
Expand All @@ -327,8 +371,9 @@ export class OsdsPagination implements OdsPagination<OdsStencilMethods<OdsPagina
onClick={() => {
this.setPageIndex(Number(this.pageindex) + 1);
}}
size={arrowButtonSize}
>
<osds-icon size={OdsIconSize.md} name={OdsIconName.CHEVRON_RIGHT} color={OdsThemeColorIntent.primary}></osds-icon>
<osds-icon size={iconArrowSize} name={OdsIconName.CHEVRON_RIGHT} color={OdsThemeColorIntent.primary}></osds-icon>
</osds-button>
</li>
</ul>
Expand Down
12 changes: 12 additions & 0 deletions packages/stencil/components/pagination/src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,18 @@ <h3>Antepenultimate page and after</h3>
<p id="select4-info" style="font-style: italic;">9 pages to display, current page 5</p>
</div>

<h3>Size MD</h3>
<div style="text-align:center">
<osds-pagination current=5 total-pages=9 size="md" arrow-size="md" id="pagination4"></osds-pagination>
<p id="select4-info" style="font-style: italic;">Size MD</p>
</div>

<h3>arrowSize MD</h3>
<div style="text-align:center">
<osds-pagination current=5 total-pages=9 size="sm" arrow-size="md" id="pagination4"></osds-pagination>
<p id="select4-info" style="font-style: italic;">Size SM</p>
</div>

<h3>flex</h3>
<div style="text-align:center">
<osds-pagination defaultCurrent=1 total-pages=6 id="pagination5" flex></osds-pagination>
Expand Down

0 comments on commit 2c9eab8

Please sign in to comment.