@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
139 lines • 8 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
*
* Copyright (c) "Neo4j"
* Neo4j Sweden AB [http://neo4j.com]
*
* This file is part of Neo4j.
*
* Neo4j is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import classNames from 'classnames';
import { useCallback, useMemo, useRef, useState } from 'react';
import { TextLink } from '../text-link';
import { Tooltip } from '../tooltip';
import { Typography } from '../typography';
import { COLLAPSE_BUTTON_TEXT, ELLIPSIS_CHAR } from './constants';
import { getTextContent, truncateReactNodeByCharacters, } from './text-overflow-utils';
import { useTruncateWithButton } from './use-truncate-with-button';
const expandButtonTexts = {
ellipsis: ELLIPSIS_CHAR,
'view-more': 'View more',
};
export const TextOverflow = (_a) => {
var _b;
var { as, children, className, htmlAttributes, lines, tooltipProps, onExpandedToggle, expandButton, maxCharacters, shouldShowTooltip = true, typographyVariant = 'body-medium', ref } = _a, restProps = __rest(_a, ["as", "children", "className", "htmlAttributes", "lines", "tooltipProps", "onExpandedToggle", "expandButton", "maxCharacters", "shouldShowTooltip", "typographyVariant", "ref"]);
const contentRef = useRef(null);
const textElementRef = useRef(null);
const [isTooltipOpen, setIsTooltipOpen] = useState(false);
// Use truncate with button hook when expandButton is provided
const shouldUseTruncateWithButton = expandButton !== undefined;
const truncateWithButtonResult = useTruncateWithButton({
button: expandButtonTexts[expandButton] || 'View more',
buttonType: expandButton,
closeTooltip: () => setIsTooltipOpen(false),
content: children,
// Disable expensive calculations when no expand button is needed
isDisabled: !shouldUseTruncateWithButton,
lineClamp: lines !== null && lines !== void 0 ? lines : 1,
maxCharacters,
onExpandedToggle,
});
// Handle character-based truncation when no expand button is used
const characterTruncatedContent = useMemo(() => {
if (maxCharacters !== undefined && expandButton === undefined) {
const result = truncateReactNodeByCharacters(children, maxCharacters);
return result.needsTruncation ? result.truncatedContent : null;
}
return null;
}, [maxCharacters, expandButton, children]);
// Memoize text content extraction to avoid repeated traversals
const textContent = useMemo(() => getTextContent(children), [children]);
// Memoize tooltip truncation detection logic
const checkTruncationForTooltip = useCallback(() => {
if (shouldUseTruncateWithButton) {
return truncateWithButtonResult.isTruncated;
}
// Character based truncation
if (maxCharacters !== undefined) {
return characterTruncatedContent !== null;
}
const element = textElementRef.current;
if (element === null) {
return false;
}
// Regular multiline truncation
if (lines !== undefined && lines > 1) {
return element.scrollHeight > element.clientHeight;
}
// Regular single line truncation
return element.scrollWidth > element.clientWidth;
}, [
shouldUseTruncateWithButton,
truncateWithButtonResult.isTruncated,
maxCharacters,
characterTruncatedContent,
lines,
]);
const renderContent = () => {
const isMultiline = typeof lines === 'number' && lines > 1;
const textStyle = {
'--ndl-line-clamp': isMultiline ? lines.toString() : undefined,
};
const textClasses = classNames({
'ndl-text-overflow-multi-line': isMultiline,
'ndl-text-overflow-single-line': !isMultiline && maxCharacters === undefined,
});
if (shouldUseTruncateWithButton) {
return (_jsxs("div", { ref: truncateWithButtonResult.containerRef, children: [_jsxs("div", { className: truncateWithButtonResult.isExpanded ? '' : textClasses, style: textStyle, children: [truncateWithButtonResult.contentToRender, truncateWithButtonResult.isTruncated && (_jsx(TextLink, { as: "button", className: classNames('ndl-text-overflow-toggle', {
'ndl-text-overflow-toggle-margin-left': expandButton !== 'ellipsis' ||
truncateWithButtonResult.isExpanded,
}), htmlAttributes: {
onClick: truncateWithButtonResult.toggleExpand,
}, children: truncateWithButtonResult.isExpanded
? COLLAPSE_BUTTON_TEXT
: expandButtonTexts[expandButton] }))] }), _jsx("div", { ref: truncateWithButtonResult.measureRef, style: {
position: 'absolute',
top: '-9999px',
visibility: 'hidden',
} })] }));
}
return (_jsx("span", { ref: textElementRef, className: textClasses, style: textStyle, children: characterTruncatedContent !== null && characterTruncatedContent !== void 0 ? characterTruncatedContent : children }));
};
const isTooltipDisabled = !shouldShowTooltip ||
(expandButton !== undefined && truncateWithButtonResult.isExpanded);
return (_jsxs(Tooltip, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.root, { type: "simple", isDisabled: isTooltipDisabled, isOpen: isTooltipOpen, onOpenChange: (open) => {
if (open) {
setIsTooltipOpen(checkTruncationForTooltip());
}
else {
setIsTooltipOpen(false);
}
}, children: [_jsx(Tooltip.Trigger, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.trigger, { hasButtonWrapper: true, children: _jsx(Typography, Object.assign({ as: as !== null && as !== void 0 ? as : 'div', ref: ref, variant: typographyVariant, className: classNames('ndl-text-overflow', className), htmlAttributes: Object.assign({}, htmlAttributes) }, restProps, (!isTooltipDisabled &&
expandButton === undefined && {
tabIndex: 0,
}), { children: _jsx("div", { className: "ndl-text-overflow-content", ref: contentRef, children: renderContent() }) })) })), _jsx(Tooltip.Content, Object.assign({ className: classNames('ndl-text-overflow-tooltip-content', (_b = tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content) === null || _b === void 0 ? void 0 : _b.className) }, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content, { children: textContent }))] })));
};
//# sourceMappingURL=TextOverflow.js.map