@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
146 lines • 8.71 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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TextOverflow = void 0;
const jsx_runtime_1 = require("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/>.
*/
const classnames_1 = __importDefault(require("classnames"));
const react_1 = require("react");
const text_link_1 = require("../text-link");
const tooltip_1 = require("../tooltip");
const typography_1 = require("../typography");
const constants_1 = require("./constants");
const text_overflow_utils_1 = require("./text-overflow-utils");
const use_truncate_with_button_1 = require("./use-truncate-with-button");
const expandButtonTexts = {
ellipsis: constants_1.ELLIPSIS_CHAR,
'view-more': 'View more',
};
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 = (0, react_1.useRef)(null);
const textElementRef = (0, react_1.useRef)(null);
const [isTooltipOpen, setIsTooltipOpen] = (0, react_1.useState)(false);
// Use truncate with button hook when expandButton is provided
const shouldUseTruncateWithButton = expandButton !== undefined;
const truncateWithButtonResult = (0, use_truncate_with_button_1.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 = (0, react_1.useMemo)(() => {
if (maxCharacters !== undefined && expandButton === undefined) {
const result = (0, text_overflow_utils_1.truncateReactNodeByCharacters)(children, maxCharacters);
return result.needsTruncation ? result.truncatedContent : null;
}
return null;
}, [maxCharacters, expandButton, children]);
// Memoize text content extraction to avoid repeated traversals
const textContent = (0, react_1.useMemo)(() => (0, text_overflow_utils_1.getTextContent)(children), [children]);
// Memoize tooltip truncation detection logic
const checkTruncationForTooltip = (0, react_1.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 = (0, classnames_1.default)({
'ndl-text-overflow-multi-line': isMultiline,
'ndl-text-overflow-single-line': !isMultiline && maxCharacters === undefined,
});
if (shouldUseTruncateWithButton) {
return ((0, jsx_runtime_1.jsxs)("div", { ref: truncateWithButtonResult.containerRef, children: [(0, jsx_runtime_1.jsxs)("div", { className: truncateWithButtonResult.isExpanded ? '' : textClasses, style: textStyle, children: [truncateWithButtonResult.contentToRender, truncateWithButtonResult.isTruncated && ((0, jsx_runtime_1.jsx)(text_link_1.TextLink, { as: "button", className: (0, classnames_1.default)('ndl-text-overflow-toggle', {
'ndl-text-overflow-toggle-margin-left': expandButton !== 'ellipsis' ||
truncateWithButtonResult.isExpanded,
}), htmlAttributes: {
onClick: truncateWithButtonResult.toggleExpand,
}, children: truncateWithButtonResult.isExpanded
? constants_1.COLLAPSE_BUTTON_TEXT
: expandButtonTexts[expandButton] }))] }), (0, jsx_runtime_1.jsx)("div", { ref: truncateWithButtonResult.measureRef, style: {
position: 'absolute',
top: '-9999px',
visibility: 'hidden',
} })] }));
}
return ((0, jsx_runtime_1.jsx)("span", { ref: textElementRef, className: textClasses, style: textStyle, children: characterTruncatedContent !== null && characterTruncatedContent !== void 0 ? characterTruncatedContent : children }));
};
const isTooltipDisabled = !shouldShowTooltip ||
(expandButton !== undefined && truncateWithButtonResult.isExpanded);
return ((0, jsx_runtime_1.jsxs)(tooltip_1.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: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Trigger, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.trigger, { hasButtonWrapper: true, children: (0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ as: as !== null && as !== void 0 ? as : 'div', ref: ref, variant: typographyVariant, className: (0, classnames_1.default)('ndl-text-overflow', className), htmlAttributes: Object.assign({}, htmlAttributes) }, restProps, (!isTooltipDisabled &&
expandButton === undefined && {
tabIndex: 0,
}), { children: (0, jsx_runtime_1.jsx)("div", { className: "ndl-text-overflow-content", ref: contentRef, children: renderContent() }) })) })), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Content, Object.assign({ className: (0, classnames_1.default)('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 }))] })));
};
exports.TextOverflow = TextOverflow;
//# sourceMappingURL=TextOverflow.js.map