@atlaskit/renderer
Version:
Renderer component
132 lines • 5.55 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
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { jsx } from '@emotion/react';
import { fg } from '@atlaskit/platform-feature-flags';
import { ResourcedEmoji } from '@atlaskit/emoji/element';
import { PureComponent, memo } from 'react';
import { ProviderFactory, WithProviders } from '@atlaskit/editor-common/provider-factory';
import { useInlineAnnotationProps } from '../../ui/annotations/element/useInlineAnnotationProps';
// eslint-disable-next-line @repo/internal/react/no-class-components
var EmojiNode = /*#__PURE__*/function (_PureComponent) {
function EmojiNode(props) {
var _this;
_classCallCheck(this, EmojiNode);
_this = _callSuper(this, EmojiNode, [props]);
_defineProperty(_this, "renderWithProvider", function (providers) {
var _resourceConfig$optim;
var _this$props = _this.props,
allowTextFallback = _this$props.allowTextFallback,
shortName = _this$props.shortName,
id = _this$props.id,
fallback = _this$props.fallback,
fitToHeight = _this$props.fitToHeight,
showTooltip = _this$props.showTooltip,
resourceConfig = _this$props.resourceConfig;
if (allowTextFallback && !providers.emojiProvider) {
return jsx("span", {
"data-emoji-id": id,
"data-emoji-short-name": shortName,
"data-emoji-text": fallback || shortName
}, fallback || shortName);
}
if (!providers.emojiProvider) {
return null;
}
return jsx(ResourcedEmoji
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
, {
emojiId: {
id: id,
fallback: fallback,
shortName: shortName
},
emojiProvider: providers.emojiProvider,
showTooltip: showTooltip,
fitToHeight: fitToHeight,
optimistic: true,
optimisticImageURL: resourceConfig === null || resourceConfig === void 0 || (_resourceConfig$optim = resourceConfig.optimisticImageApi) === null || _resourceConfig$optim === void 0 ? void 0 : _resourceConfig$optim.getUrl({
id: id,
fallback: fallback,
shortName: shortName
}),
editorEmoji: true,
onEmojiLoadSuccess: resourceConfig === null || resourceConfig === void 0 ? void 0 : resourceConfig.onEmojiLoadSuccess,
onEmojiLoadFail: resourceConfig === null || resourceConfig === void 0 ? void 0 : resourceConfig.onEmojiLoadFail
});
});
_this.providerFactory = props.providers || new ProviderFactory();
return _this;
}
_inherits(EmojiNode, _PureComponent);
return _createClass(EmojiNode, [{
key: "componentWillUnmount",
value: function componentWillUnmount() {
if (!this.props.providers) {
// new ProviderFactory is created if no `providers` has been set
// in this case when component is unmounted it's safe to destroy this providerFactory
this.providerFactory.destroy();
}
}
}, {
key: "render",
value: function render() {
return jsx(WithProviders
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
, {
providers: ['emojiProvider'],
providerFactory: this.providerFactory,
renderNode: this.renderWithProvider
});
}
}]);
}(PureComponent);
_defineProperty(EmojiNode, "displayName", 'EmojiNode');
_defineProperty(EmojiNode, "defaultProps", {
showTooltip: true
});
export var EmojiItemComponent = function EmojiItemComponent(props) {
var id = props.id,
providers = props.providers,
shortName = props.shortName,
text = props.text,
fitToHeight = props.fitToHeight,
resourceConfig = props.resourceConfig;
var inlineAnnotationProps = useInlineAnnotationProps(props);
if (fg('editor_inline_comments_on_inline_nodes')) {
return (
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
jsx("span", inlineAnnotationProps, jsx(EmojiNode, {
allowTextFallback: true,
id: id,
shortName: shortName,
fallback: text,
providers: providers,
fitToHeight: fitToHeight,
resourceConfig: resourceConfig
}))
);
}
return jsx(EmojiNode, {
allowTextFallback: true,
id: id,
shortName: shortName,
fallback: text,
providers: providers,
fitToHeight: fitToHeight,
resourceConfig: resourceConfig
});
};
var _default_1 = /*#__PURE__*/memo(EmojiItemComponent);
export default _default_1;