expandable subsections in TOC

wq · Nov 9, 2023 · 2cf4d59 · 2cf4d59
1 parent a0befe5
commit 2cf4d59
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 17 deletions.
diff --git a/packages/react/src/components/AutoSubformArray.js b/packages/react/src/components/AutoSubformArray.js
@@ -48,10 +48,10 @@ export default function AutoSubformArray({ name, label, subform, ...rest }) {
         (subform[0].type === "file" || subform[0].type === "image")
     ) {
         // Special case for subforms containing only a single file field
-        FieldsetArray = components.FileArray;
+        FieldsetArray = inputs.FileArray;
     } else {
         // Default (or global default override)
-        FieldsetArray = components.FieldsetArray;
+        FieldsetArray = inputs.FieldsetArray;
     }
 
     const SubformArray = useCallback(

diff --git a/packages/react/src/hooks.js b/packages/react/src/hooks.js
@@ -217,7 +217,7 @@ export function useBreadcrumbs() {
 
 export function useSitemap() {
     const config = useConfig(),
-        { user, config: authConfig } = usePluginState("auth"),
+        { user, config: authConfig } = usePluginState("auth") || {},
         messages = useMessages();
     return useMemo(() => {
         const pages = Object.values(config.pages)
@@ -232,7 +232,30 @@ export function useSitemap() {
                 sectionPages[section] = [];
                 sections.push({ name: section, pages: sectionPages[section] });
             }
-            sectionPages[section].push({ ...page, route });
+            let group = sectionPages[section];
+            const lastPage = group[group.length - 1];
+            if (page.subsection) {
+                if (
+                    lastPage &&
+                    lastPage.isSubsection &&
+                    lastPage.label === page.subsection
+                ) {
+                    group = lastPage.pages;
+                } else {
+                    const subsection = {
+                        label: page.subsection,
+                        icon: page.icon,
+                        isSubsection: true,
+                        pages: [],
+                    };
+                    group.push(subsection);
+                    group = subsection.pages;
+                }
+            }
+            group.push({
+                ...page,
+                route,
+            });
         }
 
         return sections;
@@ -255,6 +278,7 @@ export function showInIndex(page, user, authConfig) {
     } else if (page.show_in_index.startsWith("can_")) {
         return Boolean(
             user &&
+                authConfig &&
                 authConfig.pages &&
                 authConfig.pages[page.name] &&
                 authConfig.pages[page.name][page.show_in_index]

diff --git a/packages/react/src/views/IndexView.js b/packages/react/src/views/IndexView.js
@@ -13,7 +13,8 @@ export default function Index({ onNavigate }) {
         routeTitle = useRouteTitle(),
         { name: currentRoute } = useRouteInfo(),
         sections = useSitemap(),
-        { ScrollView, List, ListSubheader, ListItemLink } = useComponents();
+        { ScrollView, List, ListSubheader, ListItemLink, ExpandableListItem } =
+            useComponents();
 
     function PageLink({
         route,
@@ -23,9 +24,10 @@ export default function Index({ onNavigate }) {
             description = null,
             url = "/",
         } = {},
+        style,
     }) {
         const title = routeTitle(route),
-            props = {};
+            props = { style };
         if (external) {
             props.component = "a";
             props.href = url;
@@ -46,22 +48,40 @@ export default function Index({ onNavigate }) {
     PageLink.propTypes = {
         route: PropTypes.string,
         config: PropTypes.object,
+        style: PropTypes.object,
     };
 
     return (
         <ScrollView>
             <List>
                 {sections.map(({ name, pages }) => (
-                    <>
+                    <React.Fragment key={name}>
                         {name && <ListSubheader>{name}</ListSubheader>}
-                        {pages.map((page) => (
-                            <PageLink
-                                key={page.name}
-                                route={page.route}
-                                config={page}
-                            />
-                        ))}
-                    </>
+                        {pages.map((page) =>
+                            page.isSubsection ? (
+                                <ExpandableListItem
+                                    key={page.label}
+                                    icon={page.icon}
+                                >
+                                    <>{page.label}</>
+                                    {page.pages.map((page) => (
+                                        <PageLink
+                                            key={page.name}
+                                            route={page.route}
+                                            config={page}
+                                            style={{ paddingLeft: 32 }}
+                                        />
+                                    ))}
+                                </ExpandableListItem>
+                            ) : (
+                                <PageLink
+                                    key={page.name}
+                                    route={page.route}
+                                    config={page}
+                                />
+                            )
+                        )}
+                    </React.Fragment>
                 ))}
             </List>
         </ScrollView>

diff --git a/wq/app/static/app/.sha256 b/wq/app/static/app/.sha256
@@ -2,5 +2,5 @@ c637d052aaddf8b0ad878819ee30facb74a3ba34cbed310a0fd1834fc02f46a2  css/mapbox-gl-
 731181d400d65a8b09d842f55b70bc4dc11010b15b8549e2c65a69d233fbdd2e  css/maplibre-gl.css
 cfb20121bd733aa6795e9f2f180c327d561c51cff783196f1eaa01ba42701bec  css/wq.css
 a222d0281caeab67157dc947f83971d219156060bd98a529c035de4cec92a8f5  js/maplibre-gl.js
-f971c71417a90464878a7e3a4c9f740aa607d5a8fd77dfe2280de0ce402a0b6b  js/wq.dev.js'
-68c37d5f0023e68a84780b702048cfaa65a5a4c1ab16f3bce54b8ec791903a24  js/wq.js'
+563decb118a55c391ebe55dd8ffa3b89895051be96e609be278b2d4d3da5cee0  js/wq.dev.js'
+4b70e87f426ba6948d23b095418317480110e5f4b88bbe1477e036bee9ee9798  js/wq.js'