fannypack-v5/es/Pagination/Pagination.js

An accessible, composable, and friendly React UI Kit

import { useState, useEffect, useCallback, createElement as createElement$1, Fragment } from 'react';
import '../Provider/ThemeContext.js';
import 'classnames';
import 'emotion';
import '@emotion/core';
import 'emotion-theming';
import '@emotion/styled';
import '../utils/useTheme.js';
import { d as _objectWithoutPropertiesLoose, _ as _objectSpread2, c as _extends } from '../chunk-0c448560.js';
import 'lodash/kebabCase';
import 'tinycolor2';
import '../utils/isFunction.js';
import '../utils/get.js';
import '../utils/theme.js';
import '../utils/omit.js';
import '../utils/pick.js';
import '../utils/cssProps.js';
import '../utils/useLocalStorage.js';
import '../Provider/ColorModeContext.js';
import '../utils/useColorMode.js';
import '../utils/useStyle.js';
import '../utils/omitBy.js';
import '../utils/useDefaultProps.js';
import '../utils/useDebounce.js';
import 'lodash/uniq';
import { useClassName } from '../utils/useClassName.js';
import '../utils/useBreakpoint.js';
import '../utils/uniqueId.js';
import '../utils/times.js';
import '../utils/parseIcons.js';
import '../utils/colors.js';
import '../utils/palette.js';
import '../utils/mergeRefs.js';
import 'deepmerge';
import 'lodash/set';
import '../utils/applyTheme.js';
import '../utils/bindFns.js';
import { createComponent } from '../utils/createComponent.js';
import { createElement } from '../utils/createElement.js';
import { createHook } from '../utils/createHook.js';
import '../utils/forwardRefWithUse.js';
import '../utils/fieldAdaptors.js';
import '@emotion/is-prop-valid';
import '../utils/htmlProps.js';
import '../utils/OutsideClickHandler.js';
import '../theme/palette.js';
import { Box } from 'reakit';
import '../Button/styles-7847dc2c.js';
import 'conditional-wrap';
import '../Box/styles-579aeb3a.js';
import { Box as Box$1 } from '../Box/Box.js';
import '../Flex/styles-53e15538.js';
import '../Flex/Flex.js';
import '../Icon/styles-ca55138b.js';
import '../Icon/Icon.js';
import '../Text/styles-00cf45ec.js';
import '../Text/Text.js';
import '../Spinner/styles-d3bec5e2.js';
import '../Spinner/Spinner.js';
import '../Button/Button.js';
import 'reakit/VisuallyHidden';
import '../Button/ButtonClose.js';
import { Button } from '../Button/index.js';
import '../Set/styles-00491b06.js';
import { Set } from '../Set/Set.js';
import '../FieldWrapper/styles-406ca84b.js';
import '../Card/styles-95a1c511.js';
import '../Card/Card.js';
import '../Card/index.js';
import '../Disclosure/styles-05d33dce.js';
import '../Disclosure/DisclosureState.js';
import '../Disclosure/Disclosure.js';
import '../Disclosure/DisclosureContent.js';
import '../Disclosure/index.js';
import '../Label/styles-d69a783d.js';
import '../Label/Label.js';
import '../FieldWrapper/FieldWrapper.js';
import '../Group/styles-8b5ad05e.js';
import '../Group/Group.js';
import { P as Pagination$1, a as PaginationButton, b as PaginationSelect, c as PaginationPrepositionText } from './styles-bffd0f7c.js';
import '../Select/styles-cd97f33e.js';
import '../Select/Select.js';
import { Select } from '../Select/index.js';

