@wix/design-system
Version:
@wix/design-system
90 lines • 4.12 kB
JavaScript
import React from 'react';
import { st, classes, vars } from './TextComponent.st.css.js';
const isTestEnv = process.env.NODE_ENV === 'test';
class TextComponent extends React.PureComponent {
constructor(props) {
super(props);
this.requestedRecalculationMount = null;
this.requestedRecalculationUpdate = [];
this._getEllipsisClasses = () => {
const { ellipsis, maxLines } = this.props;
const ellipsisLines = maxLines && maxLines > 1 ? 'multiline' : 'singleLine';
return (className) => ellipsis ? st(classes.text, { ellipsisLines }, className) : className;
};
this.renderChildren = this.renderChildren.bind(this);
this.renderElement = this.renderElement.bind(this);
}
componentDidMount() {
if (!this.props.textRendered) {
/**
* The requestAnimationFrame implementation is meant for browser only race condition bug fix.
* It does not get reproduced in test environment due JSDOM being not a browser.
* So we skip the requestAnimationFrame part in order not to have delays in calculations.
*/
if (isTestEnv) {
return this.props.onTextRendered();
}
this.requestedRecalculationMount = requestAnimationFrame(() => {
this.props.onTextRendered();
});
}
}
componentDidUpdate() {
if (!this.props.textRendered) {
/**
* The requestAnimationFrame implementation is meant for browser only race condition bug fix.
* It does not get reproduced in test environment due JSDOM being not a browser.
* So we skip the requestAnimationFrame part in order not to have delays in calculations.
*/
if (isTestEnv) {
return this.props.onTextRendered();
}
this.requestedRecalculationUpdate.push(requestAnimationFrame(() => {
this.props.onTextRendered();
}));
}
}
componentWillUnmount() {
if (this.requestedRecalculationMount) {
cancelAnimationFrame(this.requestedRecalculationMount);
}
if (this.requestedRecalculationUpdate.length !== 0) {
this.requestedRecalculationUpdate.forEach(id => cancelAnimationFrame(id));
}
}
renderChildren({ text, suffix, }) {
const { textElementRef, isEllipsisActive, tooltipRef } = this.props;
if (suffix && isEllipsisActive) {
const lineHeight = textElementRef?.current &&
window.getComputedStyle(textElementRef.current).lineHeight;
return (React.createElement(React.Fragment, null,
React.createElement("span", { style: { shapeOutside: `inset(calc(100% - ${lineHeight}) 0 0)` }, className: st(classes.suffix, classes.multilineSuffix), onMouseEnter: () => tooltipRef?.current?.close() }, suffix),
React.createElement("span", { onMouseEnter: () => tooltipRef?.current?.open() }, text)));
}
else if (suffix) {
return (React.createElement(React.Fragment, null,
React.createElement("span", null, text),
React.createElement("span", { className: classes.suffix }, suffix)));
}
else {
return text;
}
}
renderElement({ element, suffix, }) {
const { maxLines = 1 } = this.props;
const hasMultilineSuffix = maxLines > 1 && !!suffix;
return hasMultilineSuffix ? (React.createElement("div", { className: classes.multilineSuffixWrapper }, element)) : (element);
}
render() {
const { render, maxLines, textElementRef } = this.props;
return render({
ref: textElementRef,
ellipsisClasses: this._getEllipsisClasses(),
ellipsisInlineStyle: { [vars.maxLines]: maxLines },
renderChildren: this.renderChildren,
renderElement: this.renderElement,
});
}
}
export default TextComponent;
//# sourceMappingURL=TextComponent.js.map