fix(striker-ui): add onSet callback to MessageGroup

striker-ui/components/MessageGroup.tsx

@@ -10,12 +10,13 @@ import {
 import MessageBox, { Message, MessageBoxProps } from './MessageBox';
 
 type Messages = {
-  [messageKey: string]: Message | undefined;
+  [messageKey: string]: Message;
 };
 
 type MessageGroupOptionalProps = {
   count?: number;
   defaultMessageType?: MessageBoxProps['type'];
+  onSet?: (length: number) => void;
 };
 
 type MessageGroupProps = MessageGroupOptionalProps;
@@ -26,9 +27,13 @@ type MessageGroupForwardedRefContent = {
   setMessageRe?: (re: RegExp, message?: Message) => void;
 };
 
-const MESSAGE_GROUP_DEFAULT_PROPS: Required<MessageGroupOptionalProps> = {
+const MESSAGE_GROUP_DEFAULT_PROPS: Required<
+  Omit<MessageGroupOptionalProps, 'onSet'>
+> &
+  Pick<MessageGroupOptionalProps, 'onSet'> = {
   count: 0,
   defaultMessageType: 'info',
+  onSet: undefined,
 };
 
 const MessageGroup = forwardRef<
@@ -39,6 +44,7 @@ const MessageGroup = forwardRef<
     {
       count = MESSAGE_GROUP_DEFAULT_PROPS.count,
       defaultMessageType = MESSAGE_GROUP_DEFAULT_PROPS.defaultMessageType,
+      onSet,
     },
     ref,
   ) => {
@@ -48,28 +54,56 @@ const MessageGroup = forwardRef<
       (key: string) => messages[key] !== undefined,
       [messages],
     );
-    const setMessage = useCallback((key: string, message?: Message) => {
+    const setMessage = useCallback(
-      setMessages((previous) => {
+      (key: string, message?: Message) => {
-        const result = { ...previous };
+        let length = 0;
+
+        setMessages(({ [key]: unused, ...rest }) => {
+          const result: Messages = rest;
 
+          if (message) {
             result[key] = message;
+          }
+
+          length = Object.keys(result).length;
 
           return result;
         });
-    }, []);
+
-    const setMessageRe = useCallback((re: RegExp, message?: Message) => {
+        onSet?.call(null, length);
+      },
+      [onSet],
+    );
+    const setMessageRe = useCallback(
+      (re: RegExp, message?: Message) => {
+        let length = 0;
+
+        const assignMessage = message
+          ? (container: Messages, key: string) => {
+              container[key] = message;
+              length += 1;
+            }
+          : undefined;
+
         setMessages((previous) => {
-        const result = { ...previous };
+          const result: Messages = {};
 
           Object.keys(previous).forEach((key: string) => {
             if (re.test(key)) {
-            result[key] = message;
+              assignMessage?.call(null, result, key);
+            } else {
+              result[key] = previous[key];
+              length += 1;
             }
           });
 
           return result;
         });
-    }, []);
+
+        onSet?.call(null, length);
+      },
+      [onSet],
+    );
 
     const messageElements = useMemo(() => {
       const pairs = Object.entries(messages);
@@ -78,7 +112,6 @@ const MessageGroup = forwardRef<
       const result: ReactNode[] = [];
 
       pairs.every(([messageKey, message]) => {
-        if (message) {
         const { children: messageChildren, type = defaultMessageType } =
           message;
 
@@ -87,7 +120,6 @@ const MessageGroup = forwardRef<
             {messageChildren}
           </MessageBox>,
         );
-        }
 
         return result.length < limit;
       });