@vtex/styleguide/lib/EXPERIMENTAL_Table/Toolbar/ButtonDensity.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 _index = require("../../icon/Density/index.js");

var _index2 = _interopRequireDefault(_index);

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

var _Button = require("./Button");

var _Button2 = _interopRequireDefault(_Button);

var _PopoverMenu = require("./PopoverMenu");

var _PopoverMenu2 = _interopRequireDefault(_PopoverMenu);

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

var _context = require("./context");

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

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; }

var FIELDS_ITEM_HEIGHT = 36;
var BOX_HEIGHT = _useTableMeasures.DENSITY_OPTIONS.length * FIELDS_ITEM_HEIGHT;

var ButtonDensity = function ButtonDensity(_ref) {
  var label = _ref.label,
      handleCallback = _ref.handleCallback,
      disabled = _ref.disabled,
      alignMenu = _ref.alignMenu,
      options = _objectWithoutPropertiesLoose(_ref, ["label", "handleCallback", "disabled", "alignMenu"]);

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

  var _usePopoverMenu = (0, _PopoverMenu2.default)(),
      buttonRef = _usePopoverMenu.buttonRef,
      toggleBox = _usePopoverMenu.toggleBox,
      setBoxVisible = _usePopoverMenu.setBoxVisible,
      boxVisible = _usePopoverMenu.boxVisible;

  var _useButtonGroupContex = (0, _context.useButtonGroupContext)(),
      testId = _useButtonGroupContex.testId;

  var densityTestId = testId + "__density";
  return _react2.default.createElement(_Button2.default, {
    id: _constants.NAMESPACES.TOOLBAR.BUTTON_DENSITY,
    testId: densityTestId,
    title: label,
    ref: buttonRef,
    onClick: toggleBox,
    icon: _react2.default.createElement(_index2.default, {
      size: _Button.IconSize.Medium
    }),
    disabled: disabled
  }, boxVisible && _react2.default.createElement(_PopoverMenu.Box, {
    testId: densityTestId,
    height: BOX_HEIGHT,
    alignMenu: alignMenu
  }, _useTableMeasures.DENSITY_OPTIONS.map(function (key, index) {
    var isKeySelected = density === key;
    return _react2.default.createElement(_PopoverMenu.Item, {
      key: index,
      isSelected: isKeySelected,
      onClick: function onClick() {
        setDensity(key);
        setBoxVisible(false);
        handleCallback && handleCallback(key);
      }
    }, options[key + "Label"]);
  })));
};

exports.default = ButtonDensity;