@netdata/charts
Version:
Netdata frontend SDK and chart utilities
145 lines • 6.7 kB
JavaScript
var _excluded = ["labelProps"];
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
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 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); }
import React, { memo } from "react";
import styled from "styled-components";
import { useAttributeValue } from "../provider";
import { Menu, Text, TextMicro, Flex, getColor, getRgbColor } from "@netdata/netdata-ui";
import checkmark_s from "@netdata/netdata-ui/dist/components/icon/assets/checkmark_s.svg";
import information from "@netdata/netdata-ui/dist/components/icon/assets/information.svg";
import Icon from "../icon";
import Tooltip from "../tooltip";
import Label from "./label";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var getBackground = function getBackground(_ref) {
var theme = _ref.theme;
var name = theme.name;
var background = name === "Dark" ? getRgbColor(["green", "netdata"], 0.3) : getRgbColor(["green", "frostee"]);
return background({
theme: theme
});
};
export var ItemContainer = styled(Flex).attrs(function (props) {
return _objectSpread({
as: "li",
role: "option",
padding: [1, 2],
gap: 1,
justifyContent: "between"
}, props);
}).withConfig({
displayName: "dropdownSingleSelect__ItemContainer",
componentId: "sc-u6ous4-0"
})(["cursor:", ";opacity:", ";align-items:", ";", " ", " ", ""], function (_ref2) {
var disabled = _ref2.disabled;
return disabled ? "default" : "pointer";
}, function (_ref3) {
var disabled = _ref3.disabled,
stale = _ref3.stale,
selected = _ref3.selected;
return !selected && (stale || disabled) ? 0.7 : 1;
}, function (_ref4) {
var alignItems = _ref4.alignItems;
return alignItems || "center";
}, function (_ref5) {
var selected = _ref5.selected,
theme = _ref5.theme;
return selected && "\n background-color: ".concat(getBackground({
theme: theme
}), ";\n ");
}, function (_ref6) {
var selected = _ref6.selected,
theme = _ref6.theme;
return !selected && "\n &:hover {\n background-color: ".concat(getColor("borderSecondary")({
theme: theme
}), ";\n }\n ");
}, function (_ref7) {
var justDesc = _ref7.justDesc,
theme = _ref7.theme;
return justDesc && "\n pointer-events: none;\n border-top: 1px solid ".concat(getColor("borderSecondary")({
theme: theme
}), ";\n ");
});
export var Item = function Item(_ref8) {
var selectedValue = _ref8.value,
item = _ref8.item,
onItemClick = _ref8.onItemClick,
itemProps = _ref8.itemProps;
var value = item.value,
label = item.label,
description = item.description,
_item$justDesc = item.justDesc,
justDesc = _item$justDesc === void 0 ? false : _item$justDesc;
var selected = selectedValue === value;
return /*#__PURE__*/_jsx(ItemContainer, _objectSpread(_objectSpread({}, itemProps), {}, {
disabled: selected,
selected: selected,
onClick: function onClick() {
return onItemClick(value);
},
justDesc: justDesc,
children: /*#__PURE__*/_jsxs(Flex, {
column: justDesc,
padding: [0, 1],
alignItems: "start",
width: "100%",
justifyContent: "between",
children: [!!label && /*#__PURE__*/_jsxs(Text, {
children: [label, selected && /*#__PURE__*/_jsx(Icon, {
margin: [-0.5, 2, -0.5, 0],
width: "14px",
height: "14px",
color: "primary",
svg: checkmark_s
})]
}), !!description && (justDesc ? /*#__PURE__*/_jsx(TextMicro, {
color: "textLite",
children: description
}) : /*#__PURE__*/_jsx(Tooltip, {
content: description,
zIndex: 9999999,
children: /*#__PURE__*/_jsx("div", {
children: /*#__PURE__*/_jsx(Icon, {
width: "14px",
height: "14px",
color: "textLite",
svg: information
})
})
}))]
})
}));
};
var DropdownSingleSelect = function DropdownSingleSelect(_ref9) {
var labelProps = _ref9.labelProps,
rest = _objectWithoutProperties(_ref9, _excluded);
var id = useAttributeValue("id");
return /*#__PURE__*/_jsx(Menu, _objectSpread(_objectSpread(_objectSpread({}, rest), {}, {
Item: Item,
dropProps: {
align: {
top: "bottom",
left: "left"
},
"data-toolbox": id,
width: "460px"
},
dropdownProps: {
padding: [0, 0, 2, 0],
height: {
max: "60vh"
}
}
}, rest), {}, {
children: /*#__PURE__*/_jsx(Label, _objectSpread(_objectSpread({}, labelProps), {}, {
"data-value": "".concat(rest.value || "No selection")
}))
}));
};
export default /*#__PURE__*/memo(DropdownSingleSelect);