@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
97 lines • 3.58 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { Component } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
import { jsx } from '@emotion/react';
import { getExtensionLozengeData } from '../../../utils';
import { styledImage } from '../styles';
import { LozengeComponent } from './LozengeComponent';
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/react/no-class-components, @typescript-eslint/no-explicit-any
export default class ExtensionLozenge extends Component {
constructor(...args) {
super(...args);
_defineProperty(this, "renderImage", lozengeData => {
const {
extensionKey
} = this.props.node.attrs;
const {
url,
...rest
} = lozengeData;
// eslint-disable-next-line react/jsx-props-no-spreading, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
return jsx("img", _extends({
css: styledImage,
src: url
}, rest, {
alt: extensionKey
}));
});
_defineProperty(this, "renderFallback", lozengeData => {
const {
showMacroInteractionDesignUpdates,
isNodeSelected,
isNodeHovered,
isNodeNested,
customContainerStyles,
setIsNodeHovered,
isBodiedMacro,
showLivePagesBodiedMacrosRendererView,
showUpdatedLivePages1PBodiedExtensionUI,
showBodiedExtensionRendererView,
setShowBodiedExtensionRendererView,
pluginInjectionApi
} = this.props;
const {
parameters,
extensionKey
} = this.props.node.attrs;
const {
name
} = this.props.node.type;
const params = parameters && parameters.macroParams;
const title = parameters && parameters.extensionTitle || parameters && parameters.macroMetadata && parameters.macroMetadata.title || extensionKey;
return jsx(LozengeComponent, {
isNodeHovered: isNodeHovered,
isNodeSelected: isNodeSelected,
isNodeNested: isNodeNested,
showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
extensionName: name,
lozengeData: lozengeData,
params: params,
title: title,
renderImage: this.renderImage,
customContainerStyles: customContainerStyles,
setIsNodeHovered: setIsNodeHovered,
isBodiedMacro: isBodiedMacro,
showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView,
showUpdatedLivePages1PBodiedExtensionUI: showUpdatedLivePages1PBodiedExtensionUI,
showBodiedExtensionRendererView: showBodiedExtensionRendererView,
setShowBodiedExtensionRendererView: setShowBodiedExtensionRendererView,
pluginInjectionApi: pluginInjectionApi
});
});
}
render() {
const {
node,
showMacroInteractionDesignUpdates
} = this.props;
const imageData = getExtensionLozengeData({
node,
type: 'image'
});
if (!showMacroInteractionDesignUpdates && imageData && node.type.name !== 'extension') {
return this.renderImage(imageData);
}
const iconData = getExtensionLozengeData({
node,
type: 'icon'
});
return this.renderFallback(iconData);
}
}