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

Jump to bottom

Suggestions for refactoring Toast component #315

Closed
1 of 2 tasks
unix opened this issue Jul 4, 2020 · 4 comments · Fixed by #708
Closed
1 of 2 tasks

Suggestions for refactoring Toast component #315

unix opened this issue Jul 4, 2020 · 4 comments · Fixed by #708
Assignees
@unix
Labels
👀 Delay Delayed, but confirmed acceptable type: feature

Comments

@unix
Copy link
Member

unix commented Jul 4, 2020

Feature request 🚀

  • I will create Pull Request
  • It's just a suggestion

Expected

  • Add placement prop to Toast
  • The height of Toast is no longer restricted
  • Render other components within Toast
  • Remove animation

Examples

Now the Toast component can only render strings, if we remove some restrictions, we can let Toast render more components, even more functions can be customized.

setToast({ render: () => <Text b>text</Text> })

Programme (Optional)

Now the animation effect can not get the same performance in different positions, like material-ui, I plan to remove some unnecessary animation and add more functionality to the components.

You can see my discussion about animation in #306 . Now I have a proposal to remove animation and add more features, here's the reason to remove animation:

  • Toast can be displayed in four corners of the page.
  • Faster removal of DOM (regardless of the integrity of the animation, I don't have to keep the elements in the dom).
  • If DOM can be removed synchronously, I think Toast can support rendering more other components. (no pref concerns)

I hope to make some changes on the Toast component to make our components more practical. (now Toast's function seems a little crude)

Polls:


Others

Related issues: #306 #312
@unix unix self-assigned this Jul 4, 2020
This was referenced Jul 4, 2020
Closed
Closed
@unix
Copy link
Member Author

unix commented Aug 9, 2020

Now I don't have much time to refactor it, this feature may be delayed for a while, but don't worry, this feature is definitely going to be refactored.

@hansfpc hansfpc mentioned this issue Aug 23, 2020
Closed
2 tasks
@unix unix added the 👀 Delay Delayed, but confirmed acceptable label Jun 25, 2021
@laurinenas
Copy link

Just to add to your point , we probably want to be able to style and scale the elements too. Now if the rest of application is scaled, the buttons in toast may look outsized.

@unix unix linked a pull request Feb 3, 2022 that will close this issue
feat(toast): redesign hooks to compatible with placement and styles #708
Merged
2 tasks
@unix
Copy link
Member Author

unix commented Feb 3, 2022

@laurinenas
Based on the implementation of #708 , we can now customize the template(ReactNode) and query and call instances of Toast in the user's component. So, the scaling issue can be solved.

const { setToast, findToastOneByID } = useToast()

const myHandler = () => {
  const toast = findToastOneByID('test')
  if (!toast) return
  toast.cancel()
}

setToast({
  id: 'test'
  text: <MyButton scale={0.1}>cancel</MyButton>
})

@unix
Copy link
Member Author

unix commented Feb 8, 2022

Implemented in version 2.3.0

@unix unix closed this as completed Feb 8, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@unix unix

Labels
👀 Delay Delayed, but confirmed acceptable type: feature
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(toast): redesign hooks to compatible with placement and styles unix/geist-ui
2 participants
@unix @laurinenas