@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 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["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 || (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 = (0, _react.useMemo)(function () {
    return filterColumns(columns, searchQuery);
  }, [columns, searchQuery]);
  if (filteredColumns.length === 0) return null;
  return /*#__PURE__*/_react["default"].createElement(_flex["default"], {
    column: true,
    border: showBorder ? {
      size: "1px",
      type: "solid",
      side: "bottom",
      color: "borderSecondary"
    } : undefined
  }, title && /*#__PURE__*/_react["default"].createElement(_flex["default"], {
    padding: [2, 0, 1]
  }, /*#__PURE__*/_react["default"].createElement(_typography.Text, {
    color: "textDescription",
    strong: true
  }, title)), filteredColumns.map(function (column) {
    return /*#__PURE__*/_react["default"].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 = (0, _react.useState)(""),
    searchQuery = _useState[0],
    setSearchQuery = _useState[1];
  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]
  }, /*#__PURE__*/_react["default"].createElement(ColumnsSection, {
    columns: pinnedColumns,
    searchQuery: searchQuery,
    dataGa: dataGa,
    showBorder: true
  }), columnGroups != null && columnGroups.length ? columnGroups.map(function (group) {
    return /*#__PURE__*/_react["default"].createElement(ColumnsSection, {
      key: group.id,
      columns: group.columns,
      searchQuery: searchQuery,
      dataGa: dataGa,
      title: group.name
    });
  }) : /*#__PURE__*/_react["default"].createElement(ColumnsSection, {
    columns: columns,
    searchQuery: searchQuery,
    dataGa: dataGa
  })));
  return null;
};
var _default = exports["default"] = ColumnsMenu;