@atlaskit/editor-common/dist/esm/table/SortingIcon.js

A package that contains common classes and components for editor and renderer

import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
var _templateObject, _templateObject2;
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { injectIntl } from 'react-intl-next';
import { fg } from '@atlaskit/platform-feature-flags';
import Tooltip from '@atlaskit/tooltip';
import { SortOrder } from '../types';
import { SORTABLE_COLUMN_ICON_CLASSNAME } from './consts';
import { sortingAriaLabelMessages, sortingIconMessages } from './messages';
var annotationRangeFixStyle = css({
  userSelect: 'none'
});
export var StatusClassNames = /*#__PURE__*/function (StatusClassNames) {
  StatusClassNames["ASC"] = "sorting-icon-svg__asc";
  StatusClassNames["DESC"] = "sorting-icon-svg__desc";
  StatusClassNames["NO_ORDER"] = "sorting-icon-svg__no_order";
  StatusClassNames["SORTING_NOT_ALLOWED"] = "sorting-icon-svg__not-allowed";
  return StatusClassNames;
}({});

// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
var buttonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tposition: absolute;\n\tdisplay: flex;\n\theight: 28px;\n\twidth: 28px;\n\tmargin: ", ";\n\tright: 0;\n\ttop: 0;\n\tborder: 2px solid ", ";\n\tborder-radius: ", ";\n\tbackground-color: ", ";\n\tjustify-content: center;\n\talign-items: center;\n\tcursor: pointer;\n\n\t&:hover {\n\t\tbackground-color: ", ";\n\t}\n\n\t&:active {\n\t\tbackground-color: ", ";\n\t}\n\n\t&.", "__not-allowed {\n\t\tcursor: not-allowed;\n\t}\n"])), "var(--ds-space-075, 6px)", "var(--ds-border, #fff)", "var(--ds-border-radius-100, 4px)", "var(--ds-surface-overlay, #FFFFFF)", "var(--ds-surface-overlay-hovered, #F1F2F4)", "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))", SORTABLE_COLUMN_ICON_CLASSNAME);

// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
var iconWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\twidth: 8px;\n\theight: 12px;\n\ttransition: transform 0.3s cubic-bezier(0.15, 1, 0.3, 1);\n\ttransform-origin: 50% 50%;\n\tdisplay: flex;\n\tjustify-content: center;\n\n\t&.", " {\n\t\ttransform: rotate(-180deg);\n\t}\n\n\t&.", "-inactive {\n\t\topacity: 0.7;\n\t}\n"])), StatusClassNames.DESC, SORTABLE_COLUMN_ICON_CLASSNAME);

// The icon is created with CSS due to the following Firefox issue: https://product-fabric.atlassian.net/browse/ED-8001
// The TL;DR is that svg's in tables mess up how HTML is copied in Firefox. Using a styled div instead solves the problem.
// For this reason, svg's should be avoided in tables until this issue is fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=1664350
var iconStyles = css({
  height: '100%',
  width: '2px',
  borderRadius: '50px',
  background: "var(--ds-icon, #42526E)",
  '&::before, &::after': {
    background: "var(--ds-icon, #42526E)",
    content: "''",
    height: '2px',
    width: '6px',
    position: 'absolute',
    borderRadius: '50px'
  },
  '&::before': {
    transform: 'rotate(45deg) translate(3.4px, 8.5px)'
  },
  '&::after': {
    transform: 'rotate(-45deg) translate(-6.3px, 5.7px)'
  }
});
var getIconClassName = function getIconClassName(isSortingAllowed, sortOrdered) {
  var activated = sortOrdered !== SortOrder.NO_ORDER;
  var activeStatusClass = "".concat(SORTABLE_COLUMN_ICON_CLASSNAME, "-").concat(activated ? 'active' : 'inactive');
  if (!isSortingAllowed) {
    return "".concat(StatusClassNames.SORTING_NOT_ALLOWED, " ").concat(activeStatusClass);
  }
  switch (sortOrdered) {
    case SortOrder.ASC:
      return "".concat(StatusClassNames.ASC, " ").concat(activeStatusClass);
    case SortOrder.DESC:
      return "".concat(StatusClassNames.DESC, " ").concat(activeStatusClass);
    default:
      return "".concat(StatusClassNames.NO_ORDER, " ").concat(activeStatusClass);
  }
};
var getTooltipTitle = function getTooltipTitle(intl, isSortingAllowed, sortOrdered) {
  var noOrderLabel = sortingIconMessages.noOrderLabel,
    ascOrderLabel = sortingIconMessages.ascOrderLabel,
    descOrderLabel = sortingIconMessages.descOrderLabel,
    invalidLabel = sortingIconMessages.invalidLabel;
  if (!isSortingAllowed) {
    return intl.formatMessage(invalidLabel);
  }
  switch (sortOrdered) {
    case SortOrder.NO_ORDER:
      return intl.formatMessage(noOrderLabel);
    case SortOrder.ASC:
      return intl.formatMessage(ascOrderLabel);
    case SortOrder.DESC:
      return intl.formatMessage(descOrderLabel);
  }
  return '';
};
var getAriaLabel = function getAriaLabel(intl, isSortingAllowed, sortOrdered) {
  var noOrderLabel = sortingAriaLabelMessages.noOrderLabel,
    ascOrderLabel = sortingAriaLabelMessages.ascOrderLabel,
    descOrderLabel = sortingAriaLabelMessages.descOrderLabel,
    invalidLabel = sortingAriaLabelMessages.invalidLabel,
    defaultLabel = sortingAriaLabelMessages.defaultLabel;
  if (!isSortingAllowed) {
    return intl.formatMessage(invalidLabel);
  }
  switch (sortOrdered) {
    case SortOrder.NO_ORDER:
      return intl.formatMessage(noOrderLabel);
    case SortOrder.ASC:
      return intl.formatMessage(ascOrderLabel);
    case SortOrder.DESC:
      return intl.formatMessage(descOrderLabel);
  }
  return intl.formatMessage(defaultLabel);
};
var SortingIcon = function SortingIcon(_ref) {
  var isSortingAllowed = _ref.isSortingAllowed,
    sortOrdered = _ref.sortOrdered,
    intl = _ref.intl,
    onClick = _ref.onClick,
    onKeyDown = _ref.onKeyDown;
  var buttonClassName = "".concat(SORTABLE_COLUMN_ICON_CLASSNAME, " ").concat(sortOrdered !== SortOrder.NO_ORDER ? 'is-active' : '').concat(isSortingAllowed ? '' : " ".concat(SORTABLE_COLUMN_ICON_CLASSNAME, "__not-allowed "));
  var content = getTooltipTitle(intl, isSortingAllowed, sortOrdered);
  var ariaLabel = getAriaLabel(intl, isSortingAllowed, sortOrdered);
  var handleClick = function handleClick() {
    if (isSortingAllowed) {
      onClick();
    }
  };
  var handleKeyDown = function handleKeyDown(event) {
    if (isSortingAllowed) {
      onKeyDown(event);
    }
  };
  return jsx(Tooltip, {
    delay: 0,
    content: content,
    position: "top"
  }, jsx("div", {
    css: buttonStyles
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    ,
    className: buttonClassName,
    role: "button",
    tabIndex: isSortingAllowed ? 0 : -1,
    "aria-label": ariaLabel,
    "aria-disabled": !isSortingAllowed,
    "aria-hidden": fg('platform_renderer_table_sort_btn_aria_hidden') ? !isSortingAllowed : undefined,
    onClick: handleClick,
    onKeyDown: handleKeyDown
  }, jsx("div", {
    css: iconWrapperStyles
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    ,
    className: getIconClassName(isSortingAllowed, sortOrdered)
  }, jsx("div", {
    css: [iconStyles, fg('platform_editor_allow_annotation_triple_click') && annotationRangeFixStyle]
  }))));
};
export default injectIntl(SortingIcon);