@digital-ai/plugin-dai-release/dist/components/DenseScrollableTable/ScrollableTable.esm.js

Frontend functionalities for the dai-release backstage plugin

import { makeStyles, CircularProgress, Paper, TableContainer, Table, TableHead, TableRow, TableCell, TableBody } from '@material-ui/core';
import React, { useRef } from 'react';
import { useApi, appThemeApiRef } from '@backstage/core-plugin-api';
import { useObservable } from 'react-use';

const useStyles = makeStyles(() => ({
  headerStyle: {
    borderBottom: "1px solid #d5d5d5",
    borderTop: "1px solid #d5d5d5",
    fontWeight: 700,
    padding: "8px 16px"
  },
  layoutSec: {
    paddingTop: "0"
  },
  cellStyle: {
    padding: "8px 16px"
  },
  customLoadingIcon: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    height: "100%",
    width: "100%",
    position: "absolute",
    top: 0,
    left: 0,
    zIndex: 2
  },
  defaultTableContainer: {
    height: "calc(100vh - 200px)",
    overflowY: "scroll",
    borderBottom: "unset",
    overflowX: "scroll"
  },
  emptyTableContent: {
    overflowY: "scroll",
    overflowX: "scroll",
    display: "flex",
    justifyContent: "center"
  },
  darkTheme: {
    backgroundColor: "#424242"
  },
  lightTheme: {
    backgroundColor: "#FFFFFF"
  }
}));
const ScrollableTable = ({
  loading,
  loadMoreData,
  data,
  emptyContent,
  columns
}) => {
  const containerRef = useRef(null);
  const handleScroll = () => {
    if (containerRef.current) {
      const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
      if (scrollTop + clientHeight >= scrollHeight - 5) {
        loadMoreData();
      }
    }
  };
  const classes = useStyles();
  const appThemeApi = useApi(appThemeApiRef);
  const themeId = useObservable(
    appThemeApi.activeThemeId$(),
    appThemeApi.getActiveThemeId()
  );
  return /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, loading && /* @__PURE__ */ React.createElement("div", { className: classes.customLoadingIcon }, /* @__PURE__ */ React.createElement(CircularProgress, null)), /* @__PURE__ */ React.createElement(Paper, null, /* @__PURE__ */ React.createElement(
    TableContainer,
    {
      className: data.length === 0 ? classes.emptyTableContent : classes.defaultTableContainer,
      ref: containerRef,
      onScroll: handleScroll
    },
    /* @__PURE__ */ React.createElement(
      Table,
      {
        stickyHeader: true,
        "aria-label": "sticky table",
        style: { tableLayout: "fixed", minWidth: "75vw" }
      },
      /* @__PURE__ */ React.createElement(TableHead, null, /* @__PURE__ */ React.createElement(TableRow, null, columns.map((column, index) => /* @__PURE__ */ React.createElement(
        TableCell,
        {
          key: index,
          style: column.headerStyle,
          className: `${classes.headerStyle} ${themeId === "dark" ? classes.darkTheme : classes.lightTheme}`
        },
        column.label
      )))),
      /* @__PURE__ */ React.createElement(TableBody, null, data.length > 0 ? data.map((row, index) => /* @__PURE__ */ React.createElement(TableRow, { key: index }, columns.map((column, colIndex) => /* @__PURE__ */ React.createElement(
        TableCell,
        {
          key: colIndex,
          style: column.cellStyle,
          className: classes.cellStyle
        },
        column.render ? column.render(row) : "\xA0",
        " "
      )))) : /* @__PURE__ */ React.createElement(TableRow, { style: { height: "150px" } }, /* @__PURE__ */ React.createElement(
        TableCell,
        {
          colSpan: columns.length,
          style: { lineHeight: "14px" },
          className: classes.cellStyle
        },
        !loading && emptyContent
      )))
    )
  )));
};

export { ScrollableTable };
//# sourceMappingURL=ScrollableTable.esm.js.map