@netdata/charts
Version:
Netdata frontend SDK and chart utilities
198 lines (197 loc) • 9.1 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.checkboxesDefaultProps = exports.ItemContainer = exports.CheckboxesContainer = void 0;
var _react = _interopRequireDefault(require("react"));
var _noop = _interopRequireDefault(require("lodash/noop"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _netdataUi = require("@netdata/netdata-ui");
var _shortener = _interopRequireDefault(require("../../helpers/shortener"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["item", "onItemClick", "itemProps"],
_excluded2 = ["value", "disabled", "onClick", "label", "selected", "excluded", "indeterminate", "textColor", "iconName", "count", "actualCount", "pill", "level", "stale"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
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); }
var capitalize = function capitalize(s) {
return s ? s[0].toUpperCase() + s.slice(1) : "Unknown";
};
var defaultItemsProps = {
head: {
textColor: "textLite"
},
row: {
textColor: "text"
}
};
var getBackground = function getBackground(_ref) {
var theme = _ref.theme;
var name = theme.name;
var background = name === "Dark" ? (0, _netdataUi.getRgbColor)(["green", "green20"]) : (0, _netdataUi.getRgbColor)(["green", "green170"]);
return background({
theme: theme
});
};
var ItemContainer = exports.ItemContainer = (0, _styledComponents["default"])(_netdataUi.Flex).attrs(function (props) {
return _objectSpread({
as: "li",
role: "option",
padding: [1, 2],
gap: 1,
justifyContent: "between",
width: "100%"
}, props);
}).withConfig({
displayName: "checkboxes__ItemContainer",
componentId: "sc-qdo3r-0"
})(["cursor:", ";opacity:", ";align-items:", ";", " ", ""], function (_ref2) {
var disabled = _ref2.disabled;
return disabled ? "default" : "pointer";
}, function (_ref3) {
var stale = _ref3.stale,
disabled = _ref3.disabled,
selected = _ref3.selected;
return (stale || disabled) && !selected ? 0.6 : 1;
}, function (_ref4) {
var alignItems = _ref4.alignItems;
return alignItems || "center";
}, function (_ref5) {
var multi = _ref5.multi,
selected = _ref5.selected,
theme = _ref5.theme;
return !multi && selected && "\n background-color: ".concat(getBackground({
theme: theme
}), ";\n ");
}, function (_ref6) {
var multi = _ref6.multi,
selected = _ref6.selected,
disabled = _ref6.disabled,
theme = _ref6.theme;
return !multi && !selected && !disabled && "\n &:hover {\n background-color: ".concat((0, _netdataUi.getColor)("secondaryHighlight")({
theme: theme
}), ";\n }\n ");
});
var DefaultItem = function DefaultItem(_ref7) {
var item = _ref7.item,
onItemClick = _ref7.onItemClick,
itemProps = _ref7.itemProps,
rest = _objectWithoutProperties(_ref7, _excluded);
var value = item.value,
disabled = item.disabled,
onClick = item.onClick,
label = item.label,
selected = item.selected,
excluded = item.excluded,
indeterminate = item.indeterminate,
textColor = item.textColor,
iconName = item.iconName,
count = item.count,
actualCount = item.actualCount,
pill = item.pill,
_item$level = item.level,
level = _item$level === void 0 ? 0 : _item$level,
stale = item.stale,
restItem = _objectWithoutProperties(item, _excluded2);
var capitalized = itemProps.capitalized;
var multi = itemProps.multi;
var isDisabled = disabled || !multi && selected;
var onSelect = function onSelect(event) {
if (disabled) return;
if (onClick) onClick(event);
onItemClick({
value: value,
label: label,
checked: !selected,
item: item
});
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ItemContainer, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
"aria-selected": selected,
selected: selected,
disabled: isDisabled,
stale: count === 0 || count === "0" || stale || excluded
}, restItem), rest), itemProps), {}, {
"data-testid": "".concat(itemProps.testIdPrefix, "-filters-item"),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.Flex, {
gap: 2,
alignItems: "center",
padding: [0, 0, 0, level * 4],
width: "100%",
overflow: "hidden",
children: multi ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.Checkbox, {
"data-testid": "".concat(itemProps.testIdPrefix, "-filters-checkbox-").concat(label),
checked: selected,
disabled: isDisabled,
indeterminate: indeterminate,
onChange: onSelect,
label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.Flex, {
gap: 1,
alignItems: "center",
width: "100%",
children: [iconName && /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.Icon, {
name: iconName,
size: "small",
color: "textLite"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_shortener["default"], {
Component: _netdataUi.TextSmall,
text: typeof label === "string" && capitalized ? capitalize(label) : label.toString(),
color: textColor
})]
})
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.Flex, {
flex: true,
gap: 1,
padding: [0, 1],
alignItems: "center",
onClick: selected ? _noop["default"] : onSelect,
"data-testid": "".concat(itemProps.testIdPrefix, "-filters-item-").concat(label),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_shortener["default"], {
Component: _netdataUi.TextSmall,
text: typeof label === "string" && capitalized ? capitalize(label) : label.toString(),
color: textColor
})
})
}), (!isNaN(count) || /%/.test(count || "") || pill) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.Pill, {
flavour: "neutral",
hollow: true,
"data-testid": "".concat(itemProps.testIdPrefix, "-filters-").concat(label, "-count"),
size: "small",
children: [!!actualCount && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_netdataUi.TextSmall, {
children: [actualCount, " \u2283\xA0"]
}), (pill || count).toString()]
})]
}));
};
var CheckboxesContainer = exports.CheckboxesContainer = (0, _styledComponents["default"])(_netdataUi.MenuDropdown).attrs(function (props) {
return _objectSpread({
background: "transparent",
hideShadow: true,
width: {
max: "600px"
},
overflow: "auto"
}, props);
}).withConfig({
displayName: "checkboxes__CheckboxesContainer",
componentId: "sc-qdo3r-1"
})(["-webkit-user-select:none;-ms-user-select:none;user-select:none;"]);
var identity = function identity(i) {
return i;
};
var checkboxesDefaultProps = exports.checkboxesDefaultProps = {
itemProps: {
padding: [1, 0.5],
multi: true
},
itemsProps: defaultItemsProps,
Item: DefaultItem,
getValue: identity,
getLabel: identity
};