@atlaskit/editor-plugin-extension/dist/cjs/ui/ConfigPanel/NestedForms/RemovableField.js

editor-plugin-extension plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@emotion/react");
var _reactIntl = require("react-intl");
var _extensions = require("@atlaskit/editor-common/extensions");
var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/cross-circle"));
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

var removableFieldWrapperStyles = (0, _react2.css)({
  position: 'relative',
  marginBottom: 0
});
var wrapperWithMarginBottomStyles = (0, _react2.css)({
  marginBottom: "var(--ds-space-200, 16px)"
});
var removeButtonWrapperStyles = (0, _react2.css)({
  position: 'absolute',
  right: 0,
  top: 0,
  cursor: 'pointer',
  color: "var(--ds-icon-subtle, #505258)",
  '&:hover': {
    color: "var(--ds-icon-danger, #C9372C)"
  }
});
var RemovableField = function RemovableField(_ref) {
  var _children$props$field;
  var name = _ref.name,
    canRemoveField = _ref.canRemoveField,
    onClickRemove = _ref.onClickRemove,
    children = _ref.children,
    intl = _ref.intl,
    className = _ref.className;
  var onClickCallback = _react.default.useCallback(function () {
    return onClickRemove && onClickRemove(name);
  }, [name, onClickRemove]);
  var hasMarginBottom = ((_children$props$field = children.props.field) === null || _children$props$field === void 0 ? void 0 : _children$props$field.type) !== 'expand';
  return (0, _react2.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 && (0, _react2.jsx)("div", {
    role: (0, _expValEquals.expValEquals)('platform_editor_a11y_eslint_fix', 'isEnabled', true) ? 'button' : undefined,
    css: removeButtonWrapperStyles,
    "data-testid": "remove-field-".concat(name),
    onClick: onClickCallback,
    onKeyDown: (0, _expValEquals.expValEquals)('platform_editor_a11y_eslint_fix', 'isEnabled', true) ? onClickCallback : undefined,
    onFocus: (0, _expValEquals.expValEquals)('platform_editor_a11y_eslint_fix', 'isEnabled', true) ? onClickCallback : undefined,
    tabIndex: (0, _expValEquals.expValEquals)('platform_editor_a11y_eslint_fix', 'isEnabled', true) ? 0 : undefined
  }, (0, _react2.jsx)(_tooltip.default, {
    content: intl.formatMessage(_extensions.configPanelMessages.removeField),
    position: "left"
  }, (0, _react2.jsx)(_crossCircle.default, {
    spacing: "none",
    label: intl.formatMessage(_extensions.configPanelMessages.removeField)
  }))));
};

// eslint-disable-next-line @typescript-eslint/ban-types
var _default_1 = (0, _reactIntl.injectIntl)(RemovableField);
var _default = exports.default = _default_1;