@netdata/netdata-ui/dist/organisms/navigation/sortable/index.js

netdata UI kit

"use strict";

exports.__esModule = true;
exports["default"] = exports.BaseSortable = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactDom = require("react-dom");
var _core = require("@dnd-kit/core");
var _sortable = require("@dnd-kit/sortable");
var _throttleDebounce = require("throttle-debounce");
var _flex = _interopRequireDefault(require("../../../components/templates/flex"));
var _useNavigationScroll = _interopRequireDefault(require("../hooks/useNavigationScroll"));
var _useNavigationArrows2 = _interopRequireDefault(require("../hooks/useNavigationArrows"));
var _useOnTabsResize = _interopRequireDefault(require("../hooks/useOnTabsResize"));
var _utils = require("../../../utils");
var _item = _interopRequireDefault(require("./item"));
var _container = _interopRequireDefault(require("./container"));
var _arrow = _interopRequireDefault(require("./arrow"));
var _excluded = ["activationConstraint", "collisionDetection", "measuring", "modifiers"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var dropAnimationConfig = {
  sideEffects: (0, _core.defaultDropAnimationSideEffects)({
    styles: {
      active: {
        opacity: "0.5"
      }
    }
  })
};
var BaseSortable = exports.BaseSortable = function BaseSortable(_ref) {
  var _ref$animateLayoutCha = _ref.animateLayoutChanges,
    animateLayoutChanges = _ref$animateLayoutCha === void 0 ? function (args) {
      return (0, _sortable.defaultAnimateLayoutChanges)(_objectSpread(_objectSpread({}, args), {}, {
        wasDragging: true
      }));
    } : _ref$animateLayoutCha,
    _ref$adjustScale = _ref.adjustScale,
    adjustScale = _ref$adjustScale === void 0 ? false : _ref$adjustScale,
    _ref$Container = _ref.Container,
    Container = _ref$Container === void 0 ? _container["default"] : _ref$Container,
    _ref$dropAnimation = _ref.dropAnimation,
    dropAnimation = _ref$dropAnimation === void 0 ? dropAnimationConfig : _ref$dropAnimation,
    _ref$strategy = _ref.strategy,
    strategy = _ref$strategy === void 0 ? _sortable.horizontalListSortingStrategy : _ref$strategy,
    _onDragEnd = _ref.onDragEnd,
    onTabClose = _ref.onTabClose,
    onResize = _ref.onResize,
    items = _ref.items,
    Item = _ref.Item,
    parentRef = _ref.parentRef,
    collapsed = _ref.collapsed,
    ref = _ref.ref;
  var _useState = (0, _react.useState)(null),
    activeId = _useState[0],
    setActiveId = _useState[1];
  var getIndex = function getIndex(id) {
    return items.findIndex(function (item) {
      return item.id === id;
    });
  };
  var activeIndex = activeId !== null ? getIndex(activeId) : -1;
  var containerRef = (0, _react.useRef)();
  (0, _useNavigationScroll["default"])(containerRef);
  var lastTabRef = (0, _react.useRef)();
  var onTabsResize = (0, _useOnTabsResize["default"])(parentRef, containerRef, lastTabRef, onResize, [items.length]);
  var _useNavigationArrows = (0, _useNavigationArrows2["default"])(containerRef, lastTabRef, items.length, collapsed),
    arrowLeft = _useNavigationArrows[0],
    arrowRight = _useNavigationArrows[1],
    onScroll = _useNavigationArrows[2];
  (0, _react.useEffect)(function () {
    if (!containerRef.current) return;
    onTabsResize();
    var container = containerRef.current;
    var handlers = (0, _throttleDebounce.debounce)(300, function () {
      onTabsResize();
      onScroll();
    });
    handlers();
    container.addEventListener("scroll", onScroll);
    window.addEventListener("resize", handlers);
    return function () {
      container.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", handlers);
    };
  }, [items.length, collapsed]);
  var scrollLeft = function scrollLeft(e) {
    e.preventDefault();
    containerRef.current.scrollTo({
      left: containerRef.current.scrollLeft - 100,
      behavior: "smooth"
    });
  };
  var scrollRight = function scrollRight(e) {
    e.preventDefault();
    containerRef.current.scrollTo({
      left: containerRef.current.scrollLeft + 100,
      behavior: "smooth"
    });
  };
  (0, _core.useDndMonitor)({
    onDragStart: function onDragStart(_ref2) {
      var active = _ref2.active;
      if (!active || !active.data.current.navigationTab) return;
      setActiveId(active.id);
    },
    onDragEnd: function onDragEnd(_ref3) {
      var active = _ref3.active,
        over = _ref3.over;
      if (!active || !active.data.current.navigationTab) return;
      setActiveId(null);
      if (over && over.data.current.navigationTab) {
        var overIndex = getIndex(over.id);
        if (activeIndex !== overIndex) {
          _onDragEnd(activeIndex, overIndex);
        }
      }
    },
    onDragCancel: function onDragCancel() {
      return setActiveId(null);
    }
  });
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_flex["default"], {
    overflow: "hidden",
    position: "relative"
  }, arrowLeft && /*#__PURE__*/_react["default"].createElement(_arrow["default"], {
    onClick: scrollLeft,
    name: "navLeft"
  }), /*#__PURE__*/_react["default"].createElement(Container, {
    ref: (0, _utils.mergeRefs)(containerRef, ref)
  }, /*#__PURE__*/_react["default"].createElement(_sortable.SortableContext, {
    items: items,
    strategy: strategy
  }, items.map(function (item, index) {
    return /*#__PURE__*/_react["default"].createElement(_item["default"], _extends({
      key: item.id + "-" + index,
      itemProps: item,
      id: item.id,
      draggable: !item.fixed,
      index: index,
      onRemove: onTabClose,
      animateLayoutChanges: animateLayoutChanges,
      Item: Item
    }, index === items.length - 1 && {
      lastTabRef: lastTabRef
    }, {
      collapsed: collapsed
    }));
  }))), arrowRight && /*#__PURE__*/_react["default"].createElement(_arrow["default"], {
    onClick: scrollRight,
    name: "navRight",
    right: true
  })), /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react["default"].createElement(_core.DragOverlay, {
    adjustScale: adjustScale,
    dropAnimation: dropAnimation
  }, activeId !== null ? /*#__PURE__*/_react["default"].createElement(Item, _extends({}, items[activeIndex], {
    backgroundOpacity: 0.8,
    isDragOverlay: true,
    grabbing: true,
    sorting: true
  })) : null), document.body));
};
var Sortable = function Sortable(_ref4) {
  var activationConstraint = _ref4.activationConstraint,
    _ref4$collisionDetect = _ref4.collisionDetection,
    collisionDetection = _ref4$collisionDetect === void 0 ? _core.closestCenter : _ref4$collisionDetect,
    _ref4$measuring = _ref4.measuring,
    measuring = _ref4$measuring === void 0 ? {
      droppable: {
        strategy: _core.MeasuringStrategy.Always
      }
    } : _ref4$measuring,
    modifiers = _ref4.modifiers,
    rest = _objectWithoutPropertiesLoose(_ref4, _excluded);
  var sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.MouseSensor, {
    activationConstraint: activationConstraint
  }), (0, _core.useSensor)(_core.TouchSensor, {
    activationConstraint: activationConstraint
  }));
  return /*#__PURE__*/_react["default"].createElement(_core.DndContext, {
    sensors: sensors,
    collisionDetection: collisionDetection,
    measuring: measuring,
    modifiers: modifiers
  }, /*#__PURE__*/_react["default"].createElement(BaseSortable, rest));
};
var _default = exports["default"] = Sortable;