@itwin/itwinui-react/DEV-esm/utils/components/MiddleTextTruncation.js

A react component library for iTwinUI

import * as React from 'react';
import { OverflowContainer } from './OverflowContainer.js';
import { VisuallyHidden } from '../../core/VisuallyHidden/VisuallyHidden.js';
import { ShadowRoot } from './ShadowRoot.js';
let ELLIPSIS_CHAR = '…';
export const MiddleTextTruncation = React.forwardRef((props, forwardedRef) => {
  let { text, endCharsCount, textRenderer, style, ...rest } = props;
  return React.createElement(
    OverflowContainer,
    {
      as: 'span',
      style: {
        display: 'flex',
        minWidth: 0,
        flexGrow: 1,
        whiteSpace: 'nowrap',
        ...style,
      },
      itemsCount: text.length,
      ...rest,
      ref: forwardedRef,
    },
    React.createElement(
      ShadowRoot,
      null,
      React.createElement(VisuallyHidden, null, text),
      React.createElement('slot', {
        'aria-hidden': true,
        style: {
          pointerEvents: 'none',
        },
      }),
    ),
    React.createElement(MiddleTextTruncationContent, {
      text: text,
      endCharsCount: endCharsCount,
      textRenderer: textRenderer,
    }),
  );
});
if ('development' === process.env.NODE_ENV)
  MiddleTextTruncation.displayName = 'MiddleTextTruncation';
let MiddleTextTruncationContent = (props) => {
  let { text, endCharsCount = 6, textRenderer } = props;
  let { visibleCount } = OverflowContainer.useContext();
  let truncatedText = React.useMemo(() => {
    if (visibleCount < text.length)
      return `${text.substring(
        0,
        visibleCount - endCharsCount - ELLIPSIS_CHAR.length,
      )}${ELLIPSIS_CHAR}${text.substring(text.length - endCharsCount)}`;
    return text;
  }, [endCharsCount, text, visibleCount]);
  return textRenderer?.(truncatedText, text) ?? truncatedText;
};