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

EVG-UI library inspired by Material Design.

import _extends from '@babel/runtime/helpers/extends';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
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/defineProperty';
import '@babel/runtime/helpers/classCallCheck';
import '@babel/runtime/helpers/createClass';
import ButtonBase from '../ButtonBase/ButtonBase.js';

var styles = {
  base: {
    backgroundColor: 'transparent',
    color: 'inherit',
    borderRadius: '50%',
    padding: '10px',
    '&:disabled,&[disabled]': {
      backgroundColor: 'rgba(0, 0, 0, 0)'
    }
  }
};
/**
 * Button компонент который модифицирован под icons.
*/

var IconButton = /*#__PURE__*/React.forwardRef(function IconButton(props, ref) {
  var classes = props.classes,
      className = props.className,
      children = props.children,
      component = props.component,
      color = props.color;
      props.rippleCenter;
      var size = props.size,
      otherProps = _objectWithoutProperties(props, ["classes", "className", "children", "component", "color", "rippleCenter", "size"]);

  var Component = otherProps.href ? 'a' : component;
  return /*#__PURE__*/React.createElement(ButtonBase, _extends({
    className: classNames(classes.base, classes.color, className),
    ref: ref,
    component: Component,
    rippleCenter: true,
    color: color,
    contrast: color === 'default' ? true : false,
    disabled: otherProps.disabled
  }, otherProps), React.Children.map(children, function (child) {
    return /*#__PURE__*/React.cloneElement(child, {
      color: child.props.color || color,
      size: child.props.size || size
    });
  }));
});
IconButton.propTypes = {
  /**
  * Это контент между открывающим и закрывающим тегом компонента.
  */
  children: PropTypes.node,

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

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

  /**
   * Корневой узел. Это HTML элемент или компонент.
  */
  component: PropTypes.elementType,

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

  /**
   * Размер компонента.
  */
  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra']),

  /**
   * Если true, Ripple эффект стартует в центре.
  */
  rippleCenter: PropTypes.bool
};
IconButton.defaultProps = {
  color: 'default',
  component: 'button',
  rippleCenter: true,
  size: 'medium'
};
IconButton.displayName = 'IconButtonEVG';
var IconButton$1 = withStyles(styles)(IconButton);

export default IconButton$1;