@s-ui/react-molecule-button-group/lib/index.js

`MoleculeButtonGroup` is a component that wraps a group of buttons, related in content.

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
var _excluded = ["as", "children", "columns", "fullWidth", "size", "design", "display", "negative", "groupPositions", "onClick", "spaced", "isVertical", "shape"];
import { Children } from 'react';
import cx from 'classnames';
import PropTypes from 'prop-types';
import { atomButtonDesigns, atomButtonShapes, atomButtonSizes } from '@s-ui/react-atom-button';
import Injector from '@s-ui/react-primitive-injector';
import Poly from '@s-ui/react-primitive-polymorphic-element';
import { DEFAULT_COLUMNS, DISPLAY, SPACED } from './config.js';
import { BASE_CLASS } from './settings.js';
import { jsx as _jsx } from "react/jsx-runtime";
var getGroupPosition = function getGroupPosition(_ref) {
  var groupPositions = _ref.groupPositions,
    numChildren = _ref.numChildren,
    spaced = _ref.spaced,
    shape = _ref.shape;
  return function (index) {
    if (spaced && !shape) {
      return groupPositions.UNSET;
    } else {
      if (index === 0) return groupPositions.FIRST;
      if (index === numChildren - 1) return groupPositions.LAST;
      return groupPositions.MIDDLE;
    }
  };
};
var MoleculeButtonGroup = function MoleculeButtonGroup(_ref2) {
  var _ref2$as = _ref2.as,
    as = _ref2$as === void 0 ? 'div' : _ref2$as,
    children = _ref2.children,
    columns = _ref2.columns,
    fullWidth = _ref2.fullWidth,
    size = _ref2.size,
    design = _ref2.design,
    display = _ref2.display,
    negative = _ref2.negative,
    _ref2$groupPositions = _ref2.groupPositions,
    groupPositions = _ref2$groupPositions === void 0 ? {
      FIRST: 'first',
      MIDDLE: 'middle',
      LAST: 'last',
      UNSET: 'unset'
    } : _ref2$groupPositions,
    onClick = _ref2.onClick,
    spaced = _ref2.spaced,
    isVertical = _ref2.isVertical,
    shape = _ref2.shape,
    props = _objectWithoutPropertiesLoose(_ref2, _excluded);
  var numChildren = children.length;
  var getGroupPositionByIndex = getGroupPosition({
    spaced: spaced,
    groupPositions: groupPositions,
    numChildren: numChildren,
    shape: shape
  });
  var getClassSpaced = function getClassSpaced(_ref3) {
    var _ref3$spaced = _ref3.spaced,
      spaced = _ref3$spaced === void 0 ? SPACED.MEDIUM : _ref3$spaced;
    return BASE_CLASS + "--spaced-" + spaced;
  };
  var getClassDisplay = function getClassDisplay(_ref4) {
    var _ref4$display = _ref4.display,
      display = _ref4$display === void 0 ? DISPLAY.FLEX : _ref4$display;
    return BASE_CLASS + "--display-" + display;
  };
  var getClassDisplayColumns = function getClassDisplayColumns(_ref5) {
    var _ref5$display = _ref5.display,
      display = _ref5$display === void 0 ? DISPLAY.FLEX : _ref5$display,
      _ref5$columns = _ref5.columns,
      columns = _ref5$columns === void 0 ? DEFAULT_COLUMNS : _ref5$columns;
    if (display === DISPLAY.GRID && columns) return BASE_CLASS + "--col-" + columns;
    return '';
  };
  var CLASS_SPACED = getClassSpaced({
    spaced: spaced
  });
  var CLASS_DISPLAY = getClassDisplay({
    display: display
  });
  var CLASS_DISPLAY_COLUMNS = getClassDisplayColumns({
    display: display,
    columns: columns
  });
  var extendedChildren = Children.toArray(children).filter(Boolean).map(function (child, index) {
    var groupPosition = getGroupPositionByIndex(index);
    return /*#__PURE__*/_jsx(Injector, _extends({}, props, {
      negative: negative,
      size: size,
      design: design,
      groupPosition: groupPosition,
      fullWidth: fullWidth,
      spaced: spaced,
      onClick: onClick,
      shape: shape,
      children: child
    }));
  });
  return /*#__PURE__*/_jsx(Poly, {
    className: cx(BASE_CLASS, fullWidth && BASE_CLASS + "--fullWidth", display && CLASS_DISPLAY, display && CLASS_DISPLAY_COLUMNS, spaced && CLASS_SPACED, isVertical && BASE_CLASS + "--vertical"),
    children: extendedChildren
  });
};
MoleculeButtonGroup.displayName = 'MoleculeButtonGroup';
export default MoleculeButtonGroup;
export { atomButtonDesigns as moleculeButtonGroupDesigns, atomButtonSizes as moleculeButtonGroupSizes, atomButtonShapes as moleculeButtonGroupShapes, SPACED as moleculeButtonGroupSpaced, DISPLAY as moleculeButtonGroupDisplay };