From 28b53bba66fcf5ff24f2b4835f5f595f85140f3a Mon Sep 17 00:00:00 2001 From: kris-liu-smile Date: Wed, 28 Dec 2022 16:50:11 +0800 Subject: [PATCH] feat: 4 column card view on wide screen --- apps/storefront/src/App.tsx | 2 +- apps/storefront/src/hooks/index.ts | 23 +++++++++++++++++ .../storefront/src/hooks/useCardListColumn.ts | 25 +++++++++++++++++++ .../src/{shared/hook => hooks}/useOpenPDP.ts | 0 .../src/{shared/hook => hooks}/useRefresh.ts | 0 .../hook => hooks}/useRegisteredbctob2b.ts | 0 apps/storefront/src/pages/address/Address.tsx | 7 ++++++ .../src/pages/shoppingLists/ShoppingLists.tsx | 4 +++ .../pages/usermanagement/Usermanagement.tsx | 5 ++++ apps/storefront/src/shared/hook/index.ts | 17 ------------- packages/hooks/index.ts | 4 +++ packages/hooks/useWindowSize.ts | 24 ++++++++++++++++++ 12 files changed, 93 insertions(+), 18 deletions(-) create mode 100644 apps/storefront/src/hooks/useCardListColumn.ts rename apps/storefront/src/{shared/hook => hooks}/useOpenPDP.ts (100%) rename apps/storefront/src/{shared/hook => hooks}/useRefresh.ts (100%) rename apps/storefront/src/{shared/hook => hooks}/useRegisteredbctob2b.ts (100%) delete mode 100644 apps/storefront/src/shared/hook/index.ts create mode 100644 packages/hooks/useWindowSize.ts diff --git a/apps/storefront/src/App.tsx b/apps/storefront/src/App.tsx index b706ef7a..28d370a6 100644 --- a/apps/storefront/src/App.tsx +++ b/apps/storefront/src/App.tsx @@ -14,7 +14,7 @@ import { useOpenPDP, useRefresh, useRegisteredbctob2b, -} from '@/shared/hook' +} from '@/hooks' import { getChannelId, diff --git a/apps/storefront/src/hooks/index.ts b/apps/storefront/src/hooks/index.ts index 151e279c..206afff1 100644 --- a/apps/storefront/src/hooks/index.ts +++ b/apps/storefront/src/hooks/index.ts @@ -1,3 +1,19 @@ +import { + useRefresh, +} from './useRefresh' + +import { + useOpenPDP, +} from './useOpenPDP' + +import { + useRegisteredbctob2b, +} from './useRegisteredbctob2b' + +import { + useCardListColumn, +} from './useCardListColumn' + export { useMobile, } from './useMobile' @@ -5,3 +21,10 @@ export { export { useDebounce, } from './useDebounce' + +export { + useRefresh, + useOpenPDP, + useRegisteredbctob2b, + useCardListColumn, +} diff --git a/apps/storefront/src/hooks/useCardListColumn.ts b/apps/storefront/src/hooks/useCardListColumn.ts new file mode 100644 index 00000000..6d5318da --- /dev/null +++ b/apps/storefront/src/hooks/useCardListColumn.ts @@ -0,0 +1,25 @@ +import { + useWindowSize, +} from '@b3/hooks' +import { + useEffect, + useState, +} from 'react' + +export const useCardListColumn = () => { + const { + width, + } = useWindowSize() + + const [isExtraLarge, setExtraLarge] = useState(false) + + useEffect(() => { + if (+width >= 1536) { + setExtraLarge(true) + } else { + setExtraLarge(false) + } + }, [width]) + + return isExtraLarge +} diff --git a/apps/storefront/src/shared/hook/useOpenPDP.ts b/apps/storefront/src/hooks/useOpenPDP.ts similarity index 100% rename from apps/storefront/src/shared/hook/useOpenPDP.ts rename to apps/storefront/src/hooks/useOpenPDP.ts diff --git a/apps/storefront/src/shared/hook/useRefresh.ts b/apps/storefront/src/hooks/useRefresh.ts similarity index 100% rename from apps/storefront/src/shared/hook/useRefresh.ts rename to apps/storefront/src/hooks/useRefresh.ts diff --git a/apps/storefront/src/shared/hook/useRegisteredbctob2b.ts b/apps/storefront/src/hooks/useRegisteredbctob2b.ts similarity index 100% rename from apps/storefront/src/shared/hook/useRegisteredbctob2b.ts rename to apps/storefront/src/hooks/useRegisteredbctob2b.ts diff --git a/apps/storefront/src/pages/address/Address.tsx b/apps/storefront/src/pages/address/Address.tsx index 99559999..ef82cbc1 100644 --- a/apps/storefront/src/pages/address/Address.tsx +++ b/apps/storefront/src/pages/address/Address.tsx @@ -41,6 +41,10 @@ import { getB2BAddressConfig, } from '@/shared/service/b2b' +import { + useCardListColumn, +} from '@/hooks' + import { filterFormConfig, convertBCToB2BAddress, @@ -89,6 +93,8 @@ const Address = () => { dispatch, } = useContext(GlobaledContext) + const isExtraLarge = useCardListColumn() + const addEditAddressRef = useRef(null) const [isRequestLoading, setIsRequestLoading] = useState(false) @@ -289,6 +295,7 @@ const Address = () => { getRequestList={getAddressList} searchParams={filterData || {}} isCustomRender + itemXs={isExtraLarge ? 3 : 4} requestLoading={setIsRequestLoading} tableKey="id" renderItem={(row: AddressItemType) => ( diff --git a/apps/storefront/src/pages/shoppingLists/ShoppingLists.tsx b/apps/storefront/src/pages/shoppingLists/ShoppingLists.tsx index 1117ea20..e4bcf6bf 100644 --- a/apps/storefront/src/pages/shoppingLists/ShoppingLists.tsx +++ b/apps/storefront/src/pages/shoppingLists/ShoppingLists.tsx @@ -34,6 +34,7 @@ import { import { useMobile, + useCardListColumn, } from '@/hooks' import { @@ -65,6 +66,8 @@ const shoppingLists = () => { }, } = useContext(GlobaledContext) + const isExtraLarge = useCardListColumn() + const isEnableBtnPermissions = true const customItem = { @@ -186,6 +189,7 @@ const shoppingLists = () => { getRequestList={fetchList} searchParams={filterSearch} isCustomRender + itemXs={isExtraLarge ? 3 : 4} requestLoading={setIsRequestLoading} renderItem={(row: ShoppingListsItemsProps) => ( { const [isMobile] = useMobile() + const isExtraLarge = useCardListColumn() + const { state: { companyInfo, @@ -199,6 +203,7 @@ const Usermanagement = () => { getRequestList={fetchList} searchParams={filterSearch || {}} isCustomRender + itemXs={isExtraLarge ? 3 : 4} requestLoading={setIsRequestLoading} renderItem={(row: UsersList) => ( { + setSize({ + width: window.innerWidth, + height: window.innerHeight, + }) + }, []) + + useEffect(() => { + window.addEventListener('resize', handleResize) + return () => window.removeEventListener('resize', handleResize) + }, [handleResize]) + + return size +}