@wulperstudio/cms/organisms/TableAlter/TableAlter.js

Wulper Studio Library Components CMS

import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import React from 'react';
import { useTable, useRowSelect } from 'react-table';
import { Grid } from '@mui/material';
import { TableBody } from './components/TableBody';
import { TableCheckBox } from './components/TableCheckBox';
import { TableHead } from './components/TableHead';
import { Table, WrapperTable } from './styled';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// eslint-disable-next-line max-len
var HeaderComponent = function HeaderComponent(_ref) {
  var getToggleAllRowsSelectedProps = _ref.getToggleAllRowsSelectedProps;
  return /*#__PURE__*/_jsx(Grid, {
    container: true,
    justifyContent: "center",
    children: /*#__PURE__*/_jsx(TableCheckBox, Object.assign({}, getToggleAllRowsSelectedProps()))
  });
};
var CellComponent = function CellComponent(_ref2) {
  var row = _ref2.row;
  return /*#__PURE__*/_jsx(Grid, {
    container: true,
    justifyContent: "center",
    onClick: function onClick(e) {
      return e.stopPropagation();
    },
    children: /*#__PURE__*/_jsx(TableCheckBox, Object.assign({}, row == null ? void 0 : row.getToggleRowSelectedProps()))
  });
};
export var TableAlter = function TableAlter(_ref3) {
  var columns = _ref3.columns,
    data = _ref3.data,
    _ref3$onScroll = _ref3.onScroll,
    onScroll = _ref3$onScroll === void 0 ? function () {} : _ref3$onScroll,
    _ref3$showCheckbox = _ref3.showCheckbox,
    showCheckbox = _ref3$showCheckbox === void 0 ? false : _ref3$showCheckbox,
    _ref3$onClickRow = _ref3.onClickRow,
    onClickRow = _ref3$onClickRow === void 0 ? function () {} : _ref3$onClickRow,
    _ref3$selectedRows = _ref3.selectedRows,
    selectedRows = _ref3$selectedRows === void 0 ? function () {} : _ref3$selectedRows,
    _ref3$loading = _ref3.loading,
    loading = _ref3$loading === void 0 ? false : _ref3$loading;
  var _useTable = useTable({
      columns: columns,
      data: data
    }, useRowSelect, function (hooks) {
      hooks.visibleColumns.push(function (chkColumns) {
        return !showCheckbox ? _toConsumableArray(chkColumns) : [{
          id: 'selection',
          Header: HeaderComponent,
          Cell: CellComponent
        }].concat(_toConsumableArray(chkColumns));
      });
    }),
    getTableProps = _useTable.getTableProps,
    getTableBodyProps = _useTable.getTableBodyProps,
    headerGroups = _useTable.headerGroups,
    prepareRow = _useTable.prepareRow,
    rows = _useTable.rows,
    selectedFlatRows = _useTable.selectedFlatRows,
    selectedRowIds = _useTable.state.selectedRowIds;
  var TableRef = React.useRef(null);
  var handleScroll = function handleScroll() {
    var TableEl = TableRef == null ? void 0 : TableRef.current;
    if (!(TableEl != null && TableEl.scrollHeight) || !(TableEl != null && TableEl.offsetHeight)) return;
    if ((TableEl == null ? void 0 : TableEl.scrollTop) === TableEl.scrollHeight - TableEl.offsetHeight) {
      onScroll();
    }
  };
  React.useEffect(function () {
    selectedRows(selectedFlatRows, selectedRowIds);
  }, [selectedFlatRows, selectedRowIds]);
  return /*#__PURE__*/_jsx(WrapperTable, {
    ref: TableRef,
    onScroll: handleScroll,
    isLoading: loading,
    children: /*#__PURE__*/_jsxs(Table, Object.assign({
      stickyHeader: true
    }, getTableProps(), {
      children: [/*#__PURE__*/_jsx(TableHead, {
        headerGroups: headerGroups
      }), /*#__PURE__*/_jsx(TableBody, {
        rows: rows,
        getTableBodyProps: getTableBodyProps,
        prepareRow: prepareRow,
        onClickRow: onClickRow
      })]
    }))
  });
};