@wordpress/block-library
Version:
Block library for the WordPress editor.
8 lines (7 loc) • 8.22 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/tab-list/edit.js"],
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tuseBlockProps,\n\tstore as blockEditorStore,\n\tRichText,\n\t__experimentalUseBorderProps as useBorderProps,\n\t__experimentalUseColorProps as useColorProps,\n\t__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,\n} from '@wordpress/block-editor';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useCallback, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport AddTabToolbarControl from '../tab-panel/add-tab-toolbar-control';\nimport RemoveTabToolbarControl from '../tab-panel/remove-tab-toolbar-control';\n\nconst EMPTY_ARRAY = [];\n\nfunction Edit( {\n\tattributes,\n\tclientId,\n\tcontext,\n\t__unstableLayoutClassNames: layoutClassNames,\n} ) {\n\tconst tabsList = context[ 'core/tabs-list' ] || EMPTY_ARRAY;\n\n\tconst colorProps = useColorProps( attributes );\n\tconst borderProps = useBorderProps( attributes );\n\tconst spacingProps = getSpacingClassesAndStyles( attributes );\n\n\tconst { tabsClientId, editorActiveTabIndex, activeTabIndex } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockRootClientId, getBlockAttributes } =\n\t\t\t\tselect( blockEditorStore );\n\n\t\t\tconst _tabsClientId = getBlockRootClientId( clientId );\n\t\t\tconst tabsAttributes = _tabsClientId\n\t\t\t\t? getBlockAttributes( _tabsClientId )\n\t\t\t\t: {};\n\n\t\t\treturn {\n\t\t\t\ttabsClientId: _tabsClientId,\n\t\t\t\teditorActiveTabIndex: tabsAttributes?.editorActiveTabIndex,\n\t\t\t\tactiveTabIndex: tabsAttributes?.activeTabIndex ?? 0,\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\tconst effectiveActiveIndex = editorActiveTabIndex ?? activeTabIndex;\n\n\tconst { __unstableMarkNextChangeAsNotPersistent, updateBlockAttributes } =\n\t\tuseDispatch( blockEditorStore );\n\n\tconst handleTabClick = useCallback(\n\t\t( tabIndex ) => {\n\t\t\tif ( tabsClientId && tabIndex !== effectiveActiveIndex ) {\n\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\tupdateBlockAttributes( tabsClientId, {\n\t\t\t\t\teditorActiveTabIndex: tabIndex,\n\t\t\t\t} );\n\t\t\t}\n\t\t},\n\t\t[\n\t\t\ttabsClientId,\n\t\t\teffectiveActiveIndex,\n\t\t\tupdateBlockAttributes,\n\t\t\t__unstableMarkNextChangeAsNotPersistent,\n\t\t]\n\t);\n\n\tconst handleLabelChange = useCallback(\n\t\t( tabIndex, newLabel ) => {\n\t\t\tconst tab = tabsList[ tabIndex ];\n\t\t\tif ( tab?.clientId ) {\n\t\t\t\tupdateBlockAttributes( tab.clientId, { label: newLabel } );\n\t\t\t}\n\t\t},\n\t\t[ tabsList, updateBlockAttributes ]\n\t);\n\n\tconst menuRef = useRef();\n\tconst prevTabCountRef = useRef( tabsList.length );\n\n\t// When tabs are added or removed, focus the appropriate button.\n\tuseEffect( () => {\n\t\tconst prevCount = prevTabCountRef.current;\n\t\tprevTabCountRef.current = tabsList.length;\n\n\t\tif ( ! menuRef.current || tabsList.length === prevCount ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst focusButtonAt = ( index ) => {\n\t\t\twindow.requestAnimationFrame( () => {\n\t\t\t\tconst buttons = menuRef.current?.querySelectorAll( 'button' );\n\t\t\t\tconst target = buttons?.[ index ];\n\t\t\t\tif ( ! target ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tconst richText = target.querySelector( '[contenteditable]' );\n\t\t\t\tif ( richText ) {\n\t\t\t\t\trichText.focus();\n\t\t\t\t} else {\n\t\t\t\t\ttarget.focus();\n\t\t\t\t}\n\t\t\t} );\n\t\t};\n\n\t\tif ( tabsList.length > prevCount ) {\n\t\t\t// Tab added — focus the last (newly added) button.\n\t\t\tfocusButtonAt( tabsList.length - 1 );\n\t\t} else {\n\t\t\t// Tab removed — focus the new active button.\n\t\t\tfocusButtonAt( effectiveActiveIndex );\n\t\t}\n\t}, [ tabsList.length, effectiveActiveIndex ] );\n\n\tconst blockProps = useBlockProps( {\n\t\trole: 'tablist',\n\t\tref: menuRef,\n\t\t// Applied manually since this block has no inner blocks for the layout\n\t\t// support to add its container classes to.\n\t\tclassName: layoutClassNames,\n\t} );\n\n\tconst buttonClassName = clsx( colorProps.className, borderProps.className );\n\n\tconst buttonStyle = {\n\t\t...colorProps.style,\n\t\t...borderProps.style,\n\t\t...spacingProps.style,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<AddTabToolbarControl tabsClientId={ tabsClientId } />\n\t\t\t<RemoveTabToolbarControl tabsClientId={ tabsClientId } />\n\t\t\t<div { ...blockProps }>\n\t\t\t\t{ tabsList.map( ( tab, index ) => {\n\t\t\t\t\tconst isActive = index === effectiveActiveIndex;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tkey={ tab.clientId || index }\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\taria-selected={ isActive }\n\t\t\t\t\t\t\tclassName={ buttonClassName || undefined }\n\t\t\t\t\t\t\tstyle={ buttonStyle }\n\t\t\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\t\t\tonClick={ ( event ) => {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\thandleTabClick( index );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<RichText\n\t\t\t\t\t\t\t\ttagName=\"span\"\n\t\t\t\t\t\t\t\twithoutInteractiveFormatting\n\t\t\t\t\t\t\t\tplaceholder={ __( 'Tab title' ) }\n\t\t\t\t\t\t\t\tvalue={ tab.label }\n\t\t\t\t\t\t\t\tonChange={ ( newLabel ) =>\n\t\t\t\t\t\t\t\t\thandleLabelChange( index, newLabel )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default Edit;\n"],
"mappings": "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",
"names": []
}