@teamturing/react-kit 2.55.0 → 2.56.0

package/dist/core/FileItem/index.d.ts

@@ -1,4 +1,4 @@
-import { HTMLProps } from 'react';
+import { ComponentType, HTMLProps, SVGProps } from 'react';
 import { SxProp } from '../../utils/styled-system';
 type Props = {
     file: File | Blob;
@@ -19,7 +19,11 @@ type Props = {
      * 시각적인 후행 부분에 상호작용할 요소를 정의합니다.
      */
     trailingAction?: React.ReactElement<HTMLProps<HTMLButtonElement>>;
+    /**
+     * file 일 때의 icon을 결정합니다.
+     */
+    renderFileIcon?: (fileType: string, file: Props['file']) => ComponentType<SVGProps<SVGSVGElement>>;
 } & SxProp;
-declare const FileItem: ({ file, variant, disabled, loading, validationStatus, trailingAction, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const FileItem: ({ file, variant, disabled, loading, validationStatus, trailingAction, renderFileIcon, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export default FileItem;
 export type { Props as FileItemProps };

package/dist/index.js

@@ -6880,11 +6880,12 @@ const FileItem = ({
   loading,
   validationStatus,
   trailingAction,
+  renderFileIcon = () => icons.DocumentIcon,
   ...props
 }) => {
   const fileType = file.type.match('image/*') ? 'image' : file.type.match('video/*') ? 'video' : 'whatever';
   const fileName = 'name' in file ? file.name : '';
-  const FileIcon = fileType === 'image' ? icons.PictureIcon : fileType === 'video' ? icons.VideoIcon : icons.DocumentIcon;
+  const FileIcon = fileType === 'image' ? icons.PictureIcon : fileType === 'video' ? icons.VideoIcon : renderFileIcon(fileType, file);
   const [objectUrl, setObjectUrl] = React.useState('');
   React.useEffect(() => {
     const url = URL.createObjectURL(file);

package/esm/core/FileItem/index.js

@@ -1,4 +1,4 @@
-import { ExclamationPointInCircleIcon, VideoIcon, DocumentIcon, PictureIcon } from '@teamturing/icons';
+import { PictureIcon, VideoIcon, ExclamationPointInCircleIcon, DocumentIcon } from '@teamturing/icons';
 import { forcePixelValue } from '@teamturing/utils';
 import { useState, useEffect } from 'react';
 import styled from 'styled-components';
@@ -16,11 +16,12 @@ const FileItem = ({
   loading,
   validationStatus,
   trailingAction,
+  renderFileIcon = () => DocumentIcon,
   ...props
 }) => {
   const fileType = file.type.match('image/*') ? 'image' : file.type.match('video/*') ? 'video' : 'whatever';
   const fileName = 'name' in file ? file.name : '';
-  const FileIcon = fileType === 'image' ? PictureIcon : fileType === 'video' ? VideoIcon : DocumentIcon;
+  const FileIcon = fileType === 'image' ? PictureIcon : fileType === 'video' ? VideoIcon : renderFileIcon(fileType, file);
   const [objectUrl, setObjectUrl] = useState('');
   useEffect(() => {
     const url = URL.createObjectURL(file);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.55.0",
+  "version": "2.56.0",
   "description": "React components, hooks for create teamturing web application",
   "author": "Sungchang Park <psch300@gmail.com> (https://github.com/psch300)",
   "homepage": "https://github.com/weareteamturing/bombe#readme",
@@ -66,5 +66,5 @@
     "react-textarea-autosize": "^8.5.3",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "73b98bed5075b0007554e7f1d56a763b0c48f381"
+  "gitHead": "9a817d9fa7e5164b1fd3d48905088aaee14b75f2"
 }