@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
155 lines (152 loc) • 7.81 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.StatusClassNames = void 0;
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _react = require("@emotion/react");
var _reactIntl = require("react-intl");
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
var _types = require("../types");
var _consts = require("./consts");
var _messages = require("./messages");
var _templateObject, _templateObject2;
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
var StatusClassNames = exports.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 = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tposition: absolute;\n\tdisplay: flex;\n\theight: 28px;\n\twidth: 28px;\n\tmargin: ", ";\n\tright: 0;\n\ttop: 0;\n\tborder: ", " 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-width-selected, 2px)", "var(--ds-border, #0B120E24)", "var(--ds-radius-small, 4px)", "var(--ds-surface-overlay, #FFFFFF)", "var(--ds-surface-overlay-hovered, #F0F1F2)", "var(--ds-surface-overlay-pressed, #DDDEE1)", _consts.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 = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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, _consts.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 = (0, _react.css)({
height: '100%',
width: '2px',
borderRadius: "var(--ds-radius-full, 9999px)",
background: "var(--ds-icon, #292A2E)",
userSelect: 'none',
'&::before, &::after': {
background: "var(--ds-icon, #292A2E)",
content: "''",
height: '2px',
width: '6px',
position: 'absolute',
borderRadius: "var(--ds-radius-full, 9999px)"
},
'&::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 !== _types.SortOrder.NO_ORDER;
var activeStatusClass = "".concat(_consts.SORTABLE_COLUMN_ICON_CLASSNAME, "-").concat(activated ? 'active' : 'inactive');
if (!isSortingAllowed) {
return "".concat(StatusClassNames.SORTING_NOT_ALLOWED, " ").concat(activeStatusClass);
}
switch (sortOrdered) {
case _types.SortOrder.ASC:
return "".concat(StatusClassNames.ASC, " ").concat(activeStatusClass);
case _types.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 = _messages.sortingIconMessages.noOrderLabel,
ascOrderLabel = _messages.sortingIconMessages.ascOrderLabel,
descOrderLabel = _messages.sortingIconMessages.descOrderLabel,
invalidLabel = _messages.sortingIconMessages.invalidLabel;
if (!isSortingAllowed) {
return intl.formatMessage(invalidLabel);
}
switch (sortOrdered) {
case _types.SortOrder.NO_ORDER:
return intl.formatMessage(noOrderLabel);
case _types.SortOrder.ASC:
return intl.formatMessage(ascOrderLabel);
case _types.SortOrder.DESC:
return intl.formatMessage(descOrderLabel);
}
return '';
};
var getAriaLabel = function getAriaLabel(intl, isSortingAllowed, sortOrdered) {
var noOrderLabel = _messages.sortingAriaLabelMessages.noOrderLabel,
ascOrderLabel = _messages.sortingAriaLabelMessages.ascOrderLabel,
descOrderLabel = _messages.sortingAriaLabelMessages.descOrderLabel,
invalidLabel = _messages.sortingAriaLabelMessages.invalidLabel,
defaultLabel = _messages.sortingAriaLabelMessages.defaultLabel;
if (!isSortingAllowed) {
return intl.formatMessage(invalidLabel);
}
switch (sortOrdered) {
case _types.SortOrder.NO_ORDER:
return intl.formatMessage(noOrderLabel);
case _types.SortOrder.ASC:
return intl.formatMessage(ascOrderLabel);
case _types.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(_consts.SORTABLE_COLUMN_ICON_CLASSNAME, " ").concat(sortOrdered !== _types.SortOrder.NO_ORDER ? 'is-active' : '').concat(isSortingAllowed ? '' : " ".concat(_consts.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 (0, _react.jsx)(_tooltip.default, {
delay: 0,
content: content,
position: "top"
}, (0, _react.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": !isSortingAllowed,
onClick: handleClick,
onKeyDown: handleKeyDown
}, (0, _react.jsx)("div", {
css: iconWrapperStyles
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: getIconClassName(isSortingAllowed, sortOrdered)
}, (0, _react.jsx)("div", {
css: [iconStyles]
}))));
};
var _default_1 = (0, _reactIntl.injectIntl)(SortingIcon);
var _default = exports.default = _default_1;