Changhes for adding exclusive flag

docs/src/examples/components/Tree/Types/TreeExclusiveExample.shorthand.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react'
+import { Icon, Tree } from '@stardust-ui/react'
+
+const items = [
+  {
+    key: '1',
+    title: 'one',
+    items: [
+      {
+        key: '2',
+        title: 'one one',
+        items: [
+          {
+            key: '3',
+            title: 'one one one',
+          },
+        ],
+      },
+      {
+        key: '6',
+        title: 'one two',
+        items: [
+          {
+            key: '7',
+            title: 'one two one',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    key: '4',
+    title: 'two',
+    items: [
+      {
+        key: '5',
+        title: 'two one',
+      },
+    ],
+  },
+]
+
+const titleRenderer = (Component, { content, open, hasSubtree, ...restProps }) => (
+  <Component open={open} hasSubtree={hasSubtree} {...restProps}>
+    {hasSubtree && <Icon name={open ? 'arrow down' : 'arrow right'} />}
+    <span>{content}</span>
+  </Component>
+)
+
+const TreeExclusiveExample = () => (
+  <Tree items={items} renderItemTitle={titleRenderer} exclusive={true} />
+)
+
+export default TreeExclusiveExample

docs/src/examples/components/Tree/Types/index.tsx

@@ -14,6 +14,11 @@ const Types = () => (
       description="A Tree with customized title rendering."
       examplePath="components/Tree/Types/TreeTitleCustomizationExample"
     />
+    <ComponentExample
+      title="Exclusive Flag"
+      description="A Tree with only one subtree open at a time."
+      examplePath="components/Tree/Types/TreeExclusiveExample"
+    />
   </ExampleSection>
 )
 

packages/react/src/components/Tree/Tree.tsx

@@ -50,23 +50,38 @@ class Tree extends UIComponent<ReactProps<TreeProps>> {
     ...commonPropTypes.createCommon({
       content: false,
     }),
+    exclusive: PropTypes.bool,
     items: customPropTypes.collectionShorthand,
     renderItemTitle: PropTypes.func,
     rtlAttributes: PropTypes.func,
   }
 
+  state = {
+    selectedIndex: -1,
+  }
+
   public static defaultProps = {
     as: 'ul',
     accessibility: defaultBehavior,
   }
 
+  clickHandler = (e, index) => {
+    this.setState({
+      selectedIndex: index,
+    })
+  }
+
   renderContent() {
-    const { items, renderItemTitle } = this.props
+    const { items, renderItemTitle, exclusive } = this.props
 
-    return _.map(items, item =>
+    return _.map(items, (item, index) =>
       TreeItem.create(item, {
         defaultProps: {
+          index,
+          exclusive,
           renderItemTitle,
+          open: index === this.state.selectedIndex,
+          onClick: this.clickHandler,
         },
       }),
     )

packages/react/src/components/Tree/TreeItem.tsx

@@ -7,7 +7,7 @@ import TreeTitle from './TreeTitle'
 import { defaultBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/types'
 import {
-  AutoControlledComponent,
+  UIComponent,
   childrenExist,
   customPropTypes,
   createShorthandFactory,
@@ -52,24 +52,25 @@ export interface TreeItemState {
   open?: boolean
 }
 
-class TreeItem extends AutoControlledComponent<ReactProps<TreeItemProps>, TreeItemState> {
+class TreeItem extends UIComponent<ReactProps<TreeItemProps>, TreeItemState> {
   static create: Function
 
   static className = 'ui-tree__item'
 
   static displayName = 'TreeItem'
 
-  static autoControlledProps = ['open']
-
   static propTypes = {
     ...commonPropTypes.createCommon({
       content: false,
     }),
     defaultOpen: PropTypes.bool,
     items: customPropTypes.collectionShorthand,
+    index: PropTypes.number,
+    exclusive: PropTypes.bool,
     open: PropTypes.bool,
     renderItemTitle: PropTypes.func,
     treeItemRtlAttributes: PropTypes.func,
+    onClick: PropTypes.func,
     title: customPropTypes.itemShorthand,
   }
 
@@ -78,19 +79,24 @@ class TreeItem extends AutoControlledComponent<ReactProps<TreeItemProps>, TreeIt
     accessibility: defaultBehavior,
   }
 
+  public state = {
+    open: false,
+  }
+
   handleTitleOverrides = predefinedProps => ({
     onClick: (e, titleProps) => {
       e.preventDefault()
-      this.trySetState({
+      this.setState({
         open: !this.state.open,
       })
       _.invoke(predefinedProps, 'onClick', e, titleProps)
+      _.invoke(this.props, 'onClick', e, this.props.index, titleProps)
     },
   })
 
   renderContent() {
     const { items, title, renderItemTitle } = this.props
-    const { open } = this.state
+    const open = this.props.exclusive ? this.props.open : this.state.open
 
     const hasSubtree = !!(items && items.length)
 
@@ -104,7 +110,9 @@ class TreeItem extends AutoControlledComponent<ReactProps<TreeItemProps>, TreeIt
           render: renderItemTitle,
           overrideProps: this.handleTitleOverrides,
         })}
-        {hasSubtree && open && <Tree items={items} renderItemTitle={renderItemTitle} />}
+        {hasSubtree && open && (
+          <Tree items={items} renderItemTitle={renderItemTitle} exclusive={this.props.exclusive} />
+        )}
       </>
     )
   }

packages/react/src/components/Tree/TreeTitle.tsx

@@ -61,11 +61,11 @@ class TreeTitle extends UIComponent<ReactProps<TreeTitleProps>> {
 
     return (
       <ElementType
-        className={classes.root}
-        onClick={this.handleClick}
         {...accessibility.attributes.root}
         {...rtlTextContainer.getAttributes({ forElements: [children, content] })}
         {...unhandledProps}
+        className={classes.root}
+        onClick={this.handleClick}
       >
         {childrenExist(children) ? children : content}
       </ElementType>