Pagination: should support disabled prop

[kamilml]

I think a disabled option for Pagination would be very helpful.

Sorry but the request is very simple. No more words :)

[welcome]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[takerukoushirou]

Recently I also needed to disable pagination and the solution I came up with was to explicitly set the disabled prop for all item types. As a side effect, it also adds more flexibility to e.g. disable next/last, if the last page is active, and first/previous, if the first page is active.

// Disable all pagination items on page change.
const paginationProps: PaginationProps = {
    totalPages: totalPages,
    activePage: activePage,
    onPageChange: this.handlePageChange,

    // Each item is based on the default props, in case they may change in the future.
    // defaultProps is not contained in the @types definition, hence the cast to any.
    pageItem: {
        ...(Pagination as any).defaultProps.pageItem,
        disabled: pageChanging,
    },
    nextItem: {
        ...(Pagination as any).defaultProps.nextItem,
        disabled: pageChanging || (activePage >= totalPages),
        icon: true,
        content: <Icon name="angle right" />,
    },
    lastItem: {
        ...(Pagination as any).defaultProps.lastItem,
        disabled: pageChanging || (activePage === totalPages),
        icon: true,
        content: <Icon name="angle double right" />,
    },
    prevItem: {
        ...(Pagination as any).defaultProps.prevItem,
        disabled: pageChanging || (activePage <= 1),
        icon: true,
        content: <Icon name="angle left" />,
    },
    firstItem: {
        ...(Pagination as any).defaultProps.firstItem,
        disabled: pageChanging || (activePage === 1),
        icon: true,
        content: <Icon name="angle double left" />,
    },
    ellipsisItem: {
        icon: true,
        content: <Icon name="ellipsis horizontal" />,
    },
};

To just quickly disable all items though I'm also in favour of having a convenient disabled prop for Pagination itself.

[layershifter]

A very nice feature 👍 We definitely should implement it.