Skip to content
Snippets Groups Projects
Unverified Commit 3a212b03 authored by Ygg01's avatar Ygg01
Browse files

WIP On spinbox

parent 79c82258
No related branches found
No related tags found
No related merge requests found
...@@ -5,19 +5,20 @@ use bevy::{ ...@@ -5,19 +5,20 @@ use bevy::{
}; };
use kayak_core::Color; use kayak_core::Color;
use kayak_render_macros::use_state; use kayak_render_macros::use_state;
use kayak_ui::{bevy::{BevyContext, BevyKayakUIPlugin, FontMapping, UICameraBundle}}; use kayak_ui::bevy::{BevyContext, BevyKayakUIPlugin, FontMapping, UICameraBundle};
use kayak_ui::core::{ use kayak_ui::core::{
render, rsx, render, rsx,
styles::{Style, StyleProp, Units}, styles::{Style, StyleProp, Units},
widget, Index, widget, Index,
}; };
use kayak_ui::widgets::{App, OnChange, Window, TextBox, SpinBox}; use kayak_ui::widgets::{App, Inspector, OnChange, SpinBox, TextBox, Window};
#[widget] #[widget]
fn TextBoxExample() { fn TextBoxExample() {
let (value, set_value, _) = use_state!("I started with a value!".to_string()); let (value, set_value, _) = use_state!("I started with a value!".to_string());
let (empty_value, set_empty_value, _) = use_state!("".to_string()); let (empty_value, set_empty_value, _) = use_state!("".to_string());
let (red_value, set_red_value, _) = use_state!("This text is red".to_string()); let (red_value, set_red_value, _) = use_state!("This text is red".to_string());
let (spin_value, set_spin_value, _) = use_state!("3".to_string());
let input_styles = Style { let input_styles = Style {
top: StyleProp::Value(Units::Pixels(10.0)), top: StyleProp::Value(Units::Pixels(10.0)),
...@@ -41,8 +42,12 @@ fn TextBoxExample() { ...@@ -41,8 +42,12 @@ fn TextBoxExample() {
set_red_value(event.value); set_red_value(event.value);
}); });
let on_change_spin = OnChange::new(move |event| {
set_spin_value(event.value);
});
rsx! { rsx! {
<Window position={(50.0, 50.0)} size={(300.0, 300.0)} title={"TextBox Example".to_string()}> <Window position={(50.0, 50.0)} size={(500.0, 300.0)} title={"TextBox Example".to_string()}>
<TextBox styles={Some(input_styles)} value={value} on_change={Some(on_change)} /> <TextBox styles={Some(input_styles)} value={value} on_change={Some(on_change)} />
<TextBox <TextBox
styles={Some(input_styles)} styles={Some(input_styles)}
...@@ -51,7 +56,7 @@ fn TextBoxExample() { ...@@ -51,7 +56,7 @@ fn TextBoxExample() {
placeholder={Some("This is a placeholder".to_string())} placeholder={Some("This is a placeholder".to_string())}
/> />
<TextBox styles={Some(red_text_styles)} value={red_value} on_change={Some(on_change_red)} /> <TextBox styles={Some(red_text_styles)} value={red_value} on_change={Some(on_change_red)} />
<SpinBox styles={Some(input_styles)} /> <SpinBox styles={Some(input_styles)} value={spin_value} on_change={Some(on_change_spin)} />
</Window> </Window>
} }
} }
...@@ -69,6 +74,7 @@ fn startup( ...@@ -69,6 +74,7 @@ fn startup(
render! { render! {
<App> <App>
<TextBoxExample /> <TextBoxExample />
<Inspector />
</App> </App>
} }
}); });
......
...@@ -24,4 +24,4 @@ impl std::fmt::Debug for OnChange { ...@@ -24,4 +24,4 @@ impl std::fmt::Debug for OnChange {
fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result { fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
f.debug_tuple("OnChange").finish() f.debug_tuple("OnChange").finish()
} }
} }
\ No newline at end of file
use crate::{core::{ use crate::{
render_command::RenderCommand, core::{
rsx, render_command::RenderCommand,
styles::{Corner, Style, Units}, rsx,
widget, Bound, Children, Color, EventType, MutableBound, OnEvent, WidgetProps, styles::{Corner, Style, Units},
}, widgets::ChangeEvent}; widget, Bound, Children, Color, EventType, MutableBound, OnEvent, WidgetProps,
use kayak_core::{OnLayout, CursorIcon}; },
widgets::{Button, ChangeEvent},
use crate::widgets::{Background, Clip, Text, OnChange}; };
use kayak_core::{
#[derive(Default, Debug, PartialEq, Clone)] styles::{LayoutType, StyleProp},
CursorIcon, OnLayout,
};
use crate::widgets::{Background, Clip, OnChange, Text};
#[derive(Debug, PartialEq, Clone)]
pub struct SpinBoxProps { pub struct SpinBoxProps {
/// If true, prevents the widget from being focused (and consequently edited) /// If true, prevents the widget from being focused (and consequently edited)
pub disabled: bool, pub disabled: bool,
...@@ -22,12 +28,35 @@ pub struct SpinBoxProps { ...@@ -22,12 +28,35 @@ pub struct SpinBoxProps {
/// You can use the [`on_change`] callback to update this prop as the user types. /// You can use the [`on_change`] callback to update this prop as the user types.
pub value: String, pub value: String,
pub styles: Option<Style>, pub styles: Option<Style>,
/// Text on increment button defaults to `>`
pub incr_str: String,
/// Text on decrement button defaults to `<`
pub decr_str: String,
pub children: Option<Children>, pub children: Option<Children>,
pub on_event: Option<OnEvent>, pub on_event: Option<OnEvent>,
pub on_layout: Option<OnLayout>, pub on_layout: Option<OnLayout>,
pub focusable: Option<bool>, pub focusable: Option<bool>,
} }
impl Default for SpinBoxProps {
fn default() -> SpinBoxProps {
SpinBoxProps {
incr_str: ">".into(),
decr_str: "<".into(),
disabled: Default::default(),
on_change: Default::default(),
placeholder: Default::default(),
value: Default::default(),
styles: Default::default(),
children: Default::default(),
on_event: Default::default(),
on_layout: Default::default(),
focusable: Default::default(),
}
}
}
impl WidgetProps for SpinBoxProps { impl WidgetProps for SpinBoxProps {
fn get_children(&self) -> Option<Children> { fn get_children(&self) -> Option<Children> {
self.children.clone() self.children.clone()
...@@ -58,11 +87,11 @@ impl WidgetProps for SpinBoxProps { ...@@ -58,11 +87,11 @@ impl WidgetProps for SpinBoxProps {
pub struct FocusSpinbox(pub bool); pub struct FocusSpinbox(pub bool);
#[widget] #[widget]
/// A widget that displays a text input field /// A widget that displays a spinnable text field
/// ///
/// # Props /// # Props
/// ///
/// __Type:__ [`TextBoxProps`] /// __Type:__ [`SpinBoxProps`]
/// ///
/// | Common Prop | Accepted | /// | Common Prop | Accepted |
/// | :---------: | :------: | /// | :---------: | :------: |
...@@ -145,34 +174,54 @@ pub fn SpinBox(props: SpinBoxProps) { ...@@ -145,34 +174,54 @@ pub fn SpinBox(props: SpinBoxProps) {
..Style::default() ..Style::default()
} }
} else { } else {
Style::default() Style {
width: Units::Stretch(100.0).into(),
..Style::default()
}
}; };
let button_style = Some(Style {
height: Units::Pixels(24.0).into(),
width: Units::Pixels(24.0).into(),
..Default::default()
});
let value = if value.is_empty() { let value = if value.is_empty() {
placeholder.unwrap_or_else(|| value.clone()) placeholder.unwrap_or_else(|| value.clone())
} else { } else {
value value
}; };
let inline_style = Style {
layout_type: StyleProp::Value(LayoutType::Row),
..Style::default()
};
let incr_str = props.clone().incr_str;
let decr_str = props.clone().decr_str;
rsx! { rsx! {
<Background styles={Some(background_styles)}> <Background styles={Some(background_styles)}>
<Clip> <Clip styles={Some(inline_style)}>
<Button styles={button_style}>
<Text content={decr_str} />
</Button>
<Text <Text
content={value} content={value}
size={14.0} size={14.0}
line_height={Some(22.0)}
styles={Some(text_styles)} styles={Some(text_styles)}
/> />
<Button styles={button_style}>
<Text content={incr_str} />
</Button>
</Clip> </Clip>
</Background> </Background>
} }
} }
/// Checks if the given character contains the "Backspace" sequence /// Checks if the given character contains the "Backspace" sequence
/// ///
/// Context: [Wikipedia](https://en.wikipedia.org/wiki/Backspace#Common_use) /// Context: [Wikipedia](https://en.wikipedia.org/wiki/Backspace#Common_use)
fn is_backspace(c: char) -> bool { fn is_backspace(c: char) -> bool {
c == '\u{8}' || c == '\u{7f}' c == '\u{8}' || c == '\u{7f}'
} }
use crate::{core::{ use crate::{
render_command::RenderCommand, core::{
rsx, render_command::RenderCommand,
styles::{Corner, Style, Units}, rsx,
widget, Bound, Children, Color, EventType, MutableBound, OnEvent, WidgetProps, styles::{Corner, Style, Units},
}, widgets::ChangeEvent}; widget, Bound, Children, Color, EventType, MutableBound, OnEvent, WidgetProps,
},
widgets::ChangeEvent,
};
use kayak_core::{CursorIcon, OnLayout}; use kayak_core::{CursorIcon, OnLayout};
use crate::widgets::{Background, Clip, Text, OnChange}; use crate::widgets::{Background, Clip, OnChange, Text};
/// Props used by the [`TextBox`] widget /// Props used by the [`TextBox`] widget
#[derive(Default, Debug, PartialEq, Clone)] #[derive(Default, Debug, PartialEq, Clone)]
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment