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

Just Another React UI Framework

'use strict';

var tslib = require('tslib');
var React = require('react');
var clsx = require('clsx');
var reactUiCore = require('@appbuckets/react-ui-core');
var useElementSize = require('../hooks/useElementSize.js');
require('../BucketTheme/BucketTheme.js');
var BucketContext = require('../BucketTheme/BucketContext.js');
var RxTable_context = require('./RxTable.context.js');
var RxTable_factory = require('./RxTable.factory.js');
var Table = require('../Table/Table.js');
var BodyRow = require('./components/BodyRow.js');
var FiltersRow = require('./components/FiltersRow.js');
var FooterRow = require('./components/FooterRow.js');
var HeaderRow = require('./components/HeaderRow.js');
var StateDependentBodyRow = require('./components/StateDependentBodyRow.js');
var RxTableBodyCell = require('./defaults/RxTableBodyCell.js');
var RxTableBodyRow = require('./defaults/RxTableBodyRow.js');
var RxTableEmptyContent = require('./defaults/RxTableEmptyContent.js');
var RxTableFooterCell = require('./defaults/RxTableFooterCell.js');
var RxTableError = require('./defaults/RxTableError.js');
var RxTableHeaderCell = require('./defaults/RxTableHeaderCell.js');
var RxTableLoader = require('./defaults/RxTableLoader.js');

function _interopDefaultLegacy(e) {
  return e && typeof e === 'object' && 'default' in e ? e : { default: e };
}

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(
          n,
          k,
          d.get
            ? d
            : {
                enumerable: true,
                get: function () {
                  return e[k];
                },
              }
        );
      }
    });
  }
  n['default'] = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/ _interopNamespace(React);
var clsx__default = /*#__PURE__*/ _interopDefaultLegacy(clsx);

/* --------
 * Component Render
 * -------- */
var RxTable = function (receivedProps) {
  var props = BucketContext.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 = tslib.__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 = reactUiCore.useElementType(RxTable, receivedProps, props);
  // ----
  // Initialize the Width Detector
  // ----
  var _a = tslib.__read(
      useElementSize.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 = RxTable_factory.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__default['default'](
    rxTableProps.layout.hasFilterRow && 'filterable',
    'rx-table',
    compressed && 'compressed',
    className
  );
  // ----
  // Define RxTable Components
  // ----
  var Components = tslib.__assign(
    {
      Body: Table.Body,
      BodyCell: RxTableBodyCell,
      BodyRow: RxTableBodyRow,
      BodyWrapper: React__namespace.Fragment,
      Error: RxTableError,
      ErrorRow: Table.Row,
      ErrorCell: Table.Cell,
      Footer: Table.Footer,
      FooterCell: RxTableFooterCell,
      FooterRow: Table.Row,
      FooterWrapper: React__namespace.Fragment,
      Header: Table.Header,
      HeaderCell: RxTableHeaderCell,
      HeaderRow: Table.Row,
      HeaderWrapper: React__namespace.Fragment,
      Loader: RxTableLoader,
      LoaderRow: Table.Row,
      LoaderCell: Table.Cell,
      NoContent: RxTableEmptyContent,
      NoContentCell: Table.Cell,
      NoContentRow: Table.Row,
    },
    userDefinedComponents
  );
  // ----
  // Context Building
  // ----
  var rxTableContext = tslib.__assign(tslib.__assign({}, rxTableProps), {
    Components: Components,
    loaderProps: loaderProps,
    noFilteredDataEmptyContentProps: noFilteredDataEmptyContentProps,
    noDataEmptyContentProps: noDataEmptyContentProps,
  });
  // ----
  // Fragments could not have properties extra from key
  // ----
  var headerWrapperProps =
    Components.HeaderWrapper !== React__namespace.Fragment
      ? {
          className: rxTableProps.classes.HeaderWrapper,
          style: rxTableProps.styles.HeaderWrapper,
        }
      : {};
  var bodyWrapperProps =
    Components.BodyWrapper !== React__namespace.Fragment
      ? {
          className: rxTableProps.classes.BodyWrapper,
          style: rxTableProps.styles.BodyWrapper,
        }
      : {};
  var footerWrapperProps =
    Components.FooterWrapper !== React__namespace.Fragment
      ? {
          className: rxTableProps.classes.FooterWrapper,
          style: rxTableProps.styles.FooterWrapper,
        }
      : {};
  // ----
  // Build the Component that will render Body Rows
  // ----
  var BodyRows = React__namespace.useCallback(
    function () {
      return React__namespace.createElement(
        React__namespace.Fragment,
        null,
        rxTableProps.tableData.map(function (row, index) {
          return React__namespace.createElement(BodyRow, {
            key: rxTableProps.selection.getRowKey(
              row,
              index,
              rxTableProps.tableData
            ),
            index: index,
          });
        })
      );
    },
    [rxTableProps.selection, rxTableProps.tableData]
  );
  // ----
  // Component Render
  // ----
  return React__namespace.createElement(
    RxTable_context.RxTableProvider,
    { value: rxTableContext },
    widthDetector,
    React__namespace.createElement(
      ElementType,
      tslib.__assign({ className: classes }, rest),
      (rxTableProps.layout.hasHeaderRow || rxTableProps.layout.hasFilterRow) &&
        React__namespace.createElement(
          Components.HeaderWrapper,
          tslib.__assign({}, headerWrapperProps),
          React__namespace.createElement(
            Components.Header,
            {
              style: rxTableProps.styles.Header,
              className: rxTableProps.classes.Header,
            },
            rxTableProps.layout.hasHeaderRow &&
              !disableHeader &&
              React__namespace.createElement(HeaderRow, null),
            rxTableProps.layout.hasFilterRow &&
              React__namespace.createElement(FiltersRow, null)
          )
        ),
      React__namespace.createElement(
        Components.BodyWrapper,
        tslib.__assign({}, bodyWrapperProps),
        React__namespace.createElement(
          Components.Body,
          {
            style: rxTableProps.styles.Body,
            className: rxTableProps.classes.Body,
          },
          React__namespace.createElement(StateDependentBodyRow, {
            Content: BodyRows,
          })
        )
      ),
      rxTableProps.layout.hasFooterRow &&
        React__namespace.createElement(
          Components.FooterWrapper,
          tslib.__assign({}, footerWrapperProps),
          React__namespace.createElement(
            Components.Footer,
            {
              style: rxTableProps.styles.Footer,
              className: rxTableProps.classes.Footer,
            },
            React__namespace.createElement(FooterRow, null)
          )
        )
    )
  );
};
RxTable.displayName = 'RxTable';
RxTable.defaultProps = {
  as: Table,
};

module.exports = RxTable;