From 8134d01dfc982e787f0d773866f495b027e6d12d Mon Sep 17 00:00:00 2001
From: Jakub Jankowski <jakubj@stoplight.io>
Date: Tue, 17 Nov 2020 14:02:14 +0100
Subject: [PATCH] feat: toc start expanded (#197)

* feat: toc start expanded

* fix: flat expand
---
 src/TableOfContents/index.tsx              | 6 +++++-
 src/__fixtures__/table-of-contents/tree.ts | 1 +
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/TableOfContents/index.tsx b/src/TableOfContents/index.tsx
index 8ed983bd..329384c7 100644
--- 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
index deabaebc..91c93af0 100644
--- 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',