@wordpress/preferences
Version:
Utilities for managing WordPress preferences.
151 lines (147 loc) • 5.55 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = PreferencesModalTabs;
var _compose = require("@wordpress/compose");
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _icons = require("@wordpress/icons");
var _i18n = require("@wordpress/i18n");
var _lockUnlock = require("../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const {
Tabs
} = (0, _lockUnlock.unlock)(_components.privateApis);
const PREFERENCES_MENU = 'preferences-menu';
function PreferencesModalTabs({
sections
}) {
const isLargeViewport = (0, _compose.useViewportMatch)('medium');
// This is also used to sync the two different rendered components
// between small and large viewports.
const [activeMenu, setActiveMenu] = (0, _element.useState)(PREFERENCES_MENU);
/**
* Create helper objects from `sections` for easier data handling.
* `tabs` is used for creating the `Tabs` and `sectionsContentMap`
* is used for easier access to active tab's content.
*/
const {
tabs,
sectionsContentMap
} = (0, _element.useMemo)(() => {
let mappedTabs = {
tabs: [],
sectionsContentMap: {}
};
if (sections.length) {
mappedTabs = sections.reduce((accumulator, {
name,
tabLabel: title,
content
}) => {
accumulator.tabs.push({
name,
title
});
accumulator.sectionsContentMap[name] = content;
return accumulator;
}, {
tabs: [],
sectionsContentMap: {}
});
}
return mappedTabs;
}, [sections]);
let modalContent;
// We render different components based on the viewport size.
if (isLargeViewport) {
modalContent = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "preferences__tabs",
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Tabs, {
defaultTabId: activeMenu !== PREFERENCES_MENU ? activeMenu : undefined,
onSelect: setActiveMenu,
orientation: "vertical",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs.TabList, {
className: "preferences__tabs-tablist",
children: tabs.map(tab => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs.Tab, {
tabId: tab.name,
className: "preferences__tabs-tab",
children: tab.title
}, tab.name))
}), tabs.map(tab => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs.TabPanel, {
tabId: tab.name,
className: "preferences__tabs-tabpanel",
focusable: false,
children: sectionsContentMap[tab.name] || null
}, tab.name))]
})
});
} else {
modalContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Navigator, {
initialPath: "/",
className: "preferences__provider",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Navigator.Screen, {
path: "/",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Card, {
isBorderless: true,
size: "small",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CardBody, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalItemGroup, {
children: tabs.map(tab => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Navigator.Button, {
path: `/${tab.name}`,
as: _components.__experimentalItem,
isAction: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
justify: "space-between",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalTruncate, {
children: tab.title
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
icon: (0, _i18n.isRTL)() ? _icons.chevronLeft : _icons.chevronRight
})
})]
})
}, tab.name);
})
})
})
})
}), sections.length && sections.map(section => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Navigator.Screen, {
path: `/${section.name}`,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Card, {
isBorderless: true,
size: "large",
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.CardHeader, {
isBorderless: false,
justify: "left",
size: "small",
gap: "6",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Navigator.BackButton, {
icon: (0, _i18n.isRTL)() ? _icons.chevronRight : _icons.chevronLeft,
label: (0, _i18n.__)('Back')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
size: "16",
children: section.tabLabel
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CardBody, {
children: section.content
})]
})
}, `${section.name}-menu`);
})]
});
}
return modalContent;
}
//# sourceMappingURL=index.js.map