choerodon-ui/es/table/Resizable.js

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

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import React, { Component } from 'react';
import classes from 'component-classes';
import transform, { toTransformValue } from '../../pro/es/_util/transform';
import { transformZoomData } from 'choerodon-ui/shared/util';
import EventManager, { stopEvent } from '../_util/EventManager';

function cloneElement(element, props) {
  if (props.style && element.props.style) {
    props.style = _objectSpread(_objectSpread({}, element.props.style), props.style);
  }

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

  return /*#__PURE__*/React.cloneElement(element, props);
}

var Resizable = /*#__PURE__*/function (_Component) {
  _inherits(Resizable, _Component);

  var _super = _createSuper(Resizable);

  function Resizable() {
    var _this;

    _classCallCheck(this, Resizable);

    _this = _super.apply(this, arguments);

    _this.handleMouseDown = function (event) {
      stopEvent(event);
      var currentTarget = event.currentTarget;
      var clientX = transformZoomData(event.clientX);

      var _assertThisInitialize = _assertThisInitialized(_this),
          _assertThisInitialize2 = _assertThisInitialize.resizeEvent,
          resizeEvent = _assertThisInitialize2 === void 0 ? new EventManager() : _assertThisInitialize2;

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

        if (onResize) {
          var x = 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;
  }

  _createClass(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.createElement("span", {
          ref: this.saveDraggable,
          key: "resizableHandle",
          className: "column-resizable-handle",
          onMouseDown: this.handleMouseDown
        })]
      });
    }
  }]);

  return Resizable;
}(Component);

export { Resizable as default };
//# sourceMappingURL=Resizable.js.map