@netdata/netdata-ui/dist/es6/components/drops/menu/dropdownItem.js

netdata UI kit

var _excluded = ["value", "label", "icon", "reverse", "disabled", "onClick"],
  _excluded2 = ["item", "value", "onItemClick", "index", "style"];
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); }
import React from "react";
import styled from "styled-components";
import { getColor, getRgbColor } from "../../../theme";
import Flex from "../../templates/flex";
import { TextSmall } from "../../typography";
export var ItemContainer = styled(Flex).attrs(function (props) {
  return _extends({
    as: "li",
    role: "option",
    padding: [1, 4]
  }, props);
}).withConfig({
  displayName: "dropdownItem__ItemContainer",
  componentId: "sc-vjov6x-0"
})(["cursor:", ";opacity:", ";pointer-events:", ";&:hover{background-color:", ";}", " ", ""], function (_ref) {
  var cursor = _ref.cursor;
  return cursor != null ? cursor : "pointer";
}, function (_ref2) {
  var disabled = _ref2.disabled,
    selected = _ref2.selected;
  return selected ? 0.9 : disabled ? 0.4 : 1;
}, function (_ref3) {
  var disabled = _ref3.disabled;
  return disabled ? "none" : "auto";
}, function (props) {
  return getColor("borderSecondary")(props);
}, function (_ref4) {
  var justDesc = _ref4.justDesc,
    theme = _ref4.theme;
  return justDesc && "\n    pointer-events: none;\n    border-top: 1px solid " + getColor("borderSecondary")({
    theme: theme
  }) + ";\n    & > * {\n      color: " + getColor("textLite")({
    theme: theme
  }) + "\n    }\n  ";
}, function (_ref5) {
  var selected = _ref5.selected,
    theme = _ref5.theme;
  return selected && "\n    background-color: " + (theme.name === "Dark" ? getRgbColor(["green", "netdata"], 0.3)({
    theme: theme
  }) : getRgbColor(["green", "frostee"])({
    theme: theme
  })) + "\n  ";
});
var DropdownItem = function DropdownItem(_ref6) {
  var _ref6$item = _ref6.item,
    value = _ref6$item.value,
    label = _ref6$item.label,
    icon = _ref6$item.icon,
    reverse = _ref6$item.reverse,
    disabled = _ref6$item.disabled,
    onClick = _ref6$item.onClick,
    restItem = _objectWithoutPropertiesLoose(_ref6$item, _excluded),
    selectedValue = _ref6.value,
    onItemClick = _ref6.onItemClick,
    index = _ref6.index,
    style = _ref6.style,
    rest = _objectWithoutPropertiesLoose(_ref6, _excluded2);
  var selected = selectedValue === value;
  var onSelect = function onSelect(event) {
    if (onClick) onClick(event);
    onItemClick(value);
  };
  return /*#__PURE__*/React.createElement(ItemContainer, _extends({
    "data-index": index,
    "aria-selected": selected,
    disabled: disabled,
    selected: selected,
    onClick: onSelect
  }, restItem, rest, {
    style: style
  }), reverse && /*#__PURE__*/React.createElement(TextSmall, null, label), icon, !reverse && /*#__PURE__*/React.createElement(TextSmall, null, label));
};
export default DropdownItem;