@atlaskit/editor-common/dist/cjs/ui/ContextPanel/context.js

A package that contains common classes and components for editor and renderer

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ContextPanelWidthProvider = exports.ContextPanelProvider = exports.ContextPanelConsumer = exports.ContextPanel = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
// React context to communicate the active context panel width up and down the tree.
//
// We need the width prop from the ContextPanel component.
//
// However, the actual <ContextPanel /> component might be deeply nested inside the contextPanel.
// For example, in the template context panel storybook, we wrap it in 2 higher order components.
//
// Changing the max-width on the main editor container happens above where the <ContextPanel /> gets rendered.
//
// To subtract the context panel width from the available real estate, we use the Provider and Consumer.
//
// positionedOverEditor is used to determine whether the context panel is positioned over the Editor so we are
// able to position and add margins to handle certain elements like inline comment dialogues overlapping the context
// panel

var ContextPanel = exports.ContextPanel = /*#__PURE__*/_react.default.createContext({
  width: 0,
  positionedOverEditor: false,
  broadcastWidth: function broadcastWidth() {},
  broadcastPosition: function broadcastPosition() {}
});
var ContextPanelWidthProvider = exports.ContextPanelWidthProvider = /*#__PURE__*/function (_React$Component) {
  (0, _inherits2.default)(ContextPanelWidthProvider, _React$Component);
  var _super = _createSuper(ContextPanelWidthProvider);
  function ContextPanelWidthProvider(props) {
    var _this;
    (0, _classCallCheck2.default)(this, ContextPanelWidthProvider);
    _this = _super.call(this, props);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
      width: 0,
      positionedOverEditor: false
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "broadcastSidebarWidth", function (width) {
      if (width !== _this.state.width) {
        _this.setState({
          width: width
        });
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "broadcastPosition", function (positionedOverEditor) {
      if (positionedOverEditor !== _this.state.positionedOverEditor) {
        _this.setState({
          positionedOverEditor: positionedOverEditor
        });
      }
    });
    return _this;
  }
  (0, _createClass2.default)(ContextPanelWidthProvider, [{
    key: "render",
    value: function render() {
      var _this$state = this.state,
        width = _this$state.width,
        positionedOverEditor = _this$state.positionedOverEditor;
      return /*#__PURE__*/_react.default.createElement(Provider, {
        value: {
          width: width,
          positionedOverEditor: positionedOverEditor,
          broadcastWidth: this.broadcastSidebarWidth,
          broadcastPosition: this.broadcastPosition
        }
      }, this.props.children);
    }
  }]);
  return ContextPanelWidthProvider;
}(_react.default.Component);
var Provider = exports.ContextPanelProvider = ContextPanel.Provider,
  Consumer = exports.ContextPanelConsumer = ContextPanel.Consumer;