github.com/argoproj/argo-cd@v1.8.7/ui/src/app/shared/components/paginate/paginate.tsx (about)

     1  import {DataLoader, DropDownMenu} from 'argo-ui';
     2  
     3  import * as React from 'react';
     4  import ReactPaginate from 'react-paginate';
     5  import {services} from '../../services';
     6  
     7  require('./paginate.scss');
     8  
     9  export interface PaginateProps<T> {
    10      page: number;
    11      onPageChange: (page: number) => any;
    12      children: (data: T[]) => React.ReactNode;
    13      data: T[];
    14      emptyState?: () => React.ReactNode;
    15      preferencesKey?: string;
    16  }
    17  
    18  export function Paginate<T>({page, onPageChange, children, data, emptyState, preferencesKey}: PaginateProps<T>) {
    19      return (
    20          <DataLoader load={() => services.viewPreferences.getPreferences()}>
    21              {pref => {
    22                  preferencesKey = preferencesKey || 'default';
    23                  const pageSize = pref.pageSizes[preferencesKey] || 10;
    24                  const pageCount = pageSize === -1 ? 1 : Math.ceil(data.length / pageSize);
    25                  if (pageCount <= page) {
    26                      page = pageCount - 1;
    27                  }
    28  
    29                  function paginator() {
    30                      return (
    31                          <React.Fragment>
    32                              {pageCount > 1 && (
    33                                  <ReactPaginate
    34                                      containerClassName='paginate__paginator'
    35                                      forcePage={page}
    36                                      pageCount={pageCount}
    37                                      pageRangeDisplayed={5}
    38                                      marginPagesDisplayed={2}
    39                                      onPageChange={item => onPageChange(item.selected)}
    40                                  />
    41                              )}
    42                              <div className='paginate__size-menu'>
    43                                  <DropDownMenu
    44                                      anchor={() => (
    45                                          <a>
    46                                              Items per page: {pageSize === -1 ? 'all' : pageSize} <i className='fa fa-caret-down' />
    47                                          </a>
    48                                      )}
    49                                      items={[5, 10, 15, 20, -1].map(count => ({
    50                                          title: count === -1 ? 'all' : count.toString(),
    51                                          action: () => {
    52                                              pref.pageSizes[preferencesKey] = count;
    53                                              services.viewPreferences.updatePreferences(pref);
    54                                          }
    55                                      }))}
    56                                  />
    57                              </div>
    58                          </React.Fragment>
    59                      );
    60                  }
    61  
    62                  return (
    63                      <React.Fragment>
    64                          <div className='paginate'>{paginator()}</div>
    65                          {data.length === 0 && emptyState ? emptyState() : children(pageSize === -1 ? data : data.slice(pageSize * page, pageSize * (page + 1)))}
    66                          <div className='paginate'>{pageCount > 1 && paginator()}</div>
    67                      </React.Fragment>
    68                  );
    69              }}
    70          </DataLoader>
    71      );
    72  }