1 | import * as React from 'react';
|
2 | import styles from '@patternfly/react-styles/css/components/OptionsMenu/options-menu';
|
3 | import { css } from '@patternfly/react-styles';
|
4 | import { DropdownItem, DropdownDirection, DropdownWithContext, DropdownContext } from '../Dropdown';
|
5 | import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
|
6 | import { OptionsToggle } from './OptionsToggle';
|
7 | import { ToggleTemplate } from './ToggleTemplate';
|
8 | export class PaginationOptionsMenu extends React.Component {
|
9 | constructor(props) {
|
10 | super(props);
|
11 | this.parentRef = React.createRef();
|
12 | this.onToggle = (isOpen) => {
|
13 | this.setState({ isOpen });
|
14 | };
|
15 | this.onSelect = () => {
|
16 | this.setState((prevState) => ({ isOpen: !prevState.isOpen }));
|
17 | };
|
18 | this.handleNewPerPage = (_evt, newPerPage) => {
|
19 | const { page, onPerPageSelect, itemCount, defaultToFullPage } = this.props;
|
20 | let newPage = page;
|
21 | while (Math.ceil(itemCount / newPerPage) < newPage) {
|
22 | newPage--;
|
23 | }
|
24 | if (defaultToFullPage) {
|
25 | if (itemCount / newPerPage !== newPage) {
|
26 | while (newPage > 1 && itemCount - newPerPage * newPage < 0) {
|
27 | newPage--;
|
28 | }
|
29 | }
|
30 | }
|
31 | const startIdx = (newPage - 1) * newPerPage;
|
32 | const endIdx = newPage * newPerPage;
|
33 | return onPerPageSelect(_evt, newPerPage, newPage, startIdx, endIdx);
|
34 | };
|
35 | this.renderItems = () => {
|
36 | const { perPageOptions, perPage, perPageSuffix } = this.props;
|
37 | return perPageOptions.map(({ value, title }) => (React.createElement(DropdownItem, { key: value, component: "button", "data-action": `per-page-${value}`, className: css(perPage === value && 'pf-m-selected'), onClick: event => this.handleNewPerPage(event, value) },
|
38 | title,
|
39 | ` ${perPageSuffix}`,
|
40 | perPage === value && (React.createElement("div", { className: css(styles.optionsMenuMenuItemIcon) },
|
41 | React.createElement(CheckIcon, null))))));
|
42 | };
|
43 | this.state = {
|
44 | isOpen: false
|
45 | };
|
46 | }
|
47 | render() {
|
48 | const { widgetId, isDisabled, itemsPerPageTitle, dropDirection, optionsToggle, perPageOptions, toggleTemplate, firstIndex, lastIndex, itemCount, itemsTitle, ofWord, perPageComponent } = this.props;
|
49 | const { isOpen } = this.state;
|
50 | return (React.createElement(DropdownContext.Provider, { value: {
|
51 | id: widgetId,
|
52 | onSelect: this.onSelect,
|
53 | toggleIndicatorClass: perPageComponent === 'div' ? styles.optionsMenuToggleButtonIcon : styles.optionsMenuToggleIcon,
|
54 | toggleTextClass: styles.optionsMenuToggleText,
|
55 | menuClass: styles.optionsMenuMenu,
|
56 | itemClass: styles.optionsMenuMenuItem,
|
57 | toggleClass: ' ',
|
58 | baseClass: styles.optionsMenu,
|
59 | disabledClass: styles.modifiers.disabled,
|
60 | menuComponent: 'ul',
|
61 | baseComponent: 'div',
|
62 | ouiaComponentType: PaginationOptionsMenu.displayName
|
63 | } },
|
64 | React.createElement(DropdownWithContext, { direction: dropDirection, isOpen: isOpen, toggle: React.createElement(OptionsToggle, { optionsToggle: optionsToggle, itemsPerPageTitle: itemsPerPageTitle, showToggle: perPageOptions && perPageOptions.length > 0, onToggle: this.onToggle, isOpen: isOpen, widgetId: widgetId, firstIndex: firstIndex, lastIndex: lastIndex, itemCount: itemCount, itemsTitle: itemsTitle, ofWord: ofWord, toggleTemplate: toggleTemplate, parentRef: this.parentRef.current, isDisabled: isDisabled, perPageComponent: perPageComponent }), dropdownItems: this.renderItems(), isPlain: true })));
|
65 | }
|
66 | }
|
67 | PaginationOptionsMenu.displayName = 'PaginationOptionsMenu';
|
68 | PaginationOptionsMenu.defaultProps = {
|
69 | className: '',
|
70 | widgetId: '',
|
71 | isDisabled: false,
|
72 | dropDirection: DropdownDirection.down,
|
73 | perPageOptions: [],
|
74 | itemsPerPageTitle: 'Items per page',
|
75 | perPageSuffix: 'per page',
|
76 | optionsToggle: '',
|
77 | ofWord: 'of',
|
78 | perPage: 0,
|
79 | firstIndex: 0,
|
80 | lastIndex: 0,
|
81 | defaultToFullPage: false,
|
82 | itemsTitle: 'items',
|
83 | toggleTemplate: ToggleTemplate,
|
84 | onPerPageSelect: () => null,
|
85 | perPageComponent: 'div'
|
86 | };
|
87 |
|
\ | No newline at end of file |