zoapp-ui/components/list/listDragItem.js

Javascript ES7 React UI Material Components extensions

"use strict";

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

var _objectWithoutProperties2 = require("babel-runtime/helpers/objectWithoutProperties");

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

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

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

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

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

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

var _inherits3 = _interopRequireDefault(_inherits2);

var _dec, _dec2, _class; /**
                          * Copyright (c) 2015-present, CWB SAS
                          *
                          * This source code is licensed under the MIT license found in the
                          * LICENSE file in the root directory of this source tree.
                          */


var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var _zrmc = require("zrmc");

var _zrmc2 = _interopRequireDefault(_zrmc);

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

var MDC_LISTITEM = "mdc-list-item";

var itemSource = {
  beginDrag: function beginDrag(props) {
    return {
      id: props.id,
      index: props.index
    };
  }
};

var itemTarget = {
  drop: function drop(props, monitor) {
    var dragIndex = monitor.getItem().index;
    var dropIndex = props.index;
    // console.log("WIP", `ListDragItem.drop ${dragIndex} / ${dropIndex}`);
    if (dragIndex !== dropIndex && props.onDrop) {
      props.onDrop(dragIndex, dropIndex);
    }
  },
  hover: function hover(props, monitor, component) {
    var item = monitor.getItem();
    var dragIndex = item.index;
    var hoverIndex = props.index;

    // Don't replace items with themselves
    if (dragIndex === hoverIndex || !component || !component.ref) {
      return;
    }

    // Determine rectangle on screen
    var hoverBoundingRect = component.ref.getBoundingClientRect();

    // Get vertical middle
    var hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;

    // Determine mouse position
    var clientOffset = monitor.getClientOffset();

    // Get pixels to the top
    var hoverClientY = clientOffset.y - hoverBoundingRect.top;

    // Only perform the move when the mouse has crossed half of the items height
    // When dragging downwards, only move when the cursor is below 50%
    // When dragging upwards, only move when the cursor is above 50%

    // Dragging downwards
    if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
      return;
    }

    // Dragging upwards
    if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
      return;
    }

    // Time to actually perform the action
    if (props.onMove) {
      if (props.onMove(dragIndex, hoverIndex)) {
        // Note: we're mutating the monitor item here!
        // Generally it's better to avoid mutations,
        // but it's good here for the sake of performance
        // to avoid expensive index searches.
        item.index = hoverIndex;
      }
    }
  }
};

var ListDragItem = (_dec = (0, _reactDnd.DropTarget)("item", itemTarget, function (connect) {
  return {
    connectDropTarget: connect.dropTarget()
  };
}), _dec2 = (0, _reactDnd.DragSource)("item", itemSource, function (connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging()
  };
}), _dec(_class = _dec2(_class = function (_Component) {
  (0, _inherits3.default)(ListDragItem, _Component);

  function ListDragItem() {
    (0, _classCallCheck3.default)(this, ListDragItem);
    return (0, _possibleConstructorReturn3.default)(this, (ListDragItem.__proto__ || Object.getPrototypeOf(ListDragItem)).apply(this, arguments));
  }

  (0, _createClass3.default)(ListDragItem, [{
    key: "render",
    value: function render() {
      var _props = this.props,
          connectDragSource = _props.connectDragSource,
          connectDropTarget = _props.connectDropTarget,
          children = _props.children,
          type = _props.type,
          icon = _props.icon,
          activated = _props.activated,
          imgSrc = _props.imgSrc,
          imgSize = _props.imgSize,
          imgLabel = _props.imgLabel,
          secondaryText = _props.secondaryText,
          href = _props.href,
          onClick = _props.onClick,
          otherProps = (0, _objectWithoutProperties3.default)(_props, ["connectDragSource", "connectDropTarget", "children", "type", "icon", "activated", "imgSrc", "imgSize", "imgLabel", "secondaryText", "href", "onClick"]);

      delete otherProps.index;
      delete otherProps.onMove;
      delete otherProps.onDrop;
      delete otherProps.isDragging;

      var classes = MDC_LISTITEM;
      var graphic = void 0;
      if (activated) {
        classes += " mdc-list-item--activated";
      }
      if (icon) {
        graphic = _react2.default.createElement(_zrmc.Icon, {
          className: "mdc-list-item__graphic",
          "aria-hidden": "true",
          name: icon
        });
      } else if (imgSrc) {
        graphic = _react2.default.createElement("img", {
          className: "mdc-list-item__graphic",
          src: imgSrc,
          width: imgSize,
          height: imgSize,
          alt: imgLabel
        });
      }
      var meta = void 0;
      var text = _react.Children.map(children, function (child) {
        if (child.props && child.props.mdcElement === "mdc-list-item__meta") {
          meta = child;
          return null;
        }
        return child;
      });
      if (secondaryText) {
        text = _react2.default.createElement(
          "span",
          { className: "mdc-list-item__text" },
          text,
          _react2.default.createElement(
            "span",
            { className: "mdc-list-item__secondary-text" },
            secondaryText
          )
        );
      }
      var el = void 0;
      if (type === "a") {
        el = _react2.default.createElement(
          "a",
          { className: classes, href: href, onClick: onClick },
          graphic,
          text,
          meta
        );
      } else {
        el = _react2.default.createElement(
          "li",
          {
            role: "menuitem",
            className: classes,
            onKeyPress: function onKeyPress() {},
            onClick: onClick
          },
          graphic,
          text,
          meta
        );
      }
      return connectDragSource(connectDropTarget(_zrmc2.default.render(el, otherProps)));
    }
  }]);
  return ListDragItem;
}(_react.Component)) || _class) || _class);
exports.default = ListDragItem;


ListDragItem.defaultProps = {
  mdcElement: MDC_LISTITEM,
  children: null,
  type: "li",
  activated: false,
  icon: null,
  imgSrc: null,
  imgSize: 56,
  imgLabel: null,
  secondaryText: null,
  href: null,
  onMove: null,
  onDrop: null,
  connectDragSource: null,
  connectDropTarget: null,
  isDragging: false
};

ListDragItem.propTypes = {
  mdcElement: _propTypes2.default.string,
  children: _propTypes2.default.node,
  type: _propTypes2.default.string,
  activated: _propTypes2.default.bool,
  icon: _propTypes2.default.string,
  imgSrc: _propTypes2.default.string,
  imgSize: _propTypes2.default.number,
  imgLabel: _propTypes2.default.string,
  secondaryText: _propTypes2.default.string,
  href: _propTypes2.default.string,
  connectDragSource: _propTypes2.default.func,
  connectDropTarget: _propTypes2.default.func,
  isDragging: _propTypes2.default.bool,
  index: _propTypes2.default.number.isRequired,
  id: _propTypes2.default.string.isRequired,
  onMove: _propTypes2.default.func,
  onDrop: _propTypes2.default.func,
  onClick: _propTypes2.default.func.isRequired
};