Adding changes from build igniteui-xplat-examples-output+PRs_2024.6.19.2 (#586)

Co-authored-by: tfsbuild <tfsbuild@infragistics.com>
Co-authored-by: HUSSAR-mtrela (Martin Trela) <HUSSAR-mtrela@users.noreply.github.com>

Author: 3 people

samples/charts/tree-map/highlighting/sandbox.config.json

@@ -2,4 +2,4 @@
     "infiniteLoopProtection": false,
     "hardReloadOnChange": false,
     "view": "browser"
-} 
+}

samples/charts/tree-map/highlighting/src/CountyHierarchicalData.ts

@@ -2,7 +2,7 @@ export class CountyHierarchicalDataItem {
     public constructor(init: Partial<CountyHierarchicalDataItem>) {
         Object.assign(this, init);
     }
-    
+
     public code: string;
     public parent: string;
     public name: string;

samples/charts/tree-map/highlighting/src/index.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 
 import { IgrPropertyEditorPanelModule } from 'igniteui-react-layouts';
-import { IgrTreemapModule, TreemapHighlightingMode } from 'igniteui-react-charts';
+import { IgrTreemapModule } from 'igniteui-react-charts';
 import { IgrPropertyEditorPanel, IgrPropertyEditorPropertyDescription } from 'igniteui-react-layouts';
 import { IgrTreemap } from 'igniteui-react-charts';
 import { ComponentRenderer, PropertyEditorPanelDescriptionModule, TreemapDescriptionModule } from 'igniteui-react-core';
@@ -18,36 +18,50 @@ const mods: any[] = [
 mods.forEach((m) => m.register());
 
 export default class Sample extends React.Component<any, any> {
-
+    private propertyEditor: IgrPropertyEditorPanel
+    private propertyEditorRef(r: IgrPropertyEditorPanel) {
+        this.propertyEditor = r;
+        this.setState({});
+    }
     private highlightedModeEditor: IgrPropertyEditorPropertyDescription
     private treemap: IgrTreemap
     private treemapRef(r: IgrTreemap) {
         this.treemap = r;
         this.setState({});
-        this.onHighlightingModeChange = this.onHighlightingModeChange.bind(this);
     }
 
     constructor(props: any) {
         super(props);
-                
+
+        this.propertyEditorRef = this.propertyEditorRef.bind(this);
         this.treemapRef = this.treemapRef.bind(this);
     }
 
     public render(): JSX.Element {
         return (
         <div className="container sample">
-            <div className="options horizontal">
-                <select onChange={this.onHighlightingModeChange}>
-                    <option>Brighten</option>
-                    <option>FadeOthers</option>
-                </select>
+            <div className="options vertical">
+                <IgrPropertyEditorPanel
+                    ref={this.propertyEditorRef}
+                    componentRenderer={this.renderer}
+                    target={this.treemap}
+                    descriptionType="Treemap"
+                    isHorizontal="true"
+                    isWrappingEnabled="true">
+                    <IgrPropertyEditorPropertyDescription
+                        propertyPath="HighlightingMode"
+                        name="HighlightedModeEditor"
+                        label="Highlighting Mode: "
+                        primitiveValue="Brighten"
+                        dropDownValues={["Brighten", "FadeOthers"]}>
+                    </IgrPropertyEditorPropertyDescription>
+                </IgrPropertyEditorPanel>
             </div>
 
             <div className="legend-title">
                 Comparing Population of Countries
             </div>
 
-
             <div className="container fill">
                 <IgrTreemap
                     ref={this.treemapRef}
@@ -68,25 +82,13 @@ export default class Sample extends React.Component<any, any> {
                     parentNodeRightPadding="0"
                     parentNodeTopPadding="0"
                     outline="black"
-                    strokeThickness="1"
-                    highlightingMode={TreemapHighlightingMode.Brighten}>
+                    strokeThickness="1">
                 </IgrTreemap>
             </div>
         </div>
         );
     }
 
-    public onHighlightingModeChange(args: any){
-        let value = args.target.value as string;   
-
-        if(value === "Brighten"){
-            this.treemap.highlightingMode = TreemapHighlightingMode.Brighten;
-        }
-        else{
-            this.treemap.highlightingMode = TreemapHighlightingMode.FadeOthers;
-        }      
-    }
-
     private _countyHierarchicalData: CountyHierarchicalData = null;
     public get countyHierarchicalData(): CountyHierarchicalData {
         if (this._countyHierarchicalData == null)
@@ -95,8 +97,19 @@ export default class Sample extends React.Component<any, any> {
         }
         return this._countyHierarchicalData;
     }
-}
 
+    private _componentRenderer: ComponentRenderer = null;
+    public get renderer(): ComponentRenderer {
+        if (this._componentRenderer == null) {
+            this._componentRenderer = new ComponentRenderer();
+            var context = this._componentRenderer.context;
+            PropertyEditorPanelDescriptionModule.register(context);
+            TreemapDescriptionModule.register(context);
+        }
+        return this._componentRenderer;
+    }
+
+}
 
 // rendering above component in the React DOM
 const root = ReactDOM.createRoot(document.getElementById('root'));