ffr-components/es/table/BodyTable.js

Fiori styled UI components

import _extends from "@babel/runtime/helpers/esm/extends";
import classnames from 'classnames';
import React, { useEffect } from 'react';
import TableHeader from './TableHeader';
import ColGroup from './ColGroup';
import oType from '../utils';
import { connect } from './TableContext';
import { RowsRenderer } from './TableRow';
export var shouldHideVerticalScrollbar = function shouldHideVerticalScrollbar(props) {
  var fixed = props.fixed,
      tableContext = props.tableContext;
  return fixed === 'left' || oType.isUndefined(fixed) && tableContext.hasRightFixedTable();
};

var BodyTable = function BodyTable(props) {
  var scrollRef = React.createRef();

  var handleScroll = function handleScroll(e) {
    var handleScroll = props.handleScroll;

    if (oType.isFunction(handleScroll)) {
      handleScroll(e);
    }
  };

  var assignRef = function assignRef(ref) {
    var innerRef = props.innerRef;

    if (innerRef) {
      innerRef.current = ref;
    }

    scrollRef.current = ref;
  };

  var className = props.className,
      withFixedHeader = props.withFixedHeader,
      columns = props.columns,
      headerHeight = props.headerHeight,
      outerTableHeight = props.outerTableHeight,
      fixed = props.fixed,
      shouldAlignHorizentalScrollbar = props.shouldAlignHorizentalScrollbar,
      scrollbarWidth = props.scrollbarWidth,
      tableContext = props.tableContext,
      lastLine = props.lastLine,
      data = props.data,
      handleMoveFocus = props.handleMoveFocus,
      innerBodyRef = props.innerBodyRef,
      innerHeaderRef = props.innerHeaderRef;
  var classNames = classnames('fd-table', {
    'ffr-horizental-scroll-table': oType.isUndefined(fixed) && withFixedHeader
  }, className);
  var style = {};
  var scrollCoverStyle = {};
  var scrollProps = {};
  useEffect(function () {
    if ((fixed === 'left' || oType.isUndefined(fixed) && tableContext.hasRightFixedTable()) && !scrollbarWidth) {
      var _scrollRef$current = scrollRef.current,
          clientWidth = _scrollRef$current.clientWidth,
          offsetWidth = _scrollRef$current.offsetWidth;
      tableContext.updateScrollbarWidth(offsetWidth - clientWidth);
    }

    if (fixed === undefined) {
      if (tableContext.hasFixedTable()) {
        var _scrollRef$current2 = scrollRef.current,
            scrollWidth = _scrollRef$current2.scrollWidth,
            _clientWidth = _scrollRef$current2.clientWidth;

        if (scrollWidth > _clientWidth) {
          tableContext.updateShouldAlignHorizentalScrollbar(true);
        }
      }
    }
  }, []); // eslint-disable-line

  useEffect(function () {
    if (withFixedHeader) {
      var _scrollRef$current3 = scrollRef.current,
          scrollHeight = _scrollRef$current3.scrollHeight,
          clientHeight = _scrollRef$current3.clientHeight;

      if (scrollHeight > clientHeight) {
        tableContext.updateShouldAlignVerticalScrollbar(true);
      } else {
        tableContext.updateShouldAlignVerticalScrollbar(false);
      }
    }
  }, [data.length, scrollRef, tableContext, withFixedHeader]);

  if (withFixedHeader && outerTableHeight > headerHeight) {
    var contentTableHeight = outerTableHeight - headerHeight;
    style.height = scrollCoverStyle.height = contentTableHeight;

    if (!oType.isUndefined(fixed) && shouldAlignHorizentalScrollbar) {
      style.height = contentTableHeight - scrollbarWidth;
    }
  }

  if (shouldHideVerticalScrollbar(props)) {
    style.overflowY = 'scroll';
    style.marginRight = "-".concat(scrollbarWidth, "px");
  }

  if (withFixedHeader) {
    scrollProps.onScroll = handleScroll;
  }

  return React.createElement("div", {
    style: scrollCoverStyle,
    className: "ffr-table-scroll-cover"
  }, React.createElement("div", _extends({
    className: withFixedHeader ? 'ffr-table-scroll' : '',
    style: style
  }, scrollProps, {
    ref: assignRef
  }), React.createElement("table", {
    className: classNames,
    role: "presentation"
  }, withFixedHeader ? React.createElement(ColGroup, {
    lastColumns: lastLine
  }) : React.createElement(TableHeader, {
    columns: columns,
    lastLine: lastLine,
    fixed: fixed,
    handleMoveFocus: handleMoveFocus,
    innerHeaderRef: innerHeaderRef
  }), React.createElement("tbody", {
    ref: innerBodyRef,
    className: "fd-table__body"
  }, React.createElement(RowsRenderer, props)))));
};

BodyTable.defaultProps = {
  data: [],
  columns: [],
  withFixedHeader: false
};
BodyTable.displayName = 'BodyTable';
export default connect('contentRowHeight', 'headerHeight', 'outerTableHeight', 'shouldAlignHorizentalScrollbar', 'scrollbarWidth', 'data')(BodyTable);