Tree

Component

import { Tree } from '@component-controls/components';

Search

All

() => {
  const [search, setSearch] = useState<string | undefined>(undefined);
  return (
    <Box css={{ width: 250 }}>
      <Input
        type="search"
        value={search}
        onChange={e => setSearch(e.target.value)}
      />
      <Tree search={search} activeItem={{ id: 'all' }} items={navItems} />
    </Box>
  );
}

Properties

	Name	Description	Default
- (10 properties)

	items	Array of child items TreeItems	-
	arrowPosition	POsition of the expand/collapse arrow startend	end
	activeItem	Initially active item Pick<TreeItem, labelid>	-
	expandAll	If specified, will expand all items with chidren boolean	-
	onSelect	Function that will be called when the user selects a item ((item?: TreeItem) => void) & ((event: SyntheticEvent<HTMLDivElement, Event>) => void)	-
	onExpandCollapse	Function that will be called on expand/collapse (expandedCount: number) => void	-
	search	If specified, will filter the items by the search terms string	-
	chevronIcon	custom chevron icon ReactNode	<ChevronDownIcon />
	indentPixels	indentation in pixels for each elevel, By default 6 pixels number	8
	ref	((instance: HTMLDivElement) => void) \| RefObject<HTMLDivElement>	-
HTMLAttributes (44 properties)
Attributes (1 properties)
AriaAttributes (48 properties)
DOMAttributes (160 properties)
BoxOwnProps (4 properties)
SpaceProps (28 properties)
BackgroundColorProps (2 properties)
OpacityProps (1 properties)

External dependencies

package	imports	peer
@primer/octicons-react ^10.0.0	ChevronDownIcon
react ^17.0.1	useStateuseEffectFC	*
theme-ui ^0.6.0-alpha.7	jsxTextFlexButtonPropsButtonBoxPropsBox

Internal dependencies

file	imports
"../Keyboard"	KeyboardLEFT_ARROWUP_ARROWRIGHT_ARROWDOWN_ARROW
"../Link"	LinkLinkClassType
"./tree-utils"	TreeItemTreeStateTreeOwnPropsstateFromPropsgetFlatChildrenIdsgetChildrenByIdhasActiveChidlren

Component JSX

Stories

Overview

() => (
  <Box css={{ width: 200 }}>
    <Tree
      activeItem={{ id: 'c_drive' }}
      items={[
        {
          id: 'local',
          label: 'Local',
          items: [
            { id: 'c_drive', href: '/c_drive', label: 'C: drive' },
            {
              id: 'f_drive',
              onClick: () => console.log('onClick'),
              label: 'F: drive',
            },
          ],
        },
        {
          id: 'cloud',
          label: 'Cloud',
          items: [
            { id: 'drop_box', href: '/drop_box', label: 'DropBox' },
            {
              id: 'google_drive',
              onClick: () => console.log('onClick'),
              label: 'Google drive',
            },
          ],
        },
      ]}
    />
  </Box>
)

Items

() => (
  <Box css={{ width: 250 }}>
    <Tree activeItem={{ id: 'all' }} items={navItems} />
  </Box>
)

Large Indentation

() => (
  <Box css={{ width: 250 }}>
    <Tree activeItem={{ id: 'all' }} items={navItems} indentPixels={24} />
  </Box>
)

Custom Expand Icons

() => (
  <Box css={{ width: 250 }}>
    <Tree
      activeItem={{ id: 'all' }}
      items={navItems}
      chevronIcon={<TriangleDownIcon />}
    />
  </Box>
)

Arrows Start

() => (
  <Box css={{ width: 250 }}>
    <Tree activeItem={{ id: 'all' }} items={navItems} arrowPosition="start" />
  </Box>
)

Docs

Component

Search

Properties

External dependencies

Internal dependencies

Component JSX

Stories

Overview

Items

Large Indentation

Custom Expand Icons

Arrows Start