@vtex/styleguide/lib/Totalizer/index.js

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

"use strict";

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

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require("classnames");

var _classnames2 = _interopRequireDefault(_classnames);

var _TotalizerLabel = require("./TotalizerLabel");

var _TotalizerLabel2 = _interopRequireDefault(_TotalizerLabel);

var _TotalizerValue = require("./TotalizerValue");

var _TotalizerValue2 = _interopRequireDefault(_TotalizerValue);

var _TotalizerIcon = require("./TotalizerIcon");

var _TotalizerIcon2 = _interopRequireDefault(_TotalizerIcon);

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

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

var BORDER_COLOR = 'b--muted-4';

var Totalizer =
/*#__PURE__*/
function (_PureComponent) {
  _inheritsLoose(Totalizer, _PureComponent);

  function Totalizer() {
    return _PureComponent.apply(this, arguments) || this;
  }

  var _proto = Totalizer.prototype;

  _proto.render = function render() {
    var _this$props = this.props,
        items = _this$props.items,
        mobileScroll = _this$props.mobileScroll,
        horizontalLayout = _this$props.horizontalLayout;
    var OUTER_CONTAINER_CLASSES = (0, _classnames2.default)({
      'overflow-x-hidden': mobileScroll
    });
    var INNER_CONTAINER_CLASSES = (0, _classnames2.default)("w-100 flex flex-row-ns ba br3 " + BORDER_COLOR, {
      'flex-row overflow-y-hidden overflow-x-scroll overflow-x-hidden-ns': mobileScroll,
      'flex-column': !mobileScroll
    });
    var TOTALIZER_BASE_CLASSES = (0, _classnames2.default)("flex flex-column pa4 " + BORDER_COLOR, {
      'flex-auto-ns': mobileScroll,
      'flex-auto': !mobileScroll
    });
    var invertedMargin = 2;

    if (items.length === 0) {
      return null;
    }

    return _react2.default.createElement("div", {
      className: OUTER_CONTAINER_CLASSES
    }, _react2.default.createElement("div", {
      "data-testid": "totalizer-container",
      className: INNER_CONTAINER_CLASSES
    }, items.map(function (item, i) {
      var label = item.label;
      var IS_NOT_LAST = items.length > 1 && i < items.length - 1;
      var EXTRA_BORDER = (0, _classnames2.default)({
        'bb bb-0-ns br-ns ': IS_NOT_LAST,
        'bb-0 ': mobileScroll,
        br: mobileScroll && IS_NOT_LAST
      });
      var ITEM_CLASSES = (0, _classnames2.default)(TOTALIZER_BASE_CLASSES + " " + EXTRA_BORDER);
      var WITH_ICON_CONTAINER_CLASSES = (0, _classnames2.default)('item_container flex flex-row', {
        'items-center': horizontalLayout
      });
      var WITH_ICON_ITEM_CONTAINER_CLASSES = (0, _classnames2.default)('item_container', {
        'flex flex-row items-baseline': horizontalLayout
      });
      var WITHOUT_ICON_ITEM_CONTAINER_CLASSES = (0, _classnames2.default)('item_container', {
        'flex flex-row items-baseline': horizontalLayout
      });
      var labelSpacesToHyphen = label.replace(/\s/g, '-');
      var labelLowercase = labelSpacesToHyphen.toLowerCase();
      var testidLabel = "totalizer-item-" + labelLowercase;
      return _react2.default.createElement("div", {
        "data-testid": testidLabel,
        className: ITEM_CLASSES,
        key: label
      }, item.icon ? _react2.default.createElement("div", {
        className: WITH_ICON_CONTAINER_CLASSES
      }, _react2.default.createElement(_TotalizerIcon2.default, {
        item: item
      }), _react2.default.createElement("div", {
        className: WITH_ICON_ITEM_CONTAINER_CLASSES
      }, item.inverted && _react2.default.createElement("div", {
        className: horizontalLayout ? 'mr3' : ''
      }, _react2.default.createElement(_TotalizerValue2.default, {
        item: item,
        mobileScroll: mobileScroll
      })), _react2.default.createElement(_TotalizerLabel2.default, {
        label: label,
        mobileScroll: mobileScroll
      }), !item.inverted && _react2.default.createElement(_TotalizerValue2.default, {
        item: item,
        mobileScroll: mobileScroll
      }))) : _react2.default.createElement("div", {
        className: WITHOUT_ICON_ITEM_CONTAINER_CLASSES
      }, item.inverted && _react2.default.createElement("div", {
        className: "m" + (horizontalLayout ? 'r' : 'b') + invertedMargin
      }, _react2.default.createElement(_TotalizerValue2.default, {
        item: item,
        mobileScroll: mobileScroll
      })), _react2.default.createElement(_TotalizerLabel2.default, {
        label: label,
        mobileScroll: mobileScroll
      }), !item.inverted && _react2.default.createElement("div", {
        className: "w-100 mt" + invertedMargin
      }, _react2.default.createElement(_TotalizerValue2.default, {
        item: item,
        mobileScroll: mobileScroll
      }))));
    })));
  };

  return Totalizer;
}(_react.PureComponent);

Totalizer.defaultProps = {
  value: null,
  iconBackgroundColor: '',
  icon: null,
  isLoading: false,
  mobileScroll: false,
  horizontalLayout: false
};
var totalizerPropTypes = exports.totalizerPropTypes = {
  /** Sets the items horizontally instead of vertically on mobile. */
  mobileScroll: _propTypes2.default.bool,
  horizontalLayout: _propTypes2.default.bool,
  items: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    label: _propTypes2.default.string.isRequired,
    value: _propTypes2.default.node,
    iconBackgroundColor: _propTypes2.default.string,
    icon: _propTypes2.default.node,
    isLoading: _propTypes2.default.bool,
    invertedWeight: _propTypes2.default.bool
  })).isRequired
};
Totalizer.propTypes = totalizerPropTypes;
exports.default = Totalizer;