feat: toc start expanded (#197)

* feat: toc start expanded * fix: flat expand
stoplightio · Nov 17, 2020 · 8134d01 · 8134d01
1 parent 3ccebba
commit 8134d01
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/src/TableOfContents/index.tsx b/src/TableOfContents/index.tsx
@@ -24,6 +24,7 @@ export type TableOfContentsItem = {
   isLoading?: boolean;
   isDisabled?: boolean;
   showSkeleton?: boolean;
+  startExpanded?: boolean;
   action?: {
     icon?: FAIconProp;
     name?: string;
@@ -105,7 +106,10 @@ function TableOfContentsInner<T extends TableOfContentsItem = TableOfContentsIte
   rowComponent: RowComponent = DefaultRow,
   rowComponentExtraProps,
 }: Pick<ITableOfContents<T, E>, 'className' | 'contents' | 'rowComponent' | 'rowComponentExtraProps'>) {
-  const [expanded, setExpanded] = React.useState({});
+  const [expanded, setExpanded] = React.useState(() => {
+    const itemsToExpand = contents.filter(item => item.startExpanded);
+    return Object.fromEntries(itemsToExpand.map(item => [contents.indexOf(item), true]));
+  });
 
   // an array of functions. Invoking the N-th function toggles the expanded flag on the N-th content item
   const toggleExpandedFunctions = React.useMemo(() => {

diff --git a/src/__fixtures__/table-of-contents/tree.ts b/src/__fixtures__/table-of-contents/tree.ts
@@ -12,6 +12,7 @@ export const tree: ITableOfContentsLink[] = [
     type: 'group',
     to: '/path',
     icon: 'cloud',
+    startExpanded: true,
   },
   {
     name: 'Nested Item with text icon',