@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
195 lines (186 loc) • 6.29 kB
JavaScript
/**
* @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
import { css, jsx } from '@emotion/react';
import { injectIntl } from 'react-intl';
import Tooltip from '@atlaskit/tooltip';
import { SortOrder } from '../types';
import { SORTABLE_COLUMN_ICON_CLASSNAME } from './consts';
import { sortingAriaLabelMessages, sortingIconMessages } from './messages';
export let 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
const buttonStyles = css`
position: absolute;
display: flex;
height: 28px;
width: 28px;
margin: ${"var(--ds-space-075, 6px)"};
right: 0;
top: 0;
border: ${"var(--ds-border-width-selected, 2px)"} solid ${"var(--ds-border, #0B120E24)"};
border-radius: ${"var(--ds-radius-small, 4px)"};
background-color: ${"var(--ds-surface-overlay, #FFFFFF)"};
justify-content: center;
align-items: center;
cursor: pointer;
&:hover {
background-color: ${"var(--ds-surface-overlay-hovered, #F0F1F2)"};
}
&:active {
background-color: ${"var(--ds-surface-overlay-pressed, #DDDEE1)"};
}
&.${SORTABLE_COLUMN_ICON_CLASSNAME}__not-allowed {
cursor: not-allowed;
}
`;
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
const iconWrapperStyles = css`
width: 8px;
height: 12px;
transition: transform 0.3s cubic-bezier(0.15, 1, 0.3, 1);
transform-origin: 50% 50%;
display: flex;
justify-content: center;
&.${StatusClassNames.DESC} {
transform: rotate(-180deg);
}
&.${SORTABLE_COLUMN_ICON_CLASSNAME}-inactive {
opacity: 0.7;
}
`;
// 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
const iconStyles = 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)'
}
});
const getIconClassName = (isSortingAllowed, sortOrdered) => {
const activated = sortOrdered !== SortOrder.NO_ORDER;
const activeStatusClass = `${SORTABLE_COLUMN_ICON_CLASSNAME}-${activated ? 'active' : 'inactive'}`;
if (!isSortingAllowed) {
return `${StatusClassNames.SORTING_NOT_ALLOWED} ${activeStatusClass}`;
}
switch (sortOrdered) {
case SortOrder.ASC:
return `${StatusClassNames.ASC} ${activeStatusClass}`;
case SortOrder.DESC:
return `${StatusClassNames.DESC} ${activeStatusClass}`;
default:
return `${StatusClassNames.NO_ORDER} ${activeStatusClass}`;
}
};
const getTooltipTitle = (intl, isSortingAllowed, sortOrdered) => {
const {
noOrderLabel,
ascOrderLabel,
descOrderLabel,
invalidLabel
} = sortingIconMessages;
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 '';
};
const getAriaLabel = (intl, isSortingAllowed, sortOrdered) => {
const {
noOrderLabel,
ascOrderLabel,
descOrderLabel,
invalidLabel,
defaultLabel
} = sortingAriaLabelMessages;
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);
};
const SortingIcon = ({
isSortingAllowed,
sortOrdered,
intl,
onClick,
onKeyDown
}) => {
const buttonClassName = `${SORTABLE_COLUMN_ICON_CLASSNAME} ${sortOrdered !== SortOrder.NO_ORDER ? 'is-active' : ''}${isSortingAllowed ? '' : ` ${SORTABLE_COLUMN_ICON_CLASSNAME}__not-allowed `}`;
const content = getTooltipTitle(intl, isSortingAllowed, sortOrdered);
const ariaLabel = getAriaLabel(intl, isSortingAllowed, sortOrdered);
const handleClick = () => {
if (isSortingAllowed) {
onClick();
}
};
const 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": !isSortingAllowed,
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]
}))));
};
const _default_1 = injectIntl(SortingIcon);
export default _default_1;