StarArawn
Impl Add for Style?
in web development you can have many small styling components that are added together when building a component. (e.g.:
Not sure if theres a way to "add" different styles to form a more complex one in kayak_ui but doing so would be amazing (and would greatly improve code reusability imho).
Such implementation would compare two styles (mut self & style_b) and replace certain fields of struct self whenever such parameters are "default" and B provides diferent values. The following code does not compile, but the basic logic would be as follows:
impl Add for Style {
type Output = Style;
fn add(self, rhs: Style) -> Style {
let mut resulting_style = Style::default();
for i in Style::default().keys.iter() {
if resulting_style.i == StyleProp::Default {
resulting_style.i = rhs.i;
}
}
resulting_style
}
}
pub fn center_align() -> Style {
Style {
bottom: StyleProp::Value(Units::Stretch(1.0)),
left: StyleProp::Value(Units::Stretch(1.0)),
top: StyleProp::Value(Units::Stretch(1.0)),
right: StyleProp::Value(Units::Stretch(1.0)),
..Default::default()
}
}
pub fn main_background_color() -> Style {
Style {
background_color: StyleProp::Value(Color::BLACK),
..Default::default()
}
}
// this complex style would have bottom, left, top, right & background_color defined. other fields remain default.
pub fn complex_style() -> Style {
center_align() + main_background_color()
}
Not sure if there's already a way to achieve this in kayak_ui. Cheers!
Note: I know it is not possible to iter through struct fields (as opposed to python dicts, for example) but I saw some comments about using serde to Impl iterable to struct. Maybe this could be an optional feature, since it could add some external dependencies...
Check out the methods defined on Style here: https://github.com/StarArawn/kayak_ui/blob/54c67ecd252ee441eb2bb2fdd56b2e5a9ee7f391/kayak_core/src/styles/mod.rs#L150-L188
It sounds like you want to use apply (or with_style for builder-like syntax). If a style has any StyleProp::Unset values, these methods will attempt to apply the value from the given style. Hopefully that helps! 😄
with_style works exactly as needed. Still new to kayak_ui so thanks for pointing out the functions 😃
There might be some cosmetic value in having the "+" operator to concatenate different styles, though. For instance, this code:
<Background styles={Some(container_style
.with_style(center_align)
.with_style(main_background_color)
.with_style(two_players)
)}>
</Backgroud>
would become:
<Background styles={Some(container_style + center_align + main_background_color + two_players)}>
</Backgroud>
Some food for thought, in case you want to copy/paste the with_style method as the implementation for the Add<Style> operator.
Interesting... Would you be willing to draft up a PR so we can take a look at it in real examples? It might be a nice QoL feature. Any thoughts on this @StarArawn?
One hesitation here is that it hides the ordering considerations (A + B ≠ B + A) a bit more than with_style already does.
I think having both has merits 👍 I think the operator internally would just use with_style? I've also been thinking of having a way of defining "classes" or at least some sort of reusable style similar to JSS.
