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

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

"use strict";

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

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _classnames = require("classnames");

var _classnames2 = _interopRequireDefault(_classnames);

var _pick = require("lodash/pick");

var _pick2 = _interopRequireDefault(_pick);

var _data = require("../context/data");

var _body = require("../context/body");

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

var _Cell = require("./Cell");

var _Cell2 = _interopRequireDefault(_Cell);

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

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

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 getContent(_ref) {
  var column = _ref.column,
      data = _ref.data,
      renderInfo = _ref.renderInfo;
  var id = column.id,
      cellRenderer = column.cellRenderer,
      condensed = column.condensed,
      extended = column.extended;
  if (!data) return;
  var cellData = condensed ? (0, _pick2.default)(data, condensed) : extended ? data : data[id];
  var content = cellRenderer ? cellRenderer(_extends({
    data: cellData
  }, renderInfo)) : cellData;
  return content;
}

function Row(_ref2, ref) {
  var children = _ref2.children,
      motion = _ref2.motion,
      data = _ref2.data,
      height = _ref2.height,
      _ref2$header = _ref2.header,
      header = _ref2$header === void 0 ? false : _ref2$header,
      props = _objectWithoutPropertiesLoose(_ref2, ["children", "motion", "data", "height", "header"]);

  var LIGHT_BLUE = '#DBE9FD';

  var _useMeasuresContext = (0, _measures.useMeasuresContext)(),
      density = _useMeasuresContext.density;

  var _useDataContext = (0, _data.useDataContext)(),
      columns = _useDataContext.columns;

  var _useBodyContext = (0, _body.useBodyContext)(),
      highlightOnHover = _useBodyContext.highlightOnHover,
      isRowActive = _useBodyContext.isRowActive,
      onRowClick = _useBodyContext.onRowClick;

  var className = (0, _classnames2.default)('w-100 truncate overflow-x-hidden', {
    'pointer hover-c-link': !header && onRowClick,
    'hover-bg-muted-5': !header && (highlightOnHover || !!onRowClick)
  }, props.className);
  var rowColor = data && isRowActive && isRowActive(data) ? {
    backgroundColor: LIGHT_BLUE
  } : {};
  var clickable = !header && onRowClick ? {
    onClick: function onClick() {
      return onRowClick({
        rowData: data
      });
    }
  } : {};

  var style = _extends({
    height: height
  }, props.style, {}, motion, {}, rowColor);

  return _react2.default.createElement("tr", _extends({}, props, {
    ref: ref,
    style: style
  }, clickable, {
    className: className
  }), columns.map(function (column, index) {
    var id = column.id,
        width = column.width;
    var content = getContent({
      column: column,
      data: data,
      renderInfo: {
        rowHeight: height,
        motion: motion,
        density: density
      }
    });

    if (children) {
      return children({
        props: {
          width: width
        },
        key: id,
        data: data,
        column: column,
        content: content,
        motion: motion,
        index: index,
        header: header
      });
    }

    return _react2.default.createElement(_Cell2.default, {
      key: id,
      width: width,
      height: height
    }, content);
  }));
}

var ROW_TRANSITIONS = exports.ROW_TRANSITIONS = [{
  prop: 'height',
  duration: 200,
  func: 'ease-in-out',
  delay: 0,
  optimize: true
}];
var FowardedRow = (0, _react.forwardRef)(Row);
FowardedRow.Cell = _Cell2.default;
exports.default = FowardedRow;