@evg-b/evg-ui/dist/ListItemText/ListItemText.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 '@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 secondaryStyle = {
  fontSize: '.875rem',
  lineHeight: '1.25rem',
  fontWeight: 400,
  color: function color(props) {
    return props.Color.Contrast('rgba', 0.54);
  }
};
var styles = {
  base: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    flexGrow: 1,
    flexShrink: 999,
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    margin: '0',
    padding: '0'
  },
  textStyle: {
    '& *': {
      fontFamily: 'Roboto, sans- serif',
      textDecoration: 'inherit',
      textTransform: 'inherit',
      whiteSpace: 'nowrap',
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      marginTop: 0,
      lineHeight: 'normal'
    }
  },
  primaryText: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    fontSize: '1rem',
    color: function color(props) {
      return props.Color.Contrast();
    }
  },
  secondaryText: _objectSpread({
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginTop: '5px'
  }, secondaryStyle),
  meta: _objectSpread({
    display: 'contents'
  }, secondaryStyle),
  singleLine: {
    height: '48px'
  },
  twoLine: {
    height: '72px'
  }
};
/**
 * Компонент для правильного отображения текста в List.
*/

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

  var classes = props.classes,
      className = props.className,
      children = props.children,
      SecondaryTextProp = props.secondaryText,
      MetaProp = props.meta,
      SecondaryMetaProp = props.secondaryMeta,
      otherProps = _objectWithoutProperties(props, ["classes", "className", "children", "secondaryText", "meta", "secondaryMeta"]);

  var meta = MetaProp && /*#__PURE__*/React.createElement("span", {
    className: classes.meta
  }, MetaProp);
  var secondaryMeta = SecondaryMetaProp && /*#__PURE__*/React.createElement("span", {
    className: classes.meta
  }, SecondaryMetaProp);
  var secondaryText = SecondaryTextProp && /*#__PURE__*/React.createElement("div", {
    className: classes.secondaryText
  }, /*#__PURE__*/React.createElement("span", null, SecondaryTextProp), secondaryMeta);
  return /*#__PURE__*/React.createElement("div", _extends({
    ref: ref,
    className: classNames(classes.base, classes.textStyle, (_classNames = {}, _defineProperty(_classNames, classes.singleLine, !SecondaryTextProp), _defineProperty(_classNames, classes.twoLine, SecondaryTextProp), _classNames), className)
  }, otherProps), /*#__PURE__*/React.createElement("div", {
    className: classes.primaryText
  }, /*#__PURE__*/React.createElement("span", null, children), meta), secondaryText);
});
ListItemText.propTypes = {
  /**
  * Это контент между открывающим и закрывающим тегом компонента.
  */
  children: PropTypes.node,

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

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

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

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

  /**
   * Вспомогательный текст.
  */
  secondaryText: PropTypes.string,

  /**
   * Контейнер для Metadata.
  */
  meta: PropTypes.node,

  /**
   * Вспомогательный контейнер для Metadata.
  */
  secondaryMeta: PropTypes.node
};
ListItemText.defaultProps = {
  secondaryText: '',
  color: 'surface'
};
ListItemText.displayName = 'ListItemTextEVG';
var ListItemText$1 = withStyles(styles)(ListItemText);

export default ListItemText$1;