@wordpress/block-editor
Version:
78 lines (77 loc) • 2.67 kB
JavaScript
// packages/block-editor/src/components/inserter/mobile-tab-navigation.js
import { __, isRTL } from "@wordpress/i18n";
import {
__experimentalItemGroup as ItemGroup,
__experimentalItem as Item,
__experimentalHStack as HStack,
__experimentalVStack as VStack,
__experimentalSpacer as Spacer,
__experimentalHeading as Heading,
__experimentalView as View,
Navigator,
FlexBlock
} from "@wordpress/components";
import { Icon, chevronRight, chevronLeft } from "@wordpress/icons";
import { jsx, jsxs } from "react/jsx-runtime";
function ScreenHeader({ title }) {
return /* @__PURE__ */ jsx(VStack, { spacing: 0, children: /* @__PURE__ */ jsx(View, { children: /* @__PURE__ */ jsx(Spacer, { marginBottom: 0, paddingX: 4, paddingY: 3, children: /* @__PURE__ */ jsxs(HStack, { spacing: 2, children: [
/* @__PURE__ */ jsx(
Navigator.BackButton,
{
style: (
// TODO: This style override is also used in ToolsPanelHeader.
// It should be supported out-of-the-box by Button.
{ minWidth: 24, padding: 0 }
),
icon: isRTL() ? chevronRight : chevronLeft,
size: "small",
label: __("Back")
}
),
/* @__PURE__ */ jsx(Spacer, { children: /* @__PURE__ */ jsx(Heading, { level: 5, children: title }) })
] }) }) }) });
}
function MobileTabNavigation({ categories, children }) {
return /* @__PURE__ */ jsxs(
Navigator,
{
initialPath: "/",
className: "block-editor-inserter__mobile-tab-navigation",
children: [
/* @__PURE__ */ jsx(Navigator.Screen, { path: "/", children: /* @__PURE__ */ jsx(ItemGroup, { children: categories.map((category) => /* @__PURE__ */ jsx(
Navigator.Button,
{
path: `/category/${category.name}`,
as: Item,
isAction: true,
children: /* @__PURE__ */ jsxs(HStack, { children: [
/* @__PURE__ */ jsx(FlexBlock, { children: category.label }),
/* @__PURE__ */ jsx(
Icon,
{
icon: isRTL() ? chevronLeft : chevronRight
}
)
] })
},
category.name
)) }) }),
categories.map((category) => /* @__PURE__ */ jsxs(
Navigator.Screen,
{
path: `/category/${category.name}`,
children: [
/* @__PURE__ */ jsx(ScreenHeader, { title: __("Back") }),
children(category)
]
},
category.name
))
]
}
);
}
export {
MobileTabNavigation as default
};
//# sourceMappingURL=mobile-tab-navigation.js.map