choerodon-ui/lib/table/Resizable.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];

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

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

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

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

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

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

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

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

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

var _componentClasses = _interopRequireDefault(require("component-classes"));

var _transform = _interopRequireWildcard(require("../../pro/lib/_util/transform"));

var _util = require("choerodon-ui/shared/util");

var _EventManager = _interopRequireWildcard(require("../_util/EventManager"));

function cloneElement(element, props) {
  if (props.style && element.props.style) {
    props.style = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, element.props.style), props.style);
  }

  if (props.className && element.props.className) {
    props.className = "".concat(element.props.className, " ").concat(props.className);
  }

  return /*#__PURE__*/_react["default"].cloneElement(element, props);
}

var Resizable = /*#__PURE__*/function (_Component) {
  (0, _inherits2["default"])(Resizable, _Component);

  var _super = (0, _createSuper2["default"])(Resizable);

  function Resizable() {
    var _this;

    (0, _classCallCheck2["default"])(this, Resizable);
    _this = _super.apply(this, arguments);

    _this.handleMouseDown = function (event) {
      (0, _EventManager.stopEvent)(event);
      var currentTarget = event.currentTarget;
      var clientX = (0, _util.transformZoomData)(event.clientX);

      var _assertThisInitialize = (0, _assertThisInitialized2["default"])(_this),
          _assertThisInitialize2 = _assertThisInitialize.resizeEvent,
          resizeEvent = _assertThisInitialize2 === void 0 ? new _EventManager["default"]() : _assertThisInitialize2;

      var clz = (0, _componentClasses["default"])(currentTarget);
      _this.resizeEvent = resizeEvent;
      clz.add('react-draggable-dragging');
      resizeEvent.setTarget(currentTarget.ownerDocument).addEventListener('mousemove', function (e) {
        (0, _transform["default"])((0, _transform.toTransformValue)({
          translateX: "".concat(e.clientX - clientX, "px")
        }), currentTarget.style);
      }).addEventListener('mouseup', function (e) {
        var onResize = _this.props.onResize;

        if (onResize) {
          var x = (0, _util.transformZoomData)(e.clientX) - clientX;
          var dragCallbackData = {
            x: x,
            y: 0,
            lastX: x,
            lastY: 0,
            deltaX: 0,
            deltaY: 0,
            node: currentTarget
          };
          onResize(event, dragCallbackData);
        }

        currentTarget.style.cssText = '';
        resizeEvent.clear();
        clz.remove('react-draggable-dragging');
      });
    };

    _this.saveDraggable = function (draggable) {
      _this.draggable = draggable;
    };

    return _this;
  }

  (0, _createClass2["default"])(Resizable, [{
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      var resizeEvent = this.resizeEvent;

      if (resizeEvent) {
        resizeEvent.clear();
        delete this.resizeEvent;
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          children = _this$props.children,
          className = _this$props.className;
      var subchildren = children.props.children;
      return cloneElement(children, {
        className: className ? "".concat(className, " react-resizable") : 'react-resizable',
        children: [subchildren, /*#__PURE__*/_react["default"].createElement("span", {
          ref: this.saveDraggable,
          key: "resizableHandle",
          className: "column-resizable-handle",
          onMouseDown: this.handleMouseDown
        })]
      });
    }
  }]);
  return Resizable;
}(_react.Component);

exports["default"] = Resizable;
//# sourceMappingURL=Resizable.js.map