render badge

Author: Administrator

src/TreeMenu/TreeMenu.less

@@ -93,7 +93,8 @@
       }
 
       > .content {
-          padding: 10px;
+          padding: var(--item-padding);//10px;
+          min-height: var(--item-height);
           display: flex;
           flex-direction: row;
           align-items: center;

src/TreeMenu/TreeMenu.stories.tsx

@@ -11,9 +11,9 @@ type MarkerProps = {
 
 const Badge : React.FC<MarkerProps> = ({ color }) => {
 
-	const [counter,setCounter] = React.useState(0);
+	const [counter,setCounter] = React.useState("");
 	useEffect(()=>{
-		const tm = setInterval(()=>setCounter(counter+1),1000);
+		const tm = setInterval(()=>setCounter(new Date().toLocaleTimeString()),1000);
 		return () => {
 			clearInterval(tm);
 		};
@@ -41,7 +41,8 @@ const ITEMS : TreeMenuItem[] = [
 		id:"heading",
 		title:"Heading",
 		info:"Tree menu sample",
-		unselectable:true
+		unselectable:false,
+		badge:<Badge color="red" />
 	},
 	{ 		
 		id:"main",title:"Main Menu 1",

src/TreeMenu/TreeMenu.tsx

@@ -9,6 +9,7 @@ export { TreeMenuItem };
 const Item : React.FC<ItemRenderProps> = (props) => {
 	const { 
 		id,
+		badge,
 		titleClass,
 		infoClass,
 		enableRotate,
@@ -34,8 +35,8 @@ const Item : React.FC<ItemRenderProps> = (props) => {
 						{info}
 					</div>}
 				</div>
-				{renderBadge && <div className="marker">
-					{renderBadge(props)}
+				{(renderBadge || badge) && <div className="marker">
+					{badge || renderBadge(props)}
 				</div>}
 				{hasChilds && renderGroupState && 
                 <div className={clsx("folder",{ "enable-rotate":enableRotate })}>

src/TreeMenu/TreeMenu.types.ts

@@ -11,6 +11,7 @@ export type ItemProps = {
     infoStyle?:React.CSSProperties;
     classes?:Set<string>;
     disabled?:boolean;
+    badge?:string | React.ReactElement;
     id:string;
     collapsed?:boolean;
     unselectable?:boolean;

src/variables.less

@@ -2,6 +2,8 @@
 
 .tree-menu { 
   --font-family:"Avenir Next", Helvetica, Arial, sans-serif;
+  --item-padding:5px;
+  --item-height:24px;
 }
 
 .dark-colors() {