import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/Truncate/truncate'; import { css } from '@patternfly/react-styles'; import { Tooltip, TooltipPosition } from '../Tooltip'; export enum TruncatePosition { start = 'start', end = 'end', middle = 'middle' } const truncateStyles = { start: styles.truncateEnd, end: styles.truncateStart }; const minWidthCharacters: number = 12; interface TruncateProps extends React.HTMLProps { /** Class to add to outer span */ className?: string; /** Text to truncate */ content: string; /** The number of characters displayed in the second half of the truncation */ trailingNumChars?: number; /** Where the text will be truncated */ position?: 'start' | 'middle' | 'end'; /** Tooltip position */ tooltipPosition?: | TooltipPosition | 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end'; } const sliceContent = (str: string, slice: number) => [str.slice(0, str.length - slice), str.slice(-slice)]; export const Truncate: React.FunctionComponent = ({ className, position = 'end', tooltipPosition = 'top', trailingNumChars = 7, content, ...props }: TruncateProps) => ( {(position === TruncatePosition.end || position === TruncatePosition.start) && ( {content} {position === TruncatePosition.start && ‎} )} {position === TruncatePosition.middle && content.slice(0, content.length - trailingNumChars).length > minWidthCharacters && ( {sliceContent(content, trailingNumChars)[0]} {sliceContent(content, trailingNumChars)[1]} )} {position === TruncatePosition.middle && content.slice(0, content.length - trailingNumChars).length <= minWidthCharacters && content} ); Truncate.displayName = 'Truncate';