frontdev/no-copy-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add viewport calculate for fileName cut

Browse Source
This commit is contained in:
smanylov
2026-03-05 16:44:33 +07:00
parent 6d6d0e102b
commit b79d8b8879
4 changed files with 78 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/tanstak-table/TanstakTable.tsx
+35 -26
View File
@@ -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<ColumnDef<FileItem>[]>(
@@ -223,7 +232,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
</div>
),
cell: ({ row }) => (
<div className="flex items-center space-x-2 table-item">
<div className="flex items-center space-x-2 table-item table-item-file-name">
<FileTypeIcon type={row.original.fileType} />
<div>
<div className="font-medium w-full truncate" title={row.original.fileName}>
@@ -452,7 +461,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
enableColumnFilter: false,
},
],
[]
[viewport.device]
);
const handleView = async (file: FileItem) => {