@loke/ui
Version:
2 lines (1 loc) • 5.34 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_presence={};__export(exports_presence,{Root:()=>Root,Presence:()=>Presence});module.exports=__toCommonJS(exports_presence);var import_compose_refs=require("@loke/ui/compose-refs"),import_use_layout_effect=require("@loke/ui/use-layout-effect"),import_react2=require("react");var import_react=require("react");function useStateMachine(initialState,machine){return import_react.useReducer((state,event)=>{return machine[state][event]??state},initialState)}var Presence=(props)=>{let{present,children}=props,presence=usePresence(present),child=typeof children==="function"?children({present:presence.isPresent}):import_react2.Children.only(children),ref=import_compose_refs.useComposedRefs(presence.ref,getElementRef(child));return typeof children==="function"||presence.isPresent?import_react2.cloneElement(child,{ref}):null};Presence.displayName="Presence";function usePresence(present){let[node,setNode]=import_react2.useState(),stylesRef=import_react2.useRef(null),prevPresentRef=import_react2.useRef(present),prevAnimationNameRef=import_react2.useRef("none"),initialState=present?"mounted":"unmounted",[state,send]=useStateMachine(initialState,{mounted:{ANIMATION_OUT:"unmountSuspended",UNMOUNT:"unmounted"},unmounted:{MOUNT:"mounted"},unmountSuspended:{ANIMATION_END:"unmounted",MOUNT:"mounted"}});return import_react2.useEffect(()=>{let currentAnimationName=getAnimationName(stylesRef.current);prevAnimationNameRef.current=state==="mounted"?currentAnimationName:"none"},[state]),import_use_layout_effect.useLayoutEffect(()=>{let styles=stylesRef.current,wasPresent=prevPresentRef.current;if(wasPresent!==present){let prevAnimationName=prevAnimationNameRef.current,currentAnimationName=getAnimationName(styles);if(present)send("MOUNT");else if(currentAnimationName==="none"||styles?.display==="none")send("UNMOUNT");else if(wasPresent&&prevAnimationName!==currentAnimationName)send("ANIMATION_OUT");else send("UNMOUNT");prevPresentRef.current=present}},[present,send]),import_use_layout_effect.useLayoutEffect(()=>{if(node){let timeoutId,ownerWindow=node.ownerDocument.defaultView??window,handleAnimationEnd=(event)=>{let isCurrentAnimation=getAnimationName(stylesRef.current).includes(CSS.escape(event.animationName));if(event.target===node&&isCurrentAnimation){if(send("ANIMATION_END"),!prevPresentRef.current){let currentFillMode=node.style.animationFillMode;node.style.animationFillMode="forwards",timeoutId=ownerWindow.setTimeout(()=>{if(node.style.animationFillMode==="forwards")node.style.animationFillMode=currentFillMode})}}},handleAnimationStart=(event)=>{if(event.target===node)prevAnimationNameRef.current=getAnimationName(stylesRef.current)};return node.addEventListener("animationstart",handleAnimationStart),node.addEventListener("animationcancel",handleAnimationEnd),node.addEventListener("animationend",handleAnimationEnd),()=>{ownerWindow.clearTimeout(timeoutId),node.removeEventListener("animationstart",handleAnimationStart),node.removeEventListener("animationcancel",handleAnimationEnd),node.removeEventListener("animationend",handleAnimationEnd)}}send("ANIMATION_END")},[node,send]),{isPresent:["mounted","unmountSuspended"].includes(state),ref:import_react2.useCallback((element)=>{stylesRef.current=element?getComputedStyle(element):null,setNode(element)},[])}}function getAnimationName(styles){return styles?.animationName||"none"}function getElementRef(element){let getter=Object.getOwnPropertyDescriptor(element.props,"ref")?.get,mayWarn=getter&&"isReactWarning"in getter&&getter.isReactWarning;if(mayWarn)return element.ref;if(getter=Object.getOwnPropertyDescriptor(element,"ref")?.get,mayWarn=getter&&"isReactWarning"in getter&&getter.isReactWarning,mayWarn)return element.props.ref;return element.props.ref||element.ref}var Root=Presence;