From 91203b8343a9d7e0c786f6ea6f358b053f0a4adb Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 2 Sep 2022 13:10:50 -0700 Subject: [PATCH 01/44] Add TreeView docs --- docs/content/TreeView.mdx | 195 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 195 insertions(+) create mode 100644 docs/content/TreeView.mdx diff --git a/docs/content/TreeView.mdx b/docs/content/TreeView.mdx new file mode 100644 index 00000000000..5afc2c502f0 --- /dev/null +++ b/docs/content/TreeView.mdx @@ -0,0 +1,195 @@ +--- +title: TreeView +componentId: tree_view +status: Draft +description: A hierarchical list of items where nested items can be expanded and collapsed. +--- + +## Examples + +### File tree navigation without directory links + +```jsx + +``` + +### File tree navigation with directory links + +```jsx + +``` + +## Props + +### TreeView + + + + {/* */} + + +### TreeView.Item + + + + {/* */} + {/* TODO: We may need to provide a way to control the `expanded` state */} + + + {/* */} + + + +### TreeView.LinkItem + + + + + The URL that the item navigates to. href is passed to the underlying{' '} + <a> element. If as is specified, the component may need + different props. If the item contains a sub-nav, the item is rendered as a{' '} + <button> and href is ignored. + + } + /> + + Set aria-current to "page" to indicate that the item + represents the current page. Set aria-current to "location" to + indicate that the item represents the current location on a page. For more information about{' '} + aria-current, see{' '} + MDN. + + } + /> + {/* */} + + + MDN + } + elementType="a" + // isPolymorphic + /> + {/* */} + + +### TreeView.SubTree + + + + {/* */} + + + + + + + + +## Status + + From d4257761107c44cdf474d8c95c17d9328cb136f0 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 2 Sep 2022 13:26:25 -0700 Subject: [PATCH 02/44] Update TreeView props --- docs/content/TreeView.mdx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/content/TreeView.mdx b/docs/content/TreeView.mdx index 5afc2c502f0..7dbdd127146 100644 --- a/docs/content/TreeView.mdx +++ b/docs/content/TreeView.mdx @@ -68,17 +68,17 @@ description: A hierarchical list of items where nested items can be expanded and ### TreeView - + {/* */} ### TreeView.Item - + {/* */} {/* TODO: We may need to provide a way to control the `expanded` state */} - + {/* */} {/* */} @@ -87,7 +87,7 @@ description: A hierarchical list of items where nested items can be expanded and ### TreeView.LinkItem - + } /> - MDN. } - /> + /> */} {/* */} - + {/* */} MDN } - elementType="a" + elementName="a" // isPolymorphic /> {/* */} From 6523985a99382c083aee19c043e3959d464ce255 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 2 Sep 2022 13:44:49 -0700 Subject: [PATCH 03/44] Scaffold treeview markup --- src/TreeView/TreeView.tsx | 104 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 104 insertions(+) create mode 100644 src/TreeView/TreeView.tsx diff --git a/src/TreeView/TreeView.tsx b/src/TreeView/TreeView.tsx new file mode 100644 index 00000000000..d472dd9c2d3 --- /dev/null +++ b/src/TreeView/TreeView.tsx @@ -0,0 +1,104 @@ +import React from 'react' +import Box from '../Box' + +// ---------------------------------------------------------------------------- +// TreeView + +export type TreeViewProps = { + children: React.ReactNode +} + +const Root: React.FC = ({children}) => { + return ( + + {children} + + ) +} + +// ---------------------------------------------------------------------------- +// TreeView.Item + +export type TreeViewItemProps = { + children: React.ReactNode + onToggle?: (isExpanded: boolean) => void +} + +const Item: React.FC = ({children}) => { + const {subTree, childrenWithoutSubTree} = useSubTree(children) + return ( +
  • + {childrenWithoutSubTree} + {subTree} +
    • + ) +} + +// ---------------------------------------------------------------------------- +// TreeView.LinkItem + +export type TreeViewLinkItemProps = TreeViewItemProps & React.ComponentPropsWithoutRef<'a'> + +const LinkItem: React.FC = ({children, ...props}) => { + const {subTree, childrenWithoutSubTree} = useSubTree(children) + return ( +
  • + {childrenWithoutSubTree} + {subTree} +
    • + ) +} + +// ---------------------------------------------------------------------------- +// TreeView.SubTree + +export type TreeViewSubTreeProps = { + children?: React.ReactNode +} + +const SubTree: React.FC = ({children}) => { + return ( + + {children} + + ) +} + +function useSubTree(children: React.ReactNode) { + return React.useMemo(() => { + const subTree = React.Children.toArray(children).find( + child => React.isValidElement(child) && child.type === SubTree + ) + + const childrenWithoutSubTree = React.Children.toArray(children).filter( + child => !(React.isValidElement(child) && child.type === SubTree) + ) + + return {subTree, childrenWithoutSubTree} + }, [children]) +} + +// ---------------------------------------------------------------------------- +// Export + +export const TreeView = Object.assign(Root, { + Item, + LinkItem, + SubTree +}) From 30bbae4cf6b6a790e764b4686356a07076d514b5 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 2 Sep 2022 13:44:57 -0700 Subject: [PATCH 04/44] Add TreeView to drafts --- docs/content/TreeView.mdx | 4 ++-- src/TreeView/index.ts | 1 + src/drafts/index.ts | 10 +++++++--- 3 files changed, 10 insertions(+), 5 deletions(-) create mode 100644 src/TreeView/index.ts diff --git a/docs/content/TreeView.mdx b/docs/content/TreeView.mdx index 7dbdd127146..cc66debf727 100644 --- a/docs/content/TreeView.mdx +++ b/docs/content/TreeView.mdx @@ -9,7 +9,7 @@ description: A hierarchical list of items where nested items can be expanded and ### File tree navigation without directory links -```jsx +```jsx live drafts