@blocklet/payment-react/es/components/table.js

Reusable react components for payment kit v2

import { jsx } from "react/jsx-runtime";
import React from "react";
import Empty from "@arcblock/ux/lib/Empty";
import Datatable from "@arcblock/ux/lib/Datatable";
import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
import { styled } from "@mui/system";
import { useMobile } from "../hooks/mobile.js";
function EmptyStub() {
  return null;
}
const Table = React.memo(
  ({
    options,
    columns,
    toolbar = true,
    footer = true,
    hasRowLink = false,
    emptyNodeText = "",
    bordered = true,
    ...rest
  }) => {
    const { locale, t } = useLocaleContext();
    const { isMobile } = useMobile();
    const defaultOptions = {
      print: false,
      download: false,
      filter: false,
      selectableRows: "none",
      rowsPerPage: isMobile ? 5 : 10,
      rowsPerPageOptions: [5, 10, 20, 50, 100],
      searchDebounceTime: 300,
      tableBodyHeight: "100%",
      loading: true
    };
    const components = {};
    if (!toolbar) {
      components.TableToolbar = EmptyStub;
    }
    if (!footer) {
      components.TableFooter = EmptyStub;
    }
    return /* @__PURE__ */ jsx(
      Wrapped,
      {
        locale,
        options: { ...defaultOptions, ...options },
        columns: columns.map((x) => {
          x.options = x.options || {};
          x.options.filter = x.options.filter || false;
          x.options.sort = x.options.sort || false;
          return x;
        }),
        emptyNode: /* @__PURE__ */ jsx(Empty, { children: emptyNodeText || t("empty.records") }),
        ...rest,
        components,
        hasRowLink,
        isMobile,
        bordered
      }
    );
  }
);
const Wrapped = styled(Datatable)`
  ${(props) => props?.hasRowLink ? `.MuiTableCell-root {
    font-size: 0.875rem !important;
  }` : ""}
  .MuiPaper-root {
    border-radius: ${(props) => props?.bordered ? "8px" : "0"};
    overflow: hidden;
  }
  table.MuiTable-root {
    ${(props) => props?.bordered ? `
      outline: 1px solid;
      outline-color: ${props.theme.palette.divider};
      border-radius: ${2 * props.theme.shape.borderRadius}px;
    ` : ""}
    overflow: hidden;
  }
  [class*='MUIDataTable-responsiveBase'] {
    ${(props) => props?.bordered ? `
      outline: 1px solid;
      outline-color: ${props.theme.palette.divider};
      border-radius: ${2 * props.theme.shape.borderRadius}px;
    ` : ""}
  }

  th.MuiTableCell-head {
    padding: 8px 16px 8px 16px;
    text-transform: inherit;
    background: ${({ theme }) => theme.palette.grey[50]};
    border-bottom: none;
    &:first-of-type {
      ${(props) => props?.bordered ? "border-top-left-radius: 8px;" : ""}
      padding-left: 20px;
    }
    &:last-of-type {
      ${(props) => props?.bordered ? "border-top-right-radius: 8px;" : ""}
    }
  }

  tr.MuiTableRow-root:not(.MuiTableRow-footer):hover {
    background: ${({ theme }) => theme.palette.grey[100]};
  }
  tr.MuiTableRow-root:last-of-type td:first-of-type {
    ${(props) => props?.bordered ? "border-bottom-left-radius: 8px;" : ""}
  }

  tr.MuiTableRow-root:last-of-type td:last-of-type {
    ${(props) => props?.bordered ? "border-bottom-right-radius: 8px;" : ""}
  }

  tr.MuiTableRow-root:nth-of-type(even) {
    background: ${({ theme }) => theme.palette.grey[50]};
  }
  td.MuiTableCell-root {
    border-bottom: none;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 16px;
    padding-right: 16px;
    &:first-of-type {
      padding-left: 20px;
    }
    &.MuiTableCell-footer {
      border: none;
    }
  }

  .datatable-footer {
    .MuiTableRow-root.MuiTableRow-footer {
      border: none;
    }
    table.MuiTable-root {
      outline: none;
      overflow: hidden;
    }
    .MuiTablePagination-input {
      background: none;
    }
    div.MuiSelect-select {
      padding: 0 24px 0 0;
    }
  }

  th a,
  td a {
    text-decoration: none;
    display: block;
    color: inherit;
    &:first-of-type {
      padding-left: 0;
    }
  }

  > div {
    overflow: auto;
  }
  .custom-toobar-title-inner {
    display: flex;
    align-items: center;
  }
  @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
    th a,
    td a {
      text-decoration: none;
      display: block;
      color: inherit;
      padding-top: 0;
      padding-bottom: 0;
      padding-right: 0;
    }
    tr.MuiTableRow-root {
      border: none;
      padding: 20px;
      display: block;
    }
    td.MuiTableCell-root:first-of-type {
      padding-left: 0;
      margin-top: 0;
    }
    td.MuiTableCell-root {
      margin: 0;
      margin-top: 8px;
      align-items: center;
      padding: 0;
      flex-wrap: wrap;
      flex-direction: ${({ mobileTDFlexDirection = "column" }) => mobileTDFlexDirection || "row"};
      align-items: ${({ mobileTDFlexDirection = "column" }) => mobileTDFlexDirection === "column" ? "flex-start" : "center"};
      justify-content: ${({ mobileTDFlexDirection = "column" }) => mobileTDFlexDirection === "column" ? "flex-start" : "space-between"};
    }
    td.MuiTableCell-root > div {
      margin-bottom: 4px;
    }
    .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > td.MuiTableCell-root {
      display: flex;
      flex-direction: ${({ mobileTDFlexDirection = "column" }) => mobileTDFlexDirection || "row"};
      align-items: flex-start;
      justify-content: ${({ mobileTDFlexDirection = "column" }) => mobileTDFlexDirection === "row" ? "space-between" : "flex-start"};
      flex-wrap: ${({ mobileTDFlexDirection = "column" }) => mobileTDFlexDirection === "row" ? "nowrap" : "wrap"};
      word-break: break-all;
      &.datatables-noprint {
        justify-content: center;
      }
    }
    [class*='MUIDataTable-responsiveBase'] tr:not([class*='responsiveSimple']) td.MuiTableCell-body > div {
      width: inherit;
    }
    ${({ mobileTDFlexDirection }) => mobileTDFlexDirection === "row" ? `
    .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > td.MuiTableCell-root {
      align-items: center;
      padding: 4px 0;
      > div {
        width: fit-content;
        flex: inherit;
      }
    }
    ` : ""}
  }
`;
export default Table;