@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
73 lines (72 loc) • 3.14 kB
JavaScript
/**
* @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 { jsx } from '@emotion/react';
import classnames from 'classnames';
import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
import { useSharedPluginState } from '../../../hooks';
import { createWidthContext, WidthContext } from '../../../ui';
import ExtensionLozenge from '../Lozenge';
import { overlay } from '../styles';
import { inlineWrapperStyles, wrapperStyle } from './styles';
var InlineExtension = function InlineExtension(props) {
var node = props.node,
pluginInjectionApi = props.pluginInjectionApi,
macroInteractionDesignFeatureFlags = props.macroInteractionDesignFeatureFlags,
isNodeSelected = props.isNodeSelected,
children = props.children,
isNodeHovered = props.isNodeHovered,
setIsNodeHovered = props.setIsNodeHovered;
var _ref = macroInteractionDesignFeatureFlags || {},
showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates;
var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['width']),
widthState = _useSharedPluginState.widthState;
var hasChildren = !!children;
var classNames = classnames('extension-container', 'inline', {
'with-overlay': !showMacroInteractionDesignUpdates,
'with-children': hasChildren,
'with-danger-overlay': showMacroInteractionDesignUpdates,
'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered
});
var rendererContainerWidth = widthState ? widthState.width - akEditorGutterPaddingDynamic() * 2 : 0;
var handleMouseEvent = function handleMouseEvent(didHover) {
if (setIsNodeHovered) {
setIsNodeHovered(didHover);
}
};
var inlineExtensionInternal = jsx(Fragment, null, showMacroInteractionDesignUpdates && jsx(ExtensionLozenge, {
node: node,
isNodeSelected: isNodeSelected,
isNodeHovered: isNodeHovered,
showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
setIsNodeHovered: setIsNodeHovered
}), jsx("div", {
"data-testid": "inline-extension-wrapper"
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
,
css: [wrapperStyle, inlineWrapperStyles]
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: classNames,
onMouseEnter: function onMouseEnter() {
return handleMouseEvent(true);
},
onMouseLeave: function onMouseLeave() {
return handleMouseEvent(false);
}
}, jsx("div", {
css: overlay,
className: "extension-overlay"
}), children ? children : jsx(ExtensionLozenge, {
node: node,
isNodeSelected: isNodeSelected,
showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
})));
return jsx(WidthContext.Provider, {
value: createWidthContext(rendererContainerWidth)
}, inlineExtensionInternal);
};
export default InlineExtension;