@wordpress/preferences
Version:
Utilities for managing WordPress preferences.
150 lines (148 loc) • 6.72 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// packages/preferences/src/components/preferences-modal-tabs/index.tsx
var preferences_modal_tabs_exports = {};
__export(preferences_modal_tabs_exports, {
default: () => PreferencesModalTabs
});
module.exports = __toCommonJS(preferences_modal_tabs_exports);
var import_compose = require("@wordpress/compose");
var import_components = require("@wordpress/components");
var import_element = require("@wordpress/element");
var import_icons = require("@wordpress/icons");
var import_i18n = require("@wordpress/i18n");
var import_lock_unlock = require("../../lock-unlock");
var import_jsx_runtime = require("react/jsx-runtime");
var { Tabs } = (0, import_lock_unlock.unlock)(import_components.privateApis);
var PREFERENCES_MENU = "preferences-menu";
function PreferencesModalTabs({
sections
}) {
const isLargeViewport = (0, import_compose.useViewportMatch)("medium");
const [activeMenu, setActiveMenu] = (0, import_element.useState)(PREFERENCES_MENU);
const { tabs, sectionsContentMap } = (0, import_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;
if (isLargeViewport) {
modalContent = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "preferences__tabs", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
Tabs,
{
defaultTabId: activeMenu !== PREFERENCES_MENU ? activeMenu : void 0,
onSelect: setActiveMenu,
orientation: "vertical",
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs.TabList, { className: "preferences__tabs-tablist", children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
Tabs.Tab,
{
tabId: tab.name,
className: "preferences__tabs-tab",
children: tab.title
},
tab.name
)) }),
tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
Tabs.TabPanel,
{
tabId: tab.name,
className: "preferences__tabs-tabpanel",
focusable: false,
children: sectionsContentMap[tab.name] || null
},
tab.name
))
]
}
) });
} else {
modalContent = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.Navigator, { initialPath: "/", className: "preferences__provider", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Navigator.Screen, { path: "/", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Card, { isBorderless: true, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.CardBody, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalItemGroup, { children: tabs.map((tab) => {
return (
// @ts-expect-error: Navigator.Button is currently typed in a way that prevents Item from being passed in
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.Navigator.Button,
{
path: `/${tab.name}`,
as: import_components.__experimentalItem,
isAction: true,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { justify: "space-between", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalTruncate, { children: tab.title }) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_icons.Icon,
{
icon: (0, import_i18n.isRTL)() ? import_icons.chevronLeft : import_icons.chevronRight
}
) })
] })
},
tab.name
)
);
}) }) }) }) }),
sections.length && sections.map((section) => {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.Navigator.Screen,
{
path: `/${section.name}`,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.Card, { isBorderless: true, size: "large", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_components.CardHeader,
{
isBorderless: false,
justify: "left",
size: "small",
gap: "6",
as: "div",
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.Navigator.BackButton,
{
icon: (0, import_i18n.isRTL)() ? import_icons.chevronRight : import_icons.chevronLeft,
label: (0, import_i18n.__)("Back")
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalText, { size: "16", children: section.tabLabel })
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.CardBody, { children: section.content })
] })
},
`${section.name}-menu`
);
})
] });
}
return modalContent;
}
//# sourceMappingURL=index.js.map