pagination.tsx 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. import {browserHistory, withRouter, WithRouterProps} from 'react-router';
  2. import styled from '@emotion/styled';
  3. import {Query} from 'history';
  4. import Button from 'sentry/components/button';
  5. import ButtonBar from 'sentry/components/buttonBar';
  6. import {IconChevron} from 'sentry/icons';
  7. import {t} from 'sentry/locale';
  8. import space from 'sentry/styles/space';
  9. import parseLinkHeader from 'sentry/utils/parseLinkHeader';
  10. /**
  11. * @param cursor The string cursor value
  12. * @param path The current page pathname
  13. * @param query The current query object
  14. * @param delta The delta in page number change triggered by the
  15. * click. A negative delta would be a "previous" page.
  16. */
  17. export type CursorHandler = (
  18. cursor: string | undefined,
  19. path: string,
  20. query: Query,
  21. delta: number
  22. ) => void;
  23. type Props = WithRouterProps & {
  24. caption?: React.ReactNode;
  25. className?: string;
  26. disabled?: boolean;
  27. onCursor?: CursorHandler;
  28. pageLinks?: string | null;
  29. paginationAnalyticsEvent?: (direction: string) => void;
  30. size?: 'zero' | 'xsmall' | 'small';
  31. to?: string;
  32. };
  33. const defaultOnCursor: CursorHandler = (cursor, path, query, _direction) =>
  34. browserHistory.push({
  35. pathname: path,
  36. query: {...query, cursor},
  37. });
  38. const Pagination = ({
  39. to,
  40. location,
  41. className,
  42. onCursor = defaultOnCursor,
  43. paginationAnalyticsEvent,
  44. pageLinks,
  45. size = 'small',
  46. caption,
  47. disabled = false,
  48. }: Props) => {
  49. if (!pageLinks) {
  50. return null;
  51. }
  52. const path = to ?? location.pathname;
  53. const query = location.query;
  54. const links = parseLinkHeader(pageLinks);
  55. const previousDisabled = disabled || links.previous?.results === false;
  56. const nextDisabled = disabled || links.next?.results === false;
  57. return (
  58. <Wrapper className={className}>
  59. {caption && <PaginationCaption>{caption}</PaginationCaption>}
  60. <ButtonBar merged>
  61. <Button
  62. icon={<IconChevron direction="left" size="sm" />}
  63. aria-label={t('Previous')}
  64. size={size}
  65. disabled={previousDisabled}
  66. onClick={() => {
  67. onCursor?.(links.previous?.cursor, path, query, -1);
  68. paginationAnalyticsEvent?.('Previous');
  69. }}
  70. />
  71. <Button
  72. icon={<IconChevron direction="right" size="sm" />}
  73. aria-label={t('Next')}
  74. size={size}
  75. disabled={nextDisabled}
  76. onClick={() => {
  77. onCursor?.(links.next?.cursor, path, query, 1);
  78. paginationAnalyticsEvent?.('Next');
  79. }}
  80. />
  81. </ButtonBar>
  82. </Wrapper>
  83. );
  84. };
  85. const Wrapper = styled('div')`
  86. display: flex;
  87. align-items: center;
  88. justify-content: flex-end;
  89. margin: ${space(3)} 0 0 0;
  90. `;
  91. const PaginationCaption = styled('span')`
  92. color: ${p => p.theme.subText};
  93. font-size: ${p => p.theme.fontSizeMedium};
  94. margin-right: ${space(2)};
  95. `;
  96. export default withRouter(Pagination);