UNPKG

@wordpress/editor

Version:
8 lines (7 loc) 6.03 kB
{ "version": 3, "sources": ["../../../src/components/list-view-sidebar/index.js"], "sourcesContent": ["import {\n\t__experimentalListView as ListView,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { focus } from '@wordpress/dom';\nimport { useCallback, useRef, useState } from '@wordpress/element';\nimport { __, _x } from '@wordpress/i18n';\nimport { useShortcut } from '@wordpress/keyboard-shortcuts';\nimport { ESCAPE } from '@wordpress/keycodes';\nimport ListViewOutline from './list-view-outline';\nimport { unlock } from '../../lock-unlock';\nimport { store as editorStore } from '../../store';\n\nconst { TabbedSidebar } = unlock( blockEditorPrivateApis );\n\nexport default function ListViewSidebar() {\n\tconst { setIsListViewOpened } = useDispatch( editorStore );\n\tconst { getListViewToggleRef } = unlock( useSelect( editorStore ) );\n\n\t// When closing the list view, focus should return to the toggle button.\n\tconst closeListView = useCallback( () => {\n\t\tsetIsListViewOpened( false );\n\t\tgetListViewToggleRef().current?.focus();\n\t}, [ getListViewToggleRef, setIsListViewOpened ] );\n\n\tconst closeOnEscape = useCallback(\n\t\t( event ) => {\n\t\t\tif ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tcloseListView();\n\t\t\t}\n\t\t},\n\t\t[ closeListView ]\n\t);\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the dropZoneElement updates.\n\tconst [ dropZoneElement, setDropZoneElement ] = useState( null );\n\t// Tracks our current tab.\n\tconst [ tab, setTab ] = useState( 'list-view' );\n\n\t// This ref refers to the sidebar as a whole.\n\tconst sidebarRef = useRef();\n\t// This ref refers to the tab panel.\n\tconst tabsRef = useRef();\n\t// This ref refers to the list view application area.\n\tconst listViewRef = useRef();\n\n\t// Must merge the refs together so focus can be handled properly in the next function.\n\tconst listViewContainerRef = useMergeRefs( [\n\t\tlistViewRef,\n\t\tsetDropZoneElement,\n\t] );\n\n\t// The sidebar only renders while it is open, so this handles the shortcut\n\t// from there on. Opening is left to the global shortcut.\n\tuseShortcut( 'core/editor/toggle-list-view', () => {\n\t\tconst sidebar = sidebarRef.current;\n\n\t\t// If the sidebar has focus, it is safe to close.\n\t\tif ( sidebar.contains( sidebar.ownerDocument.activeElement ) ) {\n\t\t\tcloseListView();\n\t\t\treturn;\n\t\t}\n\n\t\t// The list view does not render when there are no blocks, so focus\n\t\t// falls back to the tabs.\n\t\tconst target =\n\t\t\t( tab === 'list-view' &&\n\t\t\t\tfocus.tabbable.find( listViewRef.current )[ 0 ] ) ||\n\t\t\tfocus.tabbable.find( tabsRef.current )[ 0 ];\n\n\t\ttarget?.focus();\n\t} );\n\n\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\tclassName=\"editor-list-view-sidebar\"\n\t\t\tonKeyDown={ closeOnEscape }\n\t\t\tref={ sidebarRef }\n\t\t>\n\t\t\t<TabbedSidebar\n\t\t\t\ttabs={ [\n\t\t\t\t\t{\n\t\t\t\t\t\tname: 'list-view',\n\t\t\t\t\t\ttitle: _x( 'List View', 'Post overview' ),\n\t\t\t\t\t\tpanel: (\n\t\t\t\t\t\t\t<div className=\"editor-list-view-sidebar__list-view-container\">\n\t\t\t\t\t\t\t\t<div className=\"editor-list-view-sidebar__list-view-panel-content\">\n\t\t\t\t\t\t\t\t\t<ListView\n\t\t\t\t\t\t\t\t\t\tdropZoneElement={ dropZoneElement }\n\t\t\t\t\t\t\t\t\t\tfocusOnMount\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t),\n\t\t\t\t\t\tpanelRef: listViewContainerRef,\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tname: 'outline',\n\t\t\t\t\t\ttitle: _x( 'Outline', 'Post overview' ),\n\t\t\t\t\t\tpanel: (\n\t\t\t\t\t\t\t<div className=\"editor-list-view-sidebar__list-view-container\">\n\t\t\t\t\t\t\t\t<ListViewOutline />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t),\n\t\t\t\t\t},\n\t\t\t\t] }\n\t\t\t\tonClose={ closeListView }\n\t\t\t\tonSelect={ ( tabName ) => setTab( tabName ) }\n\t\t\t\tdefaultTabId=\"list-view\"\n\t\t\t\tref={ tabsRef }\n\t\t\t\tcloseButtonLabel={ __( 'Close' ) }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"], "mappings": ";AAAA;AAAA,EACC,0BAA0B;AAAA,EAC1B,eAAe;AAAA,OACT;AACP,SAAS,oBAAoB;AAC7B,SAAS,aAAa,iBAAiB;AACvC,SAAS,aAAa;AACtB,SAAS,aAAa,QAAQ,gBAAgB;AAC9C,SAAS,IAAI,UAAU;AACvB,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AACvB,OAAO,qBAAqB;AAC5B,SAAS,cAAc;AACvB,SAAS,SAAS,mBAAmB;AA+E5B;AA7ET,IAAM,EAAE,cAAc,IAAI,OAAQ,sBAAuB;AAE1C,SAAR,kBAAmC;AACzC,QAAM,EAAE,oBAAoB,IAAI,YAAa,WAAY;AACzD,QAAM,EAAE,qBAAqB,IAAI,OAAQ,UAAW,WAAY,CAAE;AAGlE,QAAM,gBAAgB,YAAa,MAAM;AACxC,wBAAqB,KAAM;AAC3B,yBAAqB,EAAE,SAAS,MAAM;AAAA,EACvC,GAAG,CAAE,sBAAsB,mBAAoB,CAAE;AAEjD,QAAM,gBAAgB;AAAA,IACrB,CAAE,UAAW;AACZ,UAAK,MAAM,YAAY,UAAU,CAAE,MAAM,kBAAmB;AAC3D,cAAM,eAAe;AACrB,sBAAc;AAAA,MACf;AAAA,IACD;AAAA,IACA,CAAE,aAAc;AAAA,EACjB;AAIA,QAAM,CAAE,iBAAiB,kBAAmB,IAAI,SAAU,IAAK;AAE/D,QAAM,CAAE,KAAK,MAAO,IAAI,SAAU,WAAY;AAG9C,QAAM,aAAa,OAAO;AAE1B,QAAM,UAAU,OAAO;AAEvB,QAAM,cAAc,OAAO;AAG3B,QAAM,uBAAuB,aAAc;AAAA,IAC1C;AAAA,IACA;AAAA,EACD,CAAE;AAIF,cAAa,gCAAgC,MAAM;AAClD,UAAM,UAAU,WAAW;AAG3B,QAAK,QAAQ,SAAU,QAAQ,cAAc,aAAc,GAAI;AAC9D,oBAAc;AACd;AAAA,IACD;AAIA,UAAM,SACH,QAAQ,eACT,MAAM,SAAS,KAAM,YAAY,OAAQ,EAAG,CAAE,KAC/C,MAAM,SAAS,KAAM,QAAQ,OAAQ,EAAG,CAAE;AAE3C,YAAQ,MAAM;AAAA,EACf,CAAE;AAEF;AAAA;AAAA,IAEC;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,WAAY;AAAA,QACZ,KAAM;AAAA,QAEN;AAAA,UAAC;AAAA;AAAA,YACA,MAAO;AAAA,cACN;AAAA,gBACC,MAAM;AAAA,gBACN,OAAO,GAAI,aAAa,eAAgB;AAAA,gBACxC,OACC,oBAAC,SAAI,WAAU,iDACd,8BAAC,SAAI,WAAU,qDACd;AAAA,kBAAC;AAAA;AAAA,oBACA;AAAA,oBACA,cAAY;AAAA;AAAA,gBACb,GACD,GACD;AAAA,gBAED,UAAU;AAAA,cACX;AAAA,cACA;AAAA,gBACC,MAAM;AAAA,gBACN,OAAO,GAAI,WAAW,eAAgB;AAAA,gBACtC,OACC,oBAAC,SAAI,WAAU,iDACd,8BAAC,mBAAgB,GAClB;AAAA,cAEF;AAAA,YACD;AAAA,YACA,SAAU;AAAA,YACV,UAAW,CAAE,YAAa,OAAQ,OAAQ;AAAA,YAC1C,cAAa;AAAA,YACb,KAAM;AAAA,YACN,kBAAmB,GAAI,OAAQ;AAAA;AAAA,QAChC;AAAA;AAAA,IACD;AAAA;AAEF;", "names": [] }