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

EVG-UI library inspired by Material Design.

import _extends from '@babel/runtime/helpers/extends';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React, { useRef, useState } from 'react';
import PropTypes from 'prop-types';
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 classNames from 'classnames';
import Ripple from '../Ripple/Ripple.js';

var styles = {
  base: {
    cursor: 'pointer',
    position: 'relative',
    backgroundColor: 'transparent',
    display: 'inline-flex',
    justifyContent: 'center',
    alignItems: 'center',
    border: 0,
    padding: 0,
    outline: 0,
    overflow: 'hidden',
    textDecoration: 'none',
    userSelect: 'none',
    appearance: 'none',
    tapHighlightColor: 'transparent',
    boxSizing: 'border-box',
    transition: 'background-color 200ms linear',
    '&:disabled, &[disabled]': {
      cursor: 'default',
      pointerEvents: ' none',
      backgroundColor: 'rgba(0, 0, 0, 0.12)',
      color: '#b4b4b4'
    }
  }
};
/**
 * Базовая кнопка в котором реализуется Ripple. 
*/

var ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
  var classes = props.classes,
      className = props.className,
      children = props.children,
      component = props.component;
      props.uppercase;
      var disabled = props.disabled,
      tabIndex = props.tabIndex,
      rippleCenter = props.rippleCenter,
      rippleOff = props.rippleOff,
      color = props.color,
      active = props.active,
      contrast = props.contrast,
      otherProps = _objectWithoutProperties(props, ["classes", "className", "children", "component", "uppercase", "disabled", "tabIndex", "rippleCenter", "rippleOff", "color", "active", "contrast"]);

  var RippleRef = useRef(null);

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      isFocus = _useState2[0],
      setIsFocus = _useState2[1];

  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      isPressed = _useState4[0],
      setIsPressed = _useState4[1];

  var Component = otherProps.href ? 'a' : component;

  var handlerFocus = function handlerFocus() {
    setIsFocus(true);
  };

  var handlerBlur = function handlerBlur() {
    setIsFocus(false);
  };

  var handleKeyPress = function handleKeyPress() {
    if (!isPressed) {
      setIsPressed(true);
    }
  };

  var handleKeyUp = function handleKeyUp() {
    if (isPressed) {
      setIsPressed(false);
    }
  };

  return /*#__PURE__*/React.createElement(Component, _extends({
    tabIndex: tabIndex,
    className: classNames(className, classes.base),
    ref: ref,
    type: Component,
    disabled: disabled,
    onFocus: handlerFocus,
    onBlur: handlerBlur,
    onKeyPress: handleKeyPress,
    onKeyUp: handleKeyUp
  }, otherProps), children, rippleOff || disabled ? null : /*#__PURE__*/React.createElement(Ripple, {
    ref: RippleRef,
    rippleCenter: rippleCenter,
    color: color,
    contrast: contrast,
    isFocus: isFocus,
    isPressed: isPressed,
    isActive: active,
    scrollable: true
  }));
});
ButtonBase.propTypes = {
  /**
  * Это контент между открывающим и закрывающим тегом компонента.
  */
  children: PropTypes.node,

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

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

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

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

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

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

  /**
   * Текст ссылки.
  */
  href: PropTypes.string,

  /**
   * Атрибут tabindex определяет последовательность перехода между ссылками при нажатии на кнопку Tab.
  */
  tabIndex: PropTypes.number,

  /**
   * Если true, Ripple эффект стартует в центре.
  */
  rippleCenter: PropTypes.bool,

  /**
   * Если true, Ripple эффект отключен.
  */
  rippleOff: PropTypes.bool,

  /**
   * Если true, цвет текста будет белым или черным автоматически. 
   * Для лучшего восприятия в зависимости от основного цвета. 
  */
  contrast: PropTypes.bool,

  /**
   * Активное состояние.
  */
  active: PropTypes.bool
};
ButtonBase.defaultProps = {
  component: 'button',
  color: 'default',
  uppercase: true,
  disabled: false,
  contrast: true,
  tabIndex: 0,
  active: false,
  rippleCenter: false,
  rippleOff: false
};
ButtonBase.displayName = 'ButtonBaseEVG';
var ButtonBase$1 = withStyles(styles)(ButtonBase);

export default ButtonBase$1;