feat: Table button

bnb-chain · Nov 17, 2023 · 52acdba · 52acdba
1 parent dd3c440
commit 52acdba
Show file tree

Hide file tree

Showing 35 changed files with 305 additions and 466 deletions.
diff --git a/src/components/ActionCom.tsx b/src/components/ActionCom.tsx
@@ -1,13 +1,12 @@
 import styled from '@emotion/styled';
-import { Button, Flex } from '@totejs/uikit';
+import { Flex } from '@totejs/uikit';
 import { useAccount } from 'wagmi';
-import { BuyData } from '../context/modal';
+import { useGetItemRelationWithAddr } from '../hooks/useGetItemRelationWithAddr';
 import { useModal } from '../hooks/useModal';
-import { useStatus } from '../hooks/useStatus';
 import { useWalletModal } from '../hooks/useWalletModal';
-import { OwnActionCom } from './OwnActionCom';
 import { Item } from '../utils/apis/types';
-import { useGetItemRelationWithAddr } from '../hooks/useGetItemRelationWithAddr';
+import { OwnActionCom } from './OwnActionCom';
+import { YellowButton } from './ui/buttons/YellowButton';
 
 interface IActionCom {
   data: Item;
@@ -26,24 +25,16 @@ export const ActionCom = (obj: IActionCom) => {
   return (
     <ButtonCon gap={6}>
       {relation == 'NOT_PURCHASE' && (
-        <Button
-          size={'sm'}
-          background="#665800"
-          color="#FFE900"
-          h="32px"
-          fontSize="14px"
-          p="8px 16px"
+        <YellowButton
           onClick={async () => {
-            // if (from === 'home')
-            //   reportEvent({ name: 'dm.main.list.buy.click' });
             modalData.modalDispatch({
               type: 'OPEN_BUY',
               buyData: data,
             });
           }}
         >
           Buy
-        </Button>
+        </YellowButton>
       )}
       {(relation == 'OWNER' || relation == 'PURCHASED') && (
         <OwnActionCom
@@ -57,19 +48,13 @@ export const ActionCom = (obj: IActionCom) => {
         ></OwnActionCom>
       )}
       {relation === 'UNKNOWN' && (
-        <Button
-          size={'sm'}
-          background="#665800"
-          color="#FFE900"
-          h="32px"
-          fontSize="14px"
-          p="8px 16px"
+        <YellowButton
           onClick={() => {
             if (!isConnected && !isConnecting) handleModalOpen();
           }}
         >
           Buy
-        </Button>
+        </YellowButton>
       )}
     </ButtonCon>
   );

diff --git a/src/components/OwnActionCom.tsx b/src/components/OwnActionCom.tsx
@@ -1,14 +1,11 @@
 import { DownloadIcon, GoIcon } from '@totejs/icons';
-import { Preview } from '../components/svgIcon/Preview';
 
-import { getRandomSp } from '../utils/gfSDK';
-import { useNavigate, useSearchParams } from 'react-router-dom';
-import { useEffect, useMemo, useState } from 'react';
-import { parseGroupName } from '../utils/';
 import styled from '@emotion/styled';
-import { Box, Button, Flex } from '@totejs/uikit';
-import { useGlobal } from '../hooks/useGlobal';
+import { Box, Flex } from '@totejs/uikit';
+import { useNavigate } from 'react-router-dom';
 import { useGetDownloadUrl } from '../hooks/useGetDownloadUrl';
+import { parseGroupName } from '../utils/';
+import { BlackButton } from './ui/buttons/BlackButton';
 
 interface IOwnActionCom {
   data: {
@@ -25,8 +22,8 @@ interface IOwnActionCom {
 }
 export const OwnActionCom = (obj: IOwnActionCom) => {
   const navigator = useNavigate();
-  const { data, breadInfo } = obj;
-  const { id, groupName, ownerAddress, type, oid, bn, on } = data;
+  const { data } = obj;
+  const { id, groupName, type, oid, bn, on } = data;
 
   let name = '';
   let bucketName = '';
@@ -39,41 +36,15 @@ export const OwnActionCom = (obj: IOwnActionCom) => {
     bucketName = bn as string;
   }
 
-  const state = useGlobal();
-  const [p] = useSearchParams();
-
-  const [domain, setDomain] = useState('');
-
   const downloadUrl = useGetDownloadUrl({
     bucketName,
     name,
   });
 
-  const previewUrl = useMemo(() => {
-    const str = `${domain}/view/${bucketName}/${name}`;
-    return str;
-  }, [name, bucketName, domain]);
-
-  useEffect(() => {
-    getRandomSp().then((result) => {
-      setDomain(result);
-    });
-  }, []);
-
   return (
     <ActionCon gap={10}>
-      {type === 'OBJECT' && (
-        <Button
-          h="32px"
-          bg="none"
-          color="#F1F2F3"
-          border="1px solid #F1F2F3"
-          fontSize="14px"
-          p="8px 16px"
-          _hover={{
-            background: '#E1E2E5',
-            color: '#181A1E',
-          }}
+      {(type === 'Data' || type === 'OBJECT') && (
+        <BlackButton
           onClick={() => {
             window.open(downloadUrl);
           }}
@@ -82,48 +53,17 @@ export const OwnActionCom = (obj: IOwnActionCom) => {
           <Box as="span" ml="8px">
             Download
           </Box>
-        </Button>
+        </BlackButton>
       )}
-      {/* {type === 'OBJECT' && (
-        <Preview
-          cursor="pointer"
-          onClick={async () => {
-            window.open(previewUrl);
+      {(type === 'Collection' || type === 'COLLECTION') && (
+        <GoIcon
+          cursor={'pointer'}
+          color={'#AEB4BC'}
+          onClick={() => {
+            navigator(`/resource?id=${id}`);
           }}
-        ></Preview>
-        // </Copy>
-      )} */}
-      {/* <GoIcon
-        cursor={'pointer'}
-        color={'#AEB4BC'}
-        onClick={() => {
-          let from = '';
-          if (breadInfo) {
-            const list = state.globalState.breadList;
-            const item = {
-              path: (breadInfo as any).path,
-              name: (breadInfo as any).name,
-              query: p.toString(),
-            };
-            state.globalDispatch({
-              type: 'ADD_BREAD',
-              item,
-            });
-
-            from = encodeURIComponent(JSON.stringify(list.concat([item])));
-          }
-          const _from = from ? `&from=${from}` : '';
-          if (groupName) {
-            navigator(
-              `/resource?gid=${id}&gn=${groupName}&address=${ownerAddress}&type=collection&tab=dataList${_from}`,
-            );
-          } else {
-            navigator(
-              `/resource?oid=${oid}&address=${ownerAddress}&type=collection&tab=dataList${_from}`,
-            );
-          }
-        }}
-      /> */}
+        />
+      )}
     </ActionCon>
   );
 };

diff --git a/src/components/detail/Bucket.tsx b/src/components/detail/Bucket.tsx
@@ -1,26 +1,23 @@
 import styled from '@emotion/styled';
 import { SendIcon } from '@totejs/icons';
 import { Box, Button, Flex } from '@totejs/uikit';
+import _ from 'lodash';
 import { Link, useNavigate, useSearchParams } from 'react-router-dom';
 import { useAccount } from 'wagmi';
-import { Loader } from '../../components/Loader';
 import { NoData } from '../../components/NoData';
+import List from '../../components/detail/List';
+import { DCELLAR_URL, GF_EXPLORER_URL } from '../../env';
+import { useCollectionItems } from '../../hooks/useCollectionItems';
 import { useGetBucketById } from '../../hooks/useGetBucketOrObj';
+import { useGetItemByBucketId } from '../../hooks/useGetItemByBucketId';
+import { useModal } from '../../hooks/useModal';
+import { useStatus } from '../../hooks/useStatus';
 import {
   defaultImg,
   formatDateUTC,
   generateGroupName,
   trimLongStr,
 } from '../../utils';
-import { useGetItemByBucketId } from '../../hooks/useGetItemByBucketId';
-import _ from 'lodash';
-import { DCELLAR_URL, GF_EXPLORER_URL } from '../../env';
-import { id, tr } from 'date-fns/locale';
-import { useModal } from '../../hooks/useModal';
-import { useCollectionItems } from '../../hooks/useCollectionItems';
-import List from '../../components/detail/List';
-import { useStatus } from '../../hooks/useStatus';
-import { useGfGetObjInfo } from '../../hooks/useGfGetObjInfo';
 
 /**
  * Have not been listed

diff --git a/src/components/detail/List.tsx b/src/components/detail/List.tsx
@@ -19,6 +19,7 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useGlobal } from '../../hooks/useGlobal';
 import { GoIcon, CardPocketIcon } from '@totejs/icons';
 import { OwnActionCom } from '../OwnActionCom';
+import { PaginationSx } from '../ui/table/PaginationSx';
 
 const TotalVol = (props: any) => {
   const { groupId } = props;
@@ -266,6 +267,7 @@ const ProfileList = (props: any) => {
           pageSize: 20,
           total: list.length,
           onChange: handlePageChange,
+          sx: PaginationSx,
         }}
         columns={columns}
         data={list}

diff --git a/src/components/detail/Object.tsx b/src/components/detail/Object.tsx
@@ -1,28 +1,24 @@
 import styled from '@emotion/styled';
 import { SendIcon } from '@totejs/icons';
-import { Box, Button, Flex } from '@totejs/uikit';
+import { Button, Flex } from '@totejs/uikit';
+import _ from 'lodash';
 import { Link, useNavigate, useSearchParams } from 'react-router-dom';
 import { useAccount } from 'wagmi';
-import { Loader } from '../../components/Loader';
 import { NoData } from '../../components/NoData';
+import { DCELLAR_URL, GF_EXPLORER_URL } from '../../env';
+import { useCollectionItems } from '../../hooks/useCollectionItems';
 import { useGetBucketById } from '../../hooks/useGetBucketOrObj';
+import { useGetItemByObjId } from '../../hooks/useGetItemByObjId';
+import { useGfGetObjInfo } from '../../hooks/useGfGetObjInfo';
+import { useModal } from '../../hooks/useModal';
+import { useStatus } from '../../hooks/useStatus';
 import {
   defaultImg,
   formatDateUTC,
   generateGroupName,
   parseFileSize,
   trimLongStr,
 } from '../../utils';
-import { useGetItemByBucketId } from '../../hooks/useGetItemByBucketId';
-import _ from 'lodash';
-import { DCELLAR_URL, GF_EXPLORER_URL } from '../../env';
-import { id, tr } from 'date-fns/locale';
-import { useModal } from '../../hooks/useModal';
-import { useCollectionItems } from '../../hooks/useCollectionItems';
-import List from '../../components/detail/List';
-import { useStatus } from '../../hooks/useStatus';
-import { useGfGetObjInfo } from '../../hooks/useGfGetObjInfo';
-import { useGetItemByObjId } from '../../hooks/useGetItemByObjId';
 
 /**
  * Have not been listed
@@ -42,17 +38,11 @@ export const Object = () => {
   // means this object is not listed
   const { data: objectItemInfo } = useGetItemByObjId(objectId);
 
-  console.log('objectItemInfo', objectItemInfo);
+  // console.log('objectItemInfo', objectItemInfo);
 
   const { address } = useAccount();
   const { num } = useCollectionItems(bucketData?.bucketInfo.bucketName, false);
 
-  const { status } = useStatus(
-    generateGroupName(bucketData?.bucketInfo.bucketName || ''),
-    bucketData?.bucketInfo.owner || '',
-    address || '',
-  );
-
   if (!_.isEmpty(objectItemInfo)) {
     navigator(`/resource?id=${objectItemInfo.id}`, {
       replace: true,
@@ -224,16 +214,6 @@ const OwnCon = styled(Flex)`
   }
 `;
 
-const MarketInfo = styled(Flex)`
-  font-size: 32px;
-  color: #f0b90b;
-`;
-
-const Price = styled.div`
-  font-size: 20px;
-  color: #f0b90b;
-`;
-
 const ActionGroup = styled(Flex)``;
 
 const FileSize = styled.div`
@@ -246,14 +226,3 @@ const FileSize = styled.div`
 
   color: #ffffff;
 `;
-
-const NoDataCon = styled(Flex)``;
-
-const NoDataTitle = styled.div`
-  font-size: 32px;
-  font-weight: 600;
-`;
-
-const NoDataSub = styled.div`
-  font-size: 20px;
-`;
diff --git a/src/components/folder/List.tsx b/src/components/folder/List.tsx
@@ -20,6 +20,7 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useGlobal } from '../../hooks/useGlobal';
 import { GoIcon } from '@totejs/icons';
 import { TableProps } from '../ui/table/TableProps';
+import { PaginationSx } from '../ui/table/PaginationSx';
 
 const TotalVol = (props: any) => {
   const { groupId } = props;
@@ -228,6 +229,7 @@ const List = (props: any) => {
           pageSize: 20,
           total: folderList.length,
           onChange: handlePageChange,
+          sx: PaginationSx,
         }}
         columns={columns}
         data={folderList}

diff --git a/src/components/home/Ad.tsx b/src/components/home/Ad.tsx
@@ -61,7 +61,7 @@ const Container = styled(Box)`
     width: 40px;
     height: 40px;
     display: block;
-    right: 100px;
+    right: 0px;
     top: 48px;
   }