UNPKG

@wordpress/block-editor

Version:
8 lines (7 loc) 4.77 kB
{ "version": 3, "sources": ["../../../../src/components/inserter/category-tabs/index.js"], "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { usePrevious, useReducedMotion } from '@wordpress/compose';\nimport {\n\tprivateApis as componentsPrivateApis,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../../lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\n\nfunction CategoryTabs( {\n\tcategories,\n\tselectedCategory,\n\tonSelectCategory,\n\tchildren,\n} ) {\n\t// Copied from InterfaceSkeleton.\n\tconst ANIMATION_DURATION = 0.25;\n\tconst disableMotion = useReducedMotion();\n\tconst defaultTransition = {\n\t\ttype: 'tween',\n\t\tduration: disableMotion ? 0 : ANIMATION_DURATION,\n\t\tease: [ 0.6, 0, 0.4, 1 ],\n\t};\n\n\tconst previousSelectedCategory = usePrevious( selectedCategory );\n\n\tconst selectedTabId = selectedCategory ? selectedCategory.name : null;\n\tconst [ activeTabId, setActiveId ] = useState();\n\tconst firstTabId = categories?.[ 0 ]?.name;\n\n\t// If there is no active tab, make the first tab the active tab, so that\n\t// when focus is moved to the tablist, the first tab will be focused\n\t// despite not being selected\n\tif ( selectedTabId === null && ! activeTabId && firstTabId ) {\n\t\tsetActiveId( firstTabId );\n\t}\n\n\treturn (\n\t\t<Tabs\n\t\t\tselectOnMove={ false }\n\t\t\tselectedTabId={ selectedTabId }\n\t\t\torientation=\"vertical\"\n\t\t\tonSelect={ ( categoryId ) => {\n\t\t\t\t// Pass the full category object\n\t\t\t\tonSelectCategory(\n\t\t\t\t\tcategories.find(\n\t\t\t\t\t\t( category ) => category.name === categoryId\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t} }\n\t\t\tactiveTabId={ activeTabId }\n\t\t\tonActiveTabIdChange={ setActiveId }\n\t\t>\n\t\t\t<Tabs.TabList className=\"block-editor-inserter__category-tablist\">\n\t\t\t\t{ categories.map( ( category ) => (\n\t\t\t\t\t<Tabs.Tab\n\t\t\t\t\t\tkey={ category.name }\n\t\t\t\t\t\ttabId={ category.name }\n\t\t\t\t\t\taria-current={\n\t\t\t\t\t\t\tcategory === selectedCategory ? 'true' : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ category.label }\n\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t) ) }\n\t\t\t</Tabs.TabList>\n\t\t\t{ categories.map( ( category ) => (\n\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\tkey={ category.name }\n\t\t\t\t\ttabId={ category.name }\n\t\t\t\t\tfocusable={ false }\n\t\t\t\t>\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tclassName=\"block-editor-inserter__category-panel\"\n\t\t\t\t\t\tinitial={\n\t\t\t\t\t\t\t! previousSelectedCategory ? 'closed' : 'open'\n\t\t\t\t\t\t}\n\t\t\t\t\t\tanimate=\"open\"\n\t\t\t\t\t\tvariants={ {\n\t\t\t\t\t\t\topen: {\n\t\t\t\t\t\t\t\ttransform: 'translateX( 0 )',\n\t\t\t\t\t\t\t\ttransitionEnd: {\n\t\t\t\t\t\t\t\t\tzIndex: '1',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tclosed: {\n\t\t\t\t\t\t\t\ttransform: 'translateX( -100% )',\n\t\t\t\t\t\t\t\tzIndex: '-1',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t} }\n\t\t\t\t\t\ttransition={ defaultTransition }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</motion.div>\n\t\t\t\t</Tabs.TabPanel>\n\t\t\t) ) }\n\t\t</Tabs>\n\t);\n}\n\nexport default CategoryTabs;\n"], "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA8C;AAC9C,wBAGO;AACP,qBAAyB;AAKzB,yBAAuB;AAiCrB;AA/BF,IAAM,EAAE,KAAK,QAAI,2BAAQ,kBAAAA,WAAsB;AAE/C,SAAS,aAAc;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AAEH,QAAM,qBAAqB;AAC3B,QAAM,oBAAgB,iCAAiB;AACvC,QAAM,oBAAoB;AAAA,IACzB,MAAM;AAAA,IACN,UAAU,gBAAgB,IAAI;AAAA,IAC9B,MAAM,CAAE,KAAK,GAAG,KAAK,CAAE;AAAA,EACxB;AAEA,QAAM,+BAA2B,4BAAa,gBAAiB;AAE/D,QAAM,gBAAgB,mBAAmB,iBAAiB,OAAO;AACjE,QAAM,CAAE,aAAa,WAAY,QAAI,yBAAS;AAC9C,QAAM,aAAa,aAAc,CAAE,GAAG;AAKtC,MAAK,kBAAkB,QAAQ,CAAE,eAAe,YAAa;AAC5D,gBAAa,UAAW;AAAA,EACzB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,cAAe;AAAA,MACf;AAAA,MACA,aAAY;AAAA,MACZ,UAAW,CAAE,eAAgB;AAE5B;AAAA,UACC,WAAW;AAAA,YACV,CAAE,aAAc,SAAS,SAAS;AAAA,UACnC;AAAA,QACD;AAAA,MACD;AAAA,MACA;AAAA,MACA,qBAAsB;AAAA,MAEtB;AAAA,oDAAC,KAAK,SAAL,EAAa,WAAU,2CACrB,qBAAW,IAAK,CAAE,aACnB;AAAA,UAAC,KAAK;AAAA,UAAL;AAAA,YAEA,OAAQ,SAAS;AAAA,YACjB,gBACC,aAAa,mBAAmB,SAAS;AAAA,YAGxC,mBAAS;AAAA;AAAA,UANL,SAAS;AAAA,QAOhB,CACC,GACH;AAAA,QACE,WAAW,IAAK,CAAE,aACnB;AAAA,UAAC,KAAK;AAAA,UAAL;AAAA,YAEA,OAAQ,SAAS;AAAA,YACjB,WAAY;AAAA,YAEZ;AAAA,cAAC,kBAAAC,iBAAO;AAAA,cAAP;AAAA,gBACA,WAAU;AAAA,gBACV,SACC,CAAE,2BAA2B,WAAW;AAAA,gBAEzC,SAAQ;AAAA,gBACR,UAAW;AAAA,kBACV,MAAM;AAAA,oBACL,WAAW;AAAA,oBACX,eAAe;AAAA,sBACd,QAAQ;AAAA,oBACT;AAAA,kBACD;AAAA,kBACA,QAAQ;AAAA,oBACP,WAAW;AAAA,oBACX,QAAQ;AAAA,kBACT;AAAA,gBACD;AAAA,gBACA,YAAa;AAAA,gBAEX;AAAA;AAAA,YACH;AAAA;AAAA,UAzBM,SAAS;AAAA,QA0BhB,CACC;AAAA;AAAA;AAAA,EACH;AAEF;AAEA,IAAO,wBAAQ;", "names": ["componentsPrivateApis", "motion"] }