Add Copy to Clipboard option for Note Header card

Added a new option per note to copy note data to clipboard by trying to append note title and description text of a note separated by newline '\n' characters when clipboard data reading is allowed, else simply overwrite Clipboard text with same data of a particular chosen note. And moved options to the right end of note card header using grid display for this part rather than allowing icon options within to spread throughout its size with flex display justify-content as space-between. Signed-off-by: Harshit Gupta <[email protected]>
Git-Harshit · Oct 22, 2023 · bd04dd3 · bd04dd3
1 parent fbdb249
commit bd04dd3
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 2 deletions.
diff --git a/src/App.js b/src/App.js
@@ -313,8 +313,27 @@ class NotesCard extends React.Component {
 	render() {
 		return (
 			<article className={"card note-card text-reset " + this.props.className}>
-				<article className="card-header d-flex justify-content-between">
-					<i className="bi bi-pen-fill" onClick={this.props.editor} title="Edit this Note"></i> {/* <!-- For circular ones, try: <i className="bi bi-wrench-adjustable-circle"></i> --> */}
+				<article className="card-header d-grid justify-content-end">
+					<i className="bi bi-pen-fill" onClick={this.props.editor} title="Edit this Note"></i>
+					<i className="bi bi-clipboard-plus" title="Copy to Clipboard" onClick={ (event) => {
+						// Reading and then appending new Clipboard text on top of it, else just overwriting Clipboard
+						let originalData = "";
+						navigator.clipboard.readText()
+						.then((clipboardText) => { originalData = clipboardText; })
+						.catch( (reason) => {
+							console.error("Clipboard Reading Issue- %s", reason);
+						})
+						.finally(()=>{
+							navigator.clipboard.writeText(originalData + '\n' + this.props.title + '\n' + this.props.detail).then(() => {
+								if (event && event.target) {
+									event.target.classList.replace("bi-clipboard-plus", "bi-clipboard-check");
+									setTimeout( () => {event.target.classList.replace("bi-clipboard-check", "bi-clipboard-plus"); event.target.removeAttribute("disabled"); }, 1500 );
+								}
+							}).catch( (reason) => {
+								console.error("Clipboard Writing Issue- %s", reason);
+							})
+						});
+					}}></i>
 					<i className="bi bi-x-circle text-danger" onClick={this.props.deletion} title="Delete this Note"></i>
 				</article>
 				<article className="card-body">

diff --git a/src/App.scss b/src/App.scss
@@ -53,6 +53,12 @@
 		margin: .5em;
 		background-color: unset;
 
+		.card-header.d-grid {
+			grid-auto-flow: column;
+			// justify-items: center;
+			grid-gap: 1em;
+		}
+
 		&:hover {
 			transition: all 0.5s;
 			box-shadow: 0 0 1px 2px burlywood;