UNPKG

@wordpress/compose

Version:
8 lines (7 loc) 4.97 kB
{ "version": 3, "sources": ["../../../src/hooks/use-merge-refs/index.ts"], "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useRef, useCallback, useLayoutEffect } from '@wordpress/element';\nimport type { MutableRefObject, Ref, RefCallback } from 'react';\n\nfunction assignRef< T >( ref: Ref< T >, value: T ) {\n\tif ( typeof ref === 'function' ) {\n\t\tref( value );\n\t} else if ( ref && ref.hasOwnProperty( 'current' ) ) {\n\t\t( ref as MutableRefObject< T > ).current = value;\n\t}\n}\n\n/**\n * Merges refs into one ref callback.\n *\n * It also ensures that the merged ref callbacks are only called when they\n * change (as a result of a `useCallback` dependency update) OR when the ref\n * value changes, just as React does when passing a single ref callback to the\n * component.\n *\n * As expected, if you pass a new function on every render, the ref callback\n * will be called after every render.\n *\n * If you don't wish a ref callback to be called after every render, wrap it\n * with `useCallback( callback, dependencies )`. When a dependency changes, the\n * old ref callback will be called with `null` and the new ref callback will be\n * called with the same value.\n *\n * To make ref callbacks easier to use, you can also pass the result of\n * `useRefEffect`, which makes cleanup easier by allowing you to return a\n * cleanup function instead of handling `null`.\n *\n * It's also possible to _disable_ a ref (and its behaviour) by simply not\n * passing the ref.\n *\n * ```jsx\n * const ref = useRefEffect( ( node ) => {\n * node.addEventListener( ... );\n * return () => {\n * node.removeEventListener( ... );\n * };\n * }, [ ...dependencies ] );\n * const otherRef = useRef();\n * const mergedRefs useMergeRefs( [\n * enabled && ref,\n * otherRef,\n * ] );\n * return <div ref={ mergedRefs } />;\n * ```\n *\n * @param refs The refs to be merged.\n * @return The merged ref callback.\n */\nexport default function useMergeRefs< T >(\n\trefs: Ref< T >[]\n): RefCallback< T > {\n\tconst element = useRef( null );\n\tconst isAttachedRef = useRef( false );\n\tconst didElementChangeRef = useRef( false );\n\tconst previousRefsRef = useRef< Ref< T >[] >( [] );\n\tconst currentRefsRef = useRef( refs );\n\n\t// Update on render before the ref callback is called, so the ref callback\n\t// always has access to the current refs.\n\tcurrentRefsRef.current = refs;\n\n\t// If any of the refs change, call the previous ref with `null` and the new\n\t// ref with the node, except when the element changes in the same cycle, in\n\t// which case the ref callbacks will already have been called.\n\tuseLayoutEffect( () => {\n\t\tif (\n\t\t\tdidElementChangeRef.current === false &&\n\t\t\tisAttachedRef.current === true\n\t\t) {\n\t\t\trefs.forEach( ( ref, index ) => {\n\t\t\t\tconst previousRef = previousRefsRef.current[ index ];\n\t\t\t\tif ( ref !== previousRef ) {\n\t\t\t\t\tassignRef( previousRef, null );\n\t\t\t\t\tassignRef( ref, element.current );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\tpreviousRefsRef.current = refs;\n\t}, refs );\n\n\t// No dependencies, must be reset after every render so ref callbacks are\n\t// correctly called after a ref change.\n\tuseLayoutEffect( () => {\n\t\tdidElementChangeRef.current = false;\n\t} );\n\n\t// There should be no dependencies so that `callback` is only called when\n\t// the node changes.\n\treturn useCallback( ( value: T | null ) => {\n\t\t// Update the element so it can be used when calling ref callbacks on a\n\t\t// dependency change.\n\t\tassignRef( element, value );\n\n\t\tdidElementChangeRef.current = true;\n\t\tisAttachedRef.current = value !== null;\n\n\t\t// When an element changes, the current ref callback should be called\n\t\t// with the new element and the previous one with `null`.\n\t\tconst refsToAssign = value\n\t\t\t? currentRefsRef.current\n\t\t\t: previousRefsRef.current;\n\n\t\t// Update the latest refs.\n\t\tfor ( const ref of refsToAssign ) {\n\t\t\tassignRef( ref, value );\n\t\t}\n\t}, [] );\n}\n"], "mappings": ";AAGA,SAAS,QAAQ,aAAa,uBAAuB;AAGrD,SAAS,UAAgB,KAAe,OAAW;AAClD,MAAK,OAAO,QAAQ,YAAa;AAChC,QAAK,KAAM;AAAA,EACZ,WAAY,OAAO,IAAI,eAAgB,SAAU,GAAI;AACpD,IAAE,IAA+B,UAAU;AAAA,EAC5C;AACD;AA2Ce,SAAR,aACN,MACmB;AACnB,QAAM,UAAU,OAAQ,IAAK;AAC7B,QAAM,gBAAgB,OAAQ,KAAM;AACpC,QAAM,sBAAsB,OAAQ,KAAM;AAC1C,QAAM,kBAAkB,OAAsB,CAAC,CAAE;AACjD,QAAM,iBAAiB,OAAQ,IAAK;AAIpC,iBAAe,UAAU;AAKzB,kBAAiB,MAAM;AACtB,QACC,oBAAoB,YAAY,SAChC,cAAc,YAAY,MACzB;AACD,WAAK,QAAS,CAAE,KAAK,UAAW;AAC/B,cAAM,cAAc,gBAAgB,QAAS,KAAM;AACnD,YAAK,QAAQ,aAAc;AAC1B,oBAAW,aAAa,IAAK;AAC7B,oBAAW,KAAK,QAAQ,OAAQ;AAAA,QACjC;AAAA,MACD,CAAE;AAAA,IACH;AAEA,oBAAgB,UAAU;AAAA,EAC3B,GAAG,IAAK;AAIR,kBAAiB,MAAM;AACtB,wBAAoB,UAAU;AAAA,EAC/B,CAAE;AAIF,SAAO,YAAa,CAAE,UAAqB;AAG1C,cAAW,SAAS,KAAM;AAE1B,wBAAoB,UAAU;AAC9B,kBAAc,UAAU,UAAU;AAIlC,UAAM,eAAe,QAClB,eAAe,UACf,gBAAgB;AAGnB,eAAY,OAAO,cAAe;AACjC,gBAAW,KAAK,KAAM;AAAA,IACvB;AAAA,EACD,GAAG,CAAC,CAAE;AACP;", "names": [] }