Fix import css

cher-ami · Nov 2, 2023 · 0f09710 · 0f09710
1 parent 173a362
commit 0f09710
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 12 deletions.
diff --git a/apps/front/src/libs/components/lazyImage/LazyImage.module.less b/apps/front/src/libs/components/lazyImage/LazyImage.module.less
@@ -1,4 +1,4 @@
-@import (reference) "../../references.less";
+@import (reference) "../../../references.less";
 
 .root {
   width: 100%;

diff --git a/apps/front/src/libs/components/lazyImage/LazyImage.tsx b/apps/front/src/libs/components/lazyImage/LazyImage.tsx
@@ -1,26 +1,32 @@
-import React, { CSSProperties, useEffect, useRef, useState } from "react"
+import React, { CSSProperties, useRef, useState } from "react"
 import css from "./LazyImage.module.less"
 import { cls } from "@cher-ami/utils"
 import useIntersectionObserver from "~/libs/hooks/useIntersectionObserver"
 import { useAsyncEffect } from "~/libs/hooks/useAsyncEffect"
 
-interface IProps {
+type TSrc = {
+  dataSrc: string
+}
+
+type TSrcset = {
+  dataSrcset: string
+}
+
+type TProps = {
+  alt: string
   src?: string
-  dataSrc?: string
-  dataSrcset?: string
   className?: string
-  alt?: string
   aspectRatio?: number
   style?: CSSProperties
   onLoaded?: (img: HTMLImageElement) => void
-}
+} & (TSrc | TSrcset)
 
 export type Lazy = "lazyload" | "lazyloading" | "lazyloaded"
 
 /**
  * @name LazyImage
  */
-function LazyImage(props: IProps) {
+export function LazyImage(props: TProps) {
   const imageRef = useRef<HTMLImageElement>(null)
   const [lazyState, setLazyState] = useState<Lazy>("lazyload")
   const observer = useIntersectionObserver(imageRef, {})
@@ -75,8 +81,8 @@ function LazyImage(props: IProps) {
       ref={imageRef}
       className={cls(css.root, props.className, lazyState)}
       src={props.src ?? "data:,"}
-      data-src={props?.dataSrc}
-      data-srcset={props?.dataSrcset}
+      data-src={(props as TProps & TSrc)?.dataSrc}
+      data-srcset={(props as TProps & TSrcset)?.dataSrcset}
       alt={props?.alt}
       style={{
         ...(props.aspectRatio ? { aspectRatio: `${props.aspectRatio}` } : {}),
@@ -85,5 +91,3 @@ function LazyImage(props: IProps) {
     />
   )
 }
-
-export default LazyImage
diff --git a/apps/front/src/libs/hooks/useIntersectionObserver.tsx b/apps/front/src/libs/hooks/useIntersectionObserver.tsx
@@ -4,6 +4,16 @@ export interface Args extends IntersectionObserverInit {
   freezeOnceVisible?: boolean
 }
 
+/**
+ * useIntersectionObserver
+ * https://usehooks-ts.com/react-hook/use-intersection-observer
+ *
+ * @param elementRef
+ * @param threshold
+ * @param root
+ * @param rootMargin
+ * @param freezeOnceVisible
+ */
 function useIntersectionObserver(
   elementRef: RefObject<Element>,
   { threshold = 0, root = null, rootMargin = "0%", freezeOnceVisible = false }: Args