From 5c95b9f4bc2667cb376a10b1da6182cfcc085724 Mon Sep 17 00:00:00 2001 From: Pavlo Myroniuk Date: Wed, 5 Apr 2023 00:29:48 +0300 Subject: [PATCH 1/6] feat(crypto-helper): common: implement ByteInput component --- src/common/byte_input.rs | 68 +++++++++++++++++++++++++++++++++++++ src/common/mod.rs | 54 ++++++++++++++++++++++++++++- src/common/simple_output.rs | 47 ++----------------------- 3 files changed, 124 insertions(+), 45 deletions(-) create mode 100644 src/common/byte_input.rs diff --git a/src/common/byte_input.rs b/src/common/byte_input.rs new file mode 100644 index 00000000..63b1d663 --- /dev/null +++ b/src/common/byte_input.rs @@ -0,0 +1,68 @@ +use web_sys::HtmlInputElement; +use yew::{Html, html, function_component, Callback, Properties, classes, use_state, use_effect_with_deps, TargetCast}; +use yew_notifications::{use_notification, Notification, NotificationType}; + +use crate::common::{BYTES_FORMATS, get_format_button_class, encode_bytes, get_set_format_callback, parse_bytes}; + +use super::BytesFormat; + +#[derive(PartialEq, Properties, Clone)] +pub struct ByteInputProps { + format: BytesFormat, + bytes: Vec, + setter: Callback>, +} + +#[function_component(ByteInput)] +pub fn byte_input(props: &ByteInputProps) -> Html { + let ByteInputProps { format, bytes, setter } = &props; + + let bytes_format = use_state(|| *format); + let raw_value = use_state(|| encode_bytes(bytes, format)); + + let format_setter = bytes_format.setter(); + use_effect_with_deps( + move |format| { + format_setter.set(**format); + }, + bytes_format.clone(), + ); + + let setter = setter.clone(); + let notifications = use_notification::(); + let format = *bytes_format; + let oninput = Callback::from(move |event: html::oninput::Event| { + let input: HtmlInputElement = event.target_unchecked_into(); + let value = input.value(); + + match parse_bytes(&value, format) { + Ok(bytes) => setter.emit(bytes), + Err(error) => notifications.spawn(Notification::new(NotificationType::Error, "Can not parse input", error.to_string())), + } + }); + + html! { +
+
{ + BYTES_FORMATS.iter().map(|format| { + html! { + + } + }).collect::() + }
+