@flipdish/portal-library 8.5.3 → 8.5.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/organisms/AssetManager/services/asset.service.cjs.js +1 -1
- package/dist/components/organisms/AssetManager/services/asset.service.cjs.js.map +1 -1
- package/dist/components/organisms/AssetManager/services/asset.service.js +1 -1
- package/dist/components/organisms/AssetManager/services/asset.service.js.map +1 -1
- package/dist/components/organisms/FileUpload/components/FileItem.cjs.js +1 -1
- package/dist/components/organisms/FileUpload/components/FileItem.cjs.js.map +1 -1
- package/dist/components/organisms/FileUpload/components/FileItem.js +1 -1
- package/dist/components/organisms/FileUpload/components/FileItem.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var t=require("../../../../utilities/apiUtils.cjs.js"),s=require("@flipdish/asset-management"),e=require("../../../../utilities/fileUtils.cjs.js");const r=()=>{const t=window.location?.host?.includes("portal.flipdish.com");return t?"https://api.portal.flipdish.com/assets":"https://api-prod-staging.portal.flipdishdev.com/assets"},i=new s.Configuration({basePath:r(),baseOptions:{withCredentials:!0}}),a=new s.AssetsApi(i);exports.getAssets=async(t,s)=>{const e=((t,s)=>{if(!t)return;const e=s?`?brandId=${s}`:"";return`${r()}/orgs/${t}/assets${e}`})(t,s);if(!e)throw new Error("Organization ID is required to fetch assets");const i=await fetch(e,{method:"GET",credentials:"include"});if(!i.ok)throw new Error(`Failed to fetch assets: ${i.statusText}`);return await i.json()},exports.uploadAsset=async s=>{const{orgId:r,brandId:i,files:o}=s;if(!r)throw new Error("Organization ID is required to upload assets");if(!o||0===o.length)throw new Error("At least one file is required to upload");const n=o.map(e.sanitizeFile);try{return(await a.uploadAsset(r,n,i)).data}catch(s){const e=t.getErrorMessage(s,"Failed to upload assets");throw new Error(e)}};
|
|
2
2
|
//# sourceMappingURL=asset.service.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"asset.service.cjs.js","sources":["../../../../../src/components/organisms/AssetManager/services/asset.service.ts"],"sourcesContent":["import { getErrorMessage } from '@fd/utilities/apiUtils';\nimport { AssetsApi, Configuration } from '@flipdish/asset-management';\n\nimport { sanitizeFile } from '../../../../utilities/fileUtils';\nimport type { ListAssetsResponse, UploadAssetResponse } from '../types/assets.type';\n\nconst PROD_API_URL = 'https://api.portal.flipdish.com/assets';\nconst DEV_STAGING_API_URL = 'https://api-prod-staging.portal.flipdishdev.com/assets';\n\n/**\n * Gets the asset management API base URL based on the current environment\n * @returns The appropriate API URL for the current environment\n */\nconst getAssetManagementApiUrl = (): string => {\n const isProd = window.location?.host?.includes('portal.flipdish.com');\n\n if (isProd) {\n return PROD_API_URL;\n }\n\n return DEV_STAGING_API_URL;\n};\n\n/**\n * Configuration for the asset management API client\n * - basePath: API base URL based on environment\n * - baseOptions.withCredentials: Send cookies/credentials with requests\n */\nconst configuration = new Configuration({\n basePath: getAssetManagementApiUrl(),\n baseOptions: {\n withCredentials: true,\n },\n});\n\nconst assetsApi = new AssetsApi(configuration);\n\n/**\n * Fetches assets from the asset management service API\n * @param orgId - organization ID.\n * @param brandId - brand ID.\n * @returns Promise resolving to an array of assets\n */\nexport const getAssets = async (orgId: string, brandId?: string): Promise<ListAssetsResponse> => {\n if (!
|
|
1
|
+
{"version":3,"file":"asset.service.cjs.js","sources":["../../../../../src/components/organisms/AssetManager/services/asset.service.ts"],"sourcesContent":["import { getErrorMessage } from '@fd/utilities/apiUtils';\nimport { AssetsApi, Configuration } from '@flipdish/asset-management';\n\nimport { sanitizeFile } from '../../../../utilities/fileUtils';\nimport type { ListAssetsResponse, UploadAssetResponse } from '../types/assets.type';\n\nconst PROD_API_URL = 'https://api.portal.flipdish.com/assets';\nconst DEV_STAGING_API_URL = 'https://api-prod-staging.portal.flipdishdev.com/assets';\n\n/**\n * Gets the asset management API base URL based on the current environment\n * @returns The appropriate API URL for the current environment\n */\nconst getAssetManagementApiUrl = (): string => {\n const isProd = window.location?.host?.includes('portal.flipdish.com');\n\n if (isProd) {\n return PROD_API_URL;\n }\n\n return DEV_STAGING_API_URL;\n};\n\n/**\n * Configuration for the asset management API client\n * - basePath: API base URL based on environment\n * - baseOptions.withCredentials: Send cookies/credentials with requests\n */\nconst configuration = new Configuration({\n basePath: getAssetManagementApiUrl(),\n baseOptions: {\n withCredentials: true,\n },\n});\n\nconst assetsApi = new AssetsApi(configuration);\n\nconst buildApiUrl = (orgId: string, brandId?: string): string | undefined => {\n if (!orgId) return undefined;\n const brandIdQueryParam = brandId ? `?brandId=${brandId}` : '';\n const baseUrl = getAssetManagementApiUrl();\n return `${baseUrl}/orgs/${orgId}/assets${brandIdQueryParam}`;\n};\n\n/**\n * Fetches assets from the asset management service API\n * @param orgId - organization ID.\n * @param brandId - brand ID.\n * @returns Promise resolving to an array of assets\n */\nexport const getAssets = async (orgId: string, brandId?: string): Promise<ListAssetsResponse> => {\n const apiUrl = buildApiUrl(orgId, brandId);\n\n if (!apiUrl) {\n throw new Error('Organization ID is required to fetch assets');\n }\n\n const response = await fetch(apiUrl, {\n method: 'GET',\n credentials: 'include',\n });\n\n if (!response.ok) {\n throw new Error(`Failed to fetch assets: ${response.statusText}`);\n }\n\n return (await response.json()) as ListAssetsResponse;\n};\n\n/**\n * Upload parameters for asset upload\n */\nexport interface UploadAssetParams {\n /** Organization ID */\n orgId: string;\n /** Optional brand ID */\n brandId?: string;\n /** The files to upload */\n files: File[];\n}\n\n/**\n * Uploads multiple assets to the asset management service API\n * Sanitizes filenames by replacing spaces with dashes before uploading\n * @param params - Upload parameters containing orgId, brandId, and files\n * @returns Promise resolving to an array of uploaded assets\n */\nexport const uploadAsset = async (params: UploadAssetParams): Promise<UploadAssetResponse> => {\n const { orgId, brandId, files } = params;\n\n if (!orgId) {\n throw new Error('Organization ID is required to upload assets');\n }\n\n if (!files || files.length === 0) {\n throw new Error('At least one file is required to upload');\n }\n\n // Sanitize filenames by replacing spaces with dashes\n const sanitizedFiles = files.map(sanitizeFile);\n\n try {\n const response = await assetsApi.uploadAsset(orgId, sanitizedFiles, brandId);\n return response.data;\n } catch (error: unknown) {\n const errorMessage = getErrorMessage(error, 'Failed to upload assets');\n throw new Error(errorMessage);\n }\n};\n"],"names":["getAssetManagementApiUrl","isProd","window","location","host","includes","configuration","Configuration","basePath","baseOptions","withCredentials","assetsApi","AssetsApi","async","orgId","brandId","apiUrl","brandIdQueryParam","buildApiUrl","Error","response","fetch","method","credentials","ok","statusText","json","params","files","length","sanitizedFiles","map","sanitizeFile","uploadAsset","data","error","errorMessage","getErrorMessage"],"mappings":"gKAMA,MAOMA,EAA2B,KAC/B,MAAMC,EAASC,OAAOC,UAAUC,MAAMC,SAAS,uBAE/C,OAAIJ,EAVe,yCACO,0DAqBtBK,EAAgB,IAAIC,EAAAA,cAAc,CACtCC,SAAUR,IACVS,YAAa,CACXC,iBAAiB,KAIfC,EAAY,IAAIC,EAAAA,UAAUN,qBAePO,MAAOC,EAAeC,KAC7C,MAAMC,EAdY,EAACF,EAAeC,KAClC,IAAKD,EAAO,OACZ,MAAMG,EAAoBF,EAAU,YAAYA,IAAY,GAE5D,MAAO,GADSf,YACUc,WAAeG,KAU1BC,CAAYJ,EAAOC,GAElC,IAAKC,EACH,MAAM,IAAIG,MAAM,+CAGlB,MAAMC,QAAiBC,MAAML,EAAQ,CACnCM,OAAQ,MACRC,YAAa,YAGf,IAAKH,EAASI,GACZ,MAAM,IAAIL,MAAM,2BAA2BC,EAASK,cAGtD,aAAcL,EAASM,4BAqBEb,MAAOc,IAChC,MAAMb,MAAEA,EAAKC,QAAEA,EAAOa,MAAEA,GAAUD,EAElC,IAAKb,EACH,MAAM,IAAIK,MAAM,gDAGlB,IAAKS,GAA0B,IAAjBA,EAAMC,OAClB,MAAM,IAAIV,MAAM,2CAIlB,MAAMW,EAAiBF,EAAMG,IAAIC,gBAEjC,IAEE,aADuBrB,EAAUsB,YAAYnB,EAAOgB,EAAgBf,IACpDmB,IAClB,CAAE,MAAOC,GACP,MAAMC,EAAeC,EAAAA,gBAAgBF,EAAO,2BAC5C,MAAM,IAAIhB,MAAMiB,EAClB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{getErrorMessage as t}from"../../../../utilities/apiUtils.js";import{Configuration as s,AssetsApi as r}from"@flipdish/asset-management";import{sanitizeFile as
|
|
1
|
+
import{getErrorMessage as t}from"../../../../utilities/apiUtils.js";import{Configuration as s,AssetsApi as r}from"@flipdish/asset-management";import{sanitizeFile as e}from"../../../../utilities/fileUtils.js";const i=()=>{const t=window.location?.host?.includes("portal.flipdish.com");return t?"https://api.portal.flipdish.com/assets":"https://api-prod-staging.portal.flipdishdev.com/assets"},o=new r(new s({basePath:i(),baseOptions:{withCredentials:!0}})),a=async(t,s)=>{const r=((t,s)=>{if(!t)return;const r=s?`?brandId=${s}`:"";return`${i()}/orgs/${t}/assets${r}`})(t,s);if(!r)throw new Error("Organization ID is required to fetch assets");const e=await fetch(r,{method:"GET",credentials:"include"});if(!e.ok)throw new Error(`Failed to fetch assets: ${e.statusText}`);return await e.json()},n=async s=>{const{orgId:r,brandId:i,files:a}=s;if(!r)throw new Error("Organization ID is required to upload assets");if(!a||0===a.length)throw new Error("At least one file is required to upload");const n=a.map(e);try{return(await o.uploadAsset(r,n,i)).data}catch(s){const r=t(s,"Failed to upload assets");throw new Error(r)}};export{a as getAssets,n as uploadAsset};
|
|
2
2
|
//# sourceMappingURL=asset.service.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"asset.service.js","sources":["../../../../../src/components/organisms/AssetManager/services/asset.service.ts"],"sourcesContent":["import { getErrorMessage } from '@fd/utilities/apiUtils';\nimport { AssetsApi, Configuration } from '@flipdish/asset-management';\n\nimport { sanitizeFile } from '../../../../utilities/fileUtils';\nimport type { ListAssetsResponse, UploadAssetResponse } from '../types/assets.type';\n\nconst PROD_API_URL = 'https://api.portal.flipdish.com/assets';\nconst DEV_STAGING_API_URL = 'https://api-prod-staging.portal.flipdishdev.com/assets';\n\n/**\n * Gets the asset management API base URL based on the current environment\n * @returns The appropriate API URL for the current environment\n */\nconst getAssetManagementApiUrl = (): string => {\n const isProd = window.location?.host?.includes('portal.flipdish.com');\n\n if (isProd) {\n return PROD_API_URL;\n }\n\n return DEV_STAGING_API_URL;\n};\n\n/**\n * Configuration for the asset management API client\n * - basePath: API base URL based on environment\n * - baseOptions.withCredentials: Send cookies/credentials with requests\n */\nconst configuration = new Configuration({\n basePath: getAssetManagementApiUrl(),\n baseOptions: {\n withCredentials: true,\n },\n});\n\nconst assetsApi = new AssetsApi(configuration);\n\n/**\n * Fetches assets from the asset management service API\n * @param orgId - organization ID.\n * @param brandId - brand ID.\n * @returns Promise resolving to an array of assets\n */\nexport const getAssets = async (orgId: string, brandId?: string): Promise<ListAssetsResponse> => {\n if (!
|
|
1
|
+
{"version":3,"file":"asset.service.js","sources":["../../../../../src/components/organisms/AssetManager/services/asset.service.ts"],"sourcesContent":["import { getErrorMessage } from '@fd/utilities/apiUtils';\nimport { AssetsApi, Configuration } from '@flipdish/asset-management';\n\nimport { sanitizeFile } from '../../../../utilities/fileUtils';\nimport type { ListAssetsResponse, UploadAssetResponse } from '../types/assets.type';\n\nconst PROD_API_URL = 'https://api.portal.flipdish.com/assets';\nconst DEV_STAGING_API_URL = 'https://api-prod-staging.portal.flipdishdev.com/assets';\n\n/**\n * Gets the asset management API base URL based on the current environment\n * @returns The appropriate API URL for the current environment\n */\nconst getAssetManagementApiUrl = (): string => {\n const isProd = window.location?.host?.includes('portal.flipdish.com');\n\n if (isProd) {\n return PROD_API_URL;\n }\n\n return DEV_STAGING_API_URL;\n};\n\n/**\n * Configuration for the asset management API client\n * - basePath: API base URL based on environment\n * - baseOptions.withCredentials: Send cookies/credentials with requests\n */\nconst configuration = new Configuration({\n basePath: getAssetManagementApiUrl(),\n baseOptions: {\n withCredentials: true,\n },\n});\n\nconst assetsApi = new AssetsApi(configuration);\n\nconst buildApiUrl = (orgId: string, brandId?: string): string | undefined => {\n if (!orgId) return undefined;\n const brandIdQueryParam = brandId ? `?brandId=${brandId}` : '';\n const baseUrl = getAssetManagementApiUrl();\n return `${baseUrl}/orgs/${orgId}/assets${brandIdQueryParam}`;\n};\n\n/**\n * Fetches assets from the asset management service API\n * @param orgId - organization ID.\n * @param brandId - brand ID.\n * @returns Promise resolving to an array of assets\n */\nexport const getAssets = async (orgId: string, brandId?: string): Promise<ListAssetsResponse> => {\n const apiUrl = buildApiUrl(orgId, brandId);\n\n if (!apiUrl) {\n throw new Error('Organization ID is required to fetch assets');\n }\n\n const response = await fetch(apiUrl, {\n method: 'GET',\n credentials: 'include',\n });\n\n if (!response.ok) {\n throw new Error(`Failed to fetch assets: ${response.statusText}`);\n }\n\n return (await response.json()) as ListAssetsResponse;\n};\n\n/**\n * Upload parameters for asset upload\n */\nexport interface UploadAssetParams {\n /** Organization ID */\n orgId: string;\n /** Optional brand ID */\n brandId?: string;\n /** The files to upload */\n files: File[];\n}\n\n/**\n * Uploads multiple assets to the asset management service API\n * Sanitizes filenames by replacing spaces with dashes before uploading\n * @param params - Upload parameters containing orgId, brandId, and files\n * @returns Promise resolving to an array of uploaded assets\n */\nexport const uploadAsset = async (params: UploadAssetParams): Promise<UploadAssetResponse> => {\n const { orgId, brandId, files } = params;\n\n if (!orgId) {\n throw new Error('Organization ID is required to upload assets');\n }\n\n if (!files || files.length === 0) {\n throw new Error('At least one file is required to upload');\n }\n\n // Sanitize filenames by replacing spaces with dashes\n const sanitizedFiles = files.map(sanitizeFile);\n\n try {\n const response = await assetsApi.uploadAsset(orgId, sanitizedFiles, brandId);\n return response.data;\n } catch (error: unknown) {\n const errorMessage = getErrorMessage(error, 'Failed to upload assets');\n throw new Error(errorMessage);\n }\n};\n"],"names":["getAssetManagementApiUrl","isProd","window","location","host","includes","assetsApi","AssetsApi","Configuration","basePath","baseOptions","withCredentials","getAssets","async","orgId","brandId","apiUrl","brandIdQueryParam","buildApiUrl","Error","response","fetch","method","credentials","ok","statusText","json","uploadAsset","params","files","length","sanitizedFiles","map","sanitizeFile","data","error","errorMessage","getErrorMessage"],"mappings":"gNAMA,MAOMA,EAA2B,KAC/B,MAAMC,EAASC,OAAOC,UAAUC,MAAMC,SAAS,uBAE/C,OAAIJ,EAVe,yCACO,0DA4BtBK,EAAY,IAAIC,EAPA,IAAIC,EAAc,CACtCC,SAAUT,IACVU,YAAa,CACXC,iBAAiB,MAmBRC,EAAYC,MAAOC,EAAeC,KAC7C,MAAMC,EAdY,EAACF,EAAeC,KAClC,IAAKD,EAAO,OACZ,MAAMG,EAAoBF,EAAU,YAAYA,IAAY,GAE5D,MAAO,GADSf,YACUc,WAAeG,KAU1BC,CAAYJ,EAAOC,GAElC,IAAKC,EACH,MAAM,IAAIG,MAAM,+CAGlB,MAAMC,QAAiBC,MAAML,EAAQ,CACnCM,OAAQ,MACRC,YAAa,YAGf,IAAKH,EAASI,GACZ,MAAM,IAAIL,MAAM,2BAA2BC,EAASK,cAGtD,aAAcL,EAASM,QAqBZC,EAAcd,MAAOe,IAChC,MAAMd,MAAEA,EAAKC,QAAEA,EAAOc,MAAEA,GAAUD,EAElC,IAAKd,EACH,MAAM,IAAIK,MAAM,gDAGlB,IAAKU,GAA0B,IAAjBA,EAAMC,OAClB,MAAM,IAAIX,MAAM,2CAIlB,MAAMY,EAAiBF,EAAMG,IAAIC,GAEjC,IAEE,aADuB3B,EAAUqB,YAAYb,EAAOiB,EAAgBhB,IACpDmB,IAClB,CAAE,MAAOC,GACP,MAAMC,EAAeC,EAAgBF,EAAO,2BAC5C,MAAM,IAAIhB,MAAMiB,EAClB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime");require("react");var r=require("@mui/material/Box"),t=require("@mui/material/
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime");require("react");var r=require("@mui/material/Box"),t=require("@mui/material/styles/styled"),i=require("@mui/material/styles/useTheme"),a=require("../../../atoms/IconButton/index.cjs.js"),s=require("../../../atoms/LinearProgress/index.cjs.js"),n=require("@mui/material/Typography"),o=require("../../../../icons/Cancel/index.cjs.js"),l=require("../../../../providers/TranslationProvider.cjs.js"),c=require("./FileThumbnail.cjs.js");const d=t(r,{shouldForwardProp:e=>"hasError"!==e})((({theme:e,hasError:r})=>({display:"flex",alignItems:"center",gap:e.spacing(2),padding:e.spacing(2),borderBottom:`1px solid ${e.palette.semantic.stroke["stroke-weak"]}`,backgroundColor:r?e.palette.semantic.fill["fill-error-weak"]:e.palette.semantic.background["background-raised"]}))),x=t(r)((({theme:e})=>({flex:1,display:"flex",flexDirection:"row",gap:e.spacing(1),overflow:"hidden",minWidth:0}))),u=t(r)((()=>({flex:1,display:"flex",overflow:"hidden",flexDirection:"column",minWidth:0}))),m=t(r)((()=>({display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"flex-end"}))),p=t(n)((()=>({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}))),h=t(s.LinearProgress)({width:"250px"});module.exports=({file:r,error:t=null,isUploading:s=!1,onRemove:j})=>{const f=i(),{translate:g}=l.useTranslation();return e.jsxs(d,{hasError:!!t,children:[e.jsx(c,{file:r}),e.jsxs(x,{children:[e.jsxs(u,{children:[e.jsx(p,{color:f.palette.semantic.text["text-strong"],variant:"captionWeak",children:r.name}),e.jsx(n,{color:f.palette.semantic.text["text-weak"],variant:"captionWeak",children:(e=>{if(0===e)return"0 Bytes";const r=Math.floor(Math.log(e)/Math.log(1024));return`${Math.round(e/Math.pow(1024,r)*100)/100} ${["B","KB","MB","GB"][r]}`})(r.size)})]}),e.jsxs(m,{children:[t&&e.jsx(n,{color:f.palette.semantic.text["text-error"],variant:"captionWeak",children:t}),s&&e.jsx(h,{})]})]}),e.jsx(a.IconButton,{"aria-label":g("Remove_file"),onClick:()=>{j(r)},size:"small",tone:"neutral",variant:"tertiary",children:e.jsx(o,{})})]})};
|
|
2
2
|
//# sourceMappingURL=FileItem.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileItem.cjs.js","sources":["../../../../../src/components/organisms/FileUpload/components/FileItem.tsx"],"sourcesContent":["import React from 'react';\n\nimport Box from '@mui/material/Box';\nimport
|
|
1
|
+
{"version":3,"file":"FileItem.cjs.js","sources":["../../../../../src/components/organisms/FileUpload/components/FileItem.tsx"],"sourcesContent":["import React from 'react';\n\nimport Box from '@mui/material/Box';\nimport styled from '@mui/material/styles/styled';\nimport useTheme from '@mui/material/styles/useTheme';\n\nimport IconButton from '@fd/components/atoms/IconButton';\nimport LinearProgress from '@fd/components/atoms/LinearProgress';\nimport Typography from '@fd/components/atoms/Typography';\nimport CancelIcon from '@fd/icons/Cancel';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\n\nimport FileThumbnail from './FileThumbnail';\n\nconst StyledFileItemContainer = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'hasError',\n})<{ hasError?: boolean }>(({ theme, hasError }) => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(2),\n padding: theme.spacing(2),\n borderBottom: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n backgroundColor: hasError\n ? theme.palette.semantic.fill['fill-error-weak']\n : theme.palette.semantic.background['background-raised'],\n}));\n\nconst StyledFileItemInformationContainer = styled(Box)(({ theme }) => ({\n flex: 1,\n display: 'flex',\n flexDirection: 'row',\n gap: theme.spacing(1),\n overflow: 'hidden',\n minWidth: 0,\n}));\n\nconst StyledFileItemInformationContent = styled(Box)(() => ({\n flex: 1,\n display: 'flex',\n overflow: 'hidden',\n flexDirection: 'column',\n minWidth: 0,\n}));\n\nconst StyledFileItemContent = styled(Box)(() => ({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'flex-end',\n}));\nconst StyledFileName = styled(Typography)(() => ({\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n}));\n\nconst StyledLinearProgress = styled(LinearProgress)({\n width: '250px',\n});\n\nexport interface FileItemProps {\n file: File;\n error?: string | null;\n isUploading?: boolean;\n onRemove: (file: File) => void;\n}\n\nconst FileItem: React.FC<FileItemProps> = ({ file, error = null, isUploading = false, onRemove }) => {\n const theme = useTheme();\n const { translate } = useTranslation();\n\n const handleRemoveClick = (): void => {\n onRemove(file);\n };\n\n const formatFileSize = (bytes: number): string => {\n if (bytes === 0) return '0 Bytes';\n const k = 1024;\n const sizes = ['B', 'KB', 'MB', 'GB'];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n return `${Math.round((bytes / Math.pow(k, i)) * 100) / 100} ${sizes[i]}`;\n };\n\n return (\n <StyledFileItemContainer hasError={!!error}>\n <FileThumbnail file={file} />\n\n <StyledFileItemInformationContainer>\n <StyledFileItemInformationContent>\n <StyledFileName color={theme.palette.semantic.text['text-strong']} variant=\"captionWeak\">\n {file.name}\n </StyledFileName>\n <Typography color={theme.palette.semantic.text['text-weak']} variant=\"captionWeak\">\n {formatFileSize(file.size)}\n </Typography>\n </StyledFileItemInformationContent>\n\n <StyledFileItemContent>\n {error && (\n <Typography color={theme.palette.semantic.text['text-error']} variant=\"captionWeak\">\n {error}\n </Typography>\n )}\n {isUploading && <StyledLinearProgress />}\n </StyledFileItemContent>\n </StyledFileItemInformationContainer>\n\n <IconButton\n aria-label={translate('Remove_file')}\n onClick={handleRemoveClick}\n size=\"small\"\n tone=\"neutral\"\n variant=\"tertiary\"\n >\n <CancelIcon />\n </IconButton>\n </StyledFileItemContainer>\n );\n};\n\nexport default FileItem;\n"],"names":["StyledFileItemContainer","styled","Box","shouldForwardProp","prop","theme","hasError","display","alignItems","gap","spacing","padding","borderBottom","palette","semantic","stroke","backgroundColor","fill","background","StyledFileItemInformationContainer","flex","flexDirection","overflow","minWidth","StyledFileItemInformationContent","StyledFileItemContent","justifyContent","StyledFileName","Typography","textOverflow","whiteSpace","StyledLinearProgress","LinearProgress","width","file","error","isUploading","onRemove","useTheme","translate","useTranslation","_jsxs","children","_jsx","FileThumbnail","color","text","variant","name","bytes","i","Math","floor","log","round","pow","formatFileSize","size","IconButton","onClick","tone","CancelIcon"],"mappings":"+dAcA,MAAMA,EAA0BC,EAAOC,EAAK,CAC1CC,kBAAoBC,GAAkB,aAATA,GADCH,EAEL,EAAGI,QAAOC,eAAU,CAC7CC,QAAS,OACTC,WAAY,SACZC,IAAKJ,EAAMK,QAAQ,GACnBC,QAASN,EAAMK,QAAQ,GACvBE,aAAc,aAAaP,EAAMQ,QAAQC,SAASC,OAAO,iBACzDC,gBAAiBV,EACbD,EAAMQ,QAAQC,SAASG,KAAK,mBAC5BZ,EAAMQ,QAAQC,SAASI,WAAW,yBAGlCC,EAAqClB,EAAOC,EAAPD,EAAY,EAAGI,YAAO,CAC/De,KAAM,EACNb,QAAS,OACTc,cAAe,MACfZ,IAAKJ,EAAMK,QAAQ,GACnBY,SAAU,SACVC,SAAU,MAGNC,EAAmCvB,EAAOC,EAAPD,EAAY,KAAA,CACnDmB,KAAM,EACNb,QAAS,OACTe,SAAU,SACVD,cAAe,SACfE,SAAU,MAGNE,EAAwBxB,EAAOC,EAAPD,EAAY,KAAA,CACxCM,QAAS,OACTc,cAAe,MACfb,WAAY,SACZkB,eAAgB,eAEZC,EAAiB1B,EAAO2B,EAAP3B,EAAmB,KAAA,CACxCqB,SAAU,SACVO,aAAc,WACdC,WAAY,aAGRC,EAAuB9B,EAAO+B,EAAAA,eAAP/B,CAAuB,CAClDgC,MAAO,yBAUiC,EAAGC,OAAMC,QAAQ,KAAMC,eAAc,EAAOC,eACpF,MAAMhC,EAAQiC,KACRC,UAAEA,GAAcC,mBActB,OACEC,OAACzC,EAAuB,CAACM,WAAY6B,EAAKO,SAAA,CACxCC,EAAAA,IAACC,EAAa,CAACV,KAAMA,IAErBO,OAACtB,EAAkC,CAAAuB,SAAA,CACjCD,EAAAA,KAACjB,EAAgC,CAAAkB,SAAA,CAC/BC,MAAChB,EAAc,CAACkB,MAAOxC,EAAMQ,QAAQC,SAASgC,KAAK,eAAgBC,QAAQ,cAAaL,SACrFR,EAAKc,OAERL,EAAAA,IAACf,GAAWiB,MAAOxC,EAAMQ,QAAQC,SAASgC,KAAK,aAAcC,QAAQ,cAAaL,SAjBnE,CAACO,IACtB,GAAc,IAAVA,EAAa,MAAO,UACxB,MAEMC,EAAIC,KAAKC,MAAMD,KAAKE,IAAIJ,GAASE,KAAKE,IAFlC,OAGV,MAAO,GAAGF,KAAKG,MAAOL,EAAQE,KAAKI,IAHzB,KAGgCL,GAAM,KAAO,OAFzC,CAAC,IAAK,KAAM,KAAM,MAEoCA,MAa3DM,CAAetB,EAAKuB,WAIzBhB,EAAAA,KAAChB,EAAqB,CAAAiB,SAAA,CACnBP,GACCQ,EAAAA,IAACf,EAAU,CAACiB,MAAOxC,EAAMQ,QAAQC,SAASgC,KAAK,cAAeC,QAAQ,cAAaL,SAChFP,IAGJC,GAAeO,EAAAA,IAACZ,EAAoB,CAAA,SAIzCY,EAAAA,IAACe,EAAAA,WAAU,CAAA,aACGnB,EAAU,eACtBoB,QAtCoB,KACxBtB,EAASH,IAsCLuB,KAAK,QACLG,KAAK,UACLb,QAAQ,WAAUL,SAElBC,EAAAA,IAACkB,EAAU,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as e,jsx as r}from"react/jsx-runtime";import"react";import t from"@mui/material/Box";import i from"@mui/material/
|
|
1
|
+
import{jsxs as e,jsx as r}from"react/jsx-runtime";import"react";import t from"@mui/material/Box";import i from"@mui/material/styles/styled";import o from"@mui/material/styles/useTheme";import{IconButton as a}from"../../../atoms/IconButton/index.js";import{LinearProgress as l}from"../../../atoms/LinearProgress/index.js";import n from"@mui/material/Typography";import s from"../../../../icons/Cancel/index.js";import{useTranslation as m}from"../../../../providers/TranslationProvider.js";import c from"./FileThumbnail.js";const p=i(t,{shouldForwardProp:e=>"hasError"!==e})((({theme:e,hasError:r})=>({display:"flex",alignItems:"center",gap:e.spacing(2),padding:e.spacing(2),borderBottom:`1px solid ${e.palette.semantic.stroke["stroke-weak"]}`,backgroundColor:r?e.palette.semantic.fill["fill-error-weak"]:e.palette.semantic.background["background-raised"]}))),d=i(t)((({theme:e})=>({flex:1,display:"flex",flexDirection:"row",gap:e.spacing(1),overflow:"hidden",minWidth:0}))),f=i(t)((()=>({flex:1,display:"flex",overflow:"hidden",flexDirection:"column",minWidth:0}))),h=i(t)((()=>({display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"flex-end"}))),x=i(n)((()=>({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}))),u=i(l)({width:"250px"}),g=({file:t,error:i=null,isUploading:l=!1,onRemove:g})=>{const w=o(),{translate:k}=m();return e(p,{hasError:!!i,children:[r(c,{file:t}),e(d,{children:[e(f,{children:[r(x,{color:w.palette.semantic.text["text-strong"],variant:"captionWeak",children:t.name}),r(n,{color:w.palette.semantic.text["text-weak"],variant:"captionWeak",children:(e=>{if(0===e)return"0 Bytes";const r=Math.floor(Math.log(e)/Math.log(1024));return`${Math.round(e/Math.pow(1024,r)*100)/100} ${["B","KB","MB","GB"][r]}`})(t.size)})]}),e(h,{children:[i&&r(n,{color:w.palette.semantic.text["text-error"],variant:"captionWeak",children:i}),l&&r(u,{})]})]}),r(a,{"aria-label":k("Remove_file"),onClick:()=>{g(t)},size:"small",tone:"neutral",variant:"tertiary",children:r(s,{})})]})};export{g as default};
|
|
2
2
|
//# sourceMappingURL=FileItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileItem.js","sources":["../../../../../src/components/organisms/FileUpload/components/FileItem.tsx"],"sourcesContent":["import React from 'react';\n\nimport Box from '@mui/material/Box';\nimport
|
|
1
|
+
{"version":3,"file":"FileItem.js","sources":["../../../../../src/components/organisms/FileUpload/components/FileItem.tsx"],"sourcesContent":["import React from 'react';\n\nimport Box from '@mui/material/Box';\nimport styled from '@mui/material/styles/styled';\nimport useTheme from '@mui/material/styles/useTheme';\n\nimport IconButton from '@fd/components/atoms/IconButton';\nimport LinearProgress from '@fd/components/atoms/LinearProgress';\nimport Typography from '@fd/components/atoms/Typography';\nimport CancelIcon from '@fd/icons/Cancel';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\n\nimport FileThumbnail from './FileThumbnail';\n\nconst StyledFileItemContainer = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'hasError',\n})<{ hasError?: boolean }>(({ theme, hasError }) => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(2),\n padding: theme.spacing(2),\n borderBottom: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n backgroundColor: hasError\n ? theme.palette.semantic.fill['fill-error-weak']\n : theme.palette.semantic.background['background-raised'],\n}));\n\nconst StyledFileItemInformationContainer = styled(Box)(({ theme }) => ({\n flex: 1,\n display: 'flex',\n flexDirection: 'row',\n gap: theme.spacing(1),\n overflow: 'hidden',\n minWidth: 0,\n}));\n\nconst StyledFileItemInformationContent = styled(Box)(() => ({\n flex: 1,\n display: 'flex',\n overflow: 'hidden',\n flexDirection: 'column',\n minWidth: 0,\n}));\n\nconst StyledFileItemContent = styled(Box)(() => ({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'flex-end',\n}));\nconst StyledFileName = styled(Typography)(() => ({\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n}));\n\nconst StyledLinearProgress = styled(LinearProgress)({\n width: '250px',\n});\n\nexport interface FileItemProps {\n file: File;\n error?: string | null;\n isUploading?: boolean;\n onRemove: (file: File) => void;\n}\n\nconst FileItem: React.FC<FileItemProps> = ({ file, error = null, isUploading = false, onRemove }) => {\n const theme = useTheme();\n const { translate } = useTranslation();\n\n const handleRemoveClick = (): void => {\n onRemove(file);\n };\n\n const formatFileSize = (bytes: number): string => {\n if (bytes === 0) return '0 Bytes';\n const k = 1024;\n const sizes = ['B', 'KB', 'MB', 'GB'];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n return `${Math.round((bytes / Math.pow(k, i)) * 100) / 100} ${sizes[i]}`;\n };\n\n return (\n <StyledFileItemContainer hasError={!!error}>\n <FileThumbnail file={file} />\n\n <StyledFileItemInformationContainer>\n <StyledFileItemInformationContent>\n <StyledFileName color={theme.palette.semantic.text['text-strong']} variant=\"captionWeak\">\n {file.name}\n </StyledFileName>\n <Typography color={theme.palette.semantic.text['text-weak']} variant=\"captionWeak\">\n {formatFileSize(file.size)}\n </Typography>\n </StyledFileItemInformationContent>\n\n <StyledFileItemContent>\n {error && (\n <Typography color={theme.palette.semantic.text['text-error']} variant=\"captionWeak\">\n {error}\n </Typography>\n )}\n {isUploading && <StyledLinearProgress />}\n </StyledFileItemContent>\n </StyledFileItemInformationContainer>\n\n <IconButton\n aria-label={translate('Remove_file')}\n onClick={handleRemoveClick}\n size=\"small\"\n tone=\"neutral\"\n variant=\"tertiary\"\n >\n <CancelIcon />\n </IconButton>\n </StyledFileItemContainer>\n );\n};\n\nexport default FileItem;\n"],"names":["StyledFileItemContainer","styled","Box","shouldForwardProp","prop","theme","hasError","display","alignItems","gap","spacing","padding","borderBottom","palette","semantic","stroke","backgroundColor","fill","background","StyledFileItemInformationContainer","flex","flexDirection","overflow","minWidth","StyledFileItemInformationContent","StyledFileItemContent","justifyContent","StyledFileName","Typography","textOverflow","whiteSpace","StyledLinearProgress","LinearProgress","width","FileItem","file","error","isUploading","onRemove","useTheme","translate","useTranslation","_jsxs","children","_jsx","FileThumbnail","color","text","variant","name","bytes","i","Math","floor","log","round","pow","formatFileSize","size","IconButton","onClick","tone","CancelIcon"],"mappings":"0gBAcA,MAAMA,EAA0BC,EAAOC,EAAK,CAC1CC,kBAAoBC,GAAkB,aAATA,GADCH,EAEL,EAAGI,QAAOC,eAAU,CAC7CC,QAAS,OACTC,WAAY,SACZC,IAAKJ,EAAMK,QAAQ,GACnBC,QAASN,EAAMK,QAAQ,GACvBE,aAAc,aAAaP,EAAMQ,QAAQC,SAASC,OAAO,iBACzDC,gBAAiBV,EACbD,EAAMQ,QAAQC,SAASG,KAAK,mBAC5BZ,EAAMQ,QAAQC,SAASI,WAAW,yBAGlCC,EAAqClB,EAAOC,EAAPD,EAAY,EAAGI,YAAO,CAC/De,KAAM,EACNb,QAAS,OACTc,cAAe,MACfZ,IAAKJ,EAAMK,QAAQ,GACnBY,SAAU,SACVC,SAAU,MAGNC,EAAmCvB,EAAOC,EAAPD,EAAY,KAAA,CACnDmB,KAAM,EACNb,QAAS,OACTe,SAAU,SACVD,cAAe,SACfE,SAAU,MAGNE,EAAwBxB,EAAOC,EAAPD,EAAY,KAAA,CACxCM,QAAS,OACTc,cAAe,MACfb,WAAY,SACZkB,eAAgB,eAEZC,EAAiB1B,EAAO2B,EAAP3B,EAAmB,KAAA,CACxCqB,SAAU,SACVO,aAAc,WACdC,WAAY,aAGRC,EAAuB9B,EAAO+B,EAAP/B,CAAuB,CAClDgC,MAAO,UAUHC,EAAoC,EAAGC,OAAMC,QAAQ,KAAMC,eAAc,EAAOC,eACpF,MAAMjC,EAAQkC,KACRC,UAAEA,GAAcC,IActB,OACEC,EAAC1C,EAAuB,CAACM,WAAY8B,EAAKO,SAAA,CACxCC,EAACC,EAAa,CAACV,KAAMA,IAErBO,EAACvB,EAAkC,CAAAwB,SAAA,CACjCD,EAAClB,EAAgC,CAAAmB,SAAA,CAC/BC,EAACjB,EAAc,CAACmB,MAAOzC,EAAMQ,QAAQC,SAASiC,KAAK,eAAgBC,QAAQ,cAAaL,SACrFR,EAAKc,OAERL,EAAChB,GAAWkB,MAAOzC,EAAMQ,QAAQC,SAASiC,KAAK,aAAcC,QAAQ,cAAaL,SAjBnE,CAACO,IACtB,GAAc,IAAVA,EAAa,MAAO,UACxB,MAEMC,EAAIC,KAAKC,MAAMD,KAAKE,IAAIJ,GAASE,KAAKE,IAFlC,OAGV,MAAO,GAAGF,KAAKG,MAAOL,EAAQE,KAAKI,IAHzB,KAGgCL,GAAM,KAAO,OAFzC,CAAC,IAAK,KAAM,KAAM,MAEoCA,MAa3DM,CAAetB,EAAKuB,WAIzBhB,EAACjB,EAAqB,CAAAkB,SAAA,CACnBP,GACCQ,EAAChB,EAAU,CAACkB,MAAOzC,EAAMQ,QAAQC,SAASiC,KAAK,cAAeC,QAAQ,cAAaL,SAChFP,IAGJC,GAAeO,EAACb,EAAoB,CAAA,SAIzCa,EAACe,EAAU,CAAA,aACGnB,EAAU,eACtBoB,QAtCoB,KACxBtB,EAASH,IAsCLuB,KAAK,QACLG,KAAK,UACLb,QAAQ,WAAUL,SAElBC,EAACkB,EAAU,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@flipdish/portal-library",
|
|
3
|
-
"version": "8.5.
|
|
3
|
+
"version": "8.5.4",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist"
|
|
6
6
|
],
|
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
"eslint-plugin-prettier": "^5.1.3",
|
|
104
104
|
"eslint-plugin-react": "^7.37.4",
|
|
105
105
|
"eslint-plugin-react-hooks": "4.6.2",
|
|
106
|
-
"eslint-plugin-react-refresh": "0.5.
|
|
106
|
+
"eslint-plugin-react-refresh": "0.5.2",
|
|
107
107
|
"eslint-plugin-simple-import-sort": "^12.0.0",
|
|
108
108
|
"eslint-plugin-storybook": "^0.12.0",
|
|
109
109
|
"eslint-plugin-testing-library": "^7.1.1",
|