@evg-b/evg-ui/dist/ListItem/ListItem.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 Color from '../styles/Color/Color.js';
import ButtonBase from '../ButtonBase/ButtonBase.js';

var styles = {
  base: {
    position: 'relative',
    display: 'flex',
    alignItems: 'center',
    padding: '0 16px',
    // 0 16
    margin: '0!important',
    backgroundColor: function backgroundColor(props) {
      return Color('surface').Base();
    },
    color: function color(props) {
      return props.active && props.Color.Base();
    }
  },
  avatarLine: {
    height: '56px'
  },
  swipingContainer: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: -1,
    backgroundColor: '#adadad'
  }
};
/**
 * Компонент для отображения содержимого в List.
*/

var ListItem = /*#__PURE__*/React.forwardRef(function ListItem(props, ref) {
  var classes = props.classes,
      className = props.className,
      children = props.children,
      component = props.component,
      color = props.color,
      _props$button = props.button,
      button = _props$button === void 0 ? true : _props$button,
      _props$active = props.active,
      active = _props$active === void 0 ? false : _props$active,
      otherProps = _objectWithoutProperties(props, ["classes", "className", "children", "component", "color", "button", "active"]);

  var Component = button ? ButtonBase : component;
  var componentProp = button ? component : null;
  var isButtonSettings = button ? {
    active: active,
    color: color,
    contrast: color === 'default'
  } : null; // const swipingContainer = (
  //     <div
  //         className={classes.swipingContainer}
  //     >
  //         swiping
  //     </div>
  // )

  return /*#__PURE__*/React.createElement(Component, _extends({
    ref: ref,
    component: componentProp,
    className: classNames(classes.base, className) // {...swipingSettings}

  }, isButtonSettings, otherProps), children);
});
ListItem.propTypes = {
  /**
  * Это контент между открывающим и закрывающим тегом компонента.
  */
  children: PropTypes.node,

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

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

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

  /**
   * Название цвета в разных форматах. Подробнее <a>link</a>
  */
  color: PropTypes.string,

  /**
   * Активное состояние.
  */
  active: PropTypes.bool,

  /**
   * Если true, ListItem наследует поведение Button.
  */
  button: PropTypes.bool // swiping: PropTypes.bool,

};
ListItem.defaultProps = {
  component: 'li',
  color: 'default',
  // swiping: false,
  active: false,
  button: true
};
ListItem.displayName = 'ListItemEVG';
var ListItem$1 = withStyles(styles)(ListItem);

export default ListItem$1;