@atlaskit/editor-plugin-extension
Version:
editor-plugin-extension plugin for @atlaskit/editor-core
66 lines (64 loc) • 2.51 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
import React from 'react';
// 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 { configPanelMessages as messages } from '@atlaskit/editor-common/extensions';
import CrossCircleIcon from '@atlaskit/icon/core/cross-circle';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import Tooltip from '@atlaskit/tooltip';
const removableFieldWrapperStyles = css({
position: 'relative',
marginBottom: 0
});
const wrapperWithMarginBottomStyles = css({
marginBottom: "var(--ds-space-200, 16px)"
});
const removeButtonWrapperStyles = css({
position: 'absolute',
right: 0,
top: 0,
cursor: 'pointer',
color: "var(--ds-icon-subtle, #505258)",
'&:hover': {
color: "var(--ds-icon-danger, #C9372C)"
}
});
const RemovableField = ({
name,
canRemoveField,
onClickRemove,
children,
intl,
className
}) => {
var _children$props$field;
const onClickCallback = React.useCallback(() => onClickRemove && onClickRemove(name), [name, onClickRemove]);
const hasMarginBottom = ((_children$props$field = children.props.field) === null || _children$props$field === void 0 ? void 0 : _children$props$field.type) !== 'expand';
return jsx("div", {
css: [removableFieldWrapperStyles, hasMarginBottom && wrapperWithMarginBottomStyles]
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: className
}, children, canRemoveField && jsx("div", {
role: expValEquals('platform_editor_a11y_eslint_fix', 'isEnabled', true) ? 'button' : undefined,
css: removeButtonWrapperStyles,
"data-testid": `remove-field-${name}`,
onClick: onClickCallback,
onKeyDown: expValEquals('platform_editor_a11y_eslint_fix', 'isEnabled', true) ? onClickCallback : undefined,
onFocus: expValEquals('platform_editor_a11y_eslint_fix', 'isEnabled', true) ? onClickCallback : undefined,
tabIndex: expValEquals('platform_editor_a11y_eslint_fix', 'isEnabled', true) ? 0 : undefined
}, jsx(Tooltip, {
content: intl.formatMessage(messages.removeField),
position: "left"
}, jsx(CrossCircleIcon, {
spacing: "none",
label: intl.formatMessage(messages.removeField)
}))));
};
// eslint-disable-next-line @typescript-eslint/ban-types
const _default_1 = injectIntl(RemovableField);
export default _default_1;