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

number_input: Add support for prefix and suffix (#896)

Browse source 
<img width="1097" alt="image"
src="https://github.com/user-attachments/assets/b4c1fc69-88ad-4ecd-b1c8-1a5a92836e82"
/>
This commit is contained in:
Floyd Wang 2025-05-26 16:16:22 +08:00 committed by GitHub
parent a95482fdd8
commit a1ad647527
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 35 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
crates/story/src/number_input_story.rs
View file

@ -6,8 +6,9 @@ use regex::Regex;
use crate::section; use crate::section;
use gpui_component::{ use gpui_component::{
button::{Button, ButtonVariants},
input::{InputEvent, InputState, MaskPattern, NumberInput, NumberInputEvent, StepAction}, input::{InputEvent, InputState, MaskPattern, NumberInput, NumberInputEvent, StepAction},
v_flex, FocusableCycle, Sizable, v_flex, FocusableCycle, IconName, Sizable,
}; };
actions!(input_story, [Tab, TabPrev]); actions!(input_story, [Tab, TabPrev]);
@ -215,9 +216,15 @@ impl Render for NumberInputStory {
.child(NumberInput::new(&self.number_input1)), .child(NumberInput::new(&self.number_input1)),
) )
.child( .child(
section("Small Size") section("Small Size with suffix").max_w_md().child(
.max_w_md() NumberInput::new(&self.number_input2).small().suffix(
.child(NumberInput::new(&self.number_input2).small()), Button::new("info")
.ghost()
.icon(IconName::Info)
.xsmall()
.mr_3(),
),
),
) )
.child( .child(
section("With mask pattern") section("With mask pattern")

28
crates/ui/src/input/number_input.rs
View file

@ -1,7 +1,7 @@
use gpui::{ use gpui::{
actions, prelude::FluentBuilder as _, px, App, Context, ElementId, Entity, EventEmitter, actions, prelude::FluentBuilder as _, px, AnyElement, App, Context, ElementId, Entity,
FocusHandle, Focusable, InteractiveElement, IntoElement, KeyBinding, ParentElement, RenderOnce, EventEmitter, FocusHandle, Focusable, InteractiveElement, IntoElement, KeyBinding,
SharedString, Styled, Window, ParentElement, RenderOnce, SharedString, Styled, Window,
}; };
use crate::{ use crate::{
@ -28,6 +28,8 @@ pub struct NumberInput {
state: Entity<InputState>, state: Entity<InputState>,
placeholder: SharedString, placeholder: SharedString,
size: Size, size: Size,
prefix: Option<AnyElement>,
suffix: Option<AnyElement>,
} }
impl NumberInput { impl NumberInput {
@ -38,6 +40,8 @@ impl NumberInput {
state: state.clone(), state: state.clone(),
size: Size::default(), size: Size::default(),
placeholder: SharedString::default(), placeholder: SharedString::default(),
prefix: None,
suffix: None,
} }
} }
@ -62,6 +66,16 @@ impl NumberInput {
state.on_action_decrement(&Decrement, window, cx); state.on_action_decrement(&Decrement, window, cx);
}) })
} }
pub fn prefix(mut self, prefix: impl IntoElement) -> Self {
self.prefix = Some(prefix.into_any_element());
self
}
pub fn suffix(mut self, suffix: impl IntoElement) -> Self {
self.suffix = Some(suffix.into_any_element());
self
}
} }
impl InputState { impl InputState {
@ -142,7 +156,13 @@ impl RenderOnce for NumberInput {
} }
}), }),
) )
.child(TextInput::new(&self.state).appearance(false).no_gap()) .child(
TextInput::new(&self.state)
.appearance(false)
.no_gap()
.when_some(self.prefix, |this, prefix| this.prefix(prefix))
.when_some(self.suffix, |this, suffix| this.suffix(suffix)),
)
.child( .child(
Button::new("plus") Button::new("plus")
.ghost() .ghost()