@vtex/styleguide/lib/EXPERIMENTAL_Table/Sections/index.js

> VTEX Styleguide React components ([Docs](https://vtex.github.io/styleguide))

"use strict";

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

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _classnames = require("classnames");

var _classnames2 = _interopRequireDefault(_classnames);

var _index = require("../../EmptyState/index.js");

var _index2 = _interopRequireDefault(_index);

var _constants = require("../constants");

var _useTableMeasures = require("../hooks/useTableMeasures");

var _Loading = require("./Loading");

var _Loading2 = _interopRequireDefault(_Loading);

var _measures = require("../context/measures");

var _testing = require("../context/testing");

var _loading = require("../context/loading");

var _Tbody = require("./Tbody");

var _Tbody2 = _interopRequireDefault(_Tbody);

var _Thead = require("./Thead");

var _Thead2 = _interopRequireDefault(_Thead);

var _LoadedView = require("./LoadedView");

var _LoadedView2 = _interopRequireDefault(_LoadedView);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function Sections(_ref, ref) {
  var children = _ref.children,
      className = _ref.className,
      motion = _ref.motion,
      _ref$disableScroll = _ref.disableScroll,
      disableScroll = _ref$disableScroll === void 0 ? false : _ref$disableScroll;

  var _useLoadingContext = (0, _loading.useLoadingContext)(),
      emptyState = _useLoadingContext.emptyState,
      empty = _useLoadingContext.empty,
      loading = _useLoadingContext.loading;

  var _useTestingContext = (0, _testing.useTestingContext)(),
      testId = _useTestingContext.testId;

  var _useMeasuresContext = (0, _measures.useMeasuresContext)(),
      tableHeight = _useMeasuresContext.tableHeight,
      bodyHeight = _useMeasuresContext.bodyHeight;

  return _react2.default.createElement("div", {
    style: _extends({
      height: disableScroll ? 'auto' : tableHeight
    }, motion),
    className: (0, _classnames2.default)('mw-100 overflow-x-auto', _constants.ORDER_CLASSNAMES.TABLE, {
      'overflow-y-auto': !disableScroll
    })
  }, _react2.default.createElement("table", {
    ref: ref,
    "data-testid": testId,
    className: (0, _classnames2.default)('w-100', className),
    style: {
      borderCollapse: 'separate',
      borderSpacing: 0
    }
  }, children), !empty && loading && _react2.default.createElement(_Loading2.default, {
    testId: testId + "__loading",
    motion: motion,
    height: tableHeight - _useTableMeasures.TABLE_HEADER_HEIGHT
  }, typeof loading !== 'boolean' && loading.renderAs && loading.renderAs()), empty && emptyState && _react2.default.createElement(_index2.default, {
    height: bodyHeight,
    testId: testId + "__empty-state",
    title: emptyState.label
  }, emptyState.children));
}

var FowardedSections = (0, _react.forwardRef)(Sections);
FowardedSections.Head = _Thead2.default;
FowardedSections.Body = _Tbody2.default;
FowardedSections.LoadedView = _LoadedView2.default;
exports.default = FowardedSections;