@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
48 lines • 3 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
var _templateObject, _templateObject2;
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
/** @jsx jsx */
import React from 'react';
import { css, jsx } from '@emotion/react';
import { injectIntl } from 'react-intl-next';
import { N200, N400 } from '@atlaskit/theme/colors';
import { messages } from './messages';
var captionWrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n margin-top: ", ";\n text-align: center;\n position: relative;\n color: ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-text-subtle, ".concat(N400, ")"));
var placeholderStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n color: ", ";\n position: absolute;\n top: 0;\n width: 100%;\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"));
export var CaptionComponent = /*#__PURE__*/function (_React$Component) {
_inherits(CaptionComponent, _React$Component);
var _super = _createSuper(CaptionComponent);
function CaptionComponent() {
_classCallCheck(this, CaptionComponent);
return _super.apply(this, arguments);
}
_createClass(CaptionComponent, [{
key: "render",
value: function render() {
var _this$props = this.props,
selected = _this$props.selected,
hasContent = _this$props.hasContent,
children = _this$props.children,
dataAttributes = _this$props.dataAttributes,
formatMessage = _this$props.intl.formatMessage;
var showPlaceholder = !selected && !hasContent;
return jsx("div", _extends({
"data-media-caption": true,
"data-testid": "media-caption"
}, dataAttributes, {
css: captionWrapperStyle
}), showPlaceholder ? jsx("p", {
css: placeholderStyle
}, formatMessage(messages.placeholder)) : null, children);
}
}]);
return CaptionComponent;
}(React.Component);
export default injectIntl(CaptionComponent);