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

netdata UI kit

"use strict";

exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _icon = require("../../../components/icon/icon");
var _flex = _interopRequireDefault(require("../../../components/templates/flex"));
var _useStylesTab2 = _interopRequireDefault(require("./use-styles-tab"));
var _excluded = ["active", "onActivate", "index", "onMouseOver", "onMouseOut", "onRemove", "fixed", "icon", "children", "showBorderLeft", "isDragOverlay", "draggable", "handleProps", "listeners", "attributes", "id", "style", "dragging", "sorting", "collapsed", "rootProps", "ref"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, 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 _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; }
var Tab = function Tab(_ref) {
  var active = _ref.active,
    onActivate = _ref.onActivate,
    index = _ref.index,
    mouseOver = _ref.onMouseOver,
    mouseOut = _ref.onMouseOut,
    onRemove = _ref.onRemove,
    fixed = _ref.fixed,
    icon = _ref.icon,
    children = _ref.children,
    showBorderLeft = _ref.showBorderLeft,
    isDragOverlay = _ref.isDragOverlay,
    draggable = _ref.draggable,
    handleProps = _ref.handleProps,
    listeners = _ref.listeners,
    attributes = _ref.attributes,
    id = _ref.id,
    style = _ref.style,
    dragging = _ref.dragging,
    sorting = _ref.sorting,
    collapsed = _ref.collapsed,
    rootProps = _ref.rootProps,
    ref = _ref.ref,
    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
  var _useState = (0, _react.useState)(),
    hover = _useState[0],
    setHover = _useState[1];
  var _useStylesTab = (0, _useStylesTab2["default"])({
      active: active,
      showBorderLeft: showBorderLeft,
      isDragOverlay: isDragOverlay
    }),
    rootStyles = _useStylesTab.rootStyles;
  var onClickTab = (0, _react.useCallback)(function (event) {
    if (event) event.preventDefault();
    if (onActivate) onActivate();
  }, [onActivate]);
  var onMouseOver = (0, _react.useCallback)(function (event) {
    setHover(true);
    if (mouseOver) mouseOver(event);
  }, [mouseOver]);
  var onMouseOut = (0, _react.useCallback)(function (event) {
    setHover(false);
    if (mouseOut) mouseOut(event);
  }, [mouseOut]);
  var onCloseTab = (0, _react.useCallback)(function (event) {
    event.preventDefault();
    event.stopPropagation();
    if (onRemove) onRemove(index, active);
  }, [onRemove, index, active]);
  var renderIcon = (0, _react.useCallback)(function (iconProp) {
    var _iconProp$props;
    return /*#__PURE__*/_react["default"].cloneElement(iconProp, {
      color: iconProp != null && (_iconProp$props = iconProp.props) != null && _iconProp$props.color ? iconProp.props.color : active ? "text" : "textLite"
    });
  }, [active]);
  var closable = hover && !fixed;
  return /*#__PURE__*/_react["default"].createElement(_flex["default"], _extends({}, rootStyles, {
    ref: ref
  }, !isDragOverlay && {
    onClick: onClickTab,
    onMouseOver: onMouseOver,
    onMouseLeave: onMouseOut
  }, {
    tabIndex: "0",
    "data-index": index,
    "data-id": id,
    style: style
  }, attributes, rootProps), /*#__PURE__*/_react["default"].createElement(_flex["default"], null, closable && !isDragOverlay && /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
    name: "x",
    size: "small",
    color: active ? "text" : "textLite",
    onClick: onCloseTab
  }), !closable && icon && renderIcon(icon)), !collapsed && /*#__PURE__*/_react["default"].createElement(_flex["default"], rest, children), (draggable || isDragOverlay) && /*#__PURE__*/_react["default"].createElement(_icon.Icon, _extends({
    name: "rearrange",
    width: "10px",
    height: "10px",
    color: hover ? active ? "text" : "textLite" : "textNoFocus"
  }, handleProps, listeners, {
    cursor: sorting || dragging ? "grabbing" : "grab"
  })));
};
Tab.displayName = "Tab";
var _default = exports["default"] = Tab;