Initial work on adding copy to clipboard support

src/components/copy-to-clipboard-button/index.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { useEffect, useState } from 'react';
+
+import { useCopyToClipboard } from '../../hooks';
+import { classnames } from '../../utils';
+import './index.scss';
+
+export default ({
+	value,
+	className,
+}) => {
+	const [isCopied, setIsCopied] = useState(false);
+	const [copiedText, copyToClipboard] = useCopyToClipboard();
+
+	useEffect(() => {
+		if (!!isCopied) {
+			const timer = setTimeout(() => {
+				setIsCopied(false);
+			}, 2000);
+
+			return () => {
+				clearTimeout(timer);
+			};
+		}
+	}, [isCopied]);
+
+	return (
+		<button
+			className={ classnames('o-button-bare', 'c-copy-to-clipboard-button', className) }
+			onClick={ () => {
+				copyToClipboard(value);
+				setIsCopied(true);
+			} }
+		>
+			{ isCopied ? (
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentcolor">
+					<path fillRule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path>
+				</svg>
+			) : (
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentcolor">
+					<path fillRule="evenodd" d="M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z"></path>
+				</svg>
+			) }
+			{ copiedText }
+		</button>
+	);
+};

src/components/copy-to-clipboard-button/index.scss

@@ -0,0 +1,7 @@
+.c-copy-to-clipboard-button {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 24px;
+	height: 24px;
+}

src/components/display/index.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useLayoutEffect, useState } from 'react';
 
-import { Button, Equation } from '../../components';
-import { addCommas } from '../../utils';
+import { Button, CopyToClipboardButton, Equation } from '../../components';
+import { addCommas, classnames } from '../../utils';
 import './index.scss';
 
 const operators = {
@@ -91,6 +91,11 @@ export default ({
 				</div>
 			) }
 			<div className="c-display__result-wrapper">
+				{ computedResult !== undefined && (
+					<CopyToClipboardButton
+						value={ resultDisplay }
+					/>
+				) }
 				<div className="c-display__result-body" style={ {fontSize: resultFontSize + 'px'} }>
 					{ addCommas(resultDisplay) }
 				</div>

src/components/display/index.scss

@@ -21,8 +21,8 @@
 .c-display__previous-wrapper,
 .c-display__result-wrapper,
 .c-display__equation-body {
-	padding-left: 12px;
-	padding-right: 12px;
+	padding-left: 20px;
+	padding-right: 24px;
 }
 
 .c-display__previous-wrapper {
@@ -47,6 +47,9 @@
 }
 
 .c-display__result-wrapper {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
 	flex: 1 1 auto;
 	font-size: 3rem;
 	font-weight: var(--font--weight--light);

src/components/index.js

@@ -1,5 +1,6 @@
 export { default as BaseControl } from './base-control';
 export { default as Button } from './button';
+export { default as CopyToClipboardButton } from './copy-to-clipboard-button';
 export { default as Display } from './display';
 export { default as Equation } from './equation';
 export { default as History } from './history';

src/hooks/index.js

@@ -1,3 +1,4 @@
+export { default as useCopyToClipboard } from './use-copy-to-clipboard';
 export { default as useDebounceEffect } from './use-debounce-effect';
 export { default as useKeyPress } from './use-key-press';
 export { default as useLocalStorage } from './use-local-storage';

src/hooks/use-copy-to-clipboard/index.js

@@ -0,0 +1,28 @@
+import { useState } from 'react';
+
+export default function useCopyToClipboard() {
+	const [copiedText, setCopiedText] = useState(null);
+
+	const copy = (text) => {
+		if (!navigator?.clipboard) {
+			console.warn('Clipboard not supported');
+
+			return false;
+		}
+
+		// Try to save to clipboard then save it in the state if worked
+		try {
+			navigator.clipboard.writeText(text);
+			setCopiedText(text);
+
+			return true;
+		} catch (error) {
+			console.warn('Copy failed', error);
+			setCopiedText(null);
+
+			return false;
+		}
+	}
+
+	return [copiedText, copy];
+}