@wordpress/block-editor
Version:
84 lines (82 loc) • 2.76 kB
JavaScript
/**
* WordPress dependencies
*/
import { usePrevious, useReducedMotion } from '@wordpress/compose';
import { privateApis as componentsPrivateApis, __unstableMotion as motion } from '@wordpress/components';
import { useState } from '@wordpress/element';
/**
* Internal dependencies
*/
import { unlock } from '../../../lock-unlock';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const {
Tabs
} = unlock(componentsPrivateApis);
function CategoryTabs({
categories,
selectedCategory,
onSelectCategory,
children
}) {
// Copied from InterfaceSkeleton.
const ANIMATION_DURATION = 0.25;
const disableMotion = useReducedMotion();
const defaultTransition = {
type: 'tween',
duration: disableMotion ? 0 : ANIMATION_DURATION,
ease: [0.6, 0, 0.4, 1]
};
const previousSelectedCategory = usePrevious(selectedCategory);
const selectedTabId = selectedCategory ? selectedCategory.name : null;
const [activeTabId, setActiveId] = useState();
const firstTabId = categories?.[0]?.name;
// If there is no active tab, make the first tab the active tab, so that
// when focus is moved to the tablist, the first tab will be focused
// despite not being selected
if (selectedTabId === null && !activeTabId && firstTabId) {
setActiveId(firstTabId);
}
return /*#__PURE__*/_jsxs(Tabs, {
selectOnMove: false,
selectedTabId: selectedTabId,
orientation: "vertical",
onSelect: categoryId => {
// Pass the full category object
onSelectCategory(categories.find(category => category.name === categoryId));
},
activeTabId: activeTabId,
onActiveTabIdChange: setActiveId,
children: [/*#__PURE__*/_jsx(Tabs.TabList, {
className: "block-editor-inserter__category-tablist",
children: categories.map(category => /*#__PURE__*/_jsx(Tabs.Tab, {
tabId: category.name,
"aria-current": category === selectedCategory ? 'true' : undefined,
children: category.label
}, category.name))
}), categories.map(category => /*#__PURE__*/_jsx(Tabs.TabPanel, {
tabId: category.name,
focusable: false,
children: /*#__PURE__*/_jsx(motion.div, {
className: "block-editor-inserter__category-panel",
initial: !previousSelectedCategory ? 'closed' : 'open',
animate: "open",
variants: {
open: {
transform: 'translateX( 0 )',
transitionEnd: {
zIndex: '1'
}
},
closed: {
transform: 'translateX( -100% )',
zIndex: '-1'
}
},
transition: defaultTransition,
children: children
})
}, category.name))]
});
}
export default CategoryTabs;
//# sourceMappingURL=index.js.map