@loke/ui
Version:
2 lines (1 loc) • 5.42 kB
JavaScript
var __create=Object.create;var{getPrototypeOf:__getProtoOf,defineProperty:__defProp,getOwnPropertyNames:__getOwnPropNames,getOwnPropertyDescriptor:__getOwnPropDesc}=Object,__hasOwnProp=Object.prototype.hasOwnProperty;function __accessProp(key){return this[key]}var __toESMCache_node,__toESMCache_esm,__toESM=(mod,isNodeMode,target)=>{var canCache=mod!=null&&typeof mod==="object";if(canCache){var cache=isNodeMode?__toESMCache_node??=new WeakMap:__toESMCache_esm??=new WeakMap,cached=cache.get(mod);if(cached)return cached}target=mod!=null?__create(__getProtoOf(mod)):{};let to=isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target;for(let key of __getOwnPropNames(mod))if(!__hasOwnProp.call(to,key))__defProp(to,key,{get:__accessProp.bind(mod,key),enumerable:!0});if(canCache)cache.set(mod,to);return to},__toCommonJS=(from)=>{var entry=(__moduleCache??=new WeakMap).get(from),desc;if(entry)return entry;if(entry=__defProp({},"__esModule",{value:!0}),from&&typeof from==="object"||typeof from==="function"){for(var key of __getOwnPropNames(from))if(!__hasOwnProp.call(entry,key))__defProp(entry,key,{get:__accessProp.bind(from,key),enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable})}return __moduleCache.set(from,entry),entry},__moduleCache;var __returnValue=(v)=>v;function __exportSetter(name,newValue){this[name]=__returnValue.bind(null,newValue)}var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0,configurable:!0,set:__exportSetter.bind(all,name)})};var exports_avatar={};__export(exports_avatar,{createAvatarScope:()=>createAvatarScope,Root:()=>Root,Image:()=>Image,Fallback:()=>Fallback,AvatarImage:()=>AvatarImage,AvatarFallback:()=>AvatarFallback,Avatar:()=>Avatar});module.exports=__toCommonJS(exports_avatar);var import_context=require("@loke/ui/context"),import_primitive=require("@loke/ui/primitive"),import_use_callback_ref=require("@loke/ui/use-callback-ref"),import_use_is_hydrated=require("@loke/ui/use-is-hydrated"),import_use_layout_effect=require("@loke/ui/use-layout-effect"),import_react=require("react"),jsx_runtime=require("react/jsx-runtime"),AVATAR_NAME="Avatar",[createAvatarContext,createAvatarScope]=import_context.createContextScope(AVATAR_NAME),[AvatarProvider,useAvatarContext]=createAvatarContext(AVATAR_NAME),Avatar=import_react.forwardRef((props,forwardedRef)=>{let{__scopeAvatar,...avatarProps}=props,[imageLoadingStatus,setImageLoadingStatus]=import_react.useState("idle");return jsx_runtime.jsx(AvatarProvider,{imageLoadingStatus,onImageLoadingStatusChange:setImageLoadingStatus,scope:__scopeAvatar,children:jsx_runtime.jsx(import_primitive.Primitive.span,{...avatarProps,ref:forwardedRef})})});Avatar.displayName=AVATAR_NAME;var IMAGE_NAME="AvatarImage",AvatarImage=import_react.forwardRef((props,forwardedRef)=>{let{__scopeAvatar,src,onLoadingStatusChange=()=>{},...imageProps}=props,context=useAvatarContext(IMAGE_NAME,__scopeAvatar),imageLoadingStatus=useImageLoadingStatus(src,imageProps),handleLoadingStatusChange=import_use_callback_ref.useCallbackRef((status)=>{onLoadingStatusChange(status),context.onImageLoadingStatusChange(status)});return import_use_layout_effect.useLayoutEffect(()=>{if(imageLoadingStatus!=="idle")handleLoadingStatusChange(imageLoadingStatus)},[imageLoadingStatus,handleLoadingStatusChange]),imageLoadingStatus==="loaded"?jsx_runtime.jsx(import_primitive.Primitive.img,{...imageProps,ref:forwardedRef,src}):null});AvatarImage.displayName=IMAGE_NAME;var FALLBACK_NAME="AvatarFallback",AvatarFallback=import_react.forwardRef((props,forwardedRef)=>{let{__scopeAvatar,delayMs,...fallbackProps}=props,context=useAvatarContext(FALLBACK_NAME,__scopeAvatar),[canRender,setCanRender]=import_react.useState(delayMs===void 0);return import_react.useEffect(()=>{if(delayMs!==void 0){let timerId=window.setTimeout(()=>setCanRender(!0),delayMs);return()=>window.clearTimeout(timerId)}},[delayMs]),canRender&&context.imageLoadingStatus!=="loaded"?jsx_runtime.jsx(import_primitive.Primitive.span,{...fallbackProps,ref:forwardedRef}):null});AvatarFallback.displayName=FALLBACK_NAME;function resolveLoadingStatus(image,src){if(!image)return"idle";if(!src)return"error";if(image.src!==src)image.src=src;return image.complete&&image.naturalWidth>0?"loaded":"loading"}function useImageLoadingStatus(src,{referrerPolicy,crossOrigin}){let isHydrated=import_use_is_hydrated.useIsHydrated(),imageRef=import_react.useRef(null),image=(()=>{if(!isHydrated)return null;if(!imageRef.current)imageRef.current=new window.Image;return imageRef.current})(),[loadingStatus,setLoadingStatus]=import_react.useState(()=>resolveLoadingStatus(image,src));return import_use_layout_effect.useLayoutEffect(()=>{setLoadingStatus(resolveLoadingStatus(image,src))},[image,src]),import_use_layout_effect.useLayoutEffect(()=>{let updateStatus=(status)=>()=>{setLoadingStatus(status)};if(!image)return;let handleLoad=updateStatus("loaded"),handleError=updateStatus("error");if(image.addEventListener("load",handleLoad),image.addEventListener("error",handleError),referrerPolicy)image.referrerPolicy=referrerPolicy;if(typeof crossOrigin==="string")image.crossOrigin=crossOrigin;return()=>{image.removeEventListener("load",handleLoad),image.removeEventListener("error",handleError)}},[image,crossOrigin,referrerPolicy]),loadingStatus}var Root=Avatar,Image=AvatarImage,Fallback=AvatarFallback;