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

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

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";

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) { _defineProperty(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; }

import * as React from 'react';
import Proptype from 'prop-types';
import * as Draggable from 'react-draggable';
import injectSheet from 'react-jss';
import clsx from 'clsx';
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) {
  _inherits(DragRowRenderer, _React$Component);

  function DragRowRenderer() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, DragRowRenderer);

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

    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(DragRowRenderer)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _defineProperty(_assertThisInitialized(_this), "dragStart", function () {
      var _this$props = _this.props,
          dragStart = _this$props.dragStart,
          rowData = _this$props.rowData;
      dragStart(rowData.id);
    });

    _defineProperty(_assertThisInitialized(_this), "drag", function (e, data) {
      var _this$props2 = _this.props,
          drag = _this$props2.drag,
          rowData = _this$props2.rowData;
      drag(rowData.id, data.deltaY);
    });

    _defineProperty(_assertThisInitialized(_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;
  }

  _createClass(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: clsx(classes.root, className),
        style: newStyle
      }, columns));
    }
  }]);

  return DragRowRenderer;
}(React.Component);

DragRowRenderer.propTypes = process.env.NODE_ENV !== "production" ? {
  dragStart: Proptype.func,
  drag: Proptype.func,
  dragStop: Proptype.func
} : {};
DragRowRenderer.defaultProps = {
  dragStart: function dragStart() {},
  drag: function drag() {},
  dragStop: function dragStop() {}
};
export default injectSheet(styles)(DragRowRenderer);