Update clipboard operations sample. (#421)

* Update UI elements with WC components that work correctly. * Fix typo. --------- Co-authored-by: HUSSAR-mtrela <[email protected]> Co-authored-by: Martin Dragnev <[email protected]>
IgniteUI · Oct 3, 2023 · 3016788 · 3016788
1 parent 132c5ca
commit 3016788
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 83 deletions.
diff --git a/samples/grids/grid/clipboard-operations/index.html b/samples/grids/grid/clipboard-operations/index.html
@@ -17,49 +17,15 @@
     <div id="root">
 
 <div class="container sample">
-    <div class="options vertical">
-        <igc-property-editor-panel
-        name="PropertyEditor"
-        id="PropertyEditor"
-        description-type="WebGrid"
-        is-horizontal="true"
-        is-wrapping-enabled="true">
-            <igc-property-editor-property-description
-            value-type="StringValue"
-            label="Change Copy Separator"
-            property-path="ClipboardOptions.Separator">
-            </igc-property-editor-property-description>
-            <igc-property-editor-property-description
-            property-path="ClipboardOptions.Enabled"
-            name="ClipboardEnabledEditor"
-            id="ClipboardEnabledEditor"
-            label="Grid Copy Behavior"
-            value-type="Boolean1"
-            primitive-value="True">
-            </igc-property-editor-property-description>
-            <igc-property-editor-property-description
-            property-path="ClipboardOptions.CopyHeaders"
-            name="ClipboardHeadersEditor"
-            id="ClipboardHeadersEditor"
-            label="Copying of Header Labels"
-            value-type="Boolean1"
-            primitive-value="True">
-            </igc-property-editor-property-description>
-            <igc-property-editor-property-description
-            property-path="ClipboardOptions.CopyFormatters"
-            name="ClipboardFormattersEditor"
-            id="ClipboardFormattersEditor"
-            label="Copying Column Formatters"
-            value-type="Boolean1"
-            primitive-value="True">
-            </igc-property-editor-property-description>
-            <igc-property-editor-property-description
-            value-type="Button"
-            primitive-value="Clear Selection"
-            name="propertyEditorPropertyDescription1"
-            id="propertyEditorPropertyDescription1">
-            </igc-property-editor-property-description>
-        </igc-property-editor-panel>
+    <div class="options horizontal" style="gap: 50px;">
+      <igc-input id="input">
+        <span slot="prefix">Change copy separator:</span>
+        <span slot="helper-text">The default value is a single tabulation.</span>
+      </igc-input>
+      <igc-switch id="copy" label-position="before" checked>Grid copy behavior</igc-switch>
+      <igc-switch id="headerCopy" label-position="before" checked>Copying of header labels</igc-switch>
+      <igc-switch id="formatterCopy" label-position="before" checked>Copying column formatters</igc-switch>
+      <igc-button id="selectionClear">Clear selection</igc-button>
     </div>
 
     <div class="container fill">

diff --git a/samples/grids/grid/clipboard-operations/src/index.ts b/samples/grids/grid/clipboard-operations/src/index.ts
@@ -1,48 +1,51 @@
 import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
 import 'igniteui-webcomponents-grids/grids/combined';
-import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
-import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { NwindDataItem, NwindDataItem_LocationsItem, NwindData } from './NwindData';
-
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
-import { defineAllComponents } from 'igniteui-webcomponents';
-import { ModuleManager } from 'igniteui-webcomponents-core';
+import { defineAllComponents, IgcButtonComponent, IgcInputComponent, IgcSwitchComponent } from 'igniteui-webcomponents';
 defineAllComponents();
 
 import "./index.css";
 
-ModuleManager.register(
-    IgcPropertyEditorPanelModule
-);
-
 export class Sample {
-
-    private propertyEditor: IgcPropertyEditorPanelComponent
-    private clipboardEnabledEditor: IgcPropertyEditorPropertyDescriptionComponent
-    private clipboardHeadersEditor: IgcPropertyEditorPropertyDescriptionComponent
-    private clipboardFormattersEditor: IgcPropertyEditorPropertyDescriptionComponent
-    private propertyEditorPropertyDescription1: IgcPropertyEditorPropertyDescriptionComponent
     private grid: IgcGridComponent
     private _bind: () => void;
 
     constructor() {
-        var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
-        var clipboardEnabledEditor = this.clipboardEnabledEditor = document.getElementById('ClipboardEnabledEditor') as IgcPropertyEditorPropertyDescriptionComponent;
-        var clipboardHeadersEditor = this.clipboardHeadersEditor = document.getElementById('ClipboardHeadersEditor') as IgcPropertyEditorPropertyDescriptionComponent;
-        var clipboardFormattersEditor = this.clipboardFormattersEditor = document.getElementById('ClipboardFormattersEditor') as IgcPropertyEditorPropertyDescriptionComponent;
-        var propertyEditorPropertyDescription1 = this.propertyEditorPropertyDescription1 = document.getElementById('propertyEditorPropertyDescription1') as IgcPropertyEditorPropertyDescriptionComponent;
-        this.webGridClearSelection = this.webGridClearSelection.bind(this);
         var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
         this.webGridClipboardOperationsColumnInit = this.webGridClipboardOperationsColumnInit.bind(this);
 
         this._bind = () => {
-            propertyEditor.componentRenderer = this.renderer;
-            propertyEditor.target = this.grid;
-            propertyEditorPropertyDescription1.buttonClicked = this.webGridClearSelection;
             grid.data = this.nwindData;
             grid.addEventListener("columnInit", this.webGridClipboardOperationsColumnInit);
+
+            var copyBehaviorSwitch = document.getElementById("copy") as IgcSwitchComponent;
+            copyBehaviorSwitch.addEventListener("igcChange", (ev: CustomEvent) => {
+                grid.clipboardOptions.enabled = ev.detail;
+            });
+
+            var copyHeaderSwitch = document.getElementById("headerCopy") as IgcSwitchComponent;
+            copyHeaderSwitch.addEventListener("igcChange", (ev: CustomEvent) => {
+                grid.clipboardOptions.copyHeaders = ev.detail;
+            });
+
+            var formatterSwitch = document.getElementById("formatterCopy") as IgcSwitchComponent;
+            formatterSwitch.addEventListener("igcChange", (ev: CustomEvent) => {
+                grid.clipboardOptions.copyFormatters = ev.detail;
+            });
+
+            var selectionClearBtn = document.getElementById("selectionClear") as IgcButtonComponent;
+            selectionClearBtn.addEventListener('click', (ev: any) => {
+                grid.cellSelection = 'none';
+                grid.cellSelection = 'multiple';
+            });
+
+            var input = document.getElementById("input") as IgcInputComponent;
+            input.addEventListener("igcChange", (ev: CustomEvent) => {
+                grid.clipboardOptions.separator = ev.detail;
+            });
         }
         this._bind();
 
@@ -57,22 +60,6 @@ export class Sample {
         return this._nwindData;
     }
 
-    private _componentRenderer: ComponentRenderer = null;
-    public get renderer(): ComponentRenderer {
-        if (this._componentRenderer == null) {
-            this._componentRenderer = new ComponentRenderer();
-            var context = this._componentRenderer.context;
-            PropertyEditorPanelDescriptionModule.register(context);
-            WebGridDescriptionModule.register(context);
-        }
-        return this._componentRenderer;
-    }
-
-    public webGridClearSelection(args: any): void {
-        console.log("TODO" + args);
-    	//TODO
-    }
-
     public webGridClipboardOperationsColumnInit(args: any): void {
         let column = args.detail;
         column.formatter = (e: any) => { return "** " + e + " **" };