@atlaskit/editor-plugin-media/dist/cjs/ui/Media/DropPlaceholder.js

Media 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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _react = require("@emotion/react");
var _reactIntlNext = require("react-intl-next");
var _adfSchema = require("@atlaskit/adf-schema");
var _documentFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/document-filled"));
var _colors = require("@atlaskit/theme/colors");
var _constants = require("@atlaskit/theme/constants");
var _media = require("../../nodeviews/mediaNodeView/media");
var _dropPlaceholderMessages = require("./drop-placeholder-messages");
var _templateObject, _templateObject2;
/** @jsx jsx */
var iconWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  background: ", ";\n  border-radius: ", "px;\n  margin: 5px 3px 25px;\n  width: ", "px;\n  min-height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), "var(--ds-icon-accent-blue, ".concat((0, _adfSchema.hexToRgba)(_colors.B400, 0.4) || _colors.B400, ")"), "var(--ds-background-accent-blue-subtle, ".concat((0, _adfSchema.hexToRgba)(_colors.B300, 0.6) || _colors.B300, ")"), (0, _constants.borderRadius)(), _media.FILE_WIDTH, _media.MEDIA_HEIGHT);
var dropLine = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border-radius: ", "px;\n  margin: ", " 0;\n  width: 100%;\n  height: 2px;\n"])), "var(--ds-border-focused, ".concat(_colors.B200, ")"), (0, _constants.borderRadius)(), "var(--ds-space-025, 2px)");
var IconWrapperComponent = function IconWrapperComponent(props) {
  var intl = props.intl;
  var dropPlaceholderLabel = _dropPlaceholderMessages.dropPlaceholderMessages.dropPlaceholderLabel;
  return (0, _react.jsx)("div", {
    css: iconWrapper
  }, (0, _react.jsx)(_documentFilled.default, {
    label: intl.formatMessage(dropPlaceholderLabel),
    size: "medium"
  }));
};
var IntlIconWrapper = (0, _reactIntlNext.injectIntl)(IconWrapperComponent);
var _default = exports.default = function _default(_ref) {
  var _ref$type = _ref.type,
    type = _ref$type === void 0 ? 'group' : _ref$type;
  return type === 'single' ? (0, _react.jsx)("div", {
    css: dropLine
  }) : (0, _react.jsx)(IntlIconWrapper, null);
};