@wordpress/block-editor
Version:
80 lines (78 loc) • 3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = MobileTabNavigation;
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _icons = require("@wordpress/icons");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
function ScreenHeader({
title
}) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
spacing: 0,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalView, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
marginBottom: 0,
paddingX: 4,
paddingY: 3,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
spacing: 2,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.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: (0, _i18n.isRTL)() ? _icons.chevronRight : _icons.chevronLeft,
size: "small",
label: (0, _i18n.__)('Back')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHeading, {
level: 5,
children: title
})
})]
})
})
})
});
}
function MobileTabNavigation({
categories,
children
}) {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Navigator, {
initialPath: "/",
className: "block-editor-inserter__mobile-tab-navigation",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Navigator.Screen, {
path: "/",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalItemGroup, {
children: categories.map(category => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Navigator.Button, {
path: `/category/${category.name}`,
as: _components.__experimentalItem,
isAction: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexBlock, {
children: category.label
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
icon: (0, _i18n.isRTL)() ? _icons.chevronLeft : _icons.chevronRight
})]
})
}, category.name))
})
}), categories.map(category => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Navigator.Screen, {
path: `/category/${category.name}`,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ScreenHeader, {
title: (0, _i18n.__)('Back')
}), children(category)]
}, category.name))]
});
}
//# sourceMappingURL=mobile-tab-navigation.js.map