Attributes on a Component view (am I doing this right?)

[marklam]

I was trying to put components into a grid, with positioning using the Grid.row / Grid.column attached properties, but there didn't seem to be a way to set attributes on the component, so I made this:

module Component =
    let createWithAttributes (key: string, attrs, render: IComponentContext -> IView) : IView<Component> =
        { ViewType = typeof<Component>
          ViewKey = ValueSome key
          Attrs = attrs
          Outlet = ValueNone
          ConstructorArgs = [| render :> obj |] }
        :> IView<Component>

My question is - am I doing this right, or is there already a way to do this that I'm missing?

The full example as an fsi script:

#r "nuget:Avalonia.Desktop"
#r "nuget:Avalonia.FuncUI"
#r "nuget:Avalonia.Themes.Fluent"

open Avalonia
open Avalonia.FuncUI.Hosts
open Avalonia.Controls.ApplicationLifetimes
open Avalonia.Controls
open Avalonia.FuncUI
open Avalonia.FuncUI.DSL
open Avalonia.FuncUI.Types
open Avalonia.Layout
open Avalonia.Themes.Fluent

module Component =
    let createWithAttributes (key: string, attrs, render: IComponentContext -> IView) : IView<Component> =
        { ViewType = typeof<Component>
          ViewKey = ValueSome key
          Attrs = attrs
          Outlet = ValueNone
          ConstructorArgs = [| render :> obj |] }
        :> IView<Component>

module Counter =
    let countComponent (count : IReadable<int>) attrs =
        Component.createWithAttributes ("count", attrs,
            fun ctx ->
                let count = ctx.usePassedRead count
                TextBlock.create [
                    TextBlock.fontSize 48.0
                    TextBlock.verticalAlignment VerticalAlignment.Center
                    TextBlock.horizontalAlignment HorizontalAlignment.Center
                    TextBlock.text (string count.Current)
                ]
        )

    let view () =
        Component (fun ctx ->
            let state = ctx.useState 0

            Grid.create [
                Grid.rowDefinitions "Auto,*"
                Grid.columnDefinitions "*,*"

                Grid.children [
                    Button.create [
                        Grid.row 0
                        Grid.column 0
                        Button.onClick (fun _ -> state.Current - 1 |> state.Set)
                        Button.content "-"
                    ]
                    Button.create [
                        Grid.row 0
                        Grid.column 1
                        Button.onClick (fun _ -> state.Current + 1 |> state.Set)
                        Button.content "+"
                    ]
                    countComponent state [
                        Grid.row 1
                        Grid.column 0
                    ]
                    countComponent state [
                        Grid.row 1
                        Grid.column 1
                    ]
                ]
            ]
        )

type MainWindow() =
    inherit HostWindow()
    do
        base.Title <- "Counter Example"
        base.Height <- 400.0
        base.Width <- 400.0
        base.Content <- Counter.view ()

type App() =
    inherit Application()

    override this.Initialize() =
        this.Styles.Add (FluentTheme())

    override this.OnFrameworkInitializationCompleted() =
        this.Name <- "Counter Grid"
        match this.ApplicationLifetime with
        | :? IClassicDesktopStyleApplicationLifetime as desktopLifetime ->
            let mainWindow = MainWindow()
            mainWindow.MinWidth <- 850.0
            mainWindow.MinHeight <- 600.0

            desktopLifetime.MainWindow <- mainWindow
        | _ -> ()

module Program =
    let main(args: string[]) =
        AppBuilder
            .Configure<App>()
            .UsePlatformDetect()
            .UseSkia()
            .StartWithClassicDesktopLifetime(args)

Program.main [| |]

[JaggerJo]

Maybe we should add a function so you can do this:

[

]
|> Button.create
|> View.withAttrs [
    ..
]

[marklam]

That was where I went looking first, so maybe that's a +1 for that idea :-)

[JaggerJo]

Happy to merge this ASAP if you create a PR - otherwise once I find time.

[marklam]

Created a PR.

[JaggerJo]

You can already easily set attributes from inside of a component:

Component.create ("comp", fun ctx -> 
    ctx.attr [
        Component.dock Dock.Top
    ]

    Button.create []
)

[marklam]

That looks tidy, I'll switch to doing that.