@spaced-out/ui-design-system/lib/components/Pagination/PaginationItem.js.flow

Sense UI components library

// @flow strict

import * as React from 'react';

import classify from '../../utils/classify';
import {Button} from '../Button';
import {ButtonTextSmall} from '../Text';

import type {PaginationItemProps} from './Pagination';

import css from './Pagination.module.css';


export const PaginationButton = (props: PaginationItemProps): React.Node => {
  const {disabled, onClick, page, selected, type} = props;
  const paginationBtnRef = React.useRef(null);

  React.useEffect(() => {
    if (selected) {
      paginationBtnRef.current?.blur();
    }
  }, [selected]);

  switch (type) {
  case 'first':
    return (
      <Button
        classNames={{
          icon: classify(css.icon, {[css.disabled]: disabled}),
          wrapper: classify(css.paginatorButton, {[css.disabled]: disabled}),
        }}
        type={selected ? 'secondary' : 'ghost'}
        size="small"
        onClick={onClick}
        disabled={disabled}
        ref={paginationBtnRef}
        iconLeftName="chevrons-left"
        ariaLabel="First page"
      ></Button>
    );
  case 'previous':
    return (
      <Button
        classNames={{
          icon: classify(css.icon, {[css.disabled]: disabled}),
          wrapper: classify(css.paginatorButton, {[css.disabled]: disabled}),
        }}
        type={selected ? 'secondary' : 'ghost'}
        size="small"
        onClick={onClick}
        disabled={disabled}
        ref={paginationBtnRef}
        iconLeftName="chevron-left"
        ariaLabel="Previous page"
      ></Button>
    );
  case 'page':
    return (
      <Button
        classNames={{
          wrapper: classify(css.paginatorButton, {[css.selected]: selected}),
        }}
        type={selected ? 'secondary' : 'ghost'}
        size="small"
        onClick={onClick}
        disabled={disabled}
        ref={paginationBtnRef}
        tabIndex={selected ? -1 : 0}
      >
        {page}
      </Button>
    );
  case 'start-ellipsis':
  case 'end-ellipsis':
    return (
      <div className={classify(css.separator)}>
        <ButtonTextSmall color="disabled">...</ButtonTextSmall>
      </div>
    );
  case 'next':
    return (
      <Button
        classNames={{
          icon: classify(css.icon, {[css.disabled]: disabled}),
          wrapper: classify(css.paginatorButton, {[css.disabled]: disabled}),
        }}
        type={selected ? 'secondary' : 'ghost'}
        size="small"
        onClick={onClick}
        disabled={disabled}
        ref={paginationBtnRef}
        iconLeftName="chevron-right"
        ariaLabel="Next page"
      ></Button>
    );
  case 'last':
    return (
      <Button
        classNames={{
          icon: classify(css.icon, {[css.disabled]: disabled}),
          wrapper: classify(css.paginatorButton, {[css.disabled]: disabled}),
        }}
        type={selected ? 'secondary' : 'ghost'}
        size="small"
        onClick={onClick}
        disabled={disabled}
        ref={paginationBtnRef}
        iconLeftName="chevrons-right"
        ariaLabel="Last page"
      ></Button>
    );

  default:
    break;
  }
};

export const PaginationItem = (props: PaginationItemProps): React.Node => (
  <PaginationButton {...props} />
);