UNPKG

@evg-b/evg-ui

Version:

EVG-UI library inspired by Material Design.

77 lines (69 loc) 2.22 kB
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 Popup from '../Popup/Popup.js'; var styles = { base: { display: 'flex', alignItems: 'center', borderRadius: '4px', fontSize: '12px', boxSizing: 'border-box', backgroundColor: Color('gray700').Base('rgba', 0.9), color: Color('gray700').Contrast(), transition: 'opacity 100ms ease-in 50ms' }, desktop: { height: '24px', padding: '0 8px' }, mobile: { height: '32px', padding: '0 16px' } }; /** * Всплывающая подсказка когда пользователь наводит курсор на элемент. */ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) { var classes = props.classes, className = props.className, children = props.children, specs = props.specs, otherProps = _objectWithoutProperties(props, ["classes", "className", "children", "specs"]); return /*#__PURE__*/React.createElement(Popup, _extends({ ref: ref, shift: 8 }, otherProps), /*#__PURE__*/React.createElement("div", { className: classNames(classes.base, classes[specs], className) }, children)); }); Tooltip.propTypes = { /** * Это контент между открывающим и закрывающим тегом компонента. */ children: PropTypes.node, /** * Объект содержит jss стили компонента. */ classes: PropTypes.object, /** * Чтобы указать CSS классы, используйте этот атрибут. */ className: PropTypes.string, /** * Размер для mobile и desktop. */ specs: PropTypes.oneOf(['desktop', 'mobile']) }; Tooltip.defaultProps = { specs: 'desktop' }; Tooltip.displayName = 'TooltipEVG'; var Tooltip$1 = withStyles(styles)(Tooltip); export default Tooltip$1;