@ntragas/pouncejstest/dist/cjs/components/Table/TableSortableHeaderCell.js

A collection of UI components from Panther labs

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _react = _interopRequireDefault(require("react"));

var _Flex = _interopRequireDefault(require("../Flex"));

var _Box = _interopRequireDefault(require("../Box"));

var _Icon = _interopRequireDefault(require("../Icon"));

var _TableHeaderCell = _interopRequireDefault(require("./TableHeaderCell"));

var sortableHoverStyle = {
  opacity: 0.75,
  svg: {
    opacity: 0.75
  }
};

var TableSortableHeaderCell = /*#__PURE__*/_react.default.forwardRef(function TableSortLabel(_ref, ref) {
  var sortDir = _ref.sortDir,
      children = _ref.children,
      align = _ref.align,
      onClick = _ref.onClick,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["sortDir", "children", "align", "onClick"]);
  var isActive = sortDir !== false;
  var shouldIconBeRightAligned = align !== 'right';
  return /*#__PURE__*/_react.default.createElement(_TableHeaderCell.default, (0, _extends2.default)({
    ref: ref,
    sortDir: sortDir,
    align: align
  }, rest), /*#__PURE__*/_react.default.createElement(_Box.default, {
    display: "inline-flex",
    verticalAlign: "middle",
    cursor: "pointer",
    _hover: !isActive ? sortableHoverStyle : undefined,
    onClick: onClick
  }, /*#__PURE__*/_react.default.createElement(_Flex.default, {
    as: "span",
    inline: true,
    align: "center",
    direction: shouldIconBeRightAligned ? 'row-reverse' : 'row',
    justify: shouldIconBeRightAligned ? 'flex-end' : 'flex-start'
  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
    type: "chevron-down",
    size: "medium",
    transition: "all 0.075s linear",
    transform: "rotate(" + (sortDir === 'ascending' ? 180 : 0) + "deg)",
    opacity: isActive ? 1 : 0,
    "aria-hidden": !isActive,
    mr: shouldIconBeRightAligned ? 0 : 1,
    ml: shouldIconBeRightAligned ? 1 : 0
  }), children)));
});

var _default = /*#__PURE__*/_react.default.memo(TableSortableHeaderCell);

exports.default = _default;