@wordpress/block-editor
Version:
91 lines (87 loc) • 2.96 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _compose = require("@wordpress/compose");
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _lockUnlock = require("../../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const {
Tabs
} = (0, _lockUnlock.unlock)(_components.privateApis);
function CategoryTabs({
categories,
selectedCategory,
onSelectCategory,
children
}) {
// Copied from InterfaceSkeleton.
const ANIMATION_DURATION = 0.25;
const disableMotion = (0, _compose.useReducedMotion)();
const defaultTransition = {
type: 'tween',
duration: disableMotion ? 0 : ANIMATION_DURATION,
ease: [0.6, 0, 0.4, 1]
};
const previousSelectedCategory = (0, _compose.usePrevious)(selectedCategory);
const selectedTabId = selectedCategory ? selectedCategory.name : null;
const [activeTabId, setActiveId] = (0, _element.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(Tabs.TabList, {
className: "block-editor-inserter__category-tablist",
children: categories.map(category => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs.Tab, {
tabId: category.name,
"aria-current": category === selectedCategory ? 'true' : undefined,
children: category.label
}, category.name))
}), categories.map(category => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs.TabPanel, {
tabId: category.name,
focusable: false,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__unstableMotion.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))]
});
}
var _default = exports.default = CategoryTabs;
//# sourceMappingURL=index.js.map