@tapie-kr/inspire-react/dist/cjs/components/molecules/Image/index.js

React Component Collection for INSPIRE

'use client';
/* eslint-disable */
/*
 * INSPIRE : Creative Kit
 * React Component Collection for INSPIRE
 *
 * This file is generated automatically. Do not modify it manually
 * Generated at : 2025. 3. 4. 오후 6:18:13
 * @tapie-kr/inspire-react version: 0.2.15
 *
 * (c) 2025 TAPIE. All rights reserved.
 * MIT License
*/
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var styles_css = require('./styles.css.js');
var component_css = require('../../../lib/style/contract/component.css.js');
var index$1 = require('../../atoms/Skeleton/index.js');
var index = require('../../miscellaneous/layout/Box/index.js');
var React = require('react');
var useMountedState = require('../../../hooks/use-mounted-state.js');

function Image(props){const[isLoading,setIsLoading]=React.useState(true);const isMounted=useMountedState.useMountedState();const src=React.useMemo(()=>isMounted?typeof props.src==="string"?props.src:URL.createObjectURL(props.src):"",[isMounted,props.src]);const handleLoadStart=React.useCallback(()=>{setIsLoading(true);},[]);const handleLoad=React.useCallback(()=>{setTimeout(()=>setIsLoading(false),props.delay??0);},[props.delay]);return jsxRuntime.jsxs(index.Box,{className:styles_css.container,style:{width:props.fullWidth?"100%":props.width,height:props.fullHeight?"100%":props.height},children:[isLoading&&jsxRuntime.jsx(index$1.Skeleton,{width:props.width,height:props.height,fullWidth:props.fullWidth,fullHeight:props.fullHeight,borderRadius:component_css.radiusVars.none}),isMounted&&jsxRuntime.jsx("img",{className:styles_css.image,src:src,alt:props.alt,style:{display:isLoading?"none":"block"},onLoadStart:handleLoadStart,onLoad:handleLoad,onError:handleLoad})]})}

exports.Image = Image;