@appbuckets/react-ui/esm/RxTable/RxTable.js

Just Another React UI Framework

import { __rest, __read, __assign } from 'tslib';
import * as React from 'react';
import clsx from 'clsx';
import { useElementType } from '@appbuckets/react-ui-core';
import { useElementSize } from '../hooks/useElementSize.js';
import '../BucketTheme/BucketTheme.js';
import { useWithDefaultProps } from '../BucketTheme/BucketContext.js';
import { RxTableProvider } from './RxTable.context.js';
import { useRxTableFactory } from './RxTable.factory.js';
import Table from '../Table/Table.js';
import BodyRow from './components/BodyRow.js';
import FiltersRow from './components/FiltersRow.js';
import FooterRow from './components/FooterRow.js';
import HeaderRow from './components/HeaderRow.js';
import StateDependentBodyRow from './components/StateDependentBodyRow.js';
import RxTableBodyCell from './defaults/RxTableBodyCell.js';
import RxTableBodyRow from './defaults/RxTableBodyRow.js';
import RxTableEmptyContent from './defaults/RxTableEmptyContent.js';
import RxTableFooterCell from './defaults/RxTableFooterCell.js';
import RxTableError from './defaults/RxTableError.js';
import RxTableHeaderCell from './defaults/RxTableHeaderCell.js';
import RxTableLoader from './defaults/RxTableLoader.js';

/* --------
 * Component Render
 * -------- */
