@evg-b/evg-ui/dist/ButtonGroup/ButtonGroup.js

EVG-UI library inspired by Material Design.

import _extends from '@babel/runtime/helpers/extends';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Elevation from '../styles/Elevation.js';
import '@babel/runtime/helpers/slicedToArray';
import withStyles from '../styles/withStyles.js';
import '@babel/runtime/helpers/construct';
import '@babel/runtime/helpers/toConsumableArray';
import '@babel/runtime/helpers/classCallCheck';
import '@babel/runtime/helpers/createClass';

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

var whatBorderColor = function whatBorderColor(props) {
  var BorderColor;

  switch (props.variant) {
    case 'text':
      BorderColor = props.color === 'default' ? props.Color.Contrast() : props.Color.Base();
      break;

    case 'outlined':
      BorderColor = props.color === 'default' ? props.Color.Contrast() : props.Color.Base();
      break;

    case 'contained':
      BorderColor = props.Color.Contrast();
      break;
  }

  return "1px solid ".concat(BorderColor);
};

var styles = {
  base: {
    display: 'flex',
    justifyContent: 'center',
    borderRadius: '4px',
    width: 'fit-content',
    height: 'fit-content'
  },
  groupContained: _objectSpread({}, Elevation(2)),
  groupContainedChild: {
    boxShadow: 'none'
  },
  horizontal: {
    flexDirection: 'row'
  },
  vertical: {
    flexDirection: 'column'
  },
  round: {
    borderRadius: '999px'
  },
  horizontalChild: {
    '&:not(:first-child)': {
      borderTopLeftRadius: 0,
      borderBottomLeftRadius: 0,
      borderLeft: function borderLeft(props) {
        return whatBorderColor(props);
      }
    },
    '&:not(:last-child)': {
      borderTopRightRadius: 0,
      borderBottomRightRadius: 0,
      borderRight: 0
    }
  },
  verticalChild: {
    '&:not(:first-child)': {
      borderTopRightRadius: 0,
      borderTopLeftRadius: 0,
      borderTop: function borderTop(props) {
        return whatBorderColor(props);
      }
    },
    '&:not(:last-child)': {
      borderBottomRightRadius: 0,
      borderBottomLeftRadius: 0,
      borderBottom: 0
    }
  }
};
/**
 * Этот компонент группирует button, так же его можно использовать как переключатель.
*/

var ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(props, ref) {
  var _classNames;

  var classes = props.classes,
      className = props.className,
      children = props.children,
      color = props.color,
      orientation = props.orientation,
      size = props.size,
      variant = props.variant,
      round = props.round,
      uppercase = props.uppercase,
      disabled = props.disabled,
      otherProps = _objectWithoutProperties(props, ["classes", "className", "children", "color", "orientation", "size", "variant", "round", "uppercase", "disabled"]);

  return /*#__PURE__*/React.createElement("div", _extends({
    className: classNames(classes.base, classes[orientation], className, (_classNames = {}, _defineProperty(_classNames, classes.groupContained, variant === 'contained'), _defineProperty(_classNames, classes.round, round), _classNames)),
    ref: ref
  }, otherProps), React.Children.map(children, function (child, index) {
    return /*#__PURE__*/React.cloneElement(child, {
      className: classNames(classes["".concat(orientation, "Child")], child.props.className, _defineProperty({}, classes.groupContainedChild, variant === 'contained')),
      size: child.props.size || size,
      color: child.props.color || color,
      variant: child.props.variant || variant,
      round: child.props.round || round,
      uppercase: child.props.uppercase || uppercase,
      disabled: child.props.disabled || disabled,
      key: index
    });
  }));
});
ButtonGroup.propTypes = {
  /**
  * Это контент между открывающим и закрывающим тегом компонента.
  */
  children: PropTypes.node,

  /**
   * Объект содержит jss стили компонента.
  */
  classes: PropTypes.object,

  /**
   * Чтобы указать CSS классы, используйте этот атрибут.
  */
  className: PropTypes.string,

  /**
   * Название цвета в разных форматах.
  */
  color: PropTypes.string,

  /**
   * Круглые края.
  */
  round: PropTypes.bool,

  /**
   * Если true, принимает состоянии disabled.
  */
  disabled: PropTypes.bool,

  /**
   * Регистр текста.
  */
  uppercase: PropTypes.bool,

  /**
   * Принимает вертикальное или горизонтальное положение.
  */
  orientation: PropTypes.oneOf(['horizontal', 'vertical']),

  /**
   * Все потомки принимают указанный размер.
  */
  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra']),

  /**
   * Все потомки принимают указанный вид.
  */
  variant: PropTypes.oneOf(['text', 'outlined', 'contained'])
};
ButtonGroup.defaultProps = {
  color: 'default',
  size: 'medium',
  uppercase: true,
  disabled: false,
  round: false,
  // true - круглые края
  variant: 'text',
  orientation: 'horizontal'
};
ButtonGroup.displayName = 'ButtonGroupEVG';
var ButtonGroup$1 = withStyles(styles)(ButtonGroup);

export default ButtonGroup$1;