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

A package contains Atlassian editor core functionality

import * as tslib_1 from "tslib";
import * as React from 'react';
import styled, { keyframes } from 'styled-components';
import PluginSlot from '../PluginSlot';
import WithPluginState from '../WithPluginState';
import ContentStyles from '../ContentStyles';
import { pluginKey as maxContentSizePluginKey } from '../../plugins/max-content-size';
import { AddonToolbar } from '../Addon';
var pulseBackground = (_a = ["\n  50% {\n    background-color: #FF8F73;\n  }\n"], _a.raw = ["\n  50% {\n    background-color: #FF8F73;\n  }\n"], 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"], 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.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(ContentStyles)(_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.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, { editorView: editorView, eventDispatcher: eventDispatcher, providerFactory: providerFactory, appearance: _this.appearance, items: contentComponents })),
                React.createElement(SecondaryToolbarContainer, null,
                    React.createElement(PluginSlot, { editorView: editorView, eventDispatcher: eventDispatcher, providerFactory: providerFactory, appearance: _this.appearance, items: secondaryToolbarComponents }),
                    customSecondaryToolbarComponents,
                    React.createElement(AddonToolbar, { dropdownItems: addonToolbarComponents }))));
        };
        return _this;
    }
    Editor.prototype.render = function () {
        var _a = this.props, eventDispatcher = _a.eventDispatcher, editorView = _a.editorView;
        return (React.createElement(WithPluginState, { editorView: editorView, eventDispatcher: eventDispatcher, plugins: { maxContentSize: maxContentSizePluginKey }, render: this.renderChrome }));
    };
    return Editor;
}(React.Component));
export default Editor;
Editor.displayName = 'MessageEditor';
var _a, _b, _c, _d, _e;
//# sourceMappingURL=Message.js.map