react-virtualized-draggable/dist/commonjs/Table/DraggableRowRenderer.js

React components for efficiently rendering large, scrollable lists and tabular data

"use strict";

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

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

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 _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

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

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

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

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

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var Draggable = _interopRequireWildcard(require("react-draggable"));

var _reactJss = _interopRequireDefault(require("react-jss"));

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

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

var styles = {
  root: {
    display: 'flex'
  },
  root_dragging: {
    background: '#fff',
    zIndex: 1,
    position: 'relative',
    opacity: 0.5
  },
  root_shadow: {
    background: '#eee',
    borderTop: '1px solid #ddd',
    color: 'rgba(0, 0, 0, 0)'
  }
};

var DragRowRenderer =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2["default"])(DragRowRenderer, _React$Component);

  function DragRowRenderer() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2["default"])(this, DragRowRenderer);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = (0, _possibleConstructorReturn2["default"])(this, (_getPrototypeOf2 = (0, _getPrototypeOf3["default"])(DragRowRenderer)).call.apply(_getPrototypeOf2, [this].concat(args)));
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "dragStart", function () {
      var _this$props = _this.props,
          dragStart = _this$props.dragStart,
          rowData = _this$props.rowData;
      dragStart(rowData.id);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "drag", function (e, data) {
      var _this$props2 = _this.props,
          drag = _this$props2.drag,
          rowData = _this$props2.rowData;
      drag(rowData.id, data.deltaY);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "dragStop", function (e, data) {
      var _this$props3 = _this.props,
          dragStop = _this$props3.dragStop,
          dragRowId = _this$props3.dragRowId;
      data.node.style.transform = null;
      dragStop(dragRowId);
    });
    return _this;
  }

  (0, _createClass2["default"])(DragRowRenderer, [{
    key: "render",
    value: function render() {
      var _this$props4 = this.props,
          classes = _this$props4.classes,
          className = _this$props4.className,
          columns = _this$props4.columns,
          rowData = _this$props4.rowData,
          style = _this$props4.style,
          dragRowHeight = _this$props4.dragRowHeight,
          dragRowId = _this$props4.dragRowId,
          offsetRows = _this$props4.offsetRows,
          dragRowStyle = _this$props4.dragRowStyle;

      var newStyle = _objectSpread({}, style); // isDragging


      if (dragRowId === rowData.id) {
        var top = offsetRows <= 0 ? dragRowStyle.top - dragRowHeight : dragRowStyle.top;
        newStyle.transform = "translateY(".concat(top, "px)");
        newStyle.height = dragRowHeight;
      }

      return React.createElement(Draggable.DraggableCore, {
        handle: ".draggable_handle",
        onStart: this.dragStart,
        onDrag: this.drag,
        onStop: this.dragStop
      }, React.createElement("div", {
        className: (0, _clsx["default"])(classes.root, className),
        style: newStyle
      }, columns));
    }
  }]);
  return DragRowRenderer;
}(React.Component);

DragRowRenderer.propTypes = process.env.NODE_ENV !== "production" ? {
  dragStart: _propTypes["default"].func,
  drag: _propTypes["default"].func,
  dragStop: _propTypes["default"].func
} : {};
DragRowRenderer.defaultProps = {
  dragStart: function dragStart() {},
  drag: function drag() {},
  dragStop: function dragStop() {}
};

var _default = (0, _reactJss["default"])(styles)(DragRowRenderer);

exports["default"] = _default;