From bb1451372cd847def47fcaed6669a72c664f68e3 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 20 Feb 2024 13:53:53 +0700
Subject: Create and implement smooth render

---
 src-migrate/components/ui/smooth-render.tsx | 41 +++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 src-migrate/components/ui/smooth-render.tsx

(limited to 'src-migrate/components')

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
-- 
cgit v1.2.3


From 5d3807a89596958a1e23e02ae11f73a2474c3432 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 20 Feb 2024 22:27:06 +0700
Subject: Update smooth render function

---
 src-migrate/components/ui/smooth-render.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

(limited to 'src-migrate/components')

diff --git a/src-migrate/components/ui/smooth-render.tsx b/src-migrate/components/ui/smooth-render.tsx
index 0e9a4096..5de3b28d 100644
--- a/src-migrate/components/ui/smooth-render.tsx
+++ b/src-migrate/components/ui/smooth-render.tsx
@@ -4,9 +4,9 @@ import clsxm from '~/libs/clsxm'
 type Props = {
   children: React.ReactNode,
   isLoaded: boolean,
-  height: number,
-  duration?: number
-  delay?: number
+  height: string,
+  duration?: string
+  delay?: string
 } & React.HTMLProps<HTMLDivElement>
 
 const SmoothRender = (props: Props) => {
@@ -26,9 +26,9 @@ const SmoothRender = (props: Props) => {
       className={clsxm('overflow-y-hidden transition-all', className)}
       style={{
         opacity: isLoaded ? 1 : 0,
-        height: isLoaded ? `${height}px` : 0,
-        transitionDuration: `${duration}ms`,
-        transitionDelay: `${delay}ms`,
+        height: isLoaded ? height : 0,
+        transitionDuration: duration || '',
+        transitionDelay: delay || '',
         ...style
       }}
       {...rest}
-- 
cgit v1.2.3