var RxTable = function (receivedProps) {
  var props = useWithDefaultProps('rxTable', receivedProps);
  props.as;
  var userDefinedClasses = props.classes,
    className = props.className,
    columns = props.columns,
    userDefinedComponents = props.Components,
    compressed = props.compressed,
    data = props.data,
    defaultData = props.defaultData,
    userDefinedDefaultReverseSorting = props.defaultReverseSorting,
    userDefinedSelectedData = props.defaultSelectedData,
    userDefinedDefaultSort = props.defaultSort,
    disableHeader = props.disableHeader,
    filterLogic = props.filterLogic,
    userDefinedGetRowKey = props.getRowKey,
    initiallyLoading = props.initiallyLoading,
    loaderProps = props.loaderProps,
    maximumWidth = props.maximumWidth,
    minimumWidth = props.minimumWidth,
    noFilteredDataEmptyContentProps = props.noFilteredDataEmptyContentProps,
    noDataEmptyContentProps = props.noDataEmptyContentProps,
    onRowClick = props.onRowClick,
    onSortChange = props.onSortChange,
    onSelectedDataChange = props.onSelectedDataChange,
    reloadDependency = props.reloadDependency,
    reloadSilently = props.reloadSilently,
    userDefinedReverseSorting = props.reverseSorting,
    selectable = props.selectable,
    selectColumnProps = props.selectColumnProps,
    userDefinedSort = props.sort,
    subtractToWidth = props.subtractToWidth,
    userDefinedStyles = props.styles,
    userDefinedWidth = props.width,
    rest = __rest(props, [
      'as',
      'classes',
      'className',
      'columns',
      'Components',
      'compressed',
      'data',
      'defaultData',
      'defaultReverseSorting',
      'defaultSelectedData',
      'defaultSort',
      'disableHeader',
      'filterLogic',
      'getRowKey',
      'initiallyLoading',
      'loaderProps',
      'maximumWidth',
      'minimumWidth',
      'noFilteredDataEmptyContentProps',
      'noDataEmptyContentProps',
      'onRowClick',
      'onSortChange',
      'onSelectedDataChange',
      'reloadDependency',
      'reloadSilently',
      'reverseSorting',
      'selectable',
      'selectColumnProps',
      'sort',
      'subtractToWidth',
      'styles',
      'width',
    ]);
  // ----
  // Get the Right Element Type
  // ----
  var ElementType = useElementType(RxTable, receivedProps, props);
  // ----
  // Initialize the Width Detector
  // ----
  var _a = __read(
      useElementSize({
        useDetectorWidthOnly: true,
        useDetectorHeightOnly: true,
        fixedWidth: userDefinedWidth,
        maximumWidth: maximumWidth,
        minimumWidth: minimumWidth,
        subtractToWidth: subtractToWidth,
      }),
      2
    ),
    widthDetector = _a[0],
    width = _a[1].width;
  // ----
  // Load RxTableProps
  // ----
  var rxTableProps = useRxTableFactory({
    classes: userDefinedClasses,
    columns: columns,
    data: data,
    defaultData: defaultData,
    defaultLoading: initiallyLoading,
    defaultReverseSorting: userDefinedDefaultReverseSorting,
    defaultSelectedData: userDefinedSelectedData,
    defaultSort: userDefinedDefaultSort,
    filterLogic: filterLogic,
    getRowKey: userDefinedGetRowKey,
    onRowClick: onRowClick,
    onSelectedDataChange: onSelectedDataChange,
    onSortChange: onSortChange,
    reloadDependency: reloadDependency,
    reloadSilently: reloadSilently,
    reverseSorting: userDefinedReverseSorting,
    selectable: selectable,
    selectColumnProps: selectColumnProps,
    sort: userDefinedSort,
    styles: userDefinedStyles,
    width: width,
  });
  // ----
  // Build Table ClassList
  // ----
  var classes = clsx(
    rxTableProps.layout.hasFilterRow && 'filterable',
    'rx-table',
    compressed && 'compressed',
    className
  );
  // ----
  // Define RxTable Components
  // ----
  var Components = __assign(
    {
      Body: Table.Body,
      BodyCell: RxTableBodyCell,
      BodyRow: RxTableBodyRow,
      BodyWrapper: React.Fragment,
      Error: RxTableError,
      ErrorRow: Table.Row,
      ErrorCell: Table.Cell,
      Footer: Table.Footer,
      FooterCell: RxTableFooterCell,
      FooterRow: Table.Row,
      FooterWrapper: React.Fragment,
      Header: Table.Header,
      HeaderCell: RxTableHeaderCell,
      HeaderRow: Table.Row,
      HeaderWrapper: React.Fragment,
      Loader: RxTableLoader,
      LoaderRow: Table.Row,
      LoaderCell: Table.Cell,
      NoContent: RxTableEmptyContent,
      NoContentCell: Table.Cell,
      NoContentRow: Table.Row,
    },
    userDefinedComponents
  );
  // ----
  // Context Building
  // ----
  var rxTableContext = __assign(__assign({}, rxTableProps), {
    Components: Components,
    loaderProps: loaderProps,
    noFilteredDataEmptyContentProps: noFilteredDataEmptyContentProps,
    noDataEmptyContentProps: noDataEmptyContentProps,
  });
  // ----
  // Fragments could not have properties extra from key
  // ----
  var headerWrapperProps =
    Components.HeaderWrapper !== React.Fragment
      ? {
          className: rxTableProps.classes.HeaderWrapper,
          style: rxTableProps.styles.HeaderWrapper,
        }
      : {};
  var bodyWrapperProps =
    Components.BodyWrapper !== React.Fragment
      ? {
          className: rxTableProps.classes.BodyWrapper,
          style: rxTableProps.styles.BodyWrapper,
        }
      : {};
  var footerWrapperProps =
    Components.FooterWrapper !== React.Fragment
      ? {
          className: rxTableProps.classes.FooterWrapper,
          style: rxTableProps.styles.FooterWrapper,
        }
      : {};
  // ----
  // Build the Component that will render Body Rows
  // ----
  var BodyRows = React.useCallback(
    function () {
      return React.createElement(
        React.Fragment,
        null,
        rxTableProps.tableData.map(function (row, index) {
          return React.createElement(BodyRow, {
            key: rxTableProps.selection.getRowKey(
              row,
              index,
              rxTableProps.tableData
            ),
            index: index,
          });
        })
      );
    },
    [rxTableProps.selection, rxTableProps.tableData]
  );
  // ----
  // Component Render
  // ----
  return React.createElement(
    RxTableProvider,
    { value: rxTableContext },
    widthDetector,
    React.createElement(
      ElementType,
      __assign({ className: classes }, rest),
      (rxTableProps.layout.hasHeaderRow || rxTableProps.layout.hasFilterRow) &&
        React.createElement(
          Components.HeaderWrapper,
          __assign({}, headerWrapperProps),
          React.createElement(
            Components.Header,
            {
              style: rxTableProps.styles.Header,
              className: rxTableProps.classes.Header,
            },
            rxTableProps.layout.hasHeaderRow &&
              !disableHeader &&
              React.createElement(HeaderRow, null),
            rxTableProps.layout.hasFilterRow &&
              React.createElement(FiltersRow, null)
          )
        ),
      React.createElement(
        Components.BodyWrapper,
        __assign({}, bodyWrapperProps),
        React.createElement(
          Components.Body,
          {
            style: rxTableProps.styles.Body,
            className: rxTableProps.classes.Body,
          },
          React.createElement(StateDependentBodyRow, { Content: BodyRows })
        )
      ),
      rxTableProps.layout.hasFooterRow &&
        React.createElement(
          Components.FooterWrapper,
          __assign({}, footerWrapperProps),
          React.createElement(
            Components.Footer,
            {
              style: rxTableProps.styles.Footer,
              className: rxTableProps.classes.Footer,
            },
            React.createElement(FooterRow, null)
          )
        )
    )
  );
};
RxTable.displayName = 'RxTable';
RxTable.defaultProps = {
  as: Table,
};

export { RxTable as default };