Extract permalink panel to own component

src/component/button/PermalinkButton/PermalinkButton.css → src/component/Permalink/Permalink.css

@@ -14,3 +14,8 @@
   border-radius: 2px;
   padding: 0 5px;
 }
+
+.permalink input:focus {
+  outline: none !important;
+  border: 1px solid var(--headerColor);
+}

src/component/Permalink/Permalink.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import Button  from 'antd/lib/button';
+import { message } from 'antd';
+
+import copy from 'copy-to-clipboard';
+
+import './Permalink.css';
+
+interface PermalinkProps {
+  t: (arg: string) => string;
+  getLink: () => string;
+}
+
+/**
+ * Function component for permalink panel.
+ */
+export const Permalink: React.FC<PermalinkProps> = ({
+  t,
+  getLink
+}): JSX.Element => {
+
+  /**
+   * Copy the permalink to clipboard
+   */
+  const copyToClipBoard = () => {
+    const linkInput: HTMLInputElement = document.querySelector('.permalink input');
+    if (linkInput) {
+      const success = copy(linkInput.value);
+      if (success) {
+        message.info(t('Permalink.copiedToClipboard'));
+      } else {
+        message.info(t('Permalink.copyToClipboardFailed'));
+      }
+    }
+  };
+
+  return (
+    <div className="permalink">
+      <label htmlFor="permalink">
+        {t('Permalink.label')}:
+      </label>
+      <input
+        readOnly
+        id="permalink"
+        type="text"
+        value={getLink()}
+      />
+      <Button
+        onClick={copyToClipBoard}
+      >
+        {t('Permalink.copy')}
+      </Button>
+    </div>
+  );
+};
+
+export default Permalink;

src/component/button/PermalinkButton/PermalinkButton.tsx

@@ -3,14 +3,11 @@ import React, { useState } from 'react';
 import SimpleButton, { SimpleButtonProps } from '@terrestris/react-geo/dist/Button/SimpleButton/SimpleButton';
 import Window from '@terrestris/react-geo/dist/Window/Window';
 
-import Button, { ButtonProps } from 'antd/lib/button';
-import { message } from 'antd';
+import { ButtonProps } from 'antd/lib/button';
 
 import PermalinkUtil from '@terrestris/ol-util/dist/PermalinkUtil/PermalinkUtil';
 
-import copy from 'copy-to-clipboard';
-
-import './PermalinkButton.css';
+import Permalink from '../../Permalink/Permalink';
 
 interface DefaultPermalinkButtonProps extends SimpleButtonProps {
   shape: 'circle' | 'round';
@@ -44,22 +41,6 @@ export const PermalinkButton: React.FC<PermalinkButtonProps> = ({
 
   const [winVisible, setWinVisible] = useState(false);
 
-  /**
-   * Copy the permalink to clipboard
-   */
-  const copyToClipBoard = () => {
-    const linkInput: HTMLInputElement = document.querySelector(
-      '.permalink input');
-    if (linkInput) {
-      const success = copy(linkInput.value);
-      if (success) {
-        message.info(t('Permalink.copiedToClipboard'));
-      } else {
-        message.info(t('Permalink.copyToClipboardFailed'));
-      }
-    }
-  };
-
   return (
     <>
       <SimpleButton
@@ -91,26 +72,10 @@ export const PermalinkButton: React.FC<PermalinkButtonProps> = ({
             />
           ]}
         >
-          <div
-            className="permalink"
-          >
-            <label
-              htmlFor="permalink"
-            >
-              {t('Permalink.label')}:
-            </label>
-            <input
-              readOnly
-              id="permalink"
-              type="text"
-              value={getLink ? getLink() : PermalinkUtil.getLink(map)}
-            />
-            <Button
-              onClick={copyToClipBoard}
-            >
-              {t('Permalink.copy')}
-            </Button>
-          </div>
+          <Permalink
+            getLink={getLink ? getLink : PermalinkUtil.getLink(map)}
+            t={t}
+          />
         </Window>
       }
     </>