diff options
| -rw-r--r-- | src-migrate/components/ui/smooth-render.tsx | 41 | ||||
| -rw-r--r-- | src-migrate/modules/product-promo/components/Section.tsx | 11 | ||||
| -rw-r--r-- | src/core/components/elements/Navbar/TopBanner.jsx | 35 |
3 files changed, 65 insertions, 22 deletions
diff --git a/src-migrate/components/ui/smooth-render.tsx b/src-migrate/components/ui/smooth-render.tsx new file mode 100644 index 00000000..0e9a4096 --- /dev/null +++ b/src-migrate/components/ui/smooth-render.tsx @@ -0,0 +1,41 @@ +import React from 'react' +import clsxm from '~/libs/clsxm' + +type Props = { + children: React.ReactNode, + isLoaded: boolean, + height: number, + duration?: number + delay?: number +} & React.HTMLProps<HTMLDivElement> + +const SmoothRender = (props: Props) => { + const { + children, + isLoaded, + height, + duration = 0, + delay = 0, + style, + className, + ...rest + } = props + + return ( + <div + className={clsxm('overflow-y-hidden transition-all', className)} + style={{ + opacity: isLoaded ? 1 : 0, + height: isLoaded ? `${height}px` : 0, + transitionDuration: `${duration}ms`, + transitionDelay: `${delay}ms`, + ...style + }} + {...rest} + > + {isLoaded && children} + </div> + ) +} + +export default SmoothRender
\ No newline at end of file diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx index 07a5df7b..b3c6e671 100644 --- a/src-migrate/modules/product-promo/components/Section.tsx +++ b/src-migrate/modules/product-promo/components/Section.tsx @@ -3,6 +3,7 @@ import style from "../styles/section.module.css" import { Button, Skeleton } from '@chakra-ui/react' import { useQuery } from 'react-query' +import SmoothRender from "~/components/ui/smooth-render" import clsxm from "~/libs/clsxm" import { IPromotion } from '~/types/promotion' import { useModalStore } from "../stores/useModalStore" @@ -24,9 +25,11 @@ const ProductPromoSection = ({ productId }: Props) => { const { openModal } = useModalStore() return ( - <div className={clsxm('w-full overflow-y-hidden transition-all opacity-0 duration-500 h-0', { - 'h-[450px] opacity-100': promotions?.data && promotions?.data.length > 0, - })}> + <SmoothRender + isLoaded={(promotions?.data && promotions?.data.length > 0) || false} + height={450} + duration={700} + > <ProductPromoModal /> {promotions?.data && promotions?.data.length > 0 && ( @@ -51,7 +54,7 @@ const ProductPromoSection = ({ productId }: Props) => { </div> ))} </Skeleton> - </div> + </SmoothRender> ) } diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx index 4342149d..ff5b1d90 100644 --- a/src/core/components/elements/Navbar/TopBanner.jsx +++ b/src/core/components/elements/Navbar/TopBanner.jsx @@ -1,8 +1,8 @@ import odooApi from '@/core/api/odooApi'; import Image from 'next/image'; import { useQuery } from 'react-query'; -import clsxm from '~/libs/clsxm'; import Link from '../Link/Link'; +import SmoothRender from '~/components/ui/smooth-render'; const TopBanner = () => { const topBanner = useQuery({ @@ -13,27 +13,26 @@ const TopBanner = () => { const backgroundColor = topBanner.data?.[0]?.backgroundColor || 'transparent'; const hasData = topBanner.data?.length > 0; + const data = topBanner.data?.[0] || null; return ( - <div + <SmoothRender + isLoaded={hasData} + height={36} + duration={700} + delay={500} style={{ backgroundColor }} - className={clsxm('overflow-y-hidden transition-all duration-700', { - 'h-[40px]': hasData, - 'h-0': topBanner.isLoading, - })} > - {hasData && ( - <Link href={topBanner.data[0]?.url}> - <Image - src={topBanner.data[0].image} - alt={topBanner.data[0].name} - width={1440} - height={40} - className='object-cover object-center h-full mx-auto' - /> - </Link> - )} - </div> + <Link href={data?.url}> + <Image + src={data?.image} + alt={data?.name} + width={1440} + height={40} + className='object-cover object-center h-full mx-auto' + /> + </Link> + </SmoothRender> ); }; |