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'