Skip to content
This repository has been archived by the owner on Oct 19, 2021. It is now read-only.

Commit

Permalink
feat(PaginationV2): add experimental Pagination (#1800)
Browse files Browse the repository at this point in the history 
* chore: bump carbon-components version

* feat(PaginationV2): add experimental Pagination

* chore: bump carbon-components version

* fix(Pagination): render page range only when page input is enabled

* refactor(Pagination): remove `isLastPage` prop
  • Loading branch information
@emyarod @asudoh
emyarod authored and asudoh committed Feb 6, 2019
1 parent 0e2f293 commit 4f8a1ed
Show file tree
Hide file tree
Showing 6 changed files with 124 additions and 19 deletions.
Binary file removed .yarn-offline-mirror/carbon-components-9.68.5.tgz
View file
Binary file not shown.
Binary file added .yarn-offline-mirror/carbon-components-9.69.0.tgz
View file
Binary file not shown.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@
"babel-plugin-dev-expression": "^0.2.1",
"babel-plugin-react-docgen": "^2.0.0",
"bowser": "^1.6.1",
"carbon-components": "^9.68.5",
"carbon-components": "^9.69.0",
"carbon-icons": "^7.0.5",
"chalk": "^2.3.0",
"cli-table": "^0.3.0",
Expand Down
5 changes: 4 additions & 1 deletion src/components/Pagination/Pagination-story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,17 @@ import {
} from '@storybook/addon-knobs';
import Pagination from '../Pagination';
import PaginationV2 from '../PaginationV2';
import { componentsX } from '../../internal/FeatureFlags';

const props = () => ({
disabled: boolean('Disable backward/forward buttons (disabled)', false),
page: number('The current page (page)', 1),
totalItems: number('Total number of items (totalItems)', 103),
pagesUnknown: boolean('Total number of items unknown (pagesUnknown)', false),
pageInputDisabled: boolean('Disable page input (pageInputDisabled)', false),
isLastPage: boolean('At the last page (isLastPage)', false),
isLastPage: componentsX
? null
: boolean('At the last page (isLastPage)', false),
backwardText: text(
'The description for the backward icon (backwardText)',
'Backward'
Expand Down
128 changes: 115 additions & 13 deletions src/components/PaginationV2/PaginationV2.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,15 @@ import PropTypes from 'prop-types';
import React, { Component } from 'react';
import classnames from 'classnames';
import { iconChevronLeft, iconChevronRight } from 'carbon-icons';
// TODO: import { CaretRight24, CaretLeft24 } from '@carbon/icons-react';
import CaretRight24 from '@carbon/icons-react/lib/caret--right/24';
import CaretLeft24 from '@carbon/icons-react/lib/caret--left/24';
import { settings } from 'carbon-components';
import Icon from '../Icon';
import Select from '../Select';
import SelectItem from '../SelectItem';
import { equals } from '../../tools/array';
import { componentsX } from '../../internal/FeatureFlags';

const { prefix } = settings;

Expand Down Expand Up @@ -123,6 +127,7 @@ export default class PaginationV2 extends Component {
*/
pagesUnknown: PropTypes.bool,

// TODO: remove when v9 is deprecated
/**
* `true` if the current page should be the last page.
*/
Expand All @@ -140,7 +145,8 @@ export default class PaginationV2 extends Component {
forwardText: 'Forward',
itemsPerPageText: 'Items per page:',
pageNumberText: 'Page Number',
pageRangeText: (current, total) => `${current} of ${total} pages`,
pageRangeText: (current, total) =>
componentsX ? `of ${total} pages` : `${current} of ${total} pages`,
disabled: false,
page: 1,
pagesUnknown: false,
Expand Down Expand Up @@ -246,21 +252,121 @@ export default class PaginationV2 extends Component {
...other
} = this.props;

const statePage = this.state.page;
const statePageSize = this.state.pageSize;
const classNames = classnames(`${prefix}--pagination`, className);
const inputId = id || this.uniqueId;
const { page: statePage, pageSize: statePageSize } = this.state;
const totalPages = Math.max(Math.ceil(totalItems / statePageSize), 1);
const backButtonDisabled = this.props.disabled || statePage === 1;
const backButtonClasses = classnames(
`${prefix}--pagination__button`,
`${prefix}--pagination__button--backward`,
{
[`${prefix}--pagination__button--no-index`]: pageInputDisabled,
[`${prefix}--pagination__button--no-index`]:
pageInputDisabled || backButtonDisabled,
}
);
const forwardButtonDisabled =
this.props.disabled || statePage === totalPages;
const forwardButtonClasses = classnames(
`${prefix}--pagination__button`,
`${prefix}--pagination__button--forward`,
{
[`${prefix}--pagination__button--no-index`]:
pageInputDisabled || forwardButtonDisabled,
}
);
const inputId = id || this.uniqueId;
const totalPages = Math.max(Math.ceil(totalItems / statePageSize), 1);
const selectItems = this.renderSelectItems(totalPages);

return (
const pageRange = (() => {
if (pageInputDisabled) {
return null;
}
return (
<span className={`${prefix}--pagination__text`}>
{pagesUnknown
? pageText(statePage)
: pageRangeText(statePage, totalPages)}
</span>
);
})();
return componentsX ? (
<div className={classNames} {...other}>
<div className={`${prefix}--pagination__left`}>
<label
id={`${prefix}-pagination-select-${inputId}-count-label`}
className={`${prefix}--pagination__text`}
htmlFor={`${prefix}-pagination-select-${inputId}`}>
{itemsPerPageText}
</label>
<Select
id={`${prefix}-pagination-select-${inputId}`}
className={`${prefix}--select__item-count`}
hideLabel
inline
onChange={this.handleSizeChange}
value={statePageSize}>
{pageSizes.map(size => (
<SelectItem key={size} value={size} text={String(size)} />
))}
</Select>
<span className={`${prefix}--pagination__text`}>
{pagesUnknown
? itemText(
statePageSize * (statePage - 1) + 1,
statePage * statePageSize
)
: itemRangeText(
Math.min(statePageSize * (statePage - 1) + 1, totalItems),
Math.min(statePage * statePageSize, totalItems),
totalItems
)}
</span>
</div>
<div className={`${prefix}--pagination__right`}>
{pageInputDisabled ? null : (
<Select
id={`${prefix}-pagination-select-${inputId + 2}`}
className={`${prefix}--select__page-number`}
hideLabel
inline
onChange={this.handlePageInputChange}
value={statePage}>
{selectItems}
</Select>
)}
{pageRange}
<button
className={backButtonClasses}
onClick={this.decrementPage}
aria-label={backwardText}
disabled={backButtonDisabled}>
{componentsX ? (
<CaretLeft24 />
) : (
<Icon
className={`${prefix}--pagination__button-icon`}
icon={iconChevronLeft}
description={backwardText}
/>
)}
</button>
<button
className={forwardButtonClasses}
aria-label={forwardText}
onClick={this.incrementPage}
disabled={forwardButtonDisabled}>
{componentsX ? (
<CaretRight24 />
) : (
<Icon
className={`${prefix}--pagination__button-icon`}
icon={iconChevronRight}
description={forwardText}
/>
)}
</button>
</div>
</div>
) : (
<div className={classNames} {...other}>
<div className={`${prefix}--pagination__left`}>
<span className={`${prefix}--pagination__text`}>
Expand Down Expand Up @@ -294,11 +400,7 @@ export default class PaginationV2 extends Component {
</div>
<div
className={`${prefix}--pagination__right ${prefix}--pagination--inline`}>
<span className={`${prefix}--pagination__text`}>
{pagesUnknown
? pageText(statePage)
: pageRangeText(statePage, totalPages)}
</span>
{pageRange}
<button
className={backButtonClasses}
onClick={this.decrementPage}
Expand Down
8 changes: 4 additions & 4 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3158,10 +3158,10 @@ capture-stack-trace@^1.0.0:
resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz#a6c0bbe1f38f3aa0b92238ecb6ff42c344d4135d"
integrity sha512-mYQLZnx5Qt1JgB1WEiMCf2647plpGeQ2NMR/5L0HNZzGQo4fuSPnK+wjfPnKZV0aiJDgzmWqqkV/g7JD+DW0qw==

carbon-components@^9.68.5:
version "9.68.5"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-9.68.5.tgz#b9a1fc823e969c0a9e737942721becc95ced3a6b"
integrity sha512-+000FPC1L1KqSLZfB/MYT+FTOrfx6tDJtU5fkasKG6chPaWwl/JmJ+H1FAQzdxBWPhi66suHhvYGv4sw23XsFQ==
carbon-components@^9.69.0:
version "9.69.0"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-9.69.0.tgz#7736f7f2e7c2f7d0c3707acf8ac81c03af4681da"
integrity sha512-JWySn/dZgF2jl8l/eRYotRT5tUFJTftfK6OhX7vrqUHUA026+gZunpo0CteD2aHA4jUa1ZqoPpfvAE4pMnTnRQ==
dependencies:
carbon-icons "^7.0.7"
flatpickr "4.5.2"
Expand Down

0 comments on commit 4f8a1ed

Please sign in to comment.