UNPKG

@wordpress/compose

Version:
8 lines (7 loc) 3.03 kB
{ "version": 3, "sources": ["../../../src/hooks/use-async-list/index.ts"], "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { flushSync, useEffect, useState } from '@wordpress/element';\nimport { createQueue } from '@wordpress/priority-queue';\n\ntype AsyncListConfig = {\n\tstep: number;\n};\n\n/**\n * Returns the first items from list that are present on state.\n *\n * @param list New array.\n * @param state Current state.\n * @return First items present in state.\n */\nfunction getFirstItemsPresentInState< T >( list: T[], state: T[] ): T[] {\n\tconst firstItems = [];\n\n\tfor ( let i = 0; i < list.length; i++ ) {\n\t\tconst item = list[ i ];\n\t\tif ( ! state.includes( item ) ) {\n\t\t\tbreak;\n\t\t}\n\n\t\tfirstItems.push( item );\n\t}\n\n\treturn firstItems;\n}\n\n/**\n * React hook returns an array which items get asynchronously appended from a source array.\n * This behavior is useful if we want to render a list of items asynchronously for performance reasons.\n *\n * @param list Source array.\n * @param config Configuration object.\n *\n * @return Async array.\n */\nfunction useAsyncList< T >(\n\tlist: T[],\n\tconfig: AsyncListConfig = { step: 1 }\n): T[] {\n\tconst { step = 1 } = config;\n\tconst [ current, setCurrent ] = useState< T[] >( [] );\n\n\tuseEffect( () => {\n\t\t// On reset, we keep the first items that were previously rendered.\n\t\tlet firstItems = getFirstItemsPresentInState( list, current );\n\t\tif ( firstItems.length < step ) {\n\t\t\tfirstItems = firstItems.concat(\n\t\t\t\tlist.slice( firstItems.length, step )\n\t\t\t);\n\t\t}\n\t\tsetCurrent( firstItems );\n\n\t\tconst asyncQueue = createQueue();\n\t\tfor ( let i = firstItems.length; i < list.length; i += step ) {\n\t\t\tasyncQueue.add( {}, () => {\n\t\t\t\tflushSync( () => {\n\t\t\t\t\tsetCurrent( ( state ) => [\n\t\t\t\t\t\t...state,\n\t\t\t\t\t\t...list.slice( i, i + step ),\n\t\t\t\t\t] );\n\t\t\t\t} );\n\t\t\t} );\n\t\t}\n\n\t\treturn () => asyncQueue.reset();\n\t}, [ list ] );\n\n\treturn current;\n}\n\nexport default useAsyncList;\n"], "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA+C;AAC/C,4BAA4B;AAa5B,SAAS,4BAAkC,MAAW,OAAkB;AACvE,QAAM,aAAa,CAAC;AAEpB,WAAU,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAM;AACvC,UAAM,OAAO,KAAM,CAAE;AACrB,QAAK,CAAE,MAAM,SAAU,IAAK,GAAI;AAC/B;AAAA,IACD;AAEA,eAAW,KAAM,IAAK;AAAA,EACvB;AAEA,SAAO;AACR;AAWA,SAAS,aACR,MACA,SAA0B,EAAE,MAAM,EAAE,GAC9B;AACN,QAAM,EAAE,OAAO,EAAE,IAAI;AACrB,QAAM,CAAE,SAAS,UAAW,QAAI,yBAAiB,CAAC,CAAE;AAEpD,gCAAW,MAAM;AAEhB,QAAI,aAAa,4BAA6B,MAAM,OAAQ;AAC5D,QAAK,WAAW,SAAS,MAAO;AAC/B,mBAAa,WAAW;AAAA,QACvB,KAAK,MAAO,WAAW,QAAQ,IAAK;AAAA,MACrC;AAAA,IACD;AACA,eAAY,UAAW;AAEvB,UAAM,iBAAa,mCAAY;AAC/B,aAAU,IAAI,WAAW,QAAQ,IAAI,KAAK,QAAQ,KAAK,MAAO;AAC7D,iBAAW,IAAK,CAAC,GAAG,MAAM;AACzB,sCAAW,MAAM;AAChB,qBAAY,CAAE,UAAW;AAAA,YACxB,GAAG;AAAA,YACH,GAAG,KAAK,MAAO,GAAG,IAAI,IAAK;AAAA,UAC5B,CAAE;AAAA,QACH,CAAE;AAAA,MACH,CAAE;AAAA,IACH;AAEA,WAAO,MAAM,WAAW,MAAM;AAAA,EAC/B,GAAG,CAAE,IAAK,CAAE;AAEZ,SAAO;AACR;AAEA,IAAO,yBAAQ;", "names": [] }