var useProps = createHook(function (props, _ref) {
  var themeKey = _ref.themeKey,
      themeKeyOverride = _ref.themeKeyOverride;

  var _currentPage = props.currentPage,
      nextButtonProps = props.nextButtonProps,
      nextText = props.nextText,
      numberOfPages = props.numberOfPages,
      onChangePage = props.onChangePage,
      overrides = props.overrides,
      prepositionText = props.prepositionText,
      previousButtonProps = props.previousButtonProps,
      previousText = props.previousText,
      selectProps = props.selectProps,
      restProps = _objectWithoutPropertiesLoose(props, ["currentPage", "nextButtonProps", "nextText", "numberOfPages", "onChangePage", "overrides", "prepositionText", "previousButtonProps", "previousText", "selectProps"]);

  var setProps = Set.useProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
    overrides: overrides
  }));

  var _React$useState = useState(1),
      currentPage = _React$useState[0],
      setCurrentPage = _React$useState[1];

  useEffect(function () {
    setCurrentPage(_currentPage || 1);
  }, [_currentPage]);
  var className = useClassName({
    style: Pagination$1,
    styleProps: props,
    themeKey: themeKey,
    themeKeyOverride: themeKeyOverride,
    prevClassName: setProps.className
  });
  var buttonClassName = useClassName({
    style: PaginationButton,
    styleProps: props,
    themeKey: themeKey,
    themeKeyOverride: themeKeyOverride,
    themeKeySuffix: 'Button'
  });
  var selectClassName = useClassName({
    style: PaginationSelect,
    styleProps: props,
    themeKey: themeKey,
    themeKeyOverride: themeKeyOverride,
    themeKeySuffix: 'Select'
  });
  var prepositionClassName = useClassName({
    style: PaginationPrepositionText,
    styleProps: props,
    themeKey: themeKey,
    themeKeyOverride: themeKeyOverride,
    themeKeySuffix: 'PrepositionText'
  });
  var handleChangePage = useCallback(function (page) {
    if (onChangePage) {
      onChangePage(page);
    } else {
      setCurrentPage(page);
    }
  }, [onChangePage]);
  var handleChangePageDropdown = useCallback(function (e) {
    var index = parseInt(e.target.value, 10);
    handleChangePage(index + 1);
  }, [handleChangePage]);
  return _objectSpread2(_objectSpread2({}, setProps), {}, {
    className: className,
    children: /*#__PURE__*/createElement$1(Fragment, null, /*#__PURE__*/createElement$1(Button, _extends({
      className: buttonClassName,
      disabled: currentPage === 1,
      onClick: function onClick() {
        return handleChangePage(currentPage - 1);
      },
      iconBefore: "chevron-left",
      variant: "ghost",
      themeKey: themeKey + ".Button",
      overrides: overrides
    }, previousButtonProps), previousText), /*#__PURE__*/createElement$1(Select, _extends({
      className: selectClassName,
      onChange: handleChangePageDropdown,
      options: [].concat(new Array(numberOfPages).keys()).map(function (_, index) {
        return {
          label: "" + (index + 1),
          value: index
        };
      }),
      value: currentPage - 1,
      themeKey: themeKey + ".Select",
      overrides: overrides
    }, selectProps)), /*#__PURE__*/createElement$1(Box$1, {
      className: prepositionClassName
    }, prepositionText, " ", numberOfPages), /*#__PURE__*/createElement$1(Button, _extends({
      className: buttonClassName,
      disabled: currentPage === numberOfPages,
      onClick: function onClick() {
        return handleChangePage(currentPage + 1);
      },
      iconAfter: "chevron-right",
      variant: "ghost",
      themeKey: themeKey + ".Button",
      overrides: overrides
    }, nextButtonProps), nextText))
  });
}, {
  defaultProps: {
    prepositionText: 'of',
    previousText: 'Previous',
    nextText: 'Next'
  },
  themeKey: 'Pagination'
});
var Pagination = createComponent(function (props) {
  var textProps = useProps(props);
  return createElement({
    children: props.children,
    component: Box,
    use: props.use,
    htmlProps: textProps
  });
}, {
  attach: {
    useProps: useProps,
    displayName: 'Pagination'
  },
  themeKey: 'Pagination'
});

export { Pagination };