@netdata/netdata-ui/dist/es6/components/table/header/actions/columnVisibility/columnsMenu.js

netdata UI kit

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 filterColumns = function filterColumns(columns, searchQuery) {
  if (!searchQuery) return columns;
  return columns.filter(function (column) {
    var name = column.columnDef.name || column.id;
    return name.toLowerCase().includes(searchQuery.toLowerCase());
  });
};
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 || (typeof column.columnDef.headerString === "function" ? column.columnDef.headerString() : column.columnDef.headerString) || column.id,
    onChange: function onChange(val) {
      return column.getToggleVisibilityHandler()({
        target: {
          checked: val
        }
      });
    },
    "data-ga": "columns-menu::click-" + (checked ? "disable" : "enable") + "-" + column.id + "-::" + dataGa
  }));
};
var ColumnsSection = function ColumnsSection(_ref2) {
  var columns = _ref2.columns,
    searchQuery = _ref2.searchQuery,
    dataGa = _ref2.dataGa,
    title = _ref2.title,
    showBorder = _ref2.showBorder;
  var filteredColumns = useMemo(function () {
    return filterColumns(columns, searchQuery);
  }, [columns, searchQuery]);
  if (filteredColumns.length === 0) return null;
  return /*#__PURE__*/React.createElement(Flex, {
    column: true,
    border: showBorder ? {
      size: "1px",
      type: "solid",
      side: "bottom",
      color: "borderSecondary"
    } : undefined
  }, title && /*#__PURE__*/React.createElement(Flex, {
    padding: [2, 0, 1]
  }, /*#__PURE__*/React.createElement(Text, {
    color: "textDescription",
    strong: true
  }, title)), filteredColumns.map(function (column) {
    return /*#__PURE__*/React.createElement(ColumnsMenuItem, {
      column: column,
      dataGa: dataGa,
      key: column.id
    });
  }));
};
var ColumnsMenu = function ColumnsMenu(_ref3) {
  var dataGa = _ref3.dataGa,
    parentRef = _ref3.parentRef,
    isOpen = _ref3.isOpen,
    columns = _ref3.columns,
    columnGroups = _ref3.columnGroups,
    onClose = _ref3.onClose,
    pinnedColumns = _ref3.pinnedColumns;
  var _useState = useState(""),
    searchQuery = _useState[0],
    setSearchQuery = _useState[1];
  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]
  }, /*#__PURE__*/React.createElement(ColumnsSection, {
    columns: pinnedColumns,
    searchQuery: searchQuery,
    dataGa: dataGa,
    showBorder: true
  }), columnGroups != null && columnGroups.length ? columnGroups.map(function (group) {
    return /*#__PURE__*/React.createElement(ColumnsSection, {
      key: group.id,
      columns: group.columns,
      searchQuery: searchQuery,
      dataGa: dataGa,
      title: group.name
    });
  }) : /*#__PURE__*/React.createElement(ColumnsSection, {
    columns: columns,
    searchQuery: searchQuery,
    dataGa: dataGa
  })));
  return null;
};
export default ColumnsMenu;