fix ui

crustio · Aug 12, 2024 · fd8e76c · fd8e76c
1 parent e805a3c
commit fd8e76c
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 18 deletions.
diff --git a/src/components/ATable.tsx b/src/components/ATable.tsx
@@ -11,6 +11,7 @@ type ATableProps = {
 const ATable: FC<ATableProps> = ({ header = [], data = [], loading }) => {
 
 
+
     const onDownloadFile = (item: data) => {
         const host = ` https://ton-gateway.crust.network/gateway/${item.bagId}?filename=${item.fileName}`
         const link = document.createElement("a");
@@ -34,7 +35,7 @@ const ATable: FC<ATableProps> = ({ header = [], data = [], loading }) => {
                         data-tooltip-id="my-tooltip"
                         data-tooltip-content={item.fileName}
                         data-tooltip-delay-hide={100}
-                        data-tooltip-place='top-start' className="w-[230px]  pl-2  h-[40px] flex items-center">{truncateMiddle(item.fileName, 5, 5)}</div></td>
+                        data-tooltip-place='top-start' className="w-[230px]  pl-2  h-[40px] flex items-center">{truncateMiddle(item.fileName, 6, 6)}</div></td>
                     <td><div className="w-[130px]  flex items-center justify-between mr-5  ">{truncateMiddle(item.bagId, 5, 5)}
                         <button onClick={() => copyTextToClipboard(item.bagId)}>
                             <img src='/copy.svg' className=" w-5" />

diff --git a/src/pages/files.tsx b/src/pages/files.tsx
@@ -1,10 +1,8 @@
-import { useTonAddress, } from '@tonconnect/ui-react';
 import { useEffect, useState } from 'react';
 import '../App.css';
 import ATable from '../components/ATable';
 import { Pagination } from '../components/Pagination';
 import { copyTextToClipboard, getCurrentUrlParams, scrollToTop, truncateMiddle } from '../utils/utils';
-import { Loading } from '../components/ALoading';
 
 export type pagination = {
   "page": number,
@@ -110,16 +108,13 @@ const Files = () => {
 
             </div>
 
-            <div className='mt-5   mo:w-[350px]  overflow-auto  '>
+            <div className='mt-5   mo:w-[350px]  overflow-auto overflow '>
               <ATable
                 loading={loading}
                 header={[{ name: 'Name' }, { name: 'BagID', }, { name: 'Size', }, { name: 'Upload Date' }, { name: 'From' }, { name: 'Action' }]}
                 data={userData?.data}
 
               />
-
-
-
             </div>
 
             <div className=' mt-[30px]'>

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -8,7 +8,6 @@ export const timestampToDateTime = (timestamp: number) => {
     const day = ('0' + date.getDate()).slice(-2);
     const hours = ('0' + date.getHours()).slice(-2);
     const minutes = ('0' + date.getMinutes()).slice(-2);
-    // const seconds = ('0' + date.getSeconds()).slice(-2);
 
     return `${year}-${month}-${day} ${hours}:${minutes}`;
 };
@@ -34,16 +33,11 @@ export function calculateTotalFileSize<T extends DataItem>(data: T[], key: strin
 }
 
 export const truncateMiddle = (str: string, frontLen: number, endLen: number) => {
-    if (!str) return;
-    if (str.length <= 10) return str;
-    const [name, ext] = str.split('.');
-
-    const firstPart = name?.slice(0, frontLen);
-    const lastPart = name?.slice(-endLen);
-
-    const shortName = `${firstPart}...${lastPart}${ext ? '.' + ext : ''}`;
-
-    return shortName;
+    if (!str) return '';
+    if (str.length <= frontLen + endLen) return str;
+    const start = str?.substring(0, frontLen) || '';
+    const end = str?.substring(str.length - endLen) || '';
+    return `${start}...${end}`;
 };
 
 export function getCurrentUrlParams() {
@@ -75,4 +69,5 @@ export const copyTextToClipboard = async (text: string) => {
 export const scrollToTop = () => {
     document.body.scrollTop = 0;
     document.documentElement.scrollTop = 0;
+    document.getElementsByClassName('overflow')[0]!.scrollLeft = 0;
 };