@entando/ddtable/dist/js/TableRow.js

react components used to render drag and drop tables in Entando projects

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.dropSpec = exports.getHoverType = undefined;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactDnd = require('react-dnd');

var _DDTable = require('./DDTable');

var _DDTable2 = _interopRequireDefault(_DDTable);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var ELEMENT_CLASS_NAME = 'DDTable__tr';

var TableRow = function (_Component) {
  _inherits(TableRow, _Component);

  function TableRow(props, context) {
    _classCallCheck(this, TableRow);

    var _this = _possibleConstructorReturn(this, (TableRow.__proto__ || Object.getPrototypeOf(TableRow)).call(this, props));

    _this.notifyHoverState = _this.notifyHoverState.bind(_this);
    _this.notifyDrop = _this.notifyDrop.bind(_this);

    _this.state = { hover: '' };

    if (!context || context.onDrop === undefined) {
      // eslint-disable-next-line no-console
      console.error('Warning: ' + TableRow.displayName + ' should only be used inside DDTable!');
    }
    return _this;
  }

  _createClass(TableRow, [{
    key: 'getChildContext',
    value: function getChildContext() {
      return {
        rowData: this.props.rowData
      };
    }
  }, {
    key: 'notifyHoverState',
    value: function notifyHoverState(hover) {
      if (this.state.hover !== hover) {
        this.setState({ hover: hover });
      }
    }
  }, {
    key: 'notifyDrop',
    value: function notifyDrop(hoverType, dropItem) {
      this.context.onDrop(hoverType, dropItem, this.props.rowData);
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          connectDropTarget = _props.connectDropTarget,
          isOver = _props.isOver,
          children = _props.children,
          className = _props.className;

      var classNameAr = [ELEMENT_CLASS_NAME, className];
      if (isOver) {
        classNameAr.push(ELEMENT_CLASS_NAME + '--dnd-hover');
      }

      if (isOver) {
        var hover = this.state.hover;

        if (hover) {
          // adds classes depending on hover type:
          // DDTable__tr--dnd-hover-high
          // DDTable__tr--dnd-hover-medium
          // DDTable__tr--dnd-hover-low
          classNameAr.push(ELEMENT_CLASS_NAME + '--dnd-hover-' + hover);
        }
      }

      // pass unrelated props to the <tr>
      var trProps = Object.assign({}, this.props);
      ['connectDropTarget', 'isOver', 'children', 'className', 'rowData'].forEach(function (key) {
        delete trProps[key];
      });

      return connectDropTarget(_react2.default.createElement(
        'tr',
        _extends({}, trProps, {
          className: classNameAr.join(' ').trim(),
          ref: function ref(tr) {
            _this2.tr = tr;
          }
        }),
        children
      ));
    }
  }]);

  return TableRow;
}(_react.Component);

TableRow.displayName = 'DDTable.Tr';

TableRow.propTypes = {
  connectDropTarget: _propTypes2.default.func.isRequired,
  isOver: _propTypes2.default.bool,

  children: _propTypes2.default.node.isRequired,
  className: _propTypes2.default.string,
  rowData: _propTypes2.default.shape({}).isRequired
};

TableRow.defaultProps = {
  className: '',
  isOver: false
};

TableRow.contextTypes = {
  onDrop: _propTypes2.default.func
};

TableRow.childContextTypes = {
  rowData: _propTypes2.default.shape({})
};

var getHoverType = exports.getHoverType = function getHoverType(props, monitor, component) {
  var co = monitor.getClientOffset();
  var targetTop = component.tr.getBoundingClientRect().top;
  var diff = co.y - targetTop;
  var oneThird = component.tr.clientHeight / 3;
  if (diff < oneThird) {
    return _DDTable2.default.DROP_HIGH;
  } else if (diff > component.tr.clientHeight - oneThird) {
    return _DDTable2.default.DROP_LOW;
  }
  return _DDTable2.default.DROP_MEDIUM;
};

var dropSpec = exports.dropSpec = {
  drop: function drop(props, monitor, component) {
    component.notifyDrop(getHoverType(props, monitor, component), monitor.getItem());
  },
  hover: function hover(props, monitor, component) {
    var hoverType = getHoverType(props, monitor, component);
    component.notifyHoverState(hoverType);
  }
};

var collect = function collect(connect, monitor) {
  return {
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver()
  };
};

exports.default = (0, _reactDnd.DropTarget)('DDTable', dropSpec, collect)(TableRow);