refactor(uip-copy): small update for header.ts and option-icons.tsx

exadel-inc · Oct 3, 2023 · cec1834 · cec1834
1 parent 38de6ba
commit cec1834
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 21 deletions.
diff --git a/src/plugins/header/header.tsx → src/plugins/header/header.ts b/src/plugins/header/header.tsx → src/plugins/header/header.ts
@@ -1,8 +1,5 @@
-import React from 'jsx-dom';
-
-import {ESLEventUtils} from '@exadel/esl/modules/esl-utils/dom/events';
-import {listen} from '@exadel/esl/modules/esl-utils/decorators/listen';
 import {UIPPlugin} from '../../core/base/plugin';
+import {UIPCopy} from '../copy/uip-copy';
 import {UIPOptions} from './options/options';
 import {UIPOptionIcons} from './options/option-icons';
 import {UIPSnippets} from './snippets/snippets';
@@ -42,20 +39,6 @@ export class UIPHeader extends UIPPlugin {
 
   /** Renders copy icon */
   protected renderCopy(): void {
-    const icon = <button title="copy markup" className="copy-icon">{UIPOptionIcons.copySVG.cloneNode(true) as HTMLElement}</button>;
-    this.append(icon);
-  }
-
-  /** Handles copy icon click */
-  @listen({event: 'click', selector: '.copy-icon'})
-  protected _onCopyClick(): void {
-    navigator.clipboard.writeText(this.model!.html).then(() => {
-      ESLEventUtils.dispatch(this, 'esl:alert:show', {
-        detail: {
-          text: 'Markup copied',
-          cls: 'uip-alert-info'
-        }
-      });
-    });
+    this.append(UIPCopy.create(UIPOptionIcons.copySVG, 'copy-icon'));
   }
 }
diff --git a/src/plugins/header/options/option-icons.tsx b/src/plugins/header/options/option-icons.tsx
@@ -47,14 +47,14 @@ export class UIPOptionIcons {
   ) as HTMLElement;
 
   /** Default svg for copy icon */
-  public static get copySVG(): JSX.Element {
+  public static get copySVG(): HTMLElement {
     return <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#5f5f5f" stroke-width="1.25">
       <rect width="12" height="15" x="4" y="3" fill="#fff" rx="2"/>
       <rect width="12" height="15" x="8" y="7" fill="#fff" rx="2"/>
     </svg> as HTMLElement;
   }
 
-  public static get snippetSVG(): JSX.Element {
+  public static get snippetSVG(): HTMLElement {
     return <>
       <svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' viewBox='0 0 16 9' xmlSpace='preserve'>
         <polyline points='0,0 8,8 16,0' stroke-width='2'></polyline>