ZupIT/beagle

ListView Template Index context

Closed this issue · 4 comments

Use case

In a ListView it would be helpful to be able to retrieve the index path of the template from the list views context. What we're looking to do is have every other Template have a different background color.

i.e. -

  1. Template = white
  2. Template = gray
  3. Template = white
  4. Template = gray

Proposal

ListView(
        context = context,
        dataSource = expressionOf(expression = "@{contentItems}"),
        templates = listOf(
            ContentTemplate().build(index = "@{dataSource.index}")
        )
    )

Alternatively we could have a way to get the index and use with with case

ListView(
        context = context,
        dataSource = expressionOf(expression = "@{contentItems}"),
        templates = listOf(
            ContentTemplate(
                case = expressionOf("@{eq(dataSource.index, '2')}")
                view = Container()
            )
        )
    )

This is definitely something the ListView is missing. We can't implement it now, but we'd be happy to accept a PR or implement this in the future.

Added to backlog:

  1. Add the implicit context index to the ListView.
  2. Make it possible to alter the current item in a ListView via setContext. Example: ListView > Button: onPress: setContext(item, path, newValue).

Seems we could also include selection highlighting to List/Grid Views as well.

@bradleysmaskell we're currently implementing this, but I'm not sure about the highlighting feature.

We don't want to add more complexity to the ListView unless we really need to. The best way to control things like highlighting is an external state. See the example below for a ListView that can have a single element selected at once:

https://playground.usebeagle.io/#/cloud/S3-f667eb8d-4db0-4501-978a-6fb8304f4ade?platform=react-web