Get `action`, `cancel`, `on_dismiss` and `on_auto_close` working for rx.toast #3216

masenf · 2024-05-02T20:38:23Z

Handle callbacks into reflex event handlers.

Respect defaults set in ToastProvider toast_options when firing a toast with it's own ToastProps set.

Create new reflex.utils.format.format_queue_events helper method that can be used to take arbitrary eventhandler/eventspec/lambda along with an args spec, and create a callback function for use with rx.call_script-based APIs.

reflex/components/sonner/toast.py

Lendemor · 2024-05-02T20:47:51Z

reflex/components/sonner/toast.py

+ specs = [spec]
+ events.extend(format.format_event(s) for s in specs)
+ on_click = Var.create(
+ f"() => {{queueEvents([{','.join(events)}], socket); processEvent(socket)}}",


maybe this could be exposed as a formatting method that user that wrap component can use?

moved to rx.utils.format.format_queue_events

i think this will be really useful for any rx.call_script-based API that needs to pass callback functions that trigger reflex events, so good to formalize it.

and since i formalized it, it was also easy to add in on_dismiss and on_auto_close callbacks too 😎

oh nice, i realized i was also using a variant of this code inside call_script itself, so i can clean that up too 😄

Lendemor · 2024-05-02T20:49:06Z

reflex/components/sonner/toast.py

+ _var_is_local=False,
+ )
+ else:
+ on_click = Var.create("() => null", _var_is_string=False, _var_is_local=False)


If we can pass this kind of var here, it would probably be possible to allow it for built-in event triggers too right ?

Little known feature; we actually do allow it if you set the _var_type to EventChain, it just gets rendered as is

reflex/reflex/components/component.py

Lines 497 to 499 in db47d39

elif isinstance(value, EventChain):

# Trust that the caller knows what they're doing passing an EventChain directly

return value

reflex/reflex/utils/format.py

Lines 572 to 581 in db47d39

if event_chain._var_type is not EventChain:

raise ValueError(f"Invalid event chain: {event_chain}")

return "".join(

[

"(() => {",

format_var(event_chain),

f"; preventDefault({format_var(event_arg)})" if event_arg else "",

"})()",

]

)

I'll have to remember that one 👍

masenf · 2024-05-03T03:38:19Z

@Lendemor idk if you want to take this into your branch (it has a refresh from origin/main); or if you just want to take your PR into main and then i can rebase this one and bring it into main separately.

Lendemor · 2024-05-03T12:09:29Z

@Lendemor idk if you want to take this into your branch (it has a refresh from origin/main); or if you just want to take your PR into main and then i can rebase this one and bring it into main separately.

I'm fine with both, let's just go with whatever is more convenient.

Respect defaults set in ToastProvider toast_options when firing a toast with it's own ToastProps set.

Co-authored-by: Thomas Brandého <[email protected]>

Implement on_auto_close and on_dismiss callbacks inside ToastProps

Replace duplicate logic in rx.call_script for handling the callback function.

The base branch was changed.

Lendemor · 2024-05-14T13:10:49Z

reflex/components/sonner/toast.py

+ "onClick": format.format_queue_events(action.on_click),
+ }
+
+
 class PropsBase(Base):


I think PropsBase should be exposed under _x too.
I've been playing with some libs that make extensive use of hooks, and the feature from this would be needed for them too.

Maybe in its own file since the code for it is not specific to sonner/toast

This base class will be exposed via rx._x.PropsBase and can be shared by other wrapped components that need to pass a JS object full of extra props.

…rx.toast (reflex-dev#3216) * Get `action` and `cancel` working for rx.toast Respect defaults set in ToastProvider toast_options when firing a toast with it's own ToastProps set. * Update reflex/components/sonner/toast.py Co-authored-by: Thomas Brandého <[email protected]> * Move queueEvent formatting into rx.utils.format module Implement on_auto_close and on_dismiss callbacks inside ToastProps * Update rx.call_script to use new format.format_queue_events Replace duplicate logic in rx.call_script for handling the callback function. * Move PropsBase to reflex.components.props This base class will be exposed via rx._x.PropsBase and can be shared by other wrapped components that need to pass a JS object full of extra props. --------- Co-authored-by: Thomas Brandého <[email protected]>

masenf mentioned this pull request May 2, 2024

add toast component #3186

Merged

Lendemor previously approved these changes May 2, 2024

View reviewed changes

masenf force-pushed the masenf/toast-tweaks branch from 4f71c26 to 4c75d06 Compare May 3, 2024 17:14

masenf and others added 3 commits May 3, 2024 12:28

Get action and cancel working for rx.toast

58d1246

Respect defaults set in ToastProvider toast_options when firing a toast with it's own ToastProps set.

Update reflex/components/sonner/toast.py

a4ac085

Co-authored-by: Thomas Brandého <[email protected]>

Move queueEvent formatting into rx.utils.format module

b3c61a5

Implement on_auto_close and on_dismiss callbacks inside ToastProps

masenf force-pushed the masenf/toast-tweaks branch from 4c75d06 to 0c8aad4 Compare May 3, 2024 19:37

Update rx.call_script to use new format.format_queue_events

296952d

Replace duplicate logic in rx.call_script for handling the callback function.

masenf force-pushed the masenf/toast-tweaks branch from 0c8aad4 to 296952d Compare May 3, 2024 19:40

masenf changed the title ~~Get action and cancel working for rx.toast~~ Get action, cancel, on_dismiss and on_auto_close working for rx.toast May 3, 2024

masenf changed the base branch from lendemor/add_toast_component to main May 3, 2024 19:42

masenf closed this May 3, 2024

masenf reopened this May 3, 2024

masenf added 2 commits May 7, 2024 08:17

Merge remote-tracking branch 'origin/main' into masenf/toast-tweaks

eb4f5e0

Merge remote-tracking branch 'origin/main' into masenf/toast-tweaks

ecf651d

Lendemor requested changes May 14, 2024

View reviewed changes

Lendemor mentioned this pull request May 14, 2024

wip connection toaster #3242

Merged

masenf added 2 commits May 14, 2024 09:34

Merge remote-tracking branch 'origin/main' into masenf/toast-tweaks

7f94c26

Move PropsBase to reflex.components.props

3bc8647

This base class will be exposed via rx._x.PropsBase and can be shared by other wrapped components that need to pass a JS object full of extra props.

Lendemor approved these changes May 15, 2024

View reviewed changes

Lendemor merged commit 76c8b2d into main May 15, 2024
46 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Get `action`, `cancel`, `on_dismiss` and `on_auto_close` working for rx.toast #3216

Get `action`, `cancel`, `on_dismiss` and `on_auto_close` working for rx.toast #3216

masenf commented May 2, 2024 •

edited

Lendemor May 2, 2024

masenf May 3, 2024

masenf May 3, 2024

Lendemor May 2, 2024

masenf May 3, 2024

Lendemor May 4, 2024

masenf commented May 3, 2024 •

edited

Lendemor commented May 3, 2024

Lendemor May 14, 2024

	elif isinstance(value, EventChain):
	# Trust that the caller knows what they're doing passing an EventChain directly
	return value

	if event_chain._var_type is not EventChain:
	raise ValueError(f"Invalid event chain: {event_chain}")
	return "".join(
	[
	"(() => {",
	format_var(event_chain),
	f"; preventDefault({format_var(event_arg)})" if event_arg else "",
	"})()",
	]
	)

Get action, cancel, on_dismiss and on_auto_close working for rx.toast #3216

Get action, cancel, on_dismiss and on_auto_close working for rx.toast #3216

Conversation

masenf commented May 2, 2024 • edited

Lendemor May 2, 2024

Choose a reason for hiding this comment

masenf May 3, 2024

Choose a reason for hiding this comment

masenf May 3, 2024

Choose a reason for hiding this comment

Lendemor May 2, 2024

Choose a reason for hiding this comment

masenf May 3, 2024

Choose a reason for hiding this comment

Lendemor May 4, 2024

Choose a reason for hiding this comment

masenf commented May 3, 2024 • edited

Lendemor commented May 3, 2024

Lendemor May 14, 2024

Choose a reason for hiding this comment

Get `action`, `cancel`, `on_dismiss` and `on_auto_close` working for rx.toast #3216

Get `action`, `cancel`, `on_dismiss` and `on_auto_close` working for rx.toast #3216

masenf commented May 2, 2024 •

edited

masenf commented May 3, 2024 •

edited