docs/data/material/components/pagination/UsePagination.js - master - githubmirror/material-ui

docs/data/material/components/pagination/UsePagination.js

87 строк2 KB

Silviu Alexandru Avram

[pagination] Manage focus whenever first / last / next / previous buttons become disabled (#48877)

07 авг 2026, 09:30

07 авг 2026, 09:30fc35888

import * as React from 'react';
import usePagination from '@mui/material/usePagination';
import { styled } from '@mui/material/styles';

const count = 10;

const List = styled('ul')({
  listStyle: 'none',
  padding: 0,
  margin: 0,
  display: 'flex',
});

export default function UsePagination() {
  const firstPageRef = React.useRef(null);
  const lastPageRef = React.useRef(null);

  const { items } = usePagination({
    count,
  });

  return (
    <nav>
      <List>
        {items.map(({ page, type, selected, onClick, ...item }, index) => {
          let children = null;

          if (type === 'start-ellipsis' || type === 'end-ellipsis') {
            children = '…';
          } else if (type === 'page') {
            let pageRef;

            if (page === 1) {
              pageRef = firstPageRef;
            } else if (page === count) {
              pageRef = lastPageRef;
            }

            children = (
              <button
                type="button"
                ref={pageRef}
                style={{
                  fontWeight: selected ? 'bold' : undefined,
                }}
                {...item}
                onClick={onClick}
              >
                {page}
              </button>
            );
          } else {
            children = (
              <button
                type="button"
                {...item}
                onClick={(event) => {
                  let focusTarget;

                  if (type === 'previous' && page === 1) {
                    focusTarget = firstPageRef;
                  } else if (type === 'next' && page === count) {
                    focusTarget = lastPageRef;
                  }

                  const shouldMoveFocus =
                    event.currentTarget.ownerDocument.activeElement ===
                    event.currentTarget;

                  onClick(event);

                  if (shouldMoveFocus) {
                    focusTarget?.current?.focus();
                  }
                }}
              >
                {type}
              </button>
            );
          }

          return <li key={index}>{children}</li>;
        })}
      </List>
    </nav>
  );
}