@geezee/react-ui/esm/pagination/pagination-quickjumper.js

Modern and minimalist React UI library.

import _JSXStyle from "styled-jsx/style";
import React, { useRef } from 'react';
import Input from '../input';
import useTheme from '../styles/use-theme';
import { usePaginationContext } from './pagination-context';
var defaultProps = {
  size: 'medium'
};

var PaginationNext = function PaginationNext(_ref) {
  var count = _ref.count,
      size = _ref.size,
      labelJumperBefore = _ref.labelJumperBefore,
      labelJumperAfter = _ref.labelJumperAfter;
  var theme = useTheme();
  var inputRef = useRef(null);

  var _usePaginationContext = usePaginationContext(),
      variant = _usePaginationContext.variant,
      updatePage = _usePaginationContext.updatePage,
      simple = _usePaginationContext.simple;

  var keyPress = function keyPress(e) {
    var target = e.target;

    if (e.key == 'Enter') {
      var val = Number(target.value);

      if (val && Number.isInteger(val)) {
        if (val > count) {
          val = count;
        }

        updatePage && updatePage('click', val);
      }

      inputRef.current && (inputRef.current.value = '');
    }
  };

  return /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["2176017126", [theme.palette.cNeutral7, theme.layout.gapHalf, theme.layout.gapHalf]]]) + " " + "pagination-quickjumper"
  }, /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["2176017126", [theme.palette.cNeutral7, theme.layout.gapHalf, theme.layout.gapHalf]]]) + " " + "text before"
  }, labelJumperBefore), /*#__PURE__*/React.createElement(Input, {
    onKeyPress: keyPress,
    variant: variant,
    width: simple ? '4rem' : '4.7143rem',
    size: size,
    ref: inputRef
  }), !simple && /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["2176017126", [theme.palette.cNeutral7, theme.layout.gapHalf, theme.layout.gapHalf]]]) + " " + "text after"
  }, labelJumperAfter), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "2176017126",
    dynamic: [theme.palette.cNeutral7, theme.layout.gapHalf, theme.layout.gapHalf]
  }, ".pagination-quickjumper.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:inherit;}.pagination-quickjumper.__jsx-style-dynamic-selector .text.__jsx-style-dynamic-selector{font-size:inherit;color:".concat(theme.palette.cNeutral7, ";font-weight:500;}.pagination-quickjumper.__jsx-style-dynamic-selector .before.__jsx-style-dynamic-selector{margin-right:").concat(theme.layout.gapHalf, ";}.pagination-quickjumper.__jsx-style-dynamic-selector .after.__jsx-style-dynamic-selector{margin-left:").concat(theme.layout.gapHalf, ";}")));
};

export default PaginationNext;