@fe-free/file 2.5.0 → 2.5.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @ones-wb/file
 
+## 2.5.2
+
+## 2.5.1
+
+### Patch Changes
+
+- feat: tree
+
 ## 2.5.0
 
 ## 2.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/file",
-  "version": "2.5.0",
+  "version": "2.5.2",
   "description": "",
   "main": "./src/index.ts",
   "author": "",

package/src/index.ts

@@ -1,2 +1 @@
-export { FileCard } from './file';
 export { JSONToXlsx, xlsxToJSON, xlsxToJSONAndValidate } from './xlsx';

package/src/file/file.stories.tsx

@@ -1,53 +0,0 @@
-import { FileCard } from '@fe-free/file';
-import type { StoryObj } from '@storybook/react-vite';
-import { PRESET_FILE_ICONS } from './helper';
-
-const meta = {
-  title: '@fe-free/file/FileCard',
-  component: FileCard,
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof FileCard>;
-
-export const Default: Story = {
-  render: () => {
-    let size = 0;
-    return (
-      <div>
-        <div className="flex flex-col gap-2">
-          {PRESET_FILE_ICONS.map((item) => (
-            <div key={item.key} className="flex gap-2">
-              <FileCard name={`这是文件名.${item.ext.join('.') || ''}`} size={(size += 1000000)} />
-            </div>
-          ))}
-        </div>
-      </div>
-    );
-  },
-};
-
-export const Direction: Story = {
-  render: () => (
-    <div>
-      <FileCard name="这是文件名.pdf" size={10000} direction="vertical" />
-    </div>
-  ),
-};
-
-export const FileIcon: Story = {
-  render: () => (
-    <div>
-      <FileCard.FileIcon name="这是文件名.pdf" className="text-3xl" />
-    </div>
-  ),
-};
-
-export const FileIconExt: Story = {
-  render: () => (
-    <div>
-      <FileCard.FileIcon name="这是文件名.xlsx" showExt className="text-5xl" />
-    </div>
-  ),
-};

package/src/file/helper.tsx

@@ -1,120 +0,0 @@
-import {
-  FileExcelFilled,
-  FileImageFilled,
-  FileMarkdownFilled,
-  FilePdfFilled,
-  FilePptFilled,
-  FileTextFilled,
-  FileWordFilled,
-  FileZipFilled,
-} from '@ant-design/icons';
-import AudioIcon from './icon/AudioIcon';
-import VideoIcon from './icon/VideoIcon';
-
-type PresetIcons =
-  | 'default'
-  | 'excel'
-  | 'image'
-  | 'markdown'
-  | 'pdf'
-  | 'ppt'
-  | 'word'
-  | 'zip'
-  | 'video'
-  | 'audio';
-
-const IMG_EXTS = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp', 'svg'];
-
-const DEFAULT_ICON_COLOR = '#8c8c8c';
-const DEFAULT_ICON = <FileTextFilled />;
-
-const PRESET_FILE_ICONS: {
-  key: PresetIcons;
-  ext: string[];
-  color: string;
-  icon: React.ReactElement;
-}[] = [
-  {
-    key: 'default',
-    icon: DEFAULT_ICON,
-    color: DEFAULT_ICON_COLOR,
-    ext: [],
-  },
-  {
-    key: 'excel',
-    icon: <FileExcelFilled />,
-    color: '#22b35e',
-    ext: ['xlsx', 'xls'],
-  },
-  {
-    key: 'image',
-    icon: <FileImageFilled />,
-    color: 'rgb(22, 119, 255)',
-    ext: IMG_EXTS,
-  },
-  {
-    key: 'markdown',
-    icon: <FileMarkdownFilled />,
-    color: DEFAULT_ICON_COLOR,
-    ext: ['md', 'mdx'],
-  },
-  {
-    key: 'pdf',
-    icon: <FilePdfFilled />,
-    color: '#ff4d4f',
-    ext: ['pdf'],
-  },
-  {
-    key: 'ppt',
-    icon: <FilePptFilled />,
-    color: '#ff6e31',
-    ext: ['ppt', 'pptx'],
-  },
-  {
-    key: 'word',
-    icon: <FileWordFilled />,
-    color: '#1677ff',
-    ext: ['doc', 'docx'],
-  },
-  {
-    key: 'zip',
-    icon: <FileZipFilled />,
-    color: '#fab714',
-    ext: ['zip', 'rar', '7z', 'tar', 'gz'],
-  },
-  {
-    key: 'video',
-    icon: <VideoIcon />,
-    color: '#ff4d4f',
-    ext: ['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv'],
-  },
-  {
-    key: 'audio',
-    icon: <AudioIcon />,
-    color: '#FFDC00',
-    ext: ['mp3', 'wav', 'flac', 'ape', 'aac', 'ogg'],
-  },
-];
-
-function isImage(name: string) {
-  return IMG_EXTS.includes(name.split('.').pop() || '');
-}
-
-function getFileExt(name?: string) {
-  return name?.split('.').pop() || '';
-}
-
-function getFileSize(size: number) {
-  if (size < 1024) {
-    return size + 'B';
-  }
-  if (size < 1024 * 1024) {
-    return (size / 1024).toFixed(2) + 'KB';
-  }
-  if (size < 1024 * 1024 * 1024) {
-    return (size / 1024 / 1024).toFixed(2) + 'MB';
-  }
-  return (size / 1024 / 1024 / 1024).toFixed(2) + 'GB';
-}
-
-export { DEFAULT_ICON, DEFAULT_ICON_COLOR, getFileExt, getFileSize, isImage, PRESET_FILE_ICONS };

package/src/file/icon/AudioIcon.tsx

@@ -1,20 +0,0 @@
-export default function AudioIcon() {
-  return (
-    <svg
-      width="1em"
-      height="1em"
-      viewBox="0 0 16 16"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      //xmlnsXlink="http://www.w3.org/1999/xlink"
-    >
-      <title>audio</title>
-      <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-        <path
-          d="M14.1178571,4.0125 C14.225,4.11964286 14.2857143,4.26428571 14.2857143,4.41607143 L14.2857143,15.4285714 C14.2857143,15.7446429 14.0303571,16 13.7142857,16 L2.28571429,16 C1.96964286,16 1.71428571,15.7446429 1.71428571,15.4285714 L1.71428571,0.571428571 C1.71428571,0.255357143 1.96964286,0 2.28571429,0 L9.86964286,0 C10.0214286,0 10.1678571,0.0607142857 10.275,0.167857143 L14.1178571,4.0125 Z M10.7315824,7.11216117 C10.7428131,7.15148751 10.7485063,7.19218979 10.7485063,7.23309113 L10.7485063,8.07742614 C10.7484199,8.27364959 10.6183424,8.44607275 10.4296853,8.50003683 L8.32984514,9.09986306 L8.32984514,11.7071803 C8.32986605,12.5367078 7.67249692,13.217028 6.84345686,13.2454634 L6.79068592,13.2463395 C6.12766108,13.2463395 5.53916361,12.8217001 5.33010655,12.1924966 C5.1210495,11.563293 5.33842118,10.8709227 5.86959669,10.4741173 C6.40077221,10.0773119 7.12636292,10.0652587 7.67042486,10.4442027 L7.67020842,7.74937024 L7.68449368,7.74937024 C7.72405122,7.59919041 7.83988806,7.48101083 7.98924584,7.4384546 L10.1880418,6.81004755 C10.42156,6.74340323 10.6648954,6.87865515 10.7315824,7.11216117 Z M9.60714286,1.31785714 L12.9678571,4.67857143 L9.60714286,4.67857143 L9.60714286,1.31785714 Z"
-          fill="currentColor"
-        />
-      </g>
-    </svg>
-  );
-}

package/src/file/icon/VideoIcon.tsx

@@ -1,20 +0,0 @@
-export default function VideoIcon() {
-  return (
-    <svg
-      width="1em"
-      height="1em"
-      viewBox="0 0 16 16"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      // xmlnsXlink="http://www.w3.org/1999/xlink"
-    >
-      <title>video</title>
-      <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-        <path
-          d="M14.1178571,4.0125 C14.225,4.11964286 14.2857143,4.26428571 14.2857143,4.41607143 L14.2857143,15.4285714 C14.2857143,15.7446429 14.0303571,16 13.7142857,16 L2.28571429,16 C1.96964286,16 1.71428571,15.7446429 1.71428571,15.4285714 L1.71428571,0.571428571 C1.71428571,0.255357143 1.96964286,0 2.28571429,0 L9.86964286,0 C10.0214286,0 10.1678571,0.0607142857 10.275,0.167857143 L14.1178571,4.0125 Z M12.9678571,4.67857143 L9.60714286,1.31785714 L9.60714286,4.67857143 L12.9678571,4.67857143 Z M10.5379461,10.3101106 L6.68957555,13.0059749 C6.59910784,13.0693494 6.47439406,13.0473861 6.41101953,12.9569184 C6.3874624,12.9232903 6.37482581,12.8832269 6.37482581,12.8421686 L6.37482581,7.45043999 C6.37482581,7.33998304 6.46436886,7.25043999 6.57482581,7.25043999 C6.61588409,7.25043999 6.65594753,7.26307658 6.68957555,7.28663371 L10.5379461,9.98249803 C10.6284138,10.0458726 10.6503772,10.1705863 10.5870027,10.2610541 C10.5736331,10.2801392 10.5570312,10.2967411 10.5379461,10.3101106 Z"
-          fill="currentColor"
-        />
-      </g>
-    </svg>
-  );
-}

package/src/file/index.tsx

@@ -1,63 +0,0 @@
-import classNames from 'classnames';
-import { useMemo } from 'react';
-import {
-  DEFAULT_ICON,
-  DEFAULT_ICON_COLOR,
-  getFileExt,
-  getFileSize,
-  PRESET_FILE_ICONS,
-} from './helper';
-
-function FileIcon({
-  name,
-  className,
-  showExt = false,
-}: {
-  name?: string;
-  className?: string;
-  showExt?: boolean;
-}) {
-  const ext = getFileExt(name) || '';
-
-  const iconItem = useMemo(() => {
-    return PRESET_FILE_ICONS.find((item) => item.ext.includes(ext));
-  }, [ext]);
-
-  return (
-    <div className={classNames('flex flex-col items-center', className)}>
-      <div style={{ color: iconItem?.color || DEFAULT_ICON_COLOR }}>
-        {iconItem?.icon || DEFAULT_ICON}
-      </div>
-      {showExt && <div className="text-base">{ext}</div>}
-    </div>
-  );
-}
-
-function FileCard({
-  name,
-  size,
-  direction = 'horizontal',
-}: {
-  name?: string;
-  size?: number;
-  direction?: 'horizontal' | 'vertical';
-}) {
-  return (
-    <div
-      className={classNames('flex items-center gap-1', {
-        'flex-row items-center': direction === 'horizontal',
-        'flex-col': direction === 'vertical',
-      })}
-    >
-      <FileIcon name={name} className="text-4xl" />
-      <div className={classNames('flex flex-col', { 'items-center': direction === 'vertical' })}>
-        {name && <div className="truncate">{name}</div>}
-        {size && <div className="text-sm text-desc">{getFileSize(size)}</div>}
-      </div>
-    </div>
-  );
-}
-
-FileCard.FileIcon = FileIcon;
-
-export { FileCard };