react-workspaces/lib/components/workspace.js

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

'use strict';

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

var _jsx = function () { var REACT_ELEMENT_TYPE = typeof Symbol === "function" && Symbol.for && Symbol.for("react.element") || 0xeac7; return function createRawReactElement(type, props, key, children) { var defaultProps = type && type.defaultProps; var childrenLength = arguments.length - 3; if (!props && childrenLength !== 0) { props = {}; } if (props && defaultProps) { for (var propName in defaultProps) { if (props[propName] === void 0) { props[propName] = defaultProps[propName]; } } } else if (!props) { props = defaultProps || {}; } if (childrenLength === 1) { props.children = children; } else if (childrenLength > 1) { var childArray = Array(childrenLength); for (var i = 0; i < childrenLength; i++) { childArray[i] = arguments[i + 3]; } props.children = childArray; } return { $$typeof: REACT_ELEMENT_TYPE, type: type, key: key === undefined ? null : '' + key, ref: null, props: props, _owner: null }; }; }();

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 _dec, _class;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _reactDom2 = _interopRequireDefault(_reactDom);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _manager = require('../manager');

var _manager2 = _interopRequireDefault(_manager);

var _reactResizable = require('react-resizable');

var _lodash = require('lodash');

var _lodash2 = _interopRequireDefault(_lodash);

var _reactDraggable = require('react-draggable');

var _reactDraggable2 = _interopRequireDefault(_reactDraggable);

var _reactSplitPane = require('react-split-pane');

var _reactSplitPane2 = _interopRequireDefault(_reactSplitPane);

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

var _utils = require('../utils');

var _reactDnd = require('react-dnd');

var _reactDndHtml5Backend = require('react-dnd-html5-backend');

var _reactDndHtml5Backend2 = _interopRequireDefault(_reactDndHtml5Backend);

var _DragSpan = require('./DragSpan');

var _DragSpan2 = _interopRequireDefault(_DragSpan);

var _TabList = require('./TabList');

var _TabList2 = _interopRequireDefault(_TabList);

var _TabPanel = require('./TabPanel');

var _TabPanel2 = _interopRequireDefault(_TabPanel);

require('../../styles/main.scss');

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

let Events = class Events {
  constructor() {
    this.listeners = {};
  }

  on(key, fn) {
    if (this.listeners[key]) {
      this.listeners[key].push(fn);
    } else {
      this.listeners[key] = [fn];
    }
  }

  trigger(key) {
    _lodash2.default.each(this.listeners[key], fn => {
      fn();
    });
  }
};
let Workspace = (_dec = (0, _reactDnd.DragDropContext)(_reactDndHtml5Backend2.default), _dec(_class = class Workspace extends _react.Component {
  constructor(props) {
    super(props);
    this.state = _extends({}, props);
    this.pubsub = new Events();
  }

  split(path, axis, multiplier) {
    const newRoot = _manager2.default.split(this.state.root, path, axis, multiplier);
    this.setState({
      root: newRoot
    });
  }

  componentWillReceiveProps(nextProps) {
    this.setState(_extends({}, nextProps));
  }

  // {
  //   x: [
  //     {
  //       size: 50
  //     },
  //     {
  //       size: 50
  //     }
  //   ]
  // };

  // const tabs = {
  //   'children[0].children[0]': ['green', 'red'],
  //   'children[0].children[1]': 'blue',
  //   'children[1]': ['yellow', 'red']
  // }

  move(from, fromIndex, to, toIndex) {
    const newTabs = _manager2.default.moveTab(this.state.tabs, from, fromIndex, to, toIndex);
    this.setState({
      tabs: newTabs
    });

    if (_lodash2.default.isFunction(this.props.onChange)) {
      this.props.onChange.call(this, this.state.root, newTabs);
    }
  }

  onResize() {
    this.pubsub.trigger('resize');
  }

  renderTabs(components, path, index) {
    const tabs = this.state.tabs;
    const tabHeaders = _lodash2.default.map(components, (component, index) => {
      const tabName = tabs[path][index];
      // const componentPath = `${path}[${index}]`;
      return _jsx(_reactTabs.Tab, {}, index, _jsx(_DragSpan2.default, {
        path: path,
        index: index
      }, void 0, tabName));
    });
    const tabPanels = _lodash2.default.map(components, (component, index) => {
      return _jsx(_TabPanel2.default, {
        pubsub: this.pubsub
      }, index, component);
    });
    return _jsx(_reactTabs.Tabs, {}, void 0, _jsx(_TabList2.default, {
      path: path,
      move: this.move.bind(this),
      tabs: tabs
    }, void 0, tabHeaders), tabPanels);
  }

  renderNode(node, path = '', index = 0) {
    if (_lodash2.default.isArray(node.component)) {
      return this.renderTabs(node.component, path, index);
    } else if (node.component) {
      return node.component;
    }

    let children = null;
    const split = node.axis === 'x' ? 'vertical' : 'horizontal';
    if (node.children) {
      children = _lodash2.default.map(node.children, (child, index) => {
        let childPath;
        if (path === '') {
          childPath = `children[${index}]`;
        } else {
          childPath = `${path}.children[${index}]`;
        }
        return this.renderNode(child, childPath, index);
      });
    }

    const size = node.size ? `${node.size}%` : 200;

    return _jsx(_reactSplitPane2.default, {
      split: split,
      minSize: 100,
      defaultSize: size
    }, `splitpane-${path}-${index}`, children);
  }

  render() {
    const node = this.state.root;
    const axis = node.axis;

    // const root = this.renderNode(node, axis);
    // const newRoot = Manager.split(this.state.root, path, axis, multiplier);

    const tree = _manager2.default.buildTree(node, this.state.components, this.state.tabs);
    const root = this.renderNode(tree);

    return _jsx('div', {
      className: 'workspace'
    }, void 0, root);
  }

}) || _class);
exports.default = Workspace;
module.exports = exports['default'];