web-toolkit/lib/components/Paned.js

A GTK inspired toolkit designed to build awesome web apps

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));

var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createSuper"));

var _react = _interopRequireDefault(require("react"));

var _clsx = _interopRequireDefault(require("clsx"));

var _reactVirtualizedAutoSizer = _interopRequireDefault(require("react-virtualized-auto-sizer"));

/*
 * Paned.js
 */
var properties = {
  horizontal: {
    size: 'width',
    position: 'left',
    event: 'clientX'
  },
  vertical: {
    size: 'height',
    position: 'top',
    event: 'clientY'
  }
};

var Paned = /*#__PURE__*/function (_React$Component) {
  (0, _inherits2.default)(Paned, _React$Component);

  var _super = (0, _createSuper2.default)(Paned);

  function Paned(props) {
    var _this;

    (0, _classCallCheck2.default)(this, Paned);
    _this = _super.call(this, props);

    _this.removeEventListeners = function () {
      document.removeEventListener('mousemove', _this.onTouchMove);
      document.removeEventListener('mouseup', _this.onTouchEnd);
      document.removeEventListener('touchmove', _this.onTouchMove);
      document.removeEventListener('touchend', _this.onTouchEnd);
    };

    _this.onTouchMove = function (event) {
      event.preventDefault();
      var orientation = _this.props.orientation;
      var finger = trackFinger(event, _this.touchId);

      if (!finger) {
        _this.removeEventListeners();

        return;
      }

      var handle = _this.handle.current.getBoundingClientRect();

      var handlePosition = handle[properties[orientation].position];
      var mousePosition = finger[properties[orientation].event];
      var delta = mousePosition - handlePosition;

      _this.setState({
        size: _this.state.size + delta
      });
    };

    _this.onTouchEnd = function () {
      _this.setState({
        dragging: false
      });

      _this.removeEventListeners();
    };

    _this.onTouchStart = function (event) {
      event.preventDefault();
      var touch = event.changedTouches[0]; // A number that uniquely identifies the current finger in the touch session.

      _this.touchId = touch === null || touch === void 0 ? void 0 : touch.identifier;

      _this.setState({
        dragging: true
      });

      document.addEventListener('touchmove', _this.onTouchMove);
      document.addEventListener('touchend', _this.onTouchEnd);
    };

    _this.onMouseDown = function (event) {
      if (event.button !== 0) return;
      event.preventDefault();

      _this.setState({
        dragging: true
      });

      document.addEventListener('mousemove', _this.onTouchMove);
      document.addEventListener('mouseup', _this.onTouchEnd);
    };

    _this.onKeyDown = function (ev) {
      var containerSize = _this.state.containerSize;
      var size;

      switch (ev.key) {
        case 'ArrowLeft':
        case 'ArrowUp':
          size = _this.state.size - 4;
          break;

        case 'ArrowRight':
        case 'ArrowDown':
          size = _this.state.size + 4;
          break;

        default:
          return;
      }

      if (size < 0) size = 0;
      if (size > containerSize) size = containerSize;

      _this.setState({
        size: size
      });

      ev.preventDefault();
    };

    _this.handle = _react.default.createRef();
    _this.touchId = undefined;
    _this.state = {
      size: props.defaultSize,
      containerSize: undefined
    };
    return _this;
  }

  (0, _createClass2.default)(Paned, [{
    key: "updateContainerSize",
    value: function updateContainerSize(dimensions) {
      var _this2 = this;

      var containerSize = dimensions[properties[this.props.orientation].size];
      if (this.state.size !== undefined && this.state.containerSize === containerSize) return;
      setTimeout(function () {
        _this2.setState({
          containerSize: containerSize
        });

        if (_this2.state.size === undefined) _this2.setState({
          size: containerSize / 2
        });
      }, 0);
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      var _this$props = this.props,
          children = _this$props.children,
          className = _this$props.className,
          orientation = _this$props.orientation,
          border = _this$props.border,
          fill = _this$props.fill,
          defaultSize = _this$props.defaultSize,
          rest = (0, _objectWithoutProperties2.default)(_this$props, ["children", "className", "orientation", "border", "fill", "defaultSize"]);
      var size = this.state.size;
      if (children.length < 2) throw new Error('Paned: requires 2 children at least');
      return /*#__PURE__*/_react.default.createElement("div", Object.assign({
        className: (0, _clsx.default)('Paned', className, orientation, {
          'fill': fill === true,
          'fill-width': fill === 'width',
          'fill-height': fill === 'height',
          'border-none': border === false,
          'border-handle': border === 'handle'
        })
      }, rest), /*#__PURE__*/_react.default.createElement(_reactVirtualizedAutoSizer.default, null, function (dimensions) {
        _this3.updateContainerSize(dimensions);

        return /*#__PURE__*/_react.default.createElement("div", {
          className: (0, _clsx.default)('Paned__wrapper', orientation),
          style: dimensions
        }, /*#__PURE__*/_react.default.createElement("div", {
          className: "Paned__pane",
          style: firstStyle(orientation, size)
        }, children[0]), /*#__PURE__*/_react.default.createElement("div", {
          className: "Paned__handle",
          role: "separator",
          "aria-orientation": orientation === 'horizontal' ? 'vertical' : 'horizontal',
          tabIndex: "0",
          onMouseDown: _this3.onMouseDown,
          onTouchStart: _this3.onTouchStart,
          onKeyDown: _this3.onKeyDown,
          ref: _this3.handle,
          style: handleStyle(orientation, size)
        }), /*#__PURE__*/_react.default.createElement("div", {
          className: "Paned__pane",
          style: secondStyle(orientation, size, dimensions)
        }, children[1]));
      }));
    }
  }]);
  return Paned;
}(_react.default.Component);

Paned.defaultProps = {
  orientation: 'horizontal',
  border: true
};
var _default = Paned;
exports.default = _default;

function handleStyle(orientation, size) {
  return (0, _defineProperty2.default)({}, properties[orientation].position, size - 1);
}

function firstStyle(orientation, size) {
  return (0, _defineProperty2.default)({}, properties[orientation].size, size);
}

function secondStyle(orientation, size, dimensions) {
  var totalSize = dimensions[properties[orientation].size];
  if (typeof totalSize !== 'number' || typeof size !== 'number') return undefined;
  var secondSize = totalSize - size;
  return (0, _defineProperty2.default)({}, properties[orientation].size, secondSize);
}

function trackFinger(event, touchId) {
  if (touchId !== undefined && event.changedTouches) {
    for (var i = 0; i < event.changedTouches.length; i += 1) {
      var touch = event.changedTouches[i];

      if (touch.identifier === touchId) {
        return {
          clientX: touch.clientX,
          clientY: touch.clientY
        };
      }
    }

    return false;
  }

  return {
    clientX: event.clientX,
    clientY: event.clientY
  };
}
//# sourceMappingURL=Paned.js.map