optimizely-oui/module/js/components/ButtonRow/index.js

Optimizely's Component Library.

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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";

var areAnyButtonsFullWidth = function areAnyButtonsFullWidth(buttons) {
  var includesFullWidth = false;
  buttons.map(function (button) {
    if (button.props && button.props.width === "full") {
      includesFullWidth = true;
    }
  });
  return includesFullWidth;
};

var ButtonRowSide = function ButtonRowSide(side, buttons, testSection) {
  var includesFullWidthButton = areAnyButtonsFullWidth(buttons);
  var wrapperClassNames = classNames(_defineProperty({
    flex: includesFullWidthButton,
    "flex--1": true
  }, "oui-button-row--".concat(side), side));
  return React.createElement("div", {
    "data-oui-component": true,
    className: wrapperClassNames,
    "data-test-section": testSection ? testSection + "-" + side : null
  }, buttons.map(function (button, index) {
    if (includesFullWidthButton) {
      // `ButtonRow` groups that contain a full width `Button` must wrap
      // the buttons in `div`'s of equal spacing.
      var containerClasses = classNames({
        "push-half--right": index !== buttons.length - 1,
        "push-half--left": index !== 0,
        "flex--1": true
      });
      return React.createElement("div", {
        className: containerClasses,
        key: index
      }, button);
    }

    return button;
  }));
};
/**
 * A horizontal list of buttons with space between them.
 * @param {Object} props - Properties passed to component
 * @returns {ReactElement}
 */


var ButtonRow = function ButtonRow(_ref) {
  var centerGroup = _ref.centerGroup,
      className = _ref.className,
      leftGroup = _ref.leftGroup,
      rightGroup = _ref.rightGroup,
      testSection = _ref.testSection,
      props = _objectWithoutProperties(_ref, ["centerGroup", "className", "leftGroup", "rightGroup", "testSection"]);

  return React.createElement("div", _extends({
    "data-oui-component": true,
    className: classNames("oui-button-row flex", className),
    "data-test-section": testSection
  }, props), leftGroup ? ButtonRowSide("left", leftGroup, testSection) : null, centerGroup ? ButtonRowSide("center", centerGroup, testSection) : null, rightGroup ? ButtonRowSide("right", rightGroup, testSection) : null);
};

ButtonRow.propTypes = {
  /** Array of buttons for the center */
  centerGroup: PropTypes.arrayOf(PropTypes.element),

  /** CSS class names. */
  className: PropTypes.string,

  /** Array of buttons for left side */
  leftGroup: PropTypes.arrayOf(PropTypes.element),

  /** Array of buttons for right side */
  rightGroup: PropTypes.arrayOf(PropTypes.element),

  /** Hook for automated JavaScript tests */
  testSection: PropTypes.string
};
export default ButtonRow;