react-workspaces/lib/components/workspace-old.js

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

'use strict';

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

var _index = require('/Users/sean/workspace/react-workspace/node_modules/redbox-react/lib/index.js');

var _index2 = _interopRequireDefault(_index);

var _index3 = require('/Users/sean/workspace/react-workspace/node_modules/react-transform-catch-errors/lib/index.js');

var _index4 = _interopRequireDefault(_index3);

var _react2 = require('react');

var _react3 = _interopRequireDefault(_react2);

var _index5 = require('/Users/sean/workspace/react-workspace/node_modules/react-transform-hmr/lib/index.js');

var _index6 = _interopRequireDefault(_index5);

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 _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);

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

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; }

const _components = {
  Workspace: {
    displayName: 'Workspace'
  }
};

const _UsersSeanWorkspaceReactWorkspaceNode_modulesReactTransformHmrLibIndexJs2 = (0, _index6.default)({
  filename: 'src/components/workspace-old.js',
  components: _components,
  locals: [module],
  imports: [_react3.default]
});

const _UsersSeanWorkspaceReactWorkspaceNode_modulesReactTransformCatchErrorsLibIndexJs2 = (0, _index4.default)({
  filename: 'src/components/workspace-old.js',
  components: _components,
  locals: [],
  imports: [_react3.default, _index2.default]
});

function _wrapComponent(id) {
  return function (Component) {
    return _UsersSeanWorkspaceReactWorkspaceNode_modulesReactTransformHmrLibIndexJs2(_UsersSeanWorkspaceReactWorkspaceNode_modulesReactTransformCatchErrorsLibIndexJs2(Component, id), id);
  };
}

const Workspace = _wrapComponent('Workspace')(function (_Component) {
  _inherits(Workspace, _Component);

  function Workspace(props) {
    _classCallCheck(this, Workspace);

    var _this = _possibleConstructorReturn(this, (Workspace.__proto__ || Object.getPrototypeOf(Workspace)).call(this, props));

    _this.state = _extends({}, props);
    return _this;
  }

  _createClass(Workspace, [{
    key: 'split',
    value: function split(path, axis, multiplier) {
      const newRoot = _manager2.default.split(this.state.root, path, axis, multiplier);
      this.setState({
        root: newRoot
      });
    }

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

  }, {
    key: 'handleStart',
    value: function handleStart(axis, path, event) {
      // this.state.root
      console.log(event);
    }
  }, {
    key: 'handleDrag',
    value: function handleDrag(axis, path, event) {
      console.log(axis, path, event);
      var previous = event.target.previousSibling;
      var next = event.target.nextSibling;

      var parent = event.target.parentNode;
      var parentHeight = parent.scrollHeight;
      var children = _lodash2.default.get(this.state.root, `${path}.children`);

      if (axis) {}
    }
  }, {
    key: 'handleStop',
    value: function handleStop(axis, path, event) {
      console.log(event);
    }
  }, {
    key: 'renderDivider',
    value: function renderDivider(axis, path) {
      return _react3.default.createElement(
        _reactDraggable2.default,
        {
          axis: axis,
          handle: '.handle',
          zIndex: 100,
          onStart: this.handleStart.bind(this, axis, path),
          onDrag: this.handleDrag.bind(this, axis, path),
          onStop: this.handleStop.bind(this, axis, path) },
        _react3.default.createElement('span', { className: `handle handle-axis-${axis}` })
      );
    }
  }, {
    key: 'renderNode',
    value: function renderNode(node = {}, axis, path = '') {
      let children;
      // console.log(path);

      if (node.children && node.children.length) {
        children = [];
        _lodash2.default.each(node.children, (childNode, index, collection) => {
          const axisForChildren = node.axis;
          const newPath = `${path}${path ? '.' : ''}children[${index}]`;
          children.push(this.renderNode(childNode, axisForChildren, newPath));
          if (index + 1 !== collection.length) {
            children.push(this.renderDivider(axisForChildren, path));
          }
        });
      } else {
        children = null;
      }

      let style;
      if (axis) {
        style = {
          height: axis === 'y' ? `${node.size}%` : '100%',
          width: axis === 'y' ? '100%' : `${node.size}%`
        };
      } else {
        style = {};
      }

      const instance = _react3.default.createElement(
        'div',
        { className: `pane ${axis ? `pane-${axis}` : ''}`, style: style },
        children
      );

      return instance;
    }
  }, {
    key: 'render',
    value: function render() {
      const node = this.state.root;
      const axis = node.axis;
      const root = this.renderNode(node, axis);

      return _react3.default.createElement(
        'div',
        { className: 'workspace' },
        root
      );
    }
  }]);

  return Workspace;
}(_react2.Component));

Workspace.propTypes = {
  root: _propTypes2.default.object.isRequired,
  components: _propTypes2.default.object.isRequired
};

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