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

Reusable react components for payment kit v2

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _jsxRuntime = require("react/jsx-runtime");
var _react = _interopRequireDefault(require("react"));
var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
var _Datatable = _interopRequireDefault(require("@arcblock/ux/lib/Datatable"));
var _context = require("@arcblock/ux/lib/Locale/context");
var _system = require("@mui/system");
var _mobile = require("../hooks/mobile");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function EmptyStub() {
  return null;
}
const Table = _react.default.memo(({
  options,
  columns,
  toolbar = true,
  footer = true,
  hasRowLink = false,
  emptyNodeText = "",
  bordered = true,
  ...rest
}) => {
  const {
    locale,
    t
  } = (0, _context.useLocaleContext)();
  const {
    isMobile
  } = (0, _mobile.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__ */(0, _jsxRuntime.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__ */(0, _jsxRuntime.jsx)(_Empty.default, {
      children: emptyNodeText || t("empty.records")
    }),
    ...rest,
    components,
    hasRowLink,
    isMobile,
    bordered
  });
});
const Wrapped = (0, _system.styled)(_Datatable.default)`
  ${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;
      }
    }
    ` : ""}
  }
`;
module.exports = Table;