@netdata/netdata-ui/dist/components/table/body/header/dragOverlay.js

netdata UI kit

"use strict";

exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactDom = require("react-dom");
var _core = require("@dnd-kit/core");
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _flex = _interopRequireDefault(require("../../../templates/flex"));
var _typography = require("../../../typography");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var OverlayContainer = (0, _styledComponents["default"])(_flex["default"]).withConfig({
  displayName: "dragOverlay__OverlayContainer",
  componentId: "sc-z0f8hc-0"
})(["background:", ";border:1px solid ", ";box-shadow:0 2px 8px rgba(0,0,0,0.15);padding:8px 16px;border-radius:4px;opacity:0.9;"], function (_ref) {
  var theme = _ref.theme;
  return theme.colors.mainBackground;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.colors.border;
});
var DragOverlay = function DragOverlay(_ref3) {
  var activeColumn = _ref3.activeColumn;
  if (!activeColumn) return null;
  return /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react["default"].createElement(_core.DragOverlay, null, /*#__PURE__*/_react["default"].createElement(OverlayContainer, {
    alignItems: "center",
    gap: 2
  }, /*#__PURE__*/_react["default"].createElement(_typography.Text, {
    strong: true
  }, activeColumn.columnDef.header || activeColumn.id))), document.body);
};
var _default = exports["default"] = DragOverlay;