@netdata/netdata-ui
Version:
netdata UI kit
134 lines (133 loc) • 6.45 kB
JavaScript
"use strict";
exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _reactVirtual = require("@tanstack/react-virtual");
var _flex = _interopRequireDefault(require("../../templates/flex"));
var _search = _interopRequireDefault(require("../../search"));
var _box = _interopRequireDefault(require("../../templates/box"));
var _utils = require("../../../utils");
var _excluded = ["hideShadow", "itemProps", "items", "onItemClick", "dropTitle", "dropTitlePadding", "Item", "Footer", "value", "hasSearch", "searchMargin", "gap", "estimateSize", "close", "containerRef", "ref"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
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 Container = (0, _styledComponents["default"])(_flex["default"]).withConfig({
displayName: "dropdown__Container",
componentId: "sc-1nyt35p-0"
})(["", " list-style-type:none;"], function (_ref) {
var hideShadow = _ref.hideShadow;
return !hideShadow && "box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);";
});
var defaultEstimateSize = function defaultEstimateSize() {
return 28;
};
var Dropdown = function Dropdown(_ref2) {
var hideShadow = _ref2.hideShadow,
itemProps = _ref2.itemProps,
items = _ref2.items,
onItemClick = _ref2.onItemClick,
dropTitle = _ref2.dropTitle,
_ref2$dropTitlePaddin = _ref2.dropTitlePadding,
dropTitlePadding = _ref2$dropTitlePaddin === void 0 ? [3, 3, 0] : _ref2$dropTitlePaddin,
Item = _ref2.Item,
Footer = _ref2.Footer,
value = _ref2.value,
hasSearch = _ref2.hasSearch,
_ref2$searchMargin = _ref2.searchMargin,
searchMargin = _ref2$searchMargin === void 0 ? [4] : _ref2$searchMargin,
_ref2$gap = _ref2.gap,
gap = _ref2$gap === void 0 ? 0 : _ref2$gap,
_ref2$estimateSize = _ref2.estimateSize,
estimateSize = _ref2$estimateSize === void 0 ? defaultEstimateSize : _ref2$estimateSize,
close = _ref2.close,
containerRef = _ref2.containerRef,
forwardedRef = _ref2.ref,
rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
var _useState = (0, _react.useState)(""),
searchValue = _useState[0],
setSearchValue = _useState[1];
var filteredItems = (0, _react.useMemo)(function () {
if (!searchValue) return items;
var searchLowerCase = searchValue.toLowerCase();
return items.filter(function (_ref3) {
var label = _ref3.label,
val = _ref3.value;
if (typeof label === "string" && label.toLowerCase().includes(searchLowerCase)) return true;
if (!label && typeof val === "string" && val.toLowerCase().includes(searchLowerCase)) return true;
return false;
});
}, [items, searchValue]);
var ref = (0, _react.useRef)();
var rowVirtualizer = (0, _reactVirtual.useVirtualizer)({
count: filteredItems.length,
getScrollElement: function getScrollElement() {
return ref.current;
},
scrollOffsetFn: function scrollOffsetFn(event) {
return event ? event.target.scrollTop - ref.current.offsetTop : 0;
},
overscan: 3,
enableSmoothScroll: false,
estimateSize: estimateSize
});
return /*#__PURE__*/_react["default"].createElement(Container, _extends({
as: "ul",
role: "listbox",
background: "dropdown",
hideShadow: hideShadow,
padding: [0],
margin: [1, 0],
column: true,
tabindex: "-1",
width: "auto",
ref: containerRef
}, rest), dropTitle && /*#__PURE__*/_react["default"].createElement(_flex["default"], {
padding: dropTitlePadding
}, dropTitle), hasSearch && /*#__PURE__*/_react["default"].createElement(_box["default"], {
margin: searchMargin
}, /*#__PURE__*/_react["default"].createElement(_search["default"], {
"data-testid": "dropdown-search",
placeholder: "Search",
onChange: setSearchValue
})), /*#__PURE__*/_react["default"].createElement("div", {
ref: (0, _utils.mergeRefs)(ref, forwardedRef),
style: {
height: "100%",
overflow: "auto"
}
}, /*#__PURE__*/_react["default"].createElement("div", {
style: {
minHeight: rowVirtualizer.getTotalSize() + "px",
width: "100%",
position: "relative"
}
}, rowVirtualizer.getVirtualItems().map(function (virtualRow) {
return /*#__PURE__*/_react["default"].createElement("div", {
key: virtualRow.key,
style: {
position: "absolute",
top: 0,
left: 0,
width: "100%",
transform: "translateY(" + virtualRow.start + "px)",
padding: gap * 2,
overflow: "hidden"
},
"data-index": virtualRow.index,
ref: rowVirtualizer.measureElement
}, /*#__PURE__*/_react["default"].createElement(Item, {
item: filteredItems[virtualRow.index],
index: virtualRow.index,
itemProps: itemProps,
value: value,
onItemClick: onItemClick,
close: close
}));
}))), Footer && /*#__PURE__*/_react["default"].createElement(Footer, {
close: close
}));
};
var _default = exports["default"] = Dropdown;