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

Modern and minimalist React UI library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _JSXStyle from "styled-jsx/style";
import React, { useMemo } from 'react';
import useTheme from '../styles/use-theme';
import { getColors } from './styles';
import { usePaginationContext } from './pagination-context';

var PaginationItem = function PaginationItem(_ref) {
  var active = _ref.active,
      children = _ref.children,
      disabled = _ref.disabled,
      onClick = _ref.onClick,
      props = _objectWithoutProperties(_ref, ["active", "children", "disabled", "onClick"]);

  var theme = useTheme();

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

  var paginationColors = useMemo(function () {
    return getColors(theme.palette, variant, active);
  }, [theme.palette, variant, active]);

  var clickHandler = function clickHandler(event) {
    if (disabled) return;
    onClick && onClick(event);
  };

  return /*#__PURE__*/React.createElement("li", {
    className: _JSXStyle.dynamic([["4160385280", [theme.layout.gapHalf, paginationColors.color, theme.expressiveness.L2, theme.expressiveness.cLineStyle1, paginationColors.borderColor, theme.expressiveness.R1, paginationColors.bgColor, paginationColors.hoverColor, paginationColors.hoverBgColor, theme.expressiveness.L2, theme.expressiveness.cLineStyle1, paginationColors.hoverBorderColor, paginationColors.color, paginationColors.bgColor, theme.expressiveness.L2, theme.expressiveness.cLineStyle1, paginationColors.borderColor, paginationColors.color, paginationColors.bgColor, theme.expressiveness.L2, theme.expressiveness.cLineStyle1, paginationColors.borderColor, paginationColors.color, paginationColors.bgColor, theme.expressiveness.L2, theme.expressiveness.cLineStyle1, paginationColors.borderColor, paginationColors.color, paginationColors.bgColor, theme.expressiveness.L2, theme.expressiveness.cLineStyle1, paginationColors.borderColor]]])
  }, /*#__PURE__*/React.createElement("button", _extends({
    onClick: clickHandler
  }, props, {
    className: _JSXStyle.dynamic([["4160385280", [theme.layout.gapHalf, paginationColors.color, theme.expressiveness.L2, theme.expressiveness.cLineStyle1, paginationColors.borderColor, theme.expressiveness.R1, paginationColors.bgColor, paginationColors.hoverColor, paginationColors.hoverBgColor, theme.expressiveness.L2, theme.expressiveness.cLineStyle1, paginationColors.hoverBorderColor, paginationColors.color, paginationColors.bgColor, theme.expressiveness.L2, theme.expressiveness.cLineStyle1, paginationColors.borderColor, paginationColors.color, paginationColors.bgColor, theme.expressiveness.L2, theme.expressiveness.cLineStyle1, paginationColors.borderColor, paginationColors.color, paginationColors.bgColor, theme.expressiveness.L2, theme.expressiveness.cLineStyle1, paginationColors.borderColor, paginationColors.color, paginationColors.bgColor, theme.expressiveness.L2, theme.expressiveness.cLineStyle1, paginationColors.borderColor]]]) + " " + (props && props.className != null && props.className || "".concat(active ? 'active' : '', " ").concat(disabled ? 'disabled' : ''))
  }), children), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "4160385280",
    dynamic: [theme.layout.gapHalf, paginationColors.color, theme.expressiveness.L2, theme.expressiveness.cLineStyle1, paginationColors.borderColor, theme.expressiveness.R1, paginationColors.bgColor, paginationColors.hoverColor, paginationColors.hoverBgColor, theme.expressiveness.L2, theme.expressiveness.cLineStyle1, paginationColors.hoverBorderColor, paginationColors.color, paginationColors.bgColor, theme.expressiveness.L2, theme.expressiveness.cLineStyle1, paginationColors.borderColor, paginationColors.color, paginationColors.bgColor, theme.expressiveness.L2, theme.expressiveness.cLineStyle1, paginationColors.borderColor, paginationColors.color, paginationColors.bgColor, theme.expressiveness.L2, theme.expressiveness.cLineStyle1, paginationColors.borderColor, paginationColors.color, paginationColors.bgColor, theme.expressiveness.L2, theme.expressiveness.cLineStyle1, paginationColors.borderColor]
  }, "li.__jsx-style-dynamic-selector{margin-right:".concat(theme.layout.gapHalf, ";margin-bottom:initial;display:inline-block;}button.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;box-sizing:border-box;text-transform:capitalize;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;text-align:center;vertical-align:middle;box-shadow:none;outline:none;height:var(--pagination-size);min-width:var(--pagination-size);font-size:inherit;cursor:pointer;color:").concat(paginationColors.color, ";border:").concat(theme.expressiveness.L2, " ").concat(theme.expressiveness.cLineStyle1, " ").concat(paginationColors.borderColor, ";border-radius:").concat(theme.expressiveness.R1, ";background-color:").concat(paginationColors.bgColor, ";-webkit-transition:all linear 200ms 0ms;transition:all linear 200ms 0ms;font-weight:500;}button.__jsx-style-dynamic-selector:hover{color:").concat(paginationColors.hoverColor, ";background-color:").concat(paginationColors.hoverBgColor, ";border:").concat(theme.expressiveness.L2, " ").concat(theme.expressiveness.cLineStyle1, " ").concat(paginationColors.hoverBorderColor, ";}.active.__jsx-style-dynamic-selector{font-weight:bold;color:").concat(paginationColors.color, ";background-color:").concat(paginationColors.bgColor, ";border:").concat(theme.expressiveness.L2, " ").concat(theme.expressiveness.cLineStyle1, " ").concat(paginationColors.borderColor, ";}.active.__jsx-style-dynamic-selector:hover{color:").concat(paginationColors.color, ";background-color:").concat(paginationColors.bgColor, ";border:").concat(theme.expressiveness.L2, " ").concat(theme.expressiveness.cLineStyle1, " ").concat(paginationColors.borderColor, ";}.disabled.__jsx-style-dynamic-selector{color:").concat(paginationColors.color, ";background-color:").concat(paginationColors.bgColor, ";border:").concat(theme.expressiveness.L2, " ").concat(theme.expressiveness.cLineStyle1, " ").concat(paginationColors.borderColor, ";cursor:not-allowed;}.disabled.__jsx-style-dynamic-selector:hover{color:").concat(paginationColors.color, ";background-color:").concat(paginationColors.bgColor, ";border:").concat(theme.expressiveness.L2, " ").concat(theme.expressiveness.cLineStyle1, " ").concat(paginationColors.borderColor, ";}button.__jsx-style-dynamic-selector svg{width:1.3em;height:1.3em;}")));
};

export default PaginationItem;