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

netdata UI kit

"use strict";

exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _index = _interopRequireDefault(require("../../../../drops/drop/index.js"));
var _flex = _interopRequireDefault(require("../../../../templates/flex"));
var _typography = require("../../../../typography");
var _checkbox = require("../../../../checkbox");
var _search = _interopRequireDefault(require("../../../../search"));
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; }
var ColumnsMenuItem = function ColumnsMenuItem(_ref) {
  var column = _ref.column,
    dataGa = _ref.dataGa,
    disabled = _ref.disabled;
  var checked = column.getIsVisible();
  return /*#__PURE__*/_react["default"].createElement(_flex["default"], {
    alignItems: "center",
    as: _typography.ListItem,
    justifyContent: "between",
    padding: [1]
  }, /*#__PURE__*/_react["default"].createElement(_checkbox.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 = (0, _react.useState)(""),
    searchQuery = _useState[0],
    setSearchQuery = _useState[1];
  var filteredColumns = (0, _react.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 = (0, _react.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["default"].createElement(_index["default"], {
    background: "dropdown",
    height: {
      max: "400px"
    },
    onClickOutside: onClose,
    overflow: {
      vertical: "auto"
    },
    round: 1,
    target: parentRef.current,
    width: 50,
    align: {
      top: "bottom",
      right: "right"
    }
  }, /*#__PURE__*/_react["default"].createElement(_flex["default"], {
    border: {
      size: "1px",
      type: "solid",
      side: "bottom",
      color: "borderSecondary"
    },
    padding: [3, 3, 1]
  }, /*#__PURE__*/_react["default"].createElement(_typography.Text, {
    color: "textLite"
  }, "Edit columns")), /*#__PURE__*/_react["default"].createElement(_flex["default"], {
    padding: [2, 3]
  }, /*#__PURE__*/_react["default"].createElement(_search["default"], {
    placeholder: "Search columns...",
    onChange: setSearchQuery,
    value: searchQuery
  })), /*#__PURE__*/_react["default"].createElement(_flex["default"], {
    column: true,
    padding: [1, 3]
  }, filteredPinnedColumns.length ? /*#__PURE__*/_react["default"].createElement(_flex["default"], {
    border: {
      size: "1px",
      type: "solid",
      side: "bottom",
      color: "borderSecondary"
    },
    column: true
  }, filteredPinnedColumns.map(function (pinnedColumn) {
    return /*#__PURE__*/_react["default"].createElement(ColumnsMenuItem, {
      column: pinnedColumn,
      dataGa: dataGa,
      key: pinnedColumn.id
    });
  })) : null, filteredColumns.map(function (column) {
    return /*#__PURE__*/_react["default"].createElement(ColumnsMenuItem, {
      column: column,
      dataGa: dataGa,
      key: column.id
    });
  })));
  return null;
};
var _default = exports["default"] = ColumnsMenu;