Merge pull request #22 from ytak-sagit/feature/#15-copy-to-clipboard

#15: 生成したQRコード画像をクリップボードへコピーできるように対応

Cargo.toml

@@ -1,11 +1,13 @@
-workspace = { members = [ "qr-code-wrapper" ] }
+workspace = { members = ["base64-wrapper", "qr-code-wrapper"] }
 
 [package]
 name = "qr-code-generator-webapp-rust"
 version = "0.1.0"
 edition = "2021"
 
 [dependencies]
+base64-wrapper = { path = "./base64-wrapper" }
 qr-code-wrapper = { path = "./qr-code-wrapper" }
 web-sys = "0.3.76"
-yew = { git = "https://github.com/yewstack/yew/", features = ["csr"] }
+yew = { version = "0.21.0", features = ["csr"] }
+yew-hooks = "0.3.3"

base64-wrapper/Cargo.toml

@@ -0,0 +1,7 @@
+[package]
+name = "base64-wrapper"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+base64 = "0.22.1"

base64-wrapper/src/lib.rs

@@ -0,0 +1,3 @@
+//! This is a library crate for wrapping [`base64`](https://docs.rs/base64/latest/base64/) crate.
+
+pub use base64::*;

qr-code-wrapper/Cargo.toml

@@ -4,5 +4,4 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-base64 = "0.22.1"
 qrcode-generator = "5.0.0"

qr-code-wrapper/src/lib.rs

@@ -1,18 +1,3 @@
 //! This is a library crate for wrapping [`qrcode-generator`](https://docs.rs/qrcode-generator/latest/qrcode_generator/) crate.
 
-extern crate qrcode_generator;
-
-use base64::{engine::general_purpose::STANDARD, Engine};
 pub use qrcode_generator::*;
-
-/// Encode text to base64 string of a PNG image in memory.
-#[inline]
-pub fn to_png_to_base64_str_from_str<S: AsRef<str>>(
-    text: S,
-    ecc: QrCodeEcc,
-    size: usize,
-) -> Result<String, QRCodeError> {
-    let png = to_png_to_vec_from_str(text, ecc, size)?;
-    let base64_encoded_str = STANDARD.encode(png);
-    Ok(base64_encoded_str)
-}

src/main.rs

@@ -1,6 +1,8 @@
-use qr_code_wrapper::*;
+use base64_wrapper::{engine::general_purpose::STANDARD, Engine};
+use qr_code_wrapper::{to_png_to_vec_from_str, QrCodeEcc};
 use web_sys::HtmlInputElement;
 use yew::prelude::*;
+use yew_hooks::prelude::*;
 
 fn main() {
     yew::Renderer::<App>::new().render();
@@ -52,6 +54,7 @@ struct QrCodeProps {
 #[function_component(QrCodeImage)]
 fn qr_code_image(props: &QrCodeProps) -> Html {
     let QrCodeProps { url } = props.clone();
+    let clipboard = use_clipboard();
 
     if url.is_empty() {
         return html! {
@@ -62,8 +65,20 @@ fn qr_code_image(props: &QrCodeProps) -> Html {
         };
     }
 
-    let base64_encoded_image_data =
-        qr_code_wrapper::to_png_to_base64_str_from_str(&url, QrCodeEcc::Low, 256).unwrap();
+    let png_image_data = to_png_to_vec_from_str(&url, QrCodeEcc::Low, 256).unwrap();
+    let onclick = {
+        let png_image_data = png_image_data.clone();
+        let clipboard = clipboard.clone();
+        move |_| {
+            let png_image_data = png_image_data.clone();
+            clipboard.write(png_image_data, Some("image/png".to_owned()));
+            // TODO: スナックバーのような形式でメッセージ表示したい
+            let window = web_sys::window().unwrap();
+            window.confirm_with_message("Copied!").unwrap();
+        }
+    };
+
+    let base64_encoded_image_data = STANDARD.encode(png_image_data.clone());
     let img = format!("data:image/png;base64,{}", base64_encoded_image_data);
     // TODO: QRコードが表示されるまで loading 表示をしたい
     html! {
@@ -73,6 +88,9 @@ fn qr_code_image(props: &QrCodeProps) -> Html {
                 {"QR code was generated."}
             </p>
             <img src={img} alt={&url} />
+            // TODO: アイコンボタンにしたい
+            // <img onclick={onclick} style="display: inline-block; height: 1lh; vertical-align: middle; cursor: pointer;" src="public/icon-clipboard.svg" alt="copy to clipboard" />
+            <button onclick={onclick}>{"Copy to Clipboard"}</button>
         </>
     }
 }