@modern-kit/react
Version:
1 lines • 3.14 kB
Source Map (JSON)
{"version":3,"file":"index.cjs","sources":["../../../src/components/FallbackLazyImage/index.tsx"],"sourcesContent":["import React, {\n CSSProperties,\n forwardRef,\n useCallback,\n useMemo,\n useState,\n} from 'react';\nimport { LazyImage, LazyImageProps } from '../LazyImage';\n\ninterface FallbackLazyImageProps extends LazyImageProps {\n fallback: JSX.Element;\n width: string | number;\n height: string | number;\n duration?: CSSProperties['transitionDuration'];\n}\n\nexport const FallbackLazyImage = forwardRef<\n HTMLImageElement,\n FallbackLazyImageProps\n>(\n (\n { width, height, fallback, style, duration = '0.2s', onLoad, ...restProps },\n ref\n ) => {\n const [isLoaded, setIsLoaded] = useState(false);\n\n const isRenderFallback = !isLoaded;\n\n const wrapperStyle: CSSProperties = useMemo(\n () => ({\n position: 'relative',\n width,\n height,\n }),\n [width, height]\n );\n\n const imageStyle: CSSProperties = useMemo(\n () => ({\n position: 'absolute',\n top: 0,\n left: 0,\n opacity: !isRenderFallback ? 1 : 0,\n transition: `opacity ${duration}`,\n ...style,\n }),\n [isRenderFallback, duration, style]\n );\n\n const handleLoad = useCallback(\n (e: React.SyntheticEvent<HTMLImageElement, Event>) => {\n if (onLoad) onLoad(e);\n setIsLoaded(true);\n },\n [onLoad]\n );\n\n return (\n <div style={wrapperStyle}>\n {isRenderFallback && fallback}\n <LazyImage\n ref={ref}\n width={width}\n height={height}\n style={imageStyle}\n onLoad={handleLoad}\n {...restProps}\n />\n </div>\n );\n }\n);\n\nFallbackLazyImage.displayName = 'FallbackLazyImage';\n"],"names":["forwardRef","useState","useMemo","useCallback","jsxs","jsx","LazyImage"],"mappings":";;;;;;;;;;;AAgBO,MAAM,iBAAA,GAAoBA,gBAAA;AAAA,EAI/B,CACE,EAAE,KAAA,EAAO,MAAA,EAAQ,QAAA,EAAU,KAAA,EAAO,QAAA,GAAW,MAAA,EAAQ,MAAA,EAAQ,GAAG,SAAA,EAAU,EAC1E,GAAA,KACG;AACH,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,eAAS,KAAK,CAAA;AAE9C,IAAA,MAAM,mBAAmB,CAAC,QAAA;AAE1B,IAAA,MAAM,YAAA,GAA8BC,aAAA;AAAA,MAClC,OAAO;AAAA,QACL,QAAA,EAAU,UAAA;AAAA,QACV,KAAA;AAAA,QACA;AAAA,OACF,CAAA;AAAA,MACA,CAAC,OAAO,MAAM;AAAA,KAChB;AAEA,IAAA,MAAM,UAAA,GAA4BA,aAAA;AAAA,MAChC,OAAO;AAAA,QACL,QAAA,EAAU,UAAA;AAAA,QACV,GAAA,EAAK,CAAA;AAAA,QACL,IAAA,EAAM,CAAA;AAAA,QACN,OAAA,EAAS,CAAC,gBAAA,GAAmB,CAAA,GAAI,CAAA;AAAA,QACjC,UAAA,EAAY,WAAW,QAAQ,CAAA,CAAA;AAAA,QAC/B,GAAG;AAAA,OACL,CAAA;AAAA,MACA,CAAC,gBAAA,EAAkB,QAAA,EAAU,KAAK;AAAA,KACpC;AAEA,IAAA,MAAM,UAAA,GAAaC,iBAAA;AAAA,MACjB,CAAC,CAAA,KAAqD;AACpD,QAAA,IAAI,MAAA,SAAe,CAAC,CAAA;AACpB,QAAA,WAAA,CAAY,IAAI,CAAA;AAAA,MAClB,CAAA;AAAA,MACA,CAAC,MAAM;AAAA,KACT;AAEA,IAAA,uBACEC,eAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,YAAA,EACT,QAAA,EAAA;AAAA,MAAA,gBAAA,IAAoB,QAAA;AAAA,sBACrBC,cAAA;AAAA,QAACC,6BAAA;AAAA,QAAA;AAAA,UACC,GAAA;AAAA,UACA,KAAA;AAAA,UACA,MAAA;AAAA,UACA,KAAA,EAAO,UAAA;AAAA,UACP,MAAA,EAAQ,UAAA;AAAA,UACP,GAAG;AAAA;AAAA;AACN,KAAA,EACF,CAAA;AAAA,EAEJ;AACF;AAEA,iBAAA,CAAkB,WAAA,GAAc,mBAAA;;;;"}