dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Change InputOpt default masked: false and publish masked method.

Browse source
This commit is contained in:
Jason Lee 2024-07-17 18:57:04 +08:00
parent c7336fd5ea
commit b8a7d6a2dd
2 changed files with 25 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
crates/story/src/input_story.rs
View file

@ -35,11 +35,12 @@ pub struct InputStory {
small_input: View<TextInput>,
otp_input: View<InputOtp>,
otp_value: Option<SharedString>,
opt_input2: View<InputOtp>,
}
impl InputStory {
pub fn view(cx: &mut WindowContext) -> View<Self> {
cx.new_view(|cx| Self::new(cx))
cx.new_view(Self::new)
}
fn new(cx: &mut ViewContext<Self>) -> Self {
@ -81,11 +82,13 @@ impl InputStory {
let view = cx.view().clone();
let otp_input = cx.new_view(|cx| {
InputOtp::new(6, cx).on_change(move |value: &SharedString, cx| {
view.update(cx, |view, _| {
view.otp_value = Some(value.clone());
InputOtp::new(6, cx)
.masked(true)
.on_change(move |value: &SharedString, cx| {
view.update(cx, |view, _| {
view.otp_value = Some(value.clone());
})
})
})
});
Self {
@ -113,6 +116,7 @@ impl InputStory {
both_input1,
otp_input,
otp_value: None,
opt_input2: cx.new_view(|cx| InputOtp::new(6, cx).groups(3)),
}
}
@ -180,11 +184,15 @@ impl Render for InputStory {
.child(self.small_input.clone()),
)
.child(
section("Input OTP", cx)
.child(self.otp_input.clone())
.when_some(self.otp_value.clone(), |this, otp| {
this.child(format!("You input OTP: {}", otp))
}),
section("Input OTP", cx).child(
v_flex()
.gap_3()
.child(self.otp_input.clone())
.when_some(self.otp_value.clone(), |this, otp| {
this.child(format!("You input OTP: {}", otp))
})
.child(self.opt_input2.clone()),
),
)
.child(
h_flex()

8
crates/ui/src/input/input_otp.rs
View file

@ -27,7 +27,7 @@ impl InputOtp {
length,
number_of_groups: 2,
value: SharedString::default(),
masked: true,
masked: false,
on_change: None,
blink_cursor: blink_cursor.clone(),
};
@ -59,6 +59,12 @@ impl InputOtp {
self
}
/// Set masked to true use masked input.
pub fn masked(mut self, masked: bool) -> Self {
self.masked = masked;
self
}
/// Set callback to be called when the value of the OTP Input changes (All OTP input have filled).
pub fn on_change<F>(mut self, f: F) -> Self
where