@netdata/netdata-ui
Version:
netdata UI kit
113 lines • 3.55 kB
JavaScript
import React, { useState, useMemo } from "react";
import Drop from "../../../../drops/drop/index.js";
import Flex from "../../../../templates/flex";
import { ListItem, Text } from "../../../../typography";
import { Checkbox } from "../../../../checkbox";
import SearchInput from "../../../../search";
var ColumnsMenuItem = function ColumnsMenuItem(_ref) {
var column = _ref.column,
dataGa = _ref.dataGa,
disabled = _ref.disabled;
var checked = column.getIsVisible();
return /*#__PURE__*/React.createElement(Flex, {
alignItems: "center",
as: ListItem,
justifyContent: "between",
padding: [1]
}, /*#__PURE__*/React.createElement(Checkbox, {
checked: checked,
disabled: disabled,
label: column.columnDef.name || column.id,
onChange: function onChange(val) {
return column.getToggleVisibilityHandler()({
target: {
checked: val
}
});
},
"data-ga": "columns-menu::click-" + (checked ? "disable" : "enable") + "-" + column.id + "-::" + dataGa
}));
};
var ColumnsMenu = function ColumnsMenu(_ref2) {
var dataGa = _ref2.dataGa,
parentRef = _ref2.parentRef,
isOpen = _ref2.isOpen,
columns = _ref2.columns,
onClose = _ref2.onClose,
pinnedColumns = _ref2.pinnedColumns;
var _useState = useState(""),
searchQuery = _useState[0],
setSearchQuery = _useState[1];
var filteredColumns = useMemo(function () {
if (!searchQuery) return columns;
return columns.filter(function (column) {
var name = column.columnDef.name || column.id;
return name.toLowerCase().includes(searchQuery.toLowerCase());
});
}, [columns, searchQuery]);
var filteredPinnedColumns = useMemo(function () {
if (!searchQuery) return pinnedColumns;
return pinnedColumns.filter(function (column) {
var name = column.columnDef.name || column.id;
return name.toLowerCase().includes(searchQuery.toLowerCase());
});
}, [pinnedColumns, searchQuery]);
if (parentRef.current && isOpen) return /*#__PURE__*/React.createElement(Drop, {
background: "dropdown",
height: {
max: "400px"
},
onClickOutside: onClose,
overflow: {
vertical: "auto"
},
round: 1,
target: parentRef.current,
width: 50,
align: {
top: "bottom",
right: "right"
}
}, /*#__PURE__*/React.createElement(Flex, {
border: {
size: "1px",
type: "solid",
side: "bottom",
color: "borderSecondary"
},
padding: [3, 3, 1]
}, /*#__PURE__*/React.createElement(Text, {
color: "textLite"
}, "Edit columns")), /*#__PURE__*/React.createElement(Flex, {
padding: [2, 3]
}, /*#__PURE__*/React.createElement(SearchInput, {
placeholder: "Search columns...",
onChange: setSearchQuery,
value: searchQuery
})), /*#__PURE__*/React.createElement(Flex, {
column: true,
padding: [1, 3]
}, filteredPinnedColumns.length ? /*#__PURE__*/React.createElement(Flex, {
border: {
size: "1px",
type: "solid",
side: "bottom",
color: "borderSecondary"
},
column: true
}, filteredPinnedColumns.map(function (pinnedColumn) {
return /*#__PURE__*/React.createElement(ColumnsMenuItem, {
column: pinnedColumn,
dataGa: dataGa,
key: pinnedColumn.id
});
})) : null, filteredColumns.map(function (column) {
return /*#__PURE__*/React.createElement(ColumnsMenuItem, {
column: column,
dataGa: dataGa,
key: column.id
});
})));
return null;
};
export default ColumnsMenu;