@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
174 lines (169 loc) • 7.07 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
/**
* @jsxRuntime classic
* @jsx jsx
*/
import React, { Fragment } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
// AFP-2532 TODO: Fix automatic suppressions below
// eslint-disable-next-line @atlassian/tangerine/import/entry-points
import { injectIntl } from 'react-intl-next';
import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
import { getCorrectAltByIconUrl } from './listItemAlts';
import { transformTimeStamp } from './transformTimeStamp';
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
export var container = css({
backgroundColor: 'transparent',
padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-150, 12px)"),
cursor: 'pointer',
display: 'flex',
marginTop: 0
});
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
export var containerSelected = css({
backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
});
var nameWrapper = css({
overflow: 'hidden'
});
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
export var nameStyle = css({
color: "var(--ds-text, #172B4D)",
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: '20px'
});
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
export var containerName = css({
color: "var(--ds-text-subtlest, #626F86)",
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: '14px',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
fontSize: relativeFontSizeToBase16(11)
});
var iconStyle = css({
minWidth: '16px',
marginTop: "var(--ds-space-050, 4px)",
marginRight: "var(--ds-space-150, 12px)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
img: {
maxWidth: '16px'
}
});
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/react/no-class-components
var LinkSearchListItem = /*#__PURE__*/function (_React$PureComponent) {
function LinkSearchListItem() {
var _this;
_classCallCheck(this, LinkSearchListItem);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, LinkSearchListItem, [].concat(args));
_defineProperty(_this, "handleSelect", function (e) {
e.preventDefault(); // don't let editor lose focus
var _this$props = _this.props,
item = _this$props.item,
onSelect = _this$props.onSelect;
onSelect(item.url, item.name);
});
_defineProperty(_this, "handleMouseMove", function () {
var _this$props2 = _this.props,
onMouseMove = _this$props2.onMouseMove,
item = _this$props2.item;
onMouseMove && onMouseMove(item.objectId);
});
_defineProperty(_this, "handleMouseEnter", function () {
var _this$props3 = _this.props,
onMouseEnter = _this$props3.onMouseEnter,
item = _this$props3.item;
onMouseEnter && onMouseEnter(item.objectId);
});
_defineProperty(_this, "handleMouseLeave", function () {
var _this$props4 = _this.props,
onMouseLeave = _this$props4.onMouseLeave,
item = _this$props4.item;
onMouseLeave && onMouseLeave(item.objectId);
});
return _this;
}
_inherits(LinkSearchListItem, _React$PureComponent);
return _createClass(LinkSearchListItem, [{
key: "renderIcon",
value: function renderIcon() {
var _this$props5 = this.props,
_this$props5$item = _this$props5.item,
icon = _this$props5$item.icon,
iconUrl = _this$props5$item.iconUrl,
intl = _this$props5.intl;
if (icon) {
return jsx("span", {
css: iconStyle
}, icon);
}
if (iconUrl) {
return jsx("span", {
css: iconStyle
}, jsx("img", {
src: iconUrl,
alt: getCorrectAltByIconUrl(iconUrl, intl)
}));
}
return null;
}
}, {
key: "renderTimeStamp",
value: function renderTimeStamp() {
var _this$props6 = this.props,
item = _this$props6.item,
intl = _this$props6.intl;
var date = transformTimeStamp(intl, item.lastViewedDate, item.lastUpdatedDate);
return date && jsx(Fragment, null, "\xA0 \u2022", jsx("span", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: "link-search-timestamp",
"data-test-id": "link-search-timestamp"
}, "\xA0 ", date.pageAction, " ", date.dateString, " ", date.timeSince || ''));
}
}, {
key: "render",
value: function render() {
var _this$props7 = this.props,
item = _this$props7.item,
selected = _this$props7.selected,
id = _this$props7.id,
role = _this$props7.role;
return (
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
jsx("li", {
css: [container, selected && containerSelected],
role: role,
id: id,
"aria-selected": selected,
"data-testid": "link-search-list-item",
onMouseMove: this.handleMouseMove,
onMouseEnter: this.handleMouseEnter,
onMouseLeave: this.handleMouseLeave,
onClick: this.handleSelect
}, this.renderIcon(), jsx("span", {
css: nameWrapper
}, jsx("div", {
css: nameStyle
}, item.name), jsx("div", {
"data-testid": "link-search-list-item-container",
css: containerName
}, item.container, this.renderTimeStamp())))
);
}
}]);
}(React.PureComponent);
export default injectIntl(LinkSearchListItem);