@whisperlab/last-draft-js-toolbar-plugin/lib/components/Toolbar/index.js

LastDraft Toolbar Plugin for DraftJS

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = undefined;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _draftJs = require('draft-js');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Toolbar = function (_React$Component) {
  _inherits(Toolbar, _React$Component);

  function Toolbar() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, Toolbar);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Toolbar.__proto__ || Object.getPrototypeOf(Toolbar)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      isVisible: false,
      modalVisible: false,
      modal: null
    }, _this.onVisibilityChanged = function (isVisible) {
      var toolbarHeightOffset = 55;
      var selectionRect = isVisible ? (0, _draftJs.getVisibleSelectionRect)(window) : undefined;

      if (selectionRect === undefined || selectionRect === null) {
        return;
      }
      console.log(selectionRect);
      var parent = _this.container.parentNode;
      var parentRect = parent.getBoundingClientRect();
      var top = selectionRect.top === undefined ? 0 : selectionRect.top - parentRect.top - toolbarHeightOffset;
      var left = selectionRect.left === undefined ? 0 : selectionRect.left - parentRect.left + selectionRect.width / 2;
      var position = { top: top, left: left };
      _this.setState({ position: position });
    }, _this.openModal = function (type) {
      var modal = _this.props.getModalByType(type);
      _this.setState({ modal: modal }, function () {
        _this.setState({ modalVisible: true });
      });
    }, _this.closeModal = function () {
      _this.setState({ modalVisible: false });
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(Toolbar, [{
    key: 'componentWillMount',
    value: function componentWillMount() {
      this.props.store.subscribeToItem('isVisible', this.onVisibilityChanged);
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      this.props.store.unsubscribeFromItem('isVisible', this.onVisibilityChanged);
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          theme = _props.theme,
          store = _props.store;
      var _state = this.state,
          modal = _state.modal,
          modalVisible = _state.modalVisible,
          position = _state.position;

      var Modal = modal;
      var getEditorState = store.getItem('getEditorState');
      var editorState = getEditorState();

      var show = true;
      if (editorState.getSelection().isCollapsed()) {
        show = false;
      }
      var toolbarStyle = { display: show ? 'flex' : 'none' };
      if (position !== undefined) {
        toolbarStyle = Object.assign(position, toolbarStyle);
        toolbarStyle = _extends({}, toolbarStyle);
      }

      return _react2.default.createElement(
        'div',
        {
          className: theme.toolbarStyles.toolbar,
          style: toolbarStyle,
          ref: function ref(_ref2) {
            return _this2.container = _ref2;
          }
        },
        modalVisible && _react2.default.createElement(Modal, {
          getEditorState: store.getItem('getEditorState'),
          setEditorState: store.getItem('setEditorState'),
          getEditorRef: store.getItem('getEditorRef'),
          theme: theme,
          closeModal: this.closeModal.bind(this),
          openModal: this.openModal.bind(this) }),
        !modalVisible && this.props.structure.map(function (Component, index) {
          return _react2.default.createElement(Component, {
            key: index,
            theme: theme.buttonStyles,
            getEditorState: store.getItem('getEditorState'),
            setEditorState: store.getItem('setEditorState'),
            getEditorRef: store.getItem('getEditorRef'),
            addLink: store.getItem('addLink'),
            closeModal: _this2.closeModal.bind(_this2),
            openModal: _this2.openModal.bind(_this2) });
        })
      );
    }
  }]);

  return Toolbar;
}(_react2.default.Component);

exports.default = Toolbar;