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

netdata UI kit

import React from "react";
import { createPortal } from "react-dom";
import { DragOverlay as DndDragOverlay } from "@dnd-kit/core";
import styled from "styled-components";
import Flex from "../../../templates/flex";
import { Text } from "../../../typography";
var OverlayContainer = styled(Flex).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__*/createPortal(/*#__PURE__*/React.createElement(DndDragOverlay, null, /*#__PURE__*/React.createElement(OverlayContainer, {
    alignItems: "center",
    gap: 2
  }, /*#__PURE__*/React.createElement(Text, {
    strong: true
  }, activeColumn.columnDef.header || activeColumn.id))), document.body);
};
export default DragOverlay;