All files / app/components EllipsizedFileName.tsx

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63                            1x 1x 1x 1x 1x 1x 1x 3x 3x 3x         1x             9x     1x             9x   9x         1x 1x 1x                
import React from 'react';
import { style } from 'app/styles';
 
export interface EllipsizedFileNameProps {
  fileName: string;
  maxCharacters: number;
  style?: object | string;
  onClick?: (evt, fileName: string) => void;
}
 
export function ellipsizeFileName(
  fileName: string,
  maxCharacters: number
): string {
  const lengthIn = fileName.length;
  Eif (lengthIn > maxCharacters) {
    const overCount = lengthIn - maxCharacters + 4;
    const fileNameParts = fileName.split('/');
    let eliminatedCount = 0;
    let rightPath = '';
    for (let i = 2; i < fileNameParts.length - 1; i++) {
      const filePart = fileNameParts[i];
      Eif (eliminatedCount < overCount) {
        eliminatedCount += filePart.length + 1;
      } else {
        rightPath += `/${filePart}`;
      }
    }
    return `${fileNameParts[0]}/...${rightPath}/${
      fileNameParts[fileNameParts.length - 1]
    }`;
    // return `...${fileName.slice(lengthIn - maxCharacters + 3)}`;
  }
  return fileName;
}
export const EllipsizedFileName = (
  props: EllipsizedFileNameProps
): JSX.Element => {
  return (
    <span title={props.fileName} style={style(props.style)}>
      {renderFileNameLink(props.fileName, props.maxCharacters, props.onClick)}
    </span>
  );
};
 
EllipsizedFileName.displayName = 'EllipsizedFileName';
 
const renderFileNameLink = (
  fileName: string,
  maxCharacters: number,
  onClick?
): JSX.Element | string => {
  const ellipsized = ellipsizeFileName(fileName, maxCharacters);
  Eif (!onClick) {
    return ellipsized;
  }
  return (
    <a onClick={evt => onClick(evt, fileName)} style={style('link')}>
      {ellipsized}
    </a>
  );
};