From cd0c3866c2709fb5b3ad04d01d209dfef1016638 Mon Sep 17 00:00:00 2001 From: ybgbob Date: Thu, 16 Nov 2023 15:00:05 +0800 Subject: [PATCH] feat: Breadcrumb --- src/components/profile/MyCollectionList.tsx | 2 +- src/components/resource/MyBreadcrumb.tsx | 77 ++++++++++++++++++ .../resource/collection/CollectionList.tsx | 13 ++- src/pages/Resource.tsx | 81 +++---------------- 4 files changed, 96 insertions(+), 77 deletions(-) create mode 100644 src/components/resource/MyBreadcrumb.tsx diff --git a/src/components/profile/MyCollectionList.tsx b/src/components/profile/MyCollectionList.tsx index a365900..3d14c0c 100644 --- a/src/components/profile/MyCollectionList.tsx +++ b/src/components/profile/MyCollectionList.tsx @@ -56,7 +56,7 @@ const MyCollectionList = (props: ICollectionList) => { const state = useGlobal(); const [p] = useSearchParams(); - console.log('modalData', modalData); + // console.log('modalData', modalData); // const [selectBucketId, setSelectBucketId] = useState(''); // const { data: selectItem } = useGetItemByBucketId(selectBucketId); diff --git a/src/components/resource/MyBreadcrumb.tsx b/src/components/resource/MyBreadcrumb.tsx new file mode 100644 index 0000000..b0a7020 --- /dev/null +++ b/src/components/resource/MyBreadcrumb.tsx @@ -0,0 +1,77 @@ +import styled from '@emotion/styled'; +import { Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@totejs/uikit'; +import { + createSearchParams, + useNavigate, + useSearchParams, +} from 'react-router-dom'; + +interface Props { + root: { + bucketName: string; + }; +} + +export const MyBreadcrumb = (props: Props) => { + const [p] = useSearchParams(); + const path = (p.get('path') as string) || '/'; + const id = p.get('id') as string; + const navigator = useNavigate(); + + const { root } = props; + + const bucketPath = path === '/' ? '' : path.split('/'); + const breadItems = [root.bucketName].concat(bucketPath); + + console.log('props', breadItems.length - 1); + + return ( + + {breadItems.map((item: string, index: number) => { + return ( + + + { + const params: Record = { + id: id, + }; + + if (item !== root.bucketName) { + params.path = item + '/'; + } + + navigator({ + pathname: '/resource', + search: `?${createSearchParams(params)}`, + }); + }} + > + {item} + + + + ); + })} + + ); +}; + +const CustomBreadcrumb = styled(Breadcrumb)` + /* background: #373943; */ + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 18px; + color: #ffffff; +`; + +const MyBreadcrumbItem = styled(BreadcrumbItem)``; + +const NavLink = styled(Box)` + cursor: pointer; +`; diff --git a/src/components/resource/collection/CollectionList.tsx b/src/components/resource/collection/CollectionList.tsx index dfd518e..9f5f9ee 100755 --- a/src/components/resource/collection/CollectionList.tsx +++ b/src/components/resource/collection/CollectionList.tsx @@ -85,7 +85,7 @@ const CollectionList = (props: Props) => { useEffect(() => { if (selectItem?.id === DEFAULT_ITEM.id) return; - console.log('selectItem', selectItem); + // console.log('selectItem', selectItem); if (!_.isEmpty(selectItem)) { console.log(`/resource?id=${selectItem.id}`); navigator(`/resource?id=${selectItem.id}`); @@ -146,7 +146,7 @@ const CollectionList = (props: Props) => { // const from = encodeURIComponent(JSON.stringify(list)); if (type === 'folder') { - console.log(data.name); + // console.log(data.name); const params = { id: id, path: data.name + '/', @@ -166,7 +166,7 @@ const CollectionList = (props: Props) => { // )}&address=${item}&from=${from}`, // ); } else { - console.log('data', data); + // console.log('data', data); const id = String(data.data.Id); setSelectObjectId(id); setBucketName(data.data.BucketName); @@ -192,7 +192,6 @@ const CollectionList = (props: Props) => { header: 'Format', width: 160, cell: (data: any) => { - const { type } = data; const content_type = data.type === 'folder' ? 'Folder' @@ -241,6 +240,12 @@ const CollectionList = (props: Props) => { // return ; // }, // }, + { + header: '', + cell: (data) => { + return {}; + }, + }, // { // header: 'Action', // cell: (data: any) => { diff --git a/src/pages/Resource.tsx b/src/pages/Resource.tsx index e1e74be..5e3e82e 100644 --- a/src/pages/Resource.tsx +++ b/src/pages/Resource.tsx @@ -21,6 +21,8 @@ import { useGetItemById } from '../hooks/useGetItemById'; import { useGetItemRelationWithAddr } from '../hooks/useGetItemRelationWithAddr'; import { useGfGetObjInfo } from '../hooks/useGfGetObjInfo'; import { reportEvent } from '../utils/ga'; +import { MyBreadcrumb } from '../components/resource/MyBreadcrumb'; +import { NoData } from '../components/NoData'; /** * Have been listed @@ -75,71 +77,21 @@ const Resource = () => { // console.log('itemInfo', itemInfo); // console.log('storageInfo', storageInfo); - console.log('groupData', groupData); + // console.log('groupData', groupData); // console.log('bucketData', bucketData); // console.log('objectData', objectData); - if (itemInfoLoading || !itemInfo) { + if (itemInfoLoading || !itemInfo || !bucketData) { return ; } - // const [breadItems, setBreadItems] = useState([]); - - // const state = useGlobal(); - // const showBuy = useMemo(() => { - // const list = state.globalState.breadList; - // console.log('state.globalState.breadList', list); - // const fromPurchase = - // list.findIndex((item) => item.name == 'My Purchase') > -1; - // return (status == 1 || status == -1) && !fromPurchase; - // }, [status, address, state.globalState.breadList]); - - /* useEffect(() => { - const list = state.globalState.breadList; - if (list.length && list[list.length - 1].name != title) { - setBreadItems( - list.concat([ - { - name: title, - query: '', - path: '', - }, - ]), - ); - } else { - setBreadItems(list); - } - }, [state.globalState.breadList, title]); */ - - // const { num } = useCollectionItems(name, bucketListed); - // console.log('breadItems -=---->', breadItems); - return ( - {/* - {breadItems.map((item: any, index: number) => { - return ( - { - state.globalDispatch({ - type: 'DEL_BREAD', - name: item.name, - }); - }} - > - - - {item?.name?.replace('+', ' ')} - - - - ); - })} - */} + @@ -188,16 +140,13 @@ const Resource = () => { )} -
- - {itemInfo?.type === 'COLLECTION' && ( <>
@@ -232,18 +181,6 @@ const Hr = styled(Box)` background-color: #373943; `; -const MyBreadcrumb = styled(Breadcrumb)` - /* background: #373943; */ - font-style: normal; - font-weight: 400; - font-size: 16px; - line-height: 18px; - - color: #ffffff; -`; - -const MyBreadcrumbItem = styled(BreadcrumbItem)``; - const Info = styled(Flex)` padding-top: 50px; padding-bottom: 50px;