diff --git a/package.json b/package.json index 6b5ccfc..1a0ae2f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "no-copy-frontend", - "version": "0.51.0", + "version": "0.52.0", "private": true, "scripts": { "dev": "next dev -p 2999", diff --git a/src/app/components/tanstak-table/TanstakTable.tsx b/src/app/components/tanstak-table/TanstakTable.tsx index 9d7dcc6..ead18c6 100644 --- a/src/app/components/tanstak-table/TanstakTable.tsx +++ b/src/app/components/tanstak-table/TanstakTable.tsx @@ -26,6 +26,7 @@ import { FileTypeIcon } from '@/app/components/FileTypeIcon'; import { fetchReferralUserStats } from '@/app/actions/referralsActions'; import { MonitoringDropDown } from '@/app/components/tanstak-table/MonitoringDropDown'; import { formatDate, formatDateTime } from '@/app/lib/formatDate'; +import { useViewport } from '@/app/hooks/useViewport'; type FileType = 'image' | 'video' | 'audio'; @@ -59,30 +60,6 @@ type ApiResponse = { files?: ApiFile[]; }; -const cutFileName = (fileName: string) => { - const MAX_FILE_NAME_LENGTH = 26; - const lastDotIndex = fileName.lastIndexOf('.'); - - if (lastDotIndex <= 0) { - return fileName.length > MAX_FILE_NAME_LENGTH ? fileName.substring(0, MAX_FILE_NAME_LENGTH - 3) + '...' : fileName; - } - - const nameWithoutExtension = fileName.substring(0, lastDotIndex); - const extension = fileName.substring(lastDotIndex); - - if (fileName.length <= MAX_FILE_NAME_LENGTH) { - return fileName; - } - - const maxNameLength = MAX_FILE_NAME_LENGTH - extension.length - 3; - - if (maxNameLength <= 0) { - return '...' /* + extension */; - } - - return nameWithoutExtension.substring(0, maxNameLength) + '...' /* + extension */; -} - const cutFileExtension = (fileName: string) => { const lastDotIndex = fileName.lastIndexOf('.'); const extension = fileName.substring(lastDotIndex + 1); @@ -156,6 +133,38 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) { const t = useTranslations("Global"); const locale = useLocale(); + const viewport = useViewport(); + + const getMaxLengthByWidth = (): number => { + if (viewport.device === 'MOBILE') return 26; + if (viewport.device === 'TABLET') return 32; + if (viewport.device === 'DESKTOP') return 64; + return 100; + }; + + const cutFileName = (fileName: string) => { + const MAX_FILE_NAME_LENGTH = getMaxLengthByWidth(); + const lastDotIndex = fileName.lastIndexOf('.'); + + if (lastDotIndex <= 0) { + return fileName.length > MAX_FILE_NAME_LENGTH ? fileName.substring(0, MAX_FILE_NAME_LENGTH - 3) + '...' : fileName; + } + + const nameWithoutExtension = fileName.substring(0, lastDotIndex); + const extension = fileName.substring(lastDotIndex); + + if (fileName.length <= MAX_FILE_NAME_LENGTH) { + return fileName; + } + + const maxNameLength = MAX_FILE_NAME_LENGTH - extension.length - 3; + + if (maxNameLength <= 0) { + return '...' /* + extension */; + } + + return nameWithoutExtension.substring(0, maxNameLength) + '...' /* + extension */; + } // Определение колонок const columns = useMemo[]>( @@ -223,7 +232,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) { ), cell: ({ row }) => ( -
+
@@ -452,7 +461,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) { enableColumnFilter: false, }, ], - [] + [viewport.device] ); const handleView = async (file: FileItem) => { diff --git a/src/app/hooks/useViewport.tsx b/src/app/hooks/useViewport.tsx new file mode 100644 index 0000000..44a105a --- /dev/null +++ b/src/app/hooks/useViewport.tsx @@ -0,0 +1,36 @@ +'use client' + +import { useState, useEffect } from 'react' + +export const MOBILE = 'MOBILE' +export const TABLET = 'TABLET' +export const DESKTOP = 'DESKTOP' + +const getDevice = (width: number) => { + if (width < 768) return MOBILE + else if (width < 992) return TABLET + else return DESKTOP +} + +export function useViewport() { + const [viewport, setViewport] = useState({ + width: 0, + device: 'DESKTOP' + }); + + useEffect(() => { + const handleResize = () => { + setViewport({ + width: window.innerWidth, + device: getDevice(window.innerWidth) + }); + }; + + handleResize(); + + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); + }, []); + + return viewport; +} \ No newline at end of file diff --git a/src/app/styles/pages-styles.scss b/src/app/styles/pages-styles.scss index 5b0d202..353b2c0 100644 --- a/src/app/styles/pages-styles.scss +++ b/src/app/styles/pages-styles.scss @@ -803,6 +803,11 @@ &:has(.table-item-id) { width: 20px; } + + &:has(.table-item-file-name) { + max-width: 300px; + overflow: hidden; + } } .table-item { @@ -3570,6 +3575,7 @@ padding: 0; overflow: hidden; min-width: 400px; + width: 100%; @media (max-width: 470px) { min-width: auto;