wix-style-react
Version:
141 lines (107 loc) • 4.3 kB
JavaScript
import React from 'react';
import RawText from './RawText';
import PropTypes from 'prop-types';
import { st, classes } from './Text.st.css';
import Ellipsis, { extractEllipsisProps } from '../common/Ellipsis';
import { TooltipCommonProps } from '../common/PropTypes/TooltipCommon';
const TextWithEllipsis = ({ className, tooltipProps, ...props }) => {
const { ellipsisProps, componentProps } = extractEllipsisProps(props);
return (
<Ellipsis
{...ellipsisProps}
{...tooltipProps}
wrapperClassName={st(classes.root, {
size: props.size,
weight: props.weight,
listStyle: props.listStyle,
})}
render={({ ref, ellipsisClasses, ellipsisInlineStyle }) => (
<RawText
{...componentProps}
ref={ref}
className={ellipsisClasses(className)}
style={ellipsisInlineStyle}
/>
)}
/>
);
};
TextWithEllipsis.displayName = 'Text';
TextWithEllipsis.propTypes = {
/*
* Text props
*/
/** Applies a data-hook HTML attribute that can be used in the tests. */
dataHook: PropTypes.string,
/** Specifies a CSS class name to be appended to the component’s root element. */
className: PropTypes.string,
/** Defines a tag name that text should be rendered inside of (e.g., div, a, p). */
tagName: PropTypes.string,
/** Controls the font size of the text. */
size: PropTypes.oneOf(['tiny', 'small', 'medium']),
/** Renders any kind of content within a heading. Usually it’s a text string. */
children: PropTypes.any,
/** Sets text type to secondary. Affects font color only. */
secondary: PropTypes.bool,
/** Controls the skin of the text. */
skin: PropTypes.oneOf([
'standard',
'success',
'error',
'premium',
'disabled',
'primary',
]),
/** Sets list items style. */
listStyle: PropTypes.oneOf(['checkmark', 'circle']),
/** Inverts text color so it can be used on dark backgrounds. */
light: PropTypes.bool,
/** Controls the font weight of the text. */
weight: PropTypes.oneOf(['thin', 'normal', 'bold']),
/*
* Ellipsis props
*/
/** Truncates text that is longer than its parent container and displays ellipsis at the end of the last line. */
ellipsis: PropTypes.bool,
/** Specifies whether to show a tooltip for ellipsis. */
showTooltip: PropTypes.bool,
/** Specifies tooltip content z index. */
zIndex: PropTypes.number,
/** Defines tooltip placement in relation to target element. */
placement: PropTypes.string,
/** Disables tooltip element trigger. If not specified, disabled prop value of the children element will be used. */
disabled: PropTypes.bool,
/** Defines a tooltip content calculation relation to a dom element. */
appendTo: PropTypes.oneOfType([
PropTypes.oneOf(['window', 'scrollParent', 'viewport', 'parent']),
PropTypes.element,
PropTypes.func,
]),
/** Flips tooltip placement when it starts to overlap the target element. */
flip: PropTypes.bool,
/** Keeps tooltip at its original placement even when it's being positioned outside the boundary. */
fixed: PropTypes.bool,
/** Specifies time to wait before showing the tooltip in milliseconds. */
enterDelay: PropTypes.number,
/** Specifies time to wait before hiding the tooltip in milliseconds. */
exitDelay: PropTypes.number,
/** Specifies tooltip width in pixels. */
maxWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
/** Defines a callback function which is called every time tooltip is shown. */
onShow: PropTypes.func,
/** Defines a callback function which is called every time tooltip is hidden. */
onHide: PropTypes.func,
/** Moves tooltip content relative to the parent on X or Y axis. */
moveBy: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }),
/** Moves tooltip arrow by a specified amount. */
moveArrowTo: PropTypes.number,
/** Controls tooltip content alignment on X axis. */
textAlign: PropTypes.oneOf(['start', 'center']),
/** Allows to pass all common tooltip props. Check <Tooltip/> for a full API. */
tooltipProps: PropTypes.shape(TooltipCommonProps),
};
TextWithEllipsis.defaultProps = {
...RawText.defaultProps,
...Ellipsis.defaultProps,
};
export default TextWithEllipsis;