Support React Style Reactive Component

[qingant]

2023-08-12T15-07-24D0-12.mp4

example of how it could be used.

@reactive
def date_range(on_change: Optional[Callable] = None):
    to = datetime.datetime.today()
    from_ = to - datetime.timedelta(days=7)
    default_range = {'from': from_.strftime('%Y-%m-%d'), 'to': to.strftime('%Y-%m-%d')}
    range_, set_range = use_state(default_range)
    with ui.button().props('outline').classes() as main:
        ui.label(repr_date_range(range_)).classes('font-bold')
        with ui.menu() as menu:
            ui_date = ui.date(value=range_).props('range').classes('shadow-none m-0')
            print(ui_date.slots)
            with ui_date:
                with ui.row().classes('items-center justify-end gap-4'):
                    ui.button('Cancel').on('click', lambda: menu.close()).props('flat')
                    on_apply = lambda: set_range(ui_date.value) or on_change and on_change(range_)
                    ui.button('Apply').on('click',  on_apply)
    return main

The implementation: https://gist.github.com/qingant/17e44538ddc6987e8ddbd7a3c48292cb

[falkoschindler]

Hi @qingant, thanks for the proposal.
Can you, please, explain what the code is doing? What is the idea of @reactive? How does it relate to NiceGUI's binding and ui.refreshable?

[qingant]

Thanks @falkoschindler I think the usage is pretty clear if you are familiar with React. for those who are not familiar with React, I can explain with a simple example:

@reactive
def demo():
    count, set_count = use_state(0)
    ui.label(f'Count: {count}')
    ui.button('Increment').on('click', lambda e: set_count(count + 1))

In this demo component, you can build UI entirely based on the count variable from use_state(0) without need to maintain the value binding yourself, and when you want to update the UI, you call the set_count which would cause a refresh of the component. This simplified the mind model here. For the example that I demonstrated in the video, I think the reactive way is much simpler than the value_binding way.

As for the implementation, basically, in the reactive decorator, I made a wrapper so that when the component function (reactive(demo)) was called, a closure would be generated and it will capture a _context_state_ variable to maintain state of the created component instance.

Then, use_state will search upper function frame to find the _context_state_ and set/get value, and a little bit magic is used to maintain the index so that everytime the use_state call will get the same context variable.

Let me know if you want to have a quick call to go through the design and implementation. And I am also open to NOT add it to core NiceGUI, instead, I would be happy to build another library to supplement and enhance NiceGUI.

[rodja]

Thanks for the summary. @falkoschindler and me will talk about the implications tomorrow.

[qingant]

@rodja looking forward to hearing your thoughts. Thank you guys for creating this amazing framework. Great design and implementation.

Added a draft PR: #1438

[Januswork]

Very useful features, hoping to be added to the official NiceGUI

[falkoschindler]

This feature has been implemented in PR #1447.