moved to React Tree Menu / Property Grid
| Component | Description |
|---|---|
| TreeMenu | Navigation Menu Tree |
| feature | sample |
|---|---|
 | |
 |  |
$ yarn add @code4bones/react-c4b-ui
import{TreeMenu,TreeMenuActions,TreeMenuItem}from"@code4bones/react-c4b-ui";import"@code4bones/react-c4b-ui/build/styles.css";constITEMS : TreeMenuItem[]=[{id:"item1",title:"Item 1",// other TreeMenuItem's propschilds:[{id:"sub",title:"Subitem 1",}]}];// if your need to use exponsed actionsconstref=createRef<TreeMenuActions>();<TreeMenuref={ref}items={ITEMS}onClick={onClick}/>type RenderFn = (item:MenuItem) => React.ReactElement | undefined | null; type RenderType = RenderFn | React.ReactElement;
| Propery name | Description | Signature |
|---|---|---|
items[] | tree menu items array | TreeMenuItem[] |
ref | handle to TreeMenu methods | TreeMenuActions |
onClick | item click handler | onClick?:(item:TreeMenuItem) => void |
onToggle | collapse / expand | onToggle?:(id?:string,collapsed?:boolean) => void; |
initialCollapsed | initial tree state | boolean |
initialSelected | initial selected item | item's id : string |
renderBadge | item click handler | RenderType |
renderIcon | Left side element of item | RenderType |
renderGroupState | Group indicator | RenderType |
theme | theme override class name | dark, light, custom name |
classPrefix | container global prefix | string |
enableRotate | Rotate collapse / expand | boolean |
TreeMenuItem
id:string; title:string|React.ReactElement; info?:string|React.ReactElement; infoReveal?:InfoReveal; icon?:React.ReactElement; badge?:string|React.ReactElement; disabled?:boolean; unselectable?:boolean; titleClass?:string; infoClass?:string; style?:React.CSSProperties; titleStyle?:React.CSSProperties; infoStyle?:React.CSSProperties;TreeMenuActions ( use ref )
enable:(id:string,disable?:boolean) => void; getItem:(id:string) => TreeMenuItem | null; collapse:(id:string,collapsed?:boolean) => void; select:(id:string) => void; Sample available via storybook yarn storybook