@ntragas/pouncejstest
Version:
A collection of UI components from Panther labs
50 lines (49 loc) • 1.78 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import React from 'react';
import Flex from '../Flex';
import Box from '../Box';
import Icon from '../Icon';
import TableHeaderCell from './TableHeaderCell';
var sortableHoverStyle = {
opacity: 0.75,
svg: {
opacity: 0.75
}
};
var TableSortableHeaderCell = /*#__PURE__*/React.forwardRef(function TableSortLabel(_ref, ref) {
var sortDir = _ref.sortDir,
children = _ref.children,
align = _ref.align,
onClick = _ref.onClick,
rest = _objectWithoutPropertiesLoose(_ref, ["sortDir", "children", "align", "onClick"]);
var isActive = sortDir !== false;
var shouldIconBeRightAligned = align !== 'right';
return /*#__PURE__*/React.createElement(TableHeaderCell, _extends({
ref: ref,
sortDir: sortDir,
align: align
}, rest), /*#__PURE__*/React.createElement(Box, {
display: "inline-flex",
verticalAlign: "middle",
cursor: "pointer",
_hover: !isActive ? sortableHoverStyle : undefined,
onClick: onClick
}, /*#__PURE__*/React.createElement(Flex, {
as: "span",
inline: true,
align: "center",
direction: shouldIconBeRightAligned ? 'row-reverse' : 'row',
justify: shouldIconBeRightAligned ? 'flex-end' : 'flex-start'
}, /*#__PURE__*/React.createElement(Icon, {
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)));
});
export default /*#__PURE__*/React.memo(TableSortableHeaderCell);