react-workspaces/lib/components/TabPanel.js

A component with a resizable and splittable workspace. A panel with draggable tabs.

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _reactTabs = require('react-tabs');

var _lodash = require('lodash');

var _lodash2 = _interopRequireDefault(_lodash);

var _elementResizeEvent = require('../lib/element-resize-event');

var _elementResizeEvent2 = _interopRequireDefault(_elementResizeEvent);

var _visibleArea2 = require('../visibleArea');

var _visibleArea3 = _interopRequireDefault(_visibleArea2);

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

const DEFAULT_CLASS = 'react-tabs__tab-panel';

// console.log(TabPanel.propTypes);

let Comp = class Comp extends _reactTabs.TabPanel {
  constructor(props) {
    super(props);
  }

  onResize() {
    if (this.mounted) {
      const node = _reactDom2.default.findDOMNode(this);
      const parent = node.parentNode.parentNode;
      const prev = parseInt(parent.style.height, 10);

      var _visibleArea = (0, _visibleArea3.default)(parent);

      const height = _visibleArea.height;


      if (prev === height || height === 0) {
        return;
      }
      if (height) {
        node.style.height = `${height - 32}px`;
      }
    }
  }

  componentDidMount() {
    if (typeof window !== 'undefined') {
      const fn = _lodash2.default.debounce(this.onResize.bind(this), 100);
      this.props.pubsub.on('resize', fn);
      // const elementResizeEvent = require('../lib/element-resize-event');
      const node = _reactDom2.default.findDOMNode(this);
      // elementResizeEvent(node, this.onResize.bind(this));
      (0, _elementResizeEvent2.default)(node, () => {
        this.props.pubsub.trigger('resize');
      });
    }
    this.mounted = true;
  }
  componentWillUnmount() {
    this.mounted = false;
  }
};

// Comp.propTypes = _.assign({
//   key: PropTypes.number
// }, TabPanel.propTypes);

exports.default = Comp;
module.exports = exports['default'];