Toast

[andresin87]

@s-ui/react-atom-toast: Cannot stack multiple events

The @s-ui/react-atom-notification needs a fully review:

The toaster implementation has a render component approach.

The component has the following props:

AtomToast.propTypes = {
  autoClose: PropTypes.bool,   										/** Enable/disable auto close */
  autoCloseTime: PropTypes.oneOf(Object.keys(AUTO_CLOSE_TIMES)),   	/** Auto close times: 'short' (3000s), 'medium' (6000s), 'long' (9000s) */
  children: PropTypes.node.isRequired,  							/** Toast content */
  effect: PropTypes.bool,   										/** Enable/disable toast transition */
  iconClose: PropTypes.node,  										/** Custom close icon  */
  onClose: PropTypes.func,  									 	/** On close callback */
  position: PropTypes.oneOf(Object.values(POSITIONS)),   			/** Positions: 'top-left', 'top', 'top-right', 'bottom-left', 'bottom', 'bottom-right' */
  show: PropTypes.bool,  											/** Show/hide notification */
  globalClose: PropTypes.bool   									/** Enable/disable global close */
}

• Control its render display using the show (show/hide) controlled prop. default: AUTO_CLOSE_TIMES.medium = 6000ms
• Position sets the notification on the right position. default: POSITIONS.topRight
• User can control/unControl the closing behavior under the autoClose and autoCloseTime props.
• effect enables/disables the appearance/dissapearance animation.
• IconClose node prop. Clicking on them will close its notification.
• Any mouse click event not fired in the notification will close all the notifications which has globalClose prop true set.

Decision

Rationale

The current notification implementation does not bring an easy programing experience. It also have bugs and doesnt give the opportunity to stack multiple notifications at a time. Other libraries had a different approach as any can see in:

• react-toastify
• react-hot-toast
• notistack

They have a different approach, exporting a provider component and some functions (notify and other customized fns that fires the principal like success, error, alert, info... for semantical purposes). The container acts as an EventManager Component. It stacks every single notification, all of them can be displayed at the same time, every one with its own timer.

Status

Consequences

• Major version:
  • current: 1.7
  • next: 2.0
• Different approach: function calls and extra hook
  • notify (custom), success, error, alert, info...
  • useNotify hook that returns the functions (only functional components)
  • component: