File Manager

✏️ Edit File: /home/coemyoza/public_html/wp-content/plugins/give/src/Views/Components/ListTable/Pagination.tsx

import PropTypes from 'prop-types';
import {useState, useEffect} from 'react';
import styles from './Pagination.module.scss';
import cx from 'classnames';
import {__, sprintf} from '@wordpress/i18n';

const Pagination = ({currentPage, totalPages, totalItems = -1, disabled, setPage, singleName, pluralName}) => {
    const [pageInput, setPageInput] = useState(1);

useEffect(() => {
        setPageInput(currentPage);
    }, [currentPage]);

const nextPage = parseInt(currentPage) + 1;
    const previousPage = parseInt(currentPage) - 1;

return (
        <nav aria-label={sprintf(__('%s table', 'give'), pluralName)} className={styles.container}>
            {totalItems >= 1 &&
                <span>
                    {totalItems.toString() + " "}{totalItems == 1 ?  singleName : pluralName}
                </span>
            }
            {1 < totalPages &&
                <>
                    <button
                        className={cx(styles.navDirection, styles.navElement)}
                        aria-disabled={previousPage <= 1}
                        aria-label={(__('first page'))}
                        onClick={(e) => {
                            if (e.currentTarget.getAttribute('aria-disabled') === 'false') {
                                setPage(1);
                            }
                        }}
                    >
                        <span aria-hidden={true}>«</span>
                    </button>
                    <button
                        className={cx(styles.navDirection, styles.navElement)}
                        aria-disabled={previousPage <= 0}
                        aria-label={(__('previous page'))}
                        onClick={(e) => {
                            if (e.currentTarget.getAttribute('aria-disabled') === 'false') {
                                setPage(parseInt(currentPage) - 1);
                            }
                        }}
                    >
                        <span aria-hidden={true}>‹</span>
                    </button>
                    <span>
                        <label htmlFor={styles.currentPage} className={styles.visuallyHidden}>
                            {__('Current Page', 'give')}
                        </label>
                        <input className={styles.navElement} id={styles.currentPage} name={'currentPageSelector'}
                               type="number" min={1} max={totalPages} value={pageInput}
                               onChange={(e) => {
                                   const cleanValue = parseInt(e.target.value.replace(/[^0-9]/, ''));
                                   const page = Number(cleanValue);
                                   setPageInput(cleanValue);
                                   if (totalPages >= page && page > 0) {
                                       setPage(page);
                                   }
                               }}
                        />
                        <span>
                            {' '}
                            {__('of', 'give')} <span>{totalPages}</span>{' '}
                        </span>
                    </span>
                    <button
                        className={cx(styles.navDirection, styles.navElement)}
                        aria-disabled={nextPage > totalPages}
                        aria-label={(__('next page'))}
                        onClick={(e) => {
                            if (e.currentTarget.getAttribute('aria-disabled') === 'false') {
                                setPage(parseInt(currentPage) + 1);
                            }
                        }}
                    >
                        <span aria-hidden={true}>›</span>
                    </button>
                    <button
                        className={cx(styles.navDirection, styles.navElement)}
                        aria-disabled={nextPage > totalPages - 1}
                        aria-label={(__('final page'))}
                        onClick={(e) => {
                            if (e.currentTarget.getAttribute('aria-disabled') === 'false') {
                                setPage(totalPages);
                            }
                        }}
                    >
                        <span aria-hidden={true}>»</span>
                    </button>
                </>
            }
        </nav>
    );
};

Pagination.propTypes = {
    // Current page
    currentPage: PropTypes.number.isRequired,
    // Total number of pages
    totalPages: PropTypes.number.isRequired,
    // Total number of items
    totalItems: PropTypes.number,
    // Function to set the next/previous page
    setPage: PropTypes.func.isRequired,
    // Is pagination disabled
    disabled: PropTypes.bool.isRequired,
};

Pagination.defaultProps = {
    currentPage: 1,
    totalPages: 0,
    setPage: () => {},
    disabled: false,
};

export default Pagination;

Batal

⬅ Naik ke Components 30 item

Nama	Tipe	Ukuran	Diubah	Aksi
📁hooks	dir	—	2022-11-29 18:00	📂 Buka
📁images	dir	—	2022-11-29 18:00	📂 Buka
📄BulkActionCheckbox.tsx	tsx	2.5 KB	2022-11-29 18:00	✏️ Edit 👁️ View
📄BulkActionSelect.module.scss	scss	172 B	2022-11-29 18:00	✏️ Edit 👁️ View
📄BulkActionSelect.tsx	tsx	1.3 KB	2022-11-29 18:00	✏️ Edit 👁️ View
📄Filters.tsx	tsx	2.9 KB	2022-11-29 18:00	✏️ Edit 👁️ View
📄FormSelect.module.scss	scss	1.1 KB	2022-11-29 18:00	✏️ Edit 👁️ View
📄FormSelect.tsx	tsx	1.4 KB	2022-11-29 18:00	✏️ Edit 👁️ View
📄Input.module.scss	scss	208 B	2022-11-29 18:00	✏️ Edit 👁️ View
📄Input.tsx	tsx	254 B	2022-11-29 18:00	✏️ Edit 👁️ View
📄ListTable.module.scss	scss	2.7 KB	2022-11-29 18:00	✏️ Edit 👁️ View
📄ListTable.tsx	tsx	10.4 KB	2022-11-29 18:00	✏️ Edit 👁️ View
📄ListTablePage.module.scss	scss	5.2 KB	2022-11-29 18:00	✏️ Edit 👁️ View
📄ListTableRows.module.scss	scss	2.3 KB	2022-11-29 18:00	✏️ Edit 👁️ View
📄ListTableRows.tsx	tsx	5.1 KB	2022-11-29 18:00	✏️ Edit 👁️ View
📄Pagination.module.scss	scss	1.8 KB	2022-11-29 18:00	✏️ Edit 👁️ View
📄Pagination.tsx	tsx	4.8 KB	2022-11-29 18:00	✏️ Edit 👁️ View
📝README.MD	md	12 KB	2022-11-29 18:00	✏️ Edit 👁️ View
📄RowAction.module.scss	scss	310 B	2022-11-29 18:00	✏️ Edit 👁️ View
📄RowAction.tsx	tsx	1015 B	2022-11-29 18:00	✏️ Edit 👁️ View
📄Select.module.scss	scss	722 B	2022-11-29 18:00	✏️ Edit 👁️ View
📄Select.tsx	tsx	308 B	2022-11-29 18:00	✏️ Edit 👁️ View
📄TableCell.module.scss	scss	1.3 KB	2022-11-29 18:00	✏️ Edit 👁️ View
📄TableCell.tsx	tsx	840 B	2022-11-29 18:00	✏️ Edit 👁️ View
📄TestLabel.module.scss	scss	304 B	2022-11-29 18:00	✏️ Edit 👁️ View
📄TestLabel.tsx	tsx	395 B	2022-11-29 18:00	✏️ Edit 👁️ View
📄TypeBadge.module.scss	scss	1.7 KB	2022-11-29 18:00	✏️ Edit 👁️ View
📄TypeBadge.tsx	tsx	2.9 KB	2022-11-29 18:00	✏️ Edit 👁️ View
📄api.ts	ts	2.2 KB	2022-11-29 18:00	✏️ Edit 👁️ View
📄index.tsx	tsx	8.4 KB	2022-11-29 18:00	✏️ Edit 👁️ View