wix-style-react
Version:
wix-style-react
120 lines • 5.66 kB
JavaScript
import React from 'react';
import RawText, { RawTextDefaultProps } 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 = ({ 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, 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,
...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 }) => (React.createElement(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']),
/** Applies id HTML attribute. */
id: PropTypes.string,
/*
* 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.
* @linkTypeTo components-overlays--tooltip
* @setTypeName TooltipCommonProps
*/
tooltipProps: PropTypes.shape(TooltipCommonProps),
/** if true it will support widows in the text */
widows: PropTypes.bool,
};
export default TextWithEllipsis;
//# sourceMappingURL=Text.js.map