refactor: generate asset extensions

Kyutech-C3 · Jun 7, 2024 · 679563a · 679563a
1 parent b6d7332
commit 679563a
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 48 deletions.
diff --git a/src/constants/supportExtension/asset.ts b/src/constants/supportExtension/asset.ts
@@ -21,5 +21,17 @@ export const ASSET_EXTENSIONS = [
   },
 ];
 
-export const ASSET_ACCEPT_EXTENSIONS =
-  'image/png, image/jpeg, image/jpg, image/bmp, image/gif, video/mp4, video/mov, audio/mp3, audio/wav, audio/m4a, model/gltf, model/fbx, application/zip';
+const categoryToPrefixMap: { [key: string]: string } = {
+  画像: 'image',
+  動画: 'video',
+  音源: 'audio',
+  モデル: 'model',
+  zip: 'application',
+};
+
+export const ASSET_ACCEPT_EXTENSIONS = ASSET_EXTENSIONS.flatMap((category) =>
+  category.exts.map((ext) => {
+    const prefix = categoryToPrefixMap[category.category];
+    return `${prefix}/${ext}`;
+  })
+).join(', ');
diff --git a/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx b/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx
@@ -21,51 +21,54 @@ type Props = {
   handleUploadAssets: (files: FileList) => Promise<void>;
   assets: Asset[];
 };
-export const AssetUpload: FC<Props> = ({ handleUploadAssets, assets }) => (
-  <>
-    <Vertical className="items-center">
-      <Typography className="text-lg font-bold">アセット</Typography>
-      <Typography className="text-red-500" variant="body2">
-        必須
-      </Typography>
-      <SupportExtPopOver supportedExts={ASSET_EXTENSIONS} />
-    </Vertical>
-    <Vertical className="gap-2 w-full overflow-scroll">
-      {assets.map((asset) => AssetRender(asset, 'w-24 p-0'))}
-    </Vertical>
-    <DropImage
-      onDrop={(e) => {
-        void handleUploadAssets(e);
-      }}
-      className="rounded-md relative w-full h-64 border-2 border-orange-pop"
-    >
-      <Center className="h-full -z-20 absolute flex flex-col">
-        <div
-          className={cn('bg-pale-red/25 w-full absolute h-0 bottom-0 -z-30', {
-            'h-full': assets.length > 0,
-          })}
-        />
-        <Typography variant="body1">
-          クリック または ドラッグ&ドロップ
-        </Typography>
-        <Typography variant="body2" className="text-gray-500">
-          {assets.length > 0
-            ? `${assets.length}件のアセットをアップロード済み`
-            : 'アセットをアップロードしてください'}
+export const AssetUpload: FC<Props> = ({ handleUploadAssets, assets }) => {
+  console.log('asset: ', ASSET_ACCEPT_EXTENSIONS);
+  return (
+    <>
+      <Vertical className="items-center">
+        <Typography className="text-lg font-bold">アセット</Typography>
+        <Typography className="text-red-500" variant="body2">
+          必須
         </Typography>
-      </Center>
-      <Input
-        className="cursor-pointer opacity-0 h-full"
-        onChange={(e) => {
-          if (!e.target.files?.length || !e.target.files[0]) {
-            return;
-          }
-          void handleUploadAssets(e.target.files);
+        <SupportExtPopOver supportedExts={ASSET_EXTENSIONS} />
+      </Vertical>
+      <Vertical className="gap-2 w-full overflow-scroll">
+        {assets.map((asset) => AssetRender(asset, 'w-24 p-0'))}
+      </Vertical>
+      <DropImage
+        onDrop={(e) => {
+          void handleUploadAssets(e);
         }}
-        multiple
-        accept={ASSET_ACCEPT_EXTENSIONS}
-        type="file"
-      />
-    </DropImage>
-  </>
-);
+        className="rounded-md relative w-full h-64 border-2 border-orange-pop"
+      >
+        <Center className="h-full -z-20 absolute flex flex-col">
+          <div
+            className={cn('bg-pale-red/25 w-full absolute h-0 bottom-0 -z-30', {
+              'h-full': assets.length > 0,
+            })}
+          />
+          <Typography variant="body1">
+            クリック または ドラッグ&ドロップ
+          </Typography>
+          <Typography variant="body2" className="text-gray-500">
+            {assets.length > 0
+              ? `${assets.length}件のアセットをアップロード済み`
+              : 'アセットをアップロードしてください'}
+          </Typography>
+        </Center>
+        <Input
+          className="cursor-pointer opacity-0 h-full"
+          onChange={(e) => {
+            if (!e.target.files?.length || !e.target.files[0]) {
+              return;
+            }
+            void handleUploadAssets(e.target.files);
+          }}
+          multiple
+          accept={ASSET_ACCEPT_EXTENSIONS}
+          type="file"
+        />
+      </DropImage>
+    </>
+  );
+};