sanity
Version:
Sanity is a real-time content infrastructure with a scalable, hosted backend featuring a Graph Oriented Query Language (GROQ), asset pipelines and fast edge caches
148 lines (147 loc) • 4.81 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { Box } from "@sanity/ui";
import { useGetI18nText, CommandList, useI18nText } from "sanity";
import { useCallback } from "react";
import { B as Button } from "./getJsonStream.js";
import { a0 as usePaneLayout, a1 as PaneItem, a2 as PaneContent, W as useStructureTool, X as usePane, Y as PaneHeader, Z as PaneHeaderActions, _ as BackLink, $ as Pane, a3 as _DEBUG } from "./StructureToolProvider.js";
import { ArrowLeftIcon } from "@sanity/icons";
import "sanity/router";
import "@sanity/types";
import "@sanity/util/paths";
import "lodash/omit.js";
import "lodash/isNumber.js";
import "lodash/isString.js";
import "react-rx";
import styled from "styled-components";
const Divider = styled.hr`
background-color: var(--card-border-color);
height: 1px;
margin: 0;
border: none;
`;
function ListPaneContent(props) {
const { childItemId, items, isActive, layout, showIcons, title } = props, { collapsed: layoutCollapsed } = usePaneLayout(), getI18nText = useGetI18nText(
items == null ? void 0 : items.filter(
(item) => item.type !== "divider"
)
), getItemDisabled = useCallback(
(itemIndex) => {
var _a;
return ((_a = items == null ? void 0 : items.find((_, i) => i === itemIndex)) == null ? void 0 : _a.type) === "divider";
},
[items]
), shouldShowIconForItem = useCallback(
(item) => {
var _a;
const itemShowIcon = (_a = item.displayOptions) == null ? void 0 : _a.showIcon;
return typeof itemShowIcon < "u" ? itemShowIcon !== !1 : showIcons !== !1;
},
[showIcons]
), renderItem = useCallback(
(item, ctx) => {
const { virtualIndex: itemIndex } = ctx;
if (item.type === "divider")
return (
// eslint-disable-next-line react/no-array-index-key
/* @__PURE__ */ jsx(Box, { marginBottom: 1, children: /* @__PURE__ */ jsx(Divider, {}) }, `divider-${itemIndex}`)
);
const pressed = !isActive && childItemId === item.id, selected = isActive && childItemId === item.id, value = item._id && item.schemaType ? { _id: item._id, _type: item.schemaType.name, title: item.title } : void 0;
return /* @__PURE__ */ jsx(
PaneItem,
{
icon: shouldShowIconForItem(item) ? item.icon : !1,
id: item.id,
layout,
marginBottom: 1,
pressed,
schemaType: item.schemaType,
selected,
title: getI18nText(item).title,
value
},
item.id
);
},
[childItemId, getI18nText, isActive, layout, shouldShowIconForItem]
);
return /* @__PURE__ */ jsx(PaneContent, { overflow: layoutCollapsed ? "hidden" : "auto", children: items && items.length > 0 && /* @__PURE__ */ jsx(
CommandList,
{
activeItemDataAttr: "data-hovered",
ariaLabel: title,
canReceiveFocus: !0,
getItemDisabled,
itemHeight: 51,
items,
onlyShowSelectionWhenActive: !0,
paddingBottom: 1,
paddingX: 3,
renderItem,
wrapAround: !1
}
) });
}
const ListPaneHeader = ({ index, menuItems, menuItemGroups, title }) => {
const { features } = useStructureTool(), { collapsed, isLast } = usePane(), tabIndex = isLast && !collapsed ? -1 : 0;
return /* @__PURE__ */ jsx(
PaneHeader,
{
actions: /* @__PURE__ */ jsx(PaneHeaderActions, { menuItems, menuItemGroups }),
backButton: features.backButton && index > 0 && /* @__PURE__ */ jsx(
Button,
{
as: BackLink,
"data-as": "a",
icon: ArrowLeftIcon,
mode: "bleed",
tooltipProps: { content: "Back" }
}
),
tabIndex,
title
}
);
};
function ListPane(props) {
const { childItemId, index, isActive, isSelected, pane, paneKey } = props, { defaultLayout, displayOptions, items, menuItems, menuItemGroups } = pane, showIcons = (displayOptions == null ? void 0 : displayOptions.showIcons) !== !1, { title } = useI18nText(pane);
return /* @__PURE__ */ jsxs(
Pane,
{
currentMaxWidth: 350,
"data-testid": "structure-tool-list-pane",
"data-ui": "ListPane",
id: paneKey,
maxWidth: 640,
minWidth: 320,
selected: isSelected,
children: [
_DEBUG,
/* @__PURE__ */ jsx(
ListPaneHeader,
{
index,
menuItems,
menuItemGroups,
title
}
),
/* @__PURE__ */ jsx(
ListPaneContent,
{
childItemId,
isActive,
items,
layout: defaultLayout,
showIcons,
title
},
paneKey
)
]
}
);
}
export {
ListPane as default
};
//# sourceMappingURL=index2.js.map