@wordpress/block-library/build-module/icon/components/custom-inserter/icon-grid.mjs.map

Block library for the WordPress editor.

{
  "version": 3,
  "sources": ["../../../../src/icon/components/custom-inserter/icon-grid.js"],
  "sourcesContent": ["import { __ } from '@wordpress/i18n';\nimport { Button } from '@wordpress/components';\nimport { useAsyncList } from '@wordpress/compose';\nimport { useRef, useLayoutEffect } from '@wordpress/element';\nimport { getScrollContainer } from '@wordpress/dom';\nimport HtmlRenderer from '../../../utils/html-renderer';\n\nconst BATCH_SIZE = 20;\n\nexport default function IconGrid( { icons, onChange, value } ) {\n\tconst shownIcons = useAsyncList( icons, {\n\t\tstep: BATCH_SIZE,\n\t} );\n\n\t// Scroll the selected icon into view, but wait until enough icons render\n\t// below it so it can be centered rather than stuck at the bottom. Skip it\n\t// if the user has already scrolled the list.\n\tconst selectedIconRef = useRef();\n\tconst selectedIndex =\n\t\ticons?.findIndex( ( icon ) => icon.name === value ) ?? -1;\n\tconst isReadyToScroll =\n\t\tselectedIndex >= 0 &&\n\t\t( shownIcons.length >= selectedIndex + BATCH_SIZE ||\n\t\t\tshownIcons.length === icons.length );\n\n\tuseLayoutEffect( () => {\n\t\tconst node = selectedIconRef.current;\n\t\tif ( ! isReadyToScroll || ! node ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( getScrollContainer( node )?.scrollTop ) {\n\t\t\treturn;\n\t\t}\n\t\tnode.scrollIntoView( { block: 'center' } );\n\t}, [ isReadyToScroll ] );\n\n\treturn (\n\t\t<div className=\"wp-block-icon__inserter-grid\">\n\t\t\t{ ! icons?.length ? (\n\t\t\t\t<div className=\"wp-block-icon__inserter-grid-no-results\">\n\t\t\t\t\t<p>{ __( 'No results found.' ) }</p>\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"wp-block-icon__inserter-grid-icons-list\"\n\t\t\t\t\taria-label={ __( 'Icon library' ) }\n\t\t\t\t>\n\t\t\t\t\t{ shownIcons.map( ( icon ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tkey={ icon.name }\n\t\t\t\t\t\t\t\tref={\n\t\t\t\t\t\t\t\t\ticon.name === value\n\t\t\t\t\t\t\t\t\t\t? selectedIconRef\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tclassName=\"wp-block-icon__inserter-grid-icons-list-item\"\n\t\t\t\t\t\t\t\tonClick={ () => onChange( icon.name ) }\n\t\t\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\t\t\ticon.name === value ? 'primary' : undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span className=\"wp-block-icon__inserter-grid-icons-list-item-icon\">\n\t\t\t\t\t\t\t\t\t<HtmlRenderer html={ icon.content } />\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<span className=\"wp-block-icon__inserter-grid-icons-list-item-title\">\n\t\t\t\t\t\t\t\t\t{ icon.label }\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"],
  "mappings": ";AAAA,SAAS,UAAU;AACnB,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,QAAQ,uBAAuB;AACxC,SAAS,0BAA0B;AACnC,OAAO,kBAAkB;AAmCpB,cASE,YATF;AAjCL,IAAM,aAAa;AAEJ,SAAR,SAA2B,EAAE,OAAO,UAAU,MAAM,GAAI;AAC9D,QAAM,aAAa,aAAc,OAAO;AAAA,IACvC,MAAM;AAAA,EACP,CAAE;AAKF,QAAM,kBAAkB,OAAO;AAC/B,QAAM,gBACL,OAAO,UAAW,CAAE,SAAU,KAAK,SAAS,KAAM,KAAK;AACxD,QAAM,kBACL,iBAAiB,MACf,WAAW,UAAU,gBAAgB,cACtC,WAAW,WAAW,MAAM;AAE9B,kBAAiB,MAAM;AACtB,UAAM,OAAO,gBAAgB;AAC7B,QAAK,CAAE,mBAAmB,CAAE,MAAO;AAClC;AAAA,IACD;AACA,QAAK,mBAAoB,IAAK,GAAG,WAAY;AAC5C;AAAA,IACD;AACA,SAAK,eAAgB,EAAE,OAAO,SAAS,CAAE;AAAA,EAC1C,GAAG,CAAE,eAAgB,CAAE;AAEvB,SACC,oBAAC,SAAI,WAAU,gCACZ,WAAE,OAAO,SACV,oBAAC,SAAI,WAAU,2CACd,8BAAC,OAAI,aAAI,mBAAoB,GAAG,GACjC,IAEA;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,cAAa,GAAI,cAAe;AAAA,MAE9B,qBAAW,IAAK,CAAE,SAAU;AAC7B,eACC;AAAA,UAAC;AAAA;AAAA,YAEA,KACC,KAAK,SAAS,QACX,kBACA;AAAA,YAEJ,WAAU;AAAA,YACV,SAAU,MAAM,SAAU,KAAK,IAAK;AAAA,YACpC,SACC,KAAK,SAAS,QAAQ,YAAY;AAAA,YAEnC,uBAAqB;AAAA,YAErB;AAAA,kCAAC,UAAK,WAAU,qDACf,8BAAC,gBAAa,MAAO,KAAK,SAAU,GACrC;AAAA,cACA,oBAAC,UAAK,WAAU,sDACb,eAAK,OACR;AAAA;AAAA;AAAA,UAlBM,KAAK;AAAA,QAmBZ;AAAA,MAEF,CAAE;AAAA;AAAA,EACH,GAEF;AAEF;",
  "names": []
}