UNPKG

@blueprintjs/core

Version:

Core styles & components

54 lines 2.72 kB
"use strict"; /* * Copyright 2017 Palantir Technologies, Inc. All rights reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ Object.defineProperty(exports, "__esModule", { value: true }); exports.Text = void 0; const tslib_1 = require("tslib"); const classnames_1 = tslib_1.__importDefault(require("classnames")); const React = tslib_1.__importStar(require("react")); const common_1 = require("../../common"); const props_1 = require("../../common/props"); const useIsomorphicLayoutEffect_1 = require("../../hooks/useIsomorphicLayoutEffect"); /** * Text component. * * @see https://blueprintjs.com/docs/#core/components/text */ exports.Text = React.forwardRef(({ children, tagName = "div", title, className, ellipsize = false, ...htmlProps }, forwardedRef) => { const contentMeasuringRef = React.useRef(); const textRef = React.useMemo(() => (0, common_1.mergeRefs)(contentMeasuringRef, forwardedRef), [forwardedRef]); const [textContent, setTextContent] = React.useState(""); const [isContentOverflowing, setIsContentOverflowing] = React.useState(); // try to be conservative about running this effect, since querying scrollWidth causes the browser to reflow / recalculate styles, // which can be very expensive for long lists (for example, in long Menus) (0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(() => { var _a; if (((_a = contentMeasuringRef.current) === null || _a === void 0 ? void 0 : _a.textContent) != null) { setIsContentOverflowing(ellipsize && contentMeasuringRef.current.scrollWidth > contentMeasuringRef.current.clientWidth); setTextContent(contentMeasuringRef.current.textContent); } }, [contentMeasuringRef, children, ellipsize]); return React.createElement(tagName, { ...htmlProps, className: (0, classnames_1.default)({ [common_1.Classes.TEXT_OVERFLOW_ELLIPSIS]: ellipsize, }, className), ref: textRef, title: title !== null && title !== void 0 ? title : (isContentOverflowing ? textContent : undefined), }, children); }); exports.Text.displayName = `${props_1.DISPLAYNAME_PREFIX}.Text`; //# sourceMappingURL=text.js.map