@redux-devtools/rtk-query-monitor/lib/cjs/components/SortOrderButton.js

rtk-query monitor for Redux DevTools

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SortOrderButton = SortOrderButton;
var _react = _interopRequireDefault(require("react"));
var _ArrowUpIcon = require("./ArrowUpIcon");
var _react2 = require("@emotion/react");
function SortOrderButton(_ref) {
  let {
    isAsc,
    onChange,
    id
  } = _ref;
  const handleButtonClick = () => {
    if (!isAsc) {
      onChange(true);
    } else onChange(false);
  };
  const buttonLabel = isAsc ? 'asc' : 'desc';
  const arrowStyles = {
    width: '1em',
    height: '1em',
    transform: !isAsc ? 'scaleY(-1)' : undefined
  };
  return (0, _react2.jsx)("button", {
    type: "button",
    id: id,
    onClick: handleButtonClick,
    "aria-pressed": isAsc,
    css: theme => ({
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      flexFlow: 'row nowrap',
      cursor: 'pointer',
      position: 'relative',
      padding: '0 8px',
      color: theme.TEXT_COLOR,
      borderStyle: 'solid',
      borderWidth: '1px',
      borderRadius: '3px',
      backgroundColor: theme.TAB_BACK_COLOR,
      borderColor: theme.TAB_BORDER_COLOR,
      height: 30,
      fontSize: 12,
      width: 64,
      '&:active': {
        backgroundColor: theme.TAB_BACK_SELECTED_COLOR
      }
    })
  }, (0, _react2.jsx)(_ArrowUpIcon.ArrowUpIcon, {
    style: arrowStyles
  }), buttonLabel);
}