diff --git a/lerna.json b/lerna.json index 325f58f5..6886d26d 100644 --- a/lerna.json +++ b/lerna.json @@ -2,7 +2,7 @@ "packages": ["packages/*"], "npmClient": "yarn", "useWorkspaces": true, - "version": "0.9.9", + "version": "0.9.10", "command": { "version": { "message": "chore(release): publish %s" diff --git a/packages/apsara-icons/package.json b/packages/apsara-icons/package.json index 22c7a71e..18057e2a 100644 --- a/packages/apsara-icons/package.json +++ b/packages/apsara-icons/package.json @@ -1,6 +1,6 @@ { "name": "@goto-company/icons", - "version": "0.9.9", + "version": "0.9.10", "description": "Apsara icons", "scripts": { "build": "node scripts/build.js", diff --git a/packages/apsara-ui/package.json b/packages/apsara-ui/package.json index 95f1a67e..793759d4 100644 --- a/packages/apsara-ui/package.json +++ b/packages/apsara-ui/package.json @@ -1,6 +1,6 @@ { "name": "@goto-company/apsara", - "version": "0.9.9", + "version": "0.9.10", "description": "A list of base components for apsara", "author": "Praveen Yadav ", "license": "Apache-2.0", diff --git a/packages/apsara-ui/src/Notification/Notification.tsx b/packages/apsara-ui/src/Notification/Notification.tsx index 38614645..c3ba4c8c 100644 --- a/packages/apsara-ui/src/Notification/Notification.tsx +++ b/packages/apsara-ui/src/Notification/Notification.tsx @@ -1,4 +1,4 @@ -import React, { createContext, useCallback, useContext, useState } from "react"; +import React, { createContext, useCallback, useContext, useMemo, useState } from "react"; import Icon from "../Icon"; import { @@ -21,7 +21,7 @@ export interface Notification { } export interface Notifier { - showNotification: (toast: Notification) => void; + showNotification: (notification: Notification) => void; showSuccess: (title: string, content?: string) => void; showError: (title: string, content?: string) => void; } @@ -31,65 +31,77 @@ export const useNotification = () => { }; export const NotificationProvider = ({ children }: any) => { - const [toasts, setToasts] = useState([]); - - const showNotification = useCallback((toast: Notification) => { - setToasts([...toasts, { ...toast, id: uuid() }]); - }, [toasts, setToasts]); + const [notifications, setNotifications] = useState([]); - const showSuccess = useCallback((title: string, content?: string) => { - setToasts([ - ...toasts, - { - title: title, - content: content, - id: uuid(), - icon: , - }, - ]); - }, [toasts, setToasts]); + const showNotification = useCallback( + (notification: Notification) => { + setNotifications((prevNotifications) => [...prevNotifications, { ...notification, id: uuid() }]); + }, + [setNotifications], + ); + + const showSuccess = useCallback( + (title: string, content?: string) => { + setNotifications((prevNotifications) => [ + ...prevNotifications, + { + title: title, + content: content, + id: uuid(), + icon: , + }, + ]); + }, + [setNotifications], + ); - const showError = useCallback((title: string, content?: string) => { - setToasts([ - ...toasts, - { - title: title, - content: content, - id: uuid(), - icon: , - }, - ]); - }, [toasts, setToasts]); + const showError = useCallback( + (title: string, content?: string) => { + setNotifications((prevNotifications) => [ + ...prevNotifications, + { + title: title, + content: content, + id: uuid(), + icon: , + }, + ]); + }, + [setNotifications], + ); + + const contextValue = useMemo( + () => ({ + showNotification, + showSuccess, + showError, + }), + [showNotification, showSuccess, showError], + ); return ( - + {children} - {toasts.map((toast) => { + {notifications.map((notification) => { return ( { - setToasts(toasts.filter((t) => t.id !== toast.id)); + setNotifications(notifications.filter((t) => t.id !== notification.id)); }} duration={3000} > - {toast.icon || defaultIcon} - {toast.title} + {notification.icon || defaultIcon} + {notification.title} - {toast.content} - {toast.footer} + {notification.content} + {notification.footer} @@ -105,7 +117,7 @@ export const NotificationProvider = ({ children }: any) => { }; const NotificationContext = createContext({ - showNotification: (_toast: Notification) => {}, + showNotification: (_notification: Notification) => {}, showSuccess: (_title: string, _content?: string) => {}, showError: (_title: string, _content?: string) => {}, });