Add button to copy example code

Author: akzhar

src/components/Button/Button.tsx

@@ -3,12 +3,13 @@ import { Link, useLocation } from 'react-router-dom';
 
 type TButtonProps = {
   children: React.ReactNode,
+  title?: string,
   clickHandler?: () => void,
   url?: string,
   active?: boolean
 };
 
-const Button: React.FC<TButtonProps> = ({ children, clickHandler, url, active = false }) => {
+const Button: React.FC<TButtonProps> = ({ children, title, clickHandler, url, active = false }) => {
 
   const { pathname } = useLocation();
 
@@ -21,6 +22,7 @@ const Button: React.FC<TButtonProps> = ({ children, clickHandler, url, active =
         url ?
         <Link
           to={url}
+          title={title}
           className={`button ${isActive ? 'button--active' : ''}`}
           tabIndex={isActive ? -1 : 0}
           aria-current={isActive}
@@ -30,6 +32,7 @@ const Button: React.FC<TButtonProps> = ({ children, clickHandler, url, active =
         :
         <button
           type="button"
+          title={title}
           className={`button ${isActive ? 'button--active' : ''}`}
           tabIndex={isActive ? -1 : 0}
           onClick={clickHandler}

src/components/HelperItem/HelperItem.sass

@@ -126,13 +126,30 @@
         margin-right: 0
 
   &__header
+    display: flex
+    align-items: center
     margin: 0 0 12px 0
-    font-weight: 400
-    color: $color-grey
-    font-size: 16px
 
-    @media(min-width: $width-mobile)
-      font-size: 18px
+    & .button
+      margin-left: auto
+
+      & svg
+        fill: $color-green-dark
+        width: 12px
+        height: 12px
+
+        @media(min-width: $width-mobile)
+          width: 14px
+          height: 14px
+
+    & h3
+      margin: 0
+      font-weight: 400
+      color: $color-grey
+      font-size: 16px
+
+      @media(min-width: $width-mobile)
+        font-size: 18px
 
   &__description code,
   &__example pre

src/components/HelperItem/HelperItem.tsx

@@ -1,8 +1,12 @@
 import React, { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
 import { THelper } from '@services/Api';
+import copyText from '@utils/copyText';
 
 import Anchor from '@components/Anchor';
 import Tooltip from '@components/Tooltip';
+import Button from '@components/Button';
+import ActionCreator from '@store/actions';
 import { AppRoutes, HelperLinks } from '@consts/const';
 
 type THelperItemProps = {
@@ -12,6 +16,8 @@ type THelperItemProps = {
 
 const HelperItem: React.FC<THelperItemProps> = ({helper, isOpen}) => {
 
+  const dispatch = useDispatch();
+
   const codeLinesCount = (helper.usage.match(/\n/g)||[]).length + 1;
 
   useEffect(() => {
@@ -24,6 +30,15 @@ const HelperItem: React.FC<THelperItemProps> = ({helper, isOpen}) => {
     } catch(e) {}
   }, []);
 
+  const copyClickHandler = (text: string) => {
+    const isCopied = copyText(text);
+    dispatch(ActionCreator.setInfoMessage({
+      label: isCopied ? '😊' : '😭',
+      text: isCopied ? 'Copied' : 'Doesn\'t copied'
+    }));
+    dispatch(ActionCreator.showMessage());
+  };
+
   return (
     <details className="helper" open={isOpen}>
       <summary>
@@ -54,7 +69,9 @@ const HelperItem: React.FC<THelperItemProps> = ({helper, isOpen}) => {
           </div>
         </div>
         <div className="helper__column">
-          <h3 className="helper__header">What it used for?</h3>
+          <div className="helper__header">
+            <h3>What it used for?</h3>
+          </div>
           <p
             className="helper__description"
             dangerouslySetInnerHTML={
@@ -66,7 +83,9 @@ const HelperItem: React.FC<THelperItemProps> = ({helper, isOpen}) => {
           </p>
           { helper.demo &&
             <>
-              <h3 className="helper__header">How it works?</h3>
+              <div className="helper__header">
+                <h3>How it works?</h3>
+              </div>
               <a className="helper__demo" href={`${HelperLinks.DEMO}/${helper.demo}`} target="_blank" rel="noreferrer">
                 <img src={`${HelperLinks.DEMO}/${helper.demo}`} alt="demo" />
                 <svg width="18" height="18">
@@ -78,9 +97,20 @@ const HelperItem: React.FC<THelperItemProps> = ({helper, isOpen}) => {
         </div>
       </div>
       <div className="helper__example">
-        <h3 className="helper__header">How to use it?</h3>
+        <div className="helper__header">
+          <h3>How to use it?</h3>
+          {
+            helper.usage
+            &&
+            <Button title="Copy example code" clickHandler={() => copyClickHandler(helper.usage)}>
+              <svg width="14" height="14">
+                <use xlinkHref="#copy" />
+              </svg>
+            </Button>
+          }
+        </div>
         {
-          helper.usage.length
+          helper.usage
           ?
           <pre>
             <div className="helper__code-lines">

src/components/SvgSprite/SvgSprite.tsx

@@ -25,6 +25,9 @@ const SvgSprite: React.FC = () => (
       <symbol id="question" viewBox="0 0 24 24">
         <path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm1.25 17c0 .69-.559 1.25-1.25 1.25-.689 0-1.25-.56-1.25-1.25s.561-1.25 1.25-1.25c.691 0 1.25.56 1.25 1.25zm1.393-9.998c-.608-.616-1.515-.955-2.551-.955-2.18 0-3.59 1.55-3.59 3.95h2.011c0-1.486.829-2.013 1.538-2.013.634 0 1.307.421 1.364 1.226.062.847-.39 1.277-.962 1.821-1.412 1.343-1.438 1.993-1.432 3.468h2.005c-.013-.664.03-1.203.935-2.178.677-.73 1.519-1.638 1.536-3.022.011-.924-.284-1.719-.854-2.297z"/>
       </symbol>
+      <symbol id="copy" viewBox="0 0 24 24">
+        <path d="M16 10c3.469 0 2 4 2 4s4-1.594 4 2v6h-10v-12h4zm.827-2h-6.827v16h14v-8.842c0-2.392-4.011-7.158-7.173-7.158zm-8.827 12h-6v-16h4l2.102 2h3.898l2-2h4v2.145c.656.143 1.327.391 2 .754v-4.899h-3c-1.229 0-2.18-1.084-3-2h-8c-.82.916-1.771 2-3 2h-3v20h8v-2zm2-18c.553 0 1 .448 1 1s-.447 1-1 1-1-.448-1-1 .447-1 1-1zm4 18h6v-1h-6v1zm0-2h6v-1h-6v1zm0-2h6v-1h-6v1z"/>
+      </symbol>
     </svg>
   </div>
 );

src/utils/copyText.ts

@@ -0,0 +1,15 @@
+const copyText = (text: string): boolean => {
+  let isCopied = false;
+  const tempInput = document.createElement('textarea');
+  tempInput.innerHTML = text;
+  document.body.appendChild(tempInput);
+  tempInput.select();
+  try {
+    isCopied = document.execCommand('copy');
+  // eslint-disable-next-line no-empty
+  } catch (err) {}
+  document.body.removeChild(tempInput);
+  return isCopied;
+};
+
+export default copyText;