@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
38 lines • 2 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { memo, useEffect, useRef } from 'react';
import { getIsRtl } from '@awsui/component-toolkit/internal';
import { renderTextContent } from '../internal/components/responsive-text';
export default memo(ResponsiveText);
function ResponsiveText({ x, y, rightSide, className, children, containerBoundaries }) {
const actualRef = useRef(null);
const virtualRef = useRef(null);
const isRtl = actualRef.current ? getIsRtl(actualRef.current) : false;
rightSide = !isRtl ? rightSide : !rightSide;
// Determine the visible width of the text and if necessary truncate it until it fits.
useEffect(() => {
// The debouncing is necessary for visual smoothness.
const timeoutId = setTimeout(() => {
const isRtl = getIsRtl(virtualRef.current);
const groupRect = virtualRef.current.getBoundingClientRect();
const visibleWidth = containerBoundaries ? getVisibleWidth(groupRect, containerBoundaries) : 0;
renderTextContent(actualRef.current, children, visibleWidth, isRtl);
}, 25);
return () => clearTimeout(timeoutId);
});
return (React.createElement(React.Fragment, null,
React.createElement("text", { ref: virtualRef, x: x, y: y, style: { textAnchor: rightSide ? 'start' : 'end', visibility: 'hidden' }, "aria-hidden": "true", className: className }, children),
React.createElement("text", { ref: actualRef, x: x, y: y, style: { textAnchor: rightSide ? 'start' : 'end' }, className: className }, children)));
}
function getVisibleWidth(element, container) {
if (element.left < container.left) {
return element.right - container.left;
}
else if (element.right > container.right) {
return container.right - element.left;
}
else {
return container.right - container.left;
}
}
//# sourceMappingURL=responsive-text.js.map