wix-style-react
Version:
wix-style-react
47 lines • 2.16 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './Caption.st.css';
import Ellipsis, { extractEllipsisProps } from '../common/Ellipsis';
import { EllipsisCommonProps } from '../common/PropTypes/EllipsisCommon';
const CaptionWithEllipsis = ({ caption = 'c1', tagName = 'span', ellipsis = false, appendTo = Ellipsis.defaultProps.appendTo, flip = Ellipsis.defaultProps.flip, fixed = Ellipsis.defaultProps.fixed, placement = Ellipsis.defaultProps.placement, zIndex = Ellipsis.defaultProps.zIndex, enterDelay = Ellipsis.defaultProps.enterDelay, exitDelay = Ellipsis.defaultProps.exitDelay, showTooltip = Ellipsis.defaultProps.showTooltip, ...propsWithNoDefaults }) => {
const { dataHook, className, tagName: _tagName, caption: _caption, light, children, ...props } = {
...Ellipsis.defaultProps,
caption,
tagName,
ellipsis,
appendTo,
flip,
fixed,
placement,
zIndex,
enterDelay,
exitDelay,
showTooltip,
...propsWithNoDefaults,
};
const { ellipsisProps, componentProps } = extractEllipsisProps(props);
return (React.createElement(Ellipsis, { ...ellipsisProps, wrapperClassName: classes[caption], render: ({ ref, ellipsisClasses }) => {
return React.createElement(tagName, {
ref,
className: st(classes.root, { caption }, ellipsisClasses(className)),
'data-hook': dataHook,
'data-light': light,
...componentProps,
}, children);
} }));
};
CaptionWithEllipsis.displayName = 'Caption';
CaptionWithEllipsis.propTypes = {
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook: PropTypes.string,
/** class to be applied to the root element */
className: PropTypes.string,
/** tag name that will be rendered */
tagName: PropTypes.string,
caption: PropTypes.oneOf(['c1', 'c2']),
/** make the text color lighter */
light: PropTypes.bool,
...EllipsisCommonProps,
};
export default CaptionWithEllipsis;
//# sourceMappingURL=Caption.js.map