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

rtk-query monitor for Redux DevTools

import React from 'react';
import { ArrowUpIcon } from './ArrowUpIcon';
import { jsx as ___EmotionJSX } from "@emotion/react";
export 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 ___EmotionJSX("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
      }
    })
  }, ___EmotionJSX(ArrowUpIcon, {
    style: arrowStyles
  }), buttonLabel);
}