@wix/design-system
Version:
@wix/design-system
93 lines • 4.74 kB
JavaScript
import React from 'react';
import RawText, { RawTextDefaultProps } from './RawText';
import PropTypes from 'prop-types';
import { st, classes } from './Text.st.css.js';
import Ellipsis, { extractEllipsisProps } from '../common/Ellipsis';
import { TooltipCommonProps } from '../common/PropTypes/TooltipCommon';
const TextWithEllipsis = ({ 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, size = RawTextDefaultProps.size, secondary = RawTextDefaultProps.secondary, skin = RawTextDefaultProps.skin, light = RawTextDefaultProps.light, weight = RawTextDefaultProps.weight, tagName = RawTextDefaultProps.tagName, listStyle = RawTextDefaultProps.listStyle, widows = RawTextDefaultProps.widows, overflowWrap = RawTextDefaultProps.overflowWrap, id, ...propsWithNoDefaults }) => {
const { className, tooltipProps, ...props } = {
...RawTextDefaultProps,
...Ellipsis.defaultProps,
ellipsis,
appendTo,
flip,
fixed,
placement,
zIndex,
enterDelay,
exitDelay,
showTooltip,
size,
secondary,
skin,
light,
weight,
tagName,
listStyle,
id,
widows,
overflowWrap,
...propsWithNoDefaults,
};
const { ellipsisProps, componentProps } = extractEllipsisProps(props);
return (React.createElement(Ellipsis, { ...ellipsisProps, ...tooltipProps, wrapperClassName: st(classes.root, {
size: props.size,
weight: props.weight,
listStyle: props.listStyle,
}), render: ({ ref, ellipsisClasses, ellipsisInlineStyle, renderChildren, renderElement, }) => (React.createElement(RawText, { ...componentProps, tagName: tagName, ref: ref, className: ellipsisClasses(className), style: ellipsisInlineStyle, renderChildren: renderChildren, renderElement: renderElement })) }));
};
TextWithEllipsis.displayName = 'Text';
TextWithEllipsis.propTypes = {
dataHook: PropTypes.string,
className: PropTypes.string,
tagName: PropTypes.any,
size: PropTypes.any,
children: PropTypes.any,
secondary: PropTypes.bool,
skin: PropTypes.any,
listStyle: PropTypes.any,
light: PropTypes.bool,
weight: PropTypes.any,
id: PropTypes.string,
/** 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.any,
/** 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.any,
/** 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.any,
/** Moves tooltip arrow by a specified amount. */
moveArrowTo: PropTypes.number,
/** Controls tooltip content alignment on X axis. */
textAlign: PropTypes.any,
tooltipProps: PropTypes.shape(TooltipCommonProps),
widows: PropTypes.bool,
suffix: PropTypes.any,
/** Sets "overflow-wrap" CSS property. Controls how text will behave upon overflowing parent component **/
overflowWrap: PropTypes.any,
/** A callback fired when ellipsis state changes. */
onEllipsisStateChange: PropTypes.func,
};
export default TextWithEllipsis;
//# sourceMappingURL=Text.js.map