11### TreeMenu / PropertyGrid
22
3- ### System default / custom theme
3+ ![ npm] ( https://img.shields.io/npm/v/@code4bones/react-tree-menu-property-grid?label=latest )
4+ ![ npm] ( https://img.shields.io/npm/dt/@code4bones/react-tree-menu-property-grid?style=flat-square&label=installs )
5+
6+ ### System default / Custom theme
47
58![ sample] ( https://github.com/code4bones/react-c4b-ui/blob/master/img/theme.png?raw=true " sample ")
69
@@ -49,18 +52,25 @@ type `RenderType` = `RenderFn` | React.ReactElement;
4952
5053| Propery name | Description | Signature
5154| ------------- | ------------------------------ | ---- |
55+ | ` treeID ` | tree id | string |
56+ | ` propertyGrid ` | property grid mode | boolean |
5257| ` items[] ` | tree menu items array | ` TreeMenuItem ` [ ] |
5358| ` ref ` | handle to TreeMenu methods | ` TreeMenuActions ` |
54- | ` onClick ` | item click handler | onClick?:(item: TreeMenuItem ) => void|
55- | ` onToggle ` | collapse / expand | onToggle?:(id?: string ,collapsed?: boolean ) => void;|
5659| ` initialCollapsed ` | initial tree state | boolean |
5760| ` initialSelected ` | initial selected item | item's ` id ` : string|
61+ | ` theme ` | theme override class name | ` dark ` , ` light ` , custom name |
62+ | ` classPrefix ` | container global prefix | string |
63+ | ` enableRotate ` | Rotate collapse / expand icon| boolean |
64+ | ` infoStyle ` | global custom style | boolean |
65+ | ` titleStyle ` | global custom style | boolean |
66+ | ` infoReveal ` | global info display modes | "always" | "vertical" | "horizontal" |
67+ | ` badgeVisible ` | display badge | boolean |
68+ | ` groupIconLeft ` | group icon position | boolean |
69+ | ` onClick ` | item click handler | onClick?:(item: TreeMenuItem ) => void|
70+ | ` onToggle ` | collapse / expand | onToggle?:(id?: string ,collapsed?: boolean ) => void;|
5871| ` renderBadge ` | item click handler | ` RenderType ` |
5972| ` renderIcon ` | Left side element of item | ` RenderType ` |
6073| ` renderGroupState ` | Group indicator | ` RenderType ` |
61- | ` theme ` | theme override class name | ` dark ` , ` light ` , custom name |
62- | ` classPrefix ` | container global prefix | string |
63- | ` enableRotate ` | Rotate collapse / expand | boolean |
6474
6575
6676` TreeMenuItem `
@@ -69,6 +79,8 @@ type `RenderType` = `RenderFn` | React.ReactElement;
6979 id :string ;
7080 title :string | React .ReactElement ;
7181 info ?: string | React .ReactElement ;
82+ badge ?: string | React .ReactElement ;
83+ control ?: string | JSX .Element ;
7284 infoReveal ?: InfoReveal ;
7385 icon ?: React .ReactElement ;
7486 badge ?: string | React .ReactElement ;
@@ -87,7 +99,8 @@ type `RenderType` = `RenderFn` | React.ReactElement;
8799 getItem:(id:string) => TreeMenuItem | null;
88100 collapse:(id:string,collapsed?:boolean) => void;
89101 select:(id:string) => void;
90-
102+ invalidate:() => void;
103+ rebuild:(items:TreeMenuItem[]) => void;
91104```
92105
93106### Sample
0 commit comments