@lobehub/ui/es/FileTypeIcon/FileTypeIcon.mjs.map

Lobe UI is an open-source UI component library for building AIGC web apps

{"version":3,"file":"FileTypeIcon.mjs","names":["FileTypeIcon: FC<FileTypeIconProps>","FileIcon","FolderIcon","Center"],"sources":["../../src/FileTypeIcon/FileTypeIcon.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, cx, useThemeMode } from 'antd-style';\nimport { type FC, useMemo } from 'react';\n\nimport { Center } from '@/Flex';\n\nimport FileIcon from './components/FileIcon';\nimport FolderIcon from './components/FolderIcon';\nimport { styles } from './style';\nimport type { FileTypeIconProps } from './type';\n\nconst FileTypeIcon: FC<FileTypeIconProps> = ({\n  icon,\n  color,\n  filetype,\n  type = 'file',\n  size = 48,\n  style,\n  variant,\n  className,\n  ref,\n  ...rest\n}) => {\n  const { isDarkMode } = useThemeMode();\n  const isMono = variant === 'mono';\n\n  const filetypeShort = useMemo(\n    () => (filetype && filetype.length > 4 ? filetype.slice(0, 4) : filetype),\n    [filetype],\n  );\n\n  const fontSize = useMemo(() => {\n    if (filetypeShort && filetypeShort.length > 3) {\n      return 24 / (4 + (filetypeShort.length - 3));\n    }\n    return 6;\n  }, [filetypeShort]);\n\n  const iconColor = useMemo(\n    () =>\n      isMono ? (isDarkMode ? cssVar.colorFill : cssVar.colorBgContainer) : color || cssVar.geekblue,\n    [isMono, isDarkMode, color],\n  );\n\n  const content =\n    type === 'file' ? (\n      <FileIcon\n        filetypeShort={filetypeShort}\n        fontSize={fontSize}\n        hasIcon={!!icon}\n        iconColor={iconColor}\n        isMono={isMono}\n        size={size}\n        {...rest}\n      />\n    ) : (\n      <FolderIcon\n        filetype={filetype}\n        fontSize={fontSize}\n        hasIcon={!!icon}\n        iconColor={iconColor}\n        isMono={isMono}\n        size={size}\n        {...rest}\n      />\n    );\n\n  if (!icon) return content;\n\n  return (\n    <Center\n      className={cx(styles.container, className)}\n      flex={'none'}\n      height={size}\n      ref={ref}\n      style={style}\n      width={size}\n      {...rest}\n    >\n      <div\n        className={styles.inner}\n        style={{\n          fontSize: size / 2.4,\n          top: type === 'file' ? '20%' : '16%',\n        }}\n      >\n        {icon}\n      </div>\n      {content}\n    </Center>\n  );\n};\n\nFileTypeIcon.displayName = 'FileTypeIcon';\n\nexport default FileTypeIcon;\n"],"mappings":";;;;;;;;;;;AAYA,MAAMA,gBAAuC,EAC3C,MACA,OACA,UACA,OAAO,QACP,OAAO,IACP,OACA,SACA,WACA,KACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,cAAc;CACrC,MAAM,SAAS,YAAY;CAE3B,MAAM,gBAAgB,cACb,YAAY,SAAS,SAAS,IAAI,SAAS,MAAM,GAAG,EAAE,GAAG,UAChE,CAAC,SAAS,CACX;CAED,MAAM,WAAW,cAAc;AAC7B,MAAI,iBAAiB,cAAc,SAAS,EAC1C,QAAO,MAAM,KAAK,cAAc,SAAS;AAE3C,SAAO;IACN,CAAC,cAAc,CAAC;CAEnB,MAAM,YAAY,cAEd,SAAU,aAAa,OAAO,YAAY,OAAO,mBAAoB,SAAS,OAAO,UACvF;EAAC;EAAQ;EAAY;EAAM,CAC5B;CAED,MAAM,UACJ,SAAS,SACP,oBAACC;EACgB;EACL;EACV,SAAS,CAAC,CAAC;EACA;EACH;EACF;EACN,GAAI;GACJ,GAEF,oBAACC;EACW;EACA;EACV,SAAS,CAAC,CAAC;EACA;EACH;EACF;EACN,GAAI;GACJ;AAGN,KAAI,CAAC,KAAM,QAAO;AAElB,QACE,qBAACC;EACC,WAAW,GAAG,OAAO,WAAW,UAAU;EAC1C,MAAM;EACN,QAAQ;EACH;EACE;EACP,OAAO;EACP,GAAI;aAEJ,oBAAC;GACC,WAAW,OAAO;GAClB,OAAO;IACL,UAAU,OAAO;IACjB,KAAK,SAAS,SAAS,QAAQ;IAChC;aAEA;IACG,EACL;GACM;;AAIb,aAAa,cAAc;AAE3B,2BAAe"}