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

netdata UI kit

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 _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; }
import React, { useState, useCallback } from "react";
import { Icon } from "../../../components/icon/icon";
import Flex from "../../../components/templates/flex";
import useStylesTab from "./use-styles-tab";
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 = useState(),
    hover = _useState[0],
    setHover = _useState[1];
  var _useStylesTab = useStylesTab({
      active: active,
      showBorderLeft: showBorderLeft,
      isDragOverlay: isDragOverlay
    }),
    rootStyles = _useStylesTab.rootStyles;
  var onClickTab = useCallback(function (event) {
    if (event) event.preventDefault();
    if (onActivate) onActivate();
  }, [onActivate]);
  var onMouseOver = useCallback(function (event) {
    setHover(true);
    if (mouseOver) mouseOver(event);
  }, [mouseOver]);
  var onMouseOut = useCallback(function (event) {
    setHover(false);
    if (mouseOut) mouseOut(event);
  }, [mouseOut]);
  var onCloseTab = useCallback(function (event) {
    event.preventDefault();
    event.stopPropagation();
    if (onRemove) onRemove(index, active);
  }, [onRemove, index, active]);
  var renderIcon = useCallback(function (iconProp) {
    var _iconProp$props;
    return /*#__PURE__*/React.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.createElement(Flex, _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.createElement(Flex, null, closable && !isDragOverlay && /*#__PURE__*/React.createElement(Icon, {
    name: "x",
    size: "small",
    color: active ? "text" : "textLite",
    onClick: onCloseTab
  }), !closable && icon && renderIcon(icon)), !collapsed && /*#__PURE__*/React.createElement(Flex, rest, children), (draggable || isDragOverlay) && /*#__PURE__*/React.createElement(Icon, _extends({
    name: "rearrange",
    width: "10px",
    height: "10px",
    color: hover ? active ? "text" : "textLite" : "textNoFocus"
  }, handleProps, listeners, {
    cursor: sorting || dragging ? "grabbing" : "grab"
  })));
};
Tab.displayName = "Tab";
export default Tab;