Looking for a minimal working example with reactive computed mapped array properties

[otiv-willem-vanhulle]

In the following example, I created two components: a high-level and a low-level component. A low-level component in practice may be something like a generic table widget. The high-level component in practice may be a table of some business-specific kind of items.

struct LowLevelStruct {
    background_color: brush,
    text: string
}

component LowLevelComponent {
    in property <[LowLevelStruct]> generic_items;
    for item in generic_items:
        Rectangle {
            background: item.background-color;
            Text {
                
                text: item.text;
            }
        }

}

struct HighLevelStruct {
    text: string
}

component HighLevelComponent {
    in property <[HighLevelStruct]> red_items;

    out property<[LowLevelStruct]> generic_red_computed_items; //: red_items.map(|item| {background_color: red, text: item.text})
    LowLevelComponent {
        generic_items: root.generic_red_computed_items;
    }
}

export component Demo {
    width: 400px;
    height: 200px;
    VerticalLayout {
        LowLevelComponent {
            generic_items: [
                {
                    background_color: Colors.red,
                    text: "Item manually set to red"
                }
            ];
        }

        Text {
            text: "Below I would like to render using a 'computed' property\nin the higher-level component.";
        }

        HighLevelComponent {
            red_items: [{ text: "This should be rendered red" }];
        }
    }    
}

link to playground

I would like to be able to uncomment red_items.map(|item| {background_color: red, text: item.text}) somehow. If this is not possible, can I do it with Rust? What would be a minimally working example? What is the idiomatic way in Slint to do this?

It seems like a common use case where you have a more low-level component and want to "sub-class" it to have more business-specific functionality.

I am coming from Svelte, where they have reactive declarations.

[FloVanGH]

This is something that can be done in native could. E.g. in Rust there is the MapModel than can be used to solve this problem.

[otiv-willem-vanhulle]

You mean "something that could be done in Rust"? How is this problem solved in practice for complex hierarchical user interfaces where the low level component is used in different ways by many different high level components?

[tronical]

In parallel, we're tracking #1328 to add support for this on the Slint side. Suggestions for syntax are very welcome :)

[otiv-willem-vanhulle]

@tronical, I also noticed that Issue but there has not been any recent activity. How should I apply the mapmodel mentioned by @FloVanGH to the example I mentioned above?

[tronical]

What you could do is define a global helper like this (untested):

export global HighLevelToLowerLevelHelper {
    callback map-model([HighLevelStruct]) -> [LowlLevelStruct];
}

and then use it like this in Slint:

in property <[HighLevelStruct]> red_items;

out property<[LowLevelStruct]> generic_red_computed_items: HighLevelToLowerLevelHelper.map-model(red_items);

and finally in Rust associate the callback with the helper:

// Might have to use slint::MapModelExt;
ui.global::<HighLevelToLowerLevelHelper>().on_map_model(|hl_model| hl_model.map(|entry| LowLevelStruct { ... }));

If the mapping requires additional parameters, pass them along with the callback.