@atlaskit/editor-core/dist/es5/editor/ui/Appearance/Message.js

A package contains Atlassian editor core functionality

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var styled_components_1 = require("styled-components");
var PluginSlot_1 = require("../PluginSlot");
var WithPluginState_1 = require("../WithPluginState");
var ContentStyles_1 = require("../ContentStyles");
var max_content_size_1 = require("../../plugins/max-content-size");
var Addon_1 = require("../Addon");
var pulseBackground = (_a = ["\n  50% {\n    background-color: #FF8F73;\n  }\n"], _a.raw = ["\n  50% {\n    background-color: #FF8F73;\n  }\n"], styled_components_1.keyframes(_a));
var pulseBackgroundReverse = (_b = ["\n  0% {\n    background-color: #FF8F73;\n  }\n  50% {\n    background-color: auto;\n  }\n  100% {\n    background-color: #FF8F73;\n  }\n"], _b.raw = ["\n  0% {\n    background-color: #FF8F73;\n  }\n  50% {\n    background-color: auto;\n  }\n  100% {\n    background-color: #FF8F73;\n  }\n"], styled_components_1.keyframes(_b));
// tslint:disable-next-line:variable-name
var MessageEditor = (_c = ["\n  display: flex;\n  border: 1px solid ", ";\n  border-radius: 3px;\n  height: auto;\n  min-height: 30px;\n  ", "\n  max-width: inherit;\n  box-sizing: border-box;\n  word-wrap: break-word;\n  animation: ", ";\n\n  &.-flash {\n    animation: .25s ease-in-out ", ";\n  }\n\n  div > .ProseMirror {\n    outline: none;\n    white-space: pre-wrap;\n    padding: 0;\n    margin: 0;\n  }\n"], _c.raw = ["\n  display: flex;\n  border: 1px solid ", ";\n  border-radius: 3px;\n  height: auto;\n  min-height: 30px;\n  ", "\n  max-width: inherit;\n  box-sizing: border-box;\n  word-wrap: break-word;\n  animation: ", ";\n\n  &.-flash {\n    animation: .25s ease-in-out ", ";\n  }\n\n  div > .ProseMirror {\n    outline: none;\n    white-space: pre-wrap;\n    padding: 0;\n    margin: 0;\n  }\n"], styled_components_1.default.div(_c, function (props) { return props.isMaxContentSizeReached ? '#FF8F73' : '#C1C7D0'; }, function (props) { return props.maxHeight ? 'max-height: ' + props.maxHeight + 'px;' : ''; }, function (props) { return props.isMaxContentSizeReached ? ".25s ease-in-out " + pulseBackground : 'none'; }, pulseBackgroundReverse));
// tslint:disable-next-line:variable-name
var ContentArea = (_d = ["\n  padding: 4px 16px 4px 8px;\n  flex-grow: 1;\n  overflow-x: hidden;\n  overflow-y: auto;\n"], _d.raw = ["\n  padding: 4px 16px 4px 8px;\n  flex-grow: 1;\n  overflow-x: hidden;\n  overflow-y: auto;\n"], styled_components_1.default(ContentStyles_1.default)(_d));
// tslint:disable-next-line:variable-name
var SecondaryToolbarContainer = (_e = ["\n  padding: 2px 4px 0 0;\n  margin-bottom: -2px;\n  box-sizing: border-box;\n  justify-content: flex-end;\n  align-items: flex-end;\n  flex-shrink: 0;\n  display: flex;\n"], _e.raw = ["\n  padding: 2px 4px 0 0;\n  margin-bottom: -2px;\n  box-sizing: border-box;\n  justify-content: flex-end;\n  align-items: flex-end;\n  flex-shrink: 0;\n  display: flex;\n"], styled_components_1.default.div(_e));
var Editor = (function (_super) {
    tslib_1.__extends(Editor, _super);
    function Editor() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.flashToggle = false;
        _this.appearance = 'message';
        _this.handleRef = function (ref) {
            if (_this.props.onUiReady) {
                _this.props.onUiReady(ref);
            }
        };
        _this.renderChrome = function (_a) {
            var maxContentSize = _a.maxContentSize;
            var _b = _this.props, editorView = _b.editorView, eventDispatcher = _b.eventDispatcher, providerFactory = _b.providerFactory, contentComponents = _b.contentComponents, secondaryToolbarComponents = _b.secondaryToolbarComponents, customContentComponents = _b.customContentComponents, customSecondaryToolbarComponents = _b.customSecondaryToolbarComponents, addonToolbarComponents = _b.addonToolbarComponents, maxHeight = _b.maxHeight;
            var maxContentSizeReached = maxContentSize && maxContentSize.maxContentSizeReached;
            _this.flashToggle = maxContentSizeReached && !_this.flashToggle;
            return (React.createElement(MessageEditor, { className: _this.flashToggle ? '-flash' : '', isMaxContentSizeReached: maxContentSizeReached, maxHeight: maxHeight },
                React.createElement(ContentArea, { innerRef: _this.handleRef },
                    customContentComponents,
                    React.createElement(PluginSlot_1.default, { editorView: editorView, eventDispatcher: eventDispatcher, providerFactory: providerFactory, appearance: _this.appearance, items: contentComponents })),
                React.createElement(SecondaryToolbarContainer, null,
                    React.createElement(PluginSlot_1.default, { editorView: editorView, eventDispatcher: eventDispatcher, providerFactory: providerFactory, appearance: _this.appearance, items: secondaryToolbarComponents }),
                    customSecondaryToolbarComponents,
                    React.createElement(Addon_1.AddonToolbar, { dropdownItems: addonToolbarComponents }))));
        };
        return _this;
    }
    Editor.prototype.render = function () {
        var _a = this.props, eventDispatcher = _a.eventDispatcher, editorView = _a.editorView;
        return (React.createElement(WithPluginState_1.default, { editorView: editorView, eventDispatcher: eventDispatcher, plugins: { maxContentSize: max_content_size_1.pluginKey }, render: this.renderChrome }));
    };
    return Editor;
}(React.Component));
Editor.displayName = 'MessageEditor';
exports.default = Editor;
var _a, _b, _c, _d, _e;
//# sourceMappingURL=Message.js.map