LOCKING-box/src/components/FileIcon/FileIcon.tsx

import React from 'react';
import { Image, ImageProps } from 'antd';
import classNames from 'classnames';
import { memo } from 'react';
import styles from './fileIcon.less';
import { memoize } from 'lodash';

interface FileIconProps extends ImageProps {
  extension: string;
  absolutePath?: string;
}

export default memo(function FileIcon(props: FileIconProps) {
  const { className, extension, absolutePath, ...restProps } = props;
  const isImg = isImgFile(extension) && !!absolutePath;
  return (
    <div className={classNames(styles.fileIcon, className)}>
      <Image
        preview={false}
        {...restProps}
        src={isImg ? absolutePath : fileIconSrc(extension)}
        fallback={fileIconSrc('default')}
      />
    </div>
  );
});

const fileIconSrc = memoize((extension: string) => {
  const fixedExtension = matchFileImage(extension);
  return `assets/file_icon/${fixedExtension}.svg`;
});

const imgList: string[] = ['jpg', 'png', 'bmp', 'gif', 'jpeg'];

function isImgFile(extension: string) {
  return imgList.includes(extension);
}

export function matchFileImage(extension: string) {
  switch (extension) {
    case 'ppt':
    case 'pptx':
      return 'ppt';
    case 'xls':
    case 'xlsx':
      return 'excel';
    case 'doc':
    case 'docx':
      return 'word';
    default:
      return extension;
  }
}