Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update toast #517

Merged
merged 9 commits into from
Dec 15, 2023
Merged

update toast #517

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
809d630
f
felicio Dec 11, 2023
9ec4436
u
felicio Dec 11, 2023
03aff00
u
felicio Dec 11, 2023
82f0330
a
felicio Dec 11, 2023
52ae242
u
felicio Dec 11, 2023
b7b09d8
u
felicio Dec 12, 2023
4e2ed21
u
felicio Dec 15, 2023
52a4378
u
felicio Dec 15, 2023
232c665
Create old-donkeys-report.md
felicio Dec 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 46 additions & 11 deletions packages/components/src/toast/toast-container.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,33 +7,59 @@ import { create } from 'zustand'
import { Toast } from './toast'

import type { ToastProps } from './toast'
import type { ToastProps as RootProps } from '@radix-ui/react-toast'

type ToastRootProps = Partial<Pick<RootProps, 'duration' | 'type'>>

type ToastState = {
toast: ToastProps | null
toast: (ToastProps & { rootProps?: ToastRootProps }) | null
dismiss: () => void
positive: (
message: string,
actionProps?: Pick<ToastProps, 'action' | 'onAction'>
options?: {
actionProps?: Pick<ToastProps, 'action' | 'onAction'>
rootProps?: ToastRootProps
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

type Options = ToastRootProps & Pick<ToastProps, 'action' | 'onAction'>

Copy link
Collaborator Author

@felicio felicio Dec 15, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isn't it clearer that way? wouldn't destructuring for rootProps instead of its individual fields better ensure it's not passed further down where not expected?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From a component consumer view, I don't see why they'd need to understand what root and action are.

The toast API

toast.success("Yaaayy!!", {
  duration: 3000,
  action: "Undo",
  onAction: () => void
})

is much cleaner than nesting it under some arbitrary fields.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

which option goes where is an implementational detail.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The component handling the opening of the toast should be explicit about things a user can configure and pass it to the appropriate components (no spreading of props).

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

4e2ed21

) => void
negative: (
message: string,
actionProps?: Pick<ToastProps, 'action' | 'onAction'>
options?: {
actionProps?: Pick<ToastProps, 'action' | 'onAction'>
rootProps?: ToastRootProps
}
) => void
custom: (
message: string,
icon: React.ReactElement,
actionProps?: Pick<ToastProps, 'action' | 'onAction'>
options?: {
actionProps?: Pick<ToastProps, 'action' | 'onAction'>
rootProps?: ToastRootProps
}
) => void
}

const useStore = create<ToastState>()(set => ({
toast: null,
positive: (message, actionProps) =>
set({ toast: { ...actionProps, message, type: 'positive' } }),
negative: (message, actionProps) =>
set({ toast: { ...actionProps, message, type: 'negative' } }),
custom: (message, icon, actionProps) =>
set({ toast: { ...actionProps, message, icon } }),
positive: (message, options) =>
set({
toast: {
message,
...options,
type: 'positive',
},
}),
negative: (message, options) =>
set({
toast: {
message,
...options,
type: 'negative',
},
}),
custom: (message, icon, options) =>
set({
toast: { message, icon, ...options },
}),
dismiss: () => set({ toast: null }),
}))

Expand All @@ -50,14 +76,22 @@ const ToastContainer = () => {
}
}

const { rootProps, ...restProps } = store.toast

return (
<Provider>
<ToastRoot
defaultOpen
onOpenChange={handleOpenChange}
style={{ position: 'fixed' }}
// note: prevent swipe gestures from closing the toast until animation is implemented
onSwipeStart={event => event.preventDefault()}
onSwipeMove={event => event.preventDefault()}
onSwipeCancel={event => event.preventDefault()}
onSwipeEnd={event => event.preventDefault()}
{...rootProps}
>
<Toast {...store.toast} />
<Toast {...restProps} />
</ToastRoot>
<Viewport />
</Provider>
Expand All @@ -72,6 +106,7 @@ const useToast = () => {
positive: store.positive,
negative: store.negative,
custom: store.custom,
dismiss: store.dismiss,
}),
[store]
)
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/toast/toast.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const Toast = (props: Props) => {

return (
<Base action={Boolean(action)}>
<Stack flex={1} flexDirection="row" gap={4}>
<Stack flex={1} flexDirection="row" gap={4} alignItems="center">
<Stack width={20}>{renderIcon()}</Stack>
<Description asChild>
<Text size={13} weight={'medium'} color="$white-100">
Expand Down