'use strict';

var React = require('react');
var ReactDOM = require('react-dom');
var PropTypes = require('prop-types');
var Settings = require('../../../constants/Settings.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);

var iotPrefix = Settings.settings.iotPrefix;
var propTypes = {
  /**
   * Any children to show in the avatar while dragging. Usually the row name and icon or similar.
   */
  children: PropTypes__default.default.node.isRequired,
  /** CSS z-index for the avatar. */
  zIndex: PropTypes__default.default.number.isRequired
};

/**
 * The drag avatar that shows a preview of what's being dragged. The caller provides the child
 * "image" node (anything) to show, but this draws the bordered tile and around it. This must be
 * absolutely positioned on the page via its ref.
 *
 * @param {object} props
 * @param {ref} ref React ref to connect to the root dom node.
 *
 */
var TableDragAvatar = /*#__PURE__*/React.forwardRef(function TableDragAvatar(_ref, ref) {
  var zIndex = _ref.zIndex,
    children = _ref.children;
  return /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React__default.default.createElement("div", {
    className: "".concat(iotPrefix, "--table-drag-avatar"),
    ref: ref,
    style: {
      zIndex: zIndex
    }
  }, children), document.body);
});
TableDragAvatar.propTypes = propTypes;
TableDragAvatar.__docgenInfo = {
  "description": "The drag avatar that shows a preview of what's being dragged. The caller provides the child\n\"image\" node (anything) to show, but this draws the bordered tile and around it. This must be\nabsolutely positioned on the page via its ref.\n\n@param {object} props\n@param {ref} ref React ref to connect to the root dom node.",
  "methods": [],
  "displayName": "TableDragAvatar",
  "props": {
    "children": {
      "description": "Any children to show in the avatar while dragging. Usually the row name and icon or similar.",
      "type": {
        "name": "node"
      },
      "required": true
    },
    "zIndex": {
      "description": "CSS z-index for the avatar.",
      "type": {
        "name": "number"
      },
      "required": true
    }
  }
};

exports.TableDragAvatar = TableDragAvatar